kintoneアクセシビリティ勉強会を開催してみました

こんにちは!
突然なのですが、ジョイゾー、増床しました!
現オフィスの隣にある部屋をお借りしまして、イベントや打ち合わせ等に使えるスペースを用意いたしました。

増床されたジョイゾーのオフィス。プロジェクターが用意されている。増床されたジョイゾーのオフィス。ミーティング用の机が置かれている。kintoneに関するイベントをどんどんやっていきたいなーと思っていますので、ジョイゾーと一緒にコラボイベントがしたい!という方は、ぜひお近くのメンバーまでご連絡くださいませ。
新オフィスの詳細については、改めて別のブログでご紹介したいと思います。

さて、この新オフィスでの記念すべき第1回目のイベント「アクセシビリティ勉強会」を4月17日に開催いたしました。本日は、その模様をお届けします!

アクセシビリティ勉強会の様子。

アクセシビリティとはなんぞや?

普段何気なく利用しているPCやスマートフォンの設定画面の中に「アクセシビリティ」という項目を見たことはありませんか?
誰にでも開けているインターネットという世界。それを利用するあらゆる人が、ご自身の年齢や身体的な制約、利用環境に関係なく自由にアクセスできること。
そのアクセス性を確保することを「アクセシビリティ」と言います。

アクセシビリティとは、障害者・高齢者を含めて「すべての人」が製品やサービスにアクセスできること

 

ジョイゾーが「システム39」等でお客様の業務改善を助けるツールとして利用しているサイボウズ製品は、会社だけでなく、学校や地域のサークルといった様々なチームでの活用を想定しています。
サイボウズの理想は「チームワークあふれる社会を創る」こと。
こうした製品作りにおいて、高齢の方やハンディキャップを抱える方の利用を抜きにすることはできません。
そこで、「チームに入りたいと願うすべての方がチームにアクセスできる」ように、アクセシビリティの向上への取り組みをはじめました。

また、ジョイゾーもお客様の「kintoneのここがちょっと使いづらくて…」という要望に応えるkintoneカスタマイズに日々取り組んでいます。こうした案件対応も、広い目で見たら「アクセシビリティ向上」の取り組みの一つ
今回はこうしたアクセシビリティに関して、サイボウズ側の取り組みと、ジョイゾー側の取り組みそれぞれを紹介し意見交換しよう!と勉強会の開催に至りました。

サイボウズのアクセシビリティの取り組み

まずは、サイボウズの開発本部、アクセシビリティエキスパートの小林さんに、サイボウズの考えるアクセシビリティと、その実装内容についてお話しいただきました。

kintone開発者だった小林さん、社内の弱視のメンバーが「文字が薄すぎて見えない、アイコンに見えるものを勘でクリックしている」といいながらkintoneを利用する姿に衝撃を受け、社内にアクセシビリティを浸透させることに奮起します。

アクセシビリティを確保することは「チームに参加したい」というユーザのねがいを尊重すること

ソフトウェア開発におけるWebアクセシビリティとして、よく話題に挙がるのは「全盲の方のアクセス」や「ロービジョンの方のアクセス」。

全盲の方へのアクセシビリティ向上として代表的なのものは「音声読み上げソフトへの対応」や、「フォームのキーボード操作対応」。ロービジョンの方に向けた内容としては「色のコントラストを高めにする」「様々な色覚を想定し、色の使い方に注意をする」といったものが挙げられます。

小林さんのスライド。代表的なアクセシビリティ対応の一覧として「画像に代替テキストをつける」「キーボードで操作できるようにする」などが列挙されている。

 

勉強会中では、ロービジョンの方がどうやってWebサイトを閲覧しているのか、5倍のディスプレイをみんなで体感したりしてみました。

小林さんがロービジョンの方の使用環境を再現する様子。5倍で見たサイボウズのHPの様子

ここまで聞くと、アクセシビリティは障害者に向けた対応という感じがしますが、加齢や病気・怪我などで、誰もが当事者になる可能性があります。また、屋外でスマホを使っている、周囲が騒がしくて音声が聞き取りづらい等、特定のシチュエーションでは誰でも「◎◎しづらい」という状況下に陥ることがあります。
アクセシビリティは、決して他人事ではないのですね。

このアクセシビリティという分野ですが、日本でも2016年に制定された「障害者差別解消法」という法律により、情報アクセシビリティの確保要請が始まっています。
私たちSIerが取り扱う業務システム等も対象に入っており、今後はより一層意識を高めていかなければならない観点のひとつではないでしょうか。

小林さんのスライド「障害者差別解消法の施行(2016)」

こうしたアクセシビリティの基本を学んだ後に、kintoneでどのような実装が行われているのか、いくつかご紹介していただきました。

ヘッダーのキーボード対応を行い、同時にスクリーンリーダー(※音声読み上げソフトウェアのこと。視覚情報に代わり、情報を音声で読み上げて、操作を補助する)の読み上げ順序をわかりやすく整理することや、アイコン表現を色だけに依存させない形への改善等といった内容を、デモ画面を通じて見せていただきました。

kintoneのヘッダーのキーボード対応の説明資料。フォーカスの順序が修正されている。

kintoneのアプリウィジェットのキーボード操作の改善を示す説明資料。キーボードで操作できない箇所を改善している。

kintoneのマークアップの改善を示す説明資料。見出し構造を改善している。kintoneのアイコン表現の改善を示す説明資料。色のみに依存しないアイコン(モノクロにしても情報が伝わるアイコン)にしている。特に2019年3月にリニューアルが行われたkintoneのモバイル画面は、多数のアクセシビリティ改善がなされています。
この実装精度を高めるために、全盲の方によるユーザビリティテストを実施したり、社内のロービジョンのメンバーへのヒアリングを丁寧に行ったそうです。

リニューアルされたkintoneモバイルのスクリーンショット。

kintoneモバイルで力を入れたアクセシビリティ対応の一覧。「HTMLとCSSの改善」「読み上げ用文言の設定」「当事者の方の声を聞く」が挙げられている。

モバイル画面のアクセシビリティ改善の詳細については、kintoneYouTuber「キンスキ」さんが、ラジオでも紹介しておりますので、ぜひこちらもご覧くださいませ!

「だれでもかんたんに」ジョイゾー流アクセシビリティの取り組み

後半は、ジョイゾーの星野さんより「だれでもかんたんに」をテーマにしたジョイゾーのカスタマイズ事例を紹介しました。

簡単な操作でシステムが作れることが特徴の「kintone」ですが、リモートワーク拠点である新潟でお客様に対応する星野さんはうちでも使いたいけど、年配者多いんだよなあ…」という声を日々耳にしています。
あのマイクロソフトでさえ、
7割の社員はITリテラシーが低いという現状、非IT企業ならば「ITにちょっと詳しい社員が1割いたらいいほう」と現場の実感値をお話いただきました。

例えば、星野さんが案件を担当する新潟のカーコーティング店様では「kintoneを導入したいけど、みんなキーボード入力ができない」という声や、kintone歴2年の運送代行業者のマネージャーさんから「だいぶ慣れてきたが、設定がまだちょっと難しい」というお話をいただいています。
「誰でもかんたんにアプリが作れる」だけでなく、
「かんたんに入力ができ」「かんたんに設定できる」を実現すれば、kintoneによる業務改善を成功に導くのではないか
そこでこの2つをテーマに、画面カスタマイズを行いました。

星野さんのスライド資料「2017年テーマ -誰でも簡単に入力-」音声入力、ソフトウェアキーボード、候補選択入力が挙げられている。

星野さんのスライド資料「2018年テーマ -誰でも簡単に設定-」フィールドコピー、サブテーブルの活用が挙げられている。

星野さんのスライド資料。ドロップダウンフィールドの設定の難しさとして、項目が多いと大変、既存の別アプリにコピーできない、を挙げている。

星野さんのスライド資料。サブテーブルの設定の難しさとして、Excel読み込みでサブテーブルを作れないなどを挙げている。

 


星野さんのスライド資料。計算フィールドの設定の難しさとして、フィールドコードを覚えていない、計算式がよくわからない、などを挙げている。

「だれでもかんたんに入力」という観点では、音声入力や、ソフトウェアキーボード、候補選択入力画面カスタマイズの実装をご紹介いただきました。

「だれでもかんたんに入力」のデモの様子。候補選択で、よく使う例文が出てくるカスタマイズの様子

また、「だれでもかんたんに設定」という観点では、計算式をドラッグ&ドロップで設定できる画面カスタマイズや、項目の多いドロップダウンフィールドを、そのまま別のアプリにコピーするカスタマイズExcel読み込みでサブテーブルを作るカスタマイズのデモをご紹介いただきました。

「だれでもかんたんに設定」のデモの様子。

これからもkintoneをhackして、kintoneを誰もが当たり前に使える世界を作っていきたい、と熱く熱く星野さんにお話いただきました。今年のkintone hackも楽しみですね。

 

だれもがチームにアクセスできる製品とカスタマイズを目指して!

それぞれの発表終了後は、アクセシビリティやkintoneについて、活発なディスカッションが行われました。
エコシステムを通じて、開発元とパートナーがお互いの知見を持ち合い、よりよい製品実装や案件対応に向けて話し合える場、本当に素敵だな〜と思います。

勉強会参加者の集合写真。今後もこうした勉強会を随時開催していけたらと思っております。乞うご期待くださいませ。
改めまして、お越しいただいた皆様、誠にありがとうございました!

*
*
* (公開されません)