だれもが使える設定画面に─kintoneのフロントエンド刷新とアクセシビリティ
こんにちは！サイボウズ株式会社のkintoneフロントエンド刷新プロジェクトチームです。
2022年8月に、サイボウズはkintoneのアプリ設定画面のアクセシビリティ改善を行いました。サイボウズでは業務アプリケーション「kintone」のアップデートを毎月おこなっています。2022年8月のアップデートでは、kintone全体のフロントエンド基盤の刷新を行い、その一環としてアクセシビリティの改善に取り組みました。
アクセシビリティとは？
アクセシビリティとは「だれもが製品やサービスを利用できること」を表します。ユーザーがおかれている環境やユーザーの能力にかかわらず、だれもが製品やサービスにアクセスし、同じ情報を得られ、同じ目的を達成できることを指します。
サイボウズではアクセシビリティをユーザーが「チームにアクセスできる能力」であると捉えています。サイボウズは、ユーザーが製品にアクセスすることを通じてチームにアクセス（参加・貢献）できるように、アクセシビリティの向上に努めています。詳しくは「アクセシビリティの取り組み | サイボウズ株式会社」をご覧ください。
kintoneは、チームを支えるプラットフォームとして、さまざまな環境・さまざまなユーザーが製品を利用できるようにアクセシビリティの向上に取り組んでいます。kintoneはオフィス以外にもさまざまな環境で利用されます。たとえば、工場・建設現場・屋外の農園などでも利用されることがあります。またkintoneはさまざまな年齢・性別・障害・国籍のユーザーが利用します。多様な環境にある多様なユーザーがkintoneを利用してチームにアクセスできるように、kintoneはアクセシビリティに取り組む必要があります。
kintoneのフロントエンド基盤の刷新
kintoneではフロントエンド基盤の刷新に取り組んでいます。最新の技術や開発手法の導入を進め、開発速度を向上させることを目指しています。8月版ではフロントエンド刷新の成果のひとつとして「アプリ設定画面」のレイアウトを統一しました。具体的には以下の3つの要素を各設定画面にわたって統一しました。
ヘッダー・グローバルナビゲーションエリア
パンくずリスト
設定保存・キャンセルボタン
フロントエンド基盤の刷新にあわせてアクセシビリティも改善しています。フロントエンド基盤の刷新ではアプリ設定画面のレイアウトが一新されると共に、画面上のさまざまなパーツをいちから作りなおします。作りなおしによって、今まで部分的にしか修正できなかったパーツを根本的に修正できるため、フロントエンド基盤の刷新はアクセシビリティを改善するよい機会です。このため、フロントエンド刷新にあわせて、さまざまなパーツのアクセシビリティ改善ポイントを詳細に検討し、改善を行いました。
アクセシビリティ改善の3つの成果
この記事では、 フロントエンド基盤の刷新の中で行われたkintoneのアプリ設定画面のアクセシビリティ改善の成果を３つ紹介します。
1. さまざまな方法でパーツを操作できるように
2. だれもがドラッグ＆ドロップできるように
3. だれもが見やすい色のコントラストに
1. さまざまな方法でパーツを操作できるように
改善した理由
多様な方法で画面のパーツを操作できるようにすることは重要です。たとえば、大量のデータを手入力するときや定型的なタスクをこなすときには、よりタスクを効率的にこなすためにマウスではなくキーボードで操作することがあります。また全盲のユーザーやロービジョンのユーザーはマウスを利用せず、スクリーンリーダーという音声読み上げソフトを利用して画面を操作することがあります。多様なユーザーのニーズを満たすため、マウスだけでなくキーボードやスクリーンリーダーでも画面のパーツを操作できるようにする必要があります。
改善した内容
フロントエンド刷新では、kintoneのアプリ設定画面の多くのパーツをキーボードで操作できるようにしました。フロントエンド刷新前は、キーボードで全く操作できないパーツがありましたが、フロントエンド刷新によって多くのパーツをキーボード操作できるように改善しました。また、今までキーボードで操作できていたパーツも、フロントエンド刷新後はキーボードでより効率的に操作できるようにしました。
さらに、キーボードで操作している箇所をわかりやすく表示する改善も行いました。フロントエンド刷新前は、キーボードで操作している箇所（フォーカス）が視覚的に見えず、どこを操作しているかわからなくなってしまうことがありました。フロントエンド刷新後は、キーボードで操作している箇所に枠をつけたり色を変化させたりするなど、キーボードで操作している箇所が理解しやすいデザインに改善しています。
また、スクリーンリーダーでも多くのパーツを操作できるようにしました。フロントエンド刷新前は、操作しているパーツが全く読み上げれなかったり、パーツの状態や値が正しく読み上げられないことがありました。フロントエンド刷新後は、パーツごとにスクリーンリーダーで読み上げられる音声を検証し、スクリーンリーダーで操作可能かどうかを確認しました。
以下のスクリーンショットでは、キーボードによる操作・スクリーンリーダーによる操作を高めたパーツの一部を示しています。ユーザー選択パーツ・日付時刻選択パーツ・ドロップダウンパーツ・複数選択パーツなど、さまざまなパーツの操作性を向上しています。
改善の効果
さまざまな方法でパーツを操作できるようにしたことで、これまで全く機能を利用できなかったユーザーも機能を利用できるようになりました。利用できるようになった機能のひとつはアクセス権の設定です。アクセス権設定画面では「フィールド選択パーツ」を利用してアクセス権の条件を設定する必要があります。フロントエンド刷新前では、フィールド選択パーツはキーボードやスクリーンリーダーで操作できませんでした。このため、キーボードやスクリーンリーダーで画面を操作するユーザーは、アクセス権自体を設定することができませんでした。フロントエンド刷新によって、フィールド選択パーツが多様な方法で操作できるようになり、今までアクセス権を設定できなかったユーザーもアクセス権を設定することができるようになりました。
2. だれもがドラッグ＆ドロップできるように
改善した理由
kintoneのアプリ設定画面でドラッグ&ドロップは重要な役割を担っています。特に複数の設定を並び替えるためにはドラッグ＆ドロップが必要です。たとえば、アプリのアクセス権の設定画面ではルールの優先順位の調整にドラッグ＆ドロップを使います。ドラッグ＆ドロップなしには、複数のルールを利用した複雑なアクセス権の設定ができません。ほかにもプロセス管理の設定画面やカテゴリの設定画面などのさまざまな画面で、設定を並び替えるためにドラッグ＆ドロップが使われています。
改善した内容
フロントエンド刷新前のkintoneでは、一部の利用環境やユーザーにはドラッグ＆ドロップができませんでした。ドラッグ＆ドロップはマウスによる操作を前提としており、そのままではキーボードやスクリーンリーダーで操作することができません。このため、特にマウスを利用できない一部の視覚障害のユーザーや肢体不自由のユーザーは、ドラッグ＆ドロップを行うことができませんでした。ドラッグ＆ドロップが重要な役割を担うアクセス権の設定画面では、設定自体を行えない問題がありました。
フロントエンド刷新では、キーボードでドラッグ＆ドロップができるようにしました。たとえば、アクセス権の画面では、ドラッグ＆ドロップするための「トグル」をキーボードで操作できるようにしました。トグルにキーボードでフォーカスしてスペースキーを押すと、要素をつまみ上げます。これはマウスでドラッグした状態と同様の状態です。上下矢印でトグルを動かしたあとで再びスペースキーを押すと、要素をその場に配置します。これはマウスでドロップした状態と同様の状態です。マウスの動きをキーボードのスペースキーや上下キーに割り当てることで、キーボードでもドラッグ＆ドロップができるようになりました。
また、スクリーンリーダーでもドラッグ＆ドロップができるようにしました。具体的には、以下のように操作するたびに状態を読み上げることで、スクリーンリーダーを利用するユーザーにも操作する方法や操作した結果を都度伝えるようにしています。
トグルに差し掛かったときに、並び替えられることを読み上げる
トグルを押したときに、矢印キーで並び替えられることを読み上げる
矢印キーを押したときに、全行数と現在の行数を読み上げる
スペースキーを押したときに、並び替えられたことを読み上げる
改善の効果
ドラッグ＆ドロップをキーボードやスクリーンリーダーで操作できるようにしたことで、今まで並び替え操作を諦めていたユーザーが機能を利用できるようになりました。アクセス権の設定をはじめとして、プロセス管理の設定やカテゴリの設定など、kintoneにはドラッグ＆ドロップによる並び替えが必要な画面がいくつかあります。多様な方法でドラッグ＆ドロップができるようになったことで、今まで画面を操作できなかったユーザーが自力で画面を操作できるようになりました。
3. だれもが見やすい色のコントラストに
改善した理由
多様な閲覧環境・ユーザーを想定するkintoneでは色の視認性が重要です。たとえば、セミナーなどではkintoneの画面がプロジェクターで投影されることがあります。コントラストの高いはっきりとした色が利用されていれば、プロジェクターから離れた位置でも投影された画面が見やすくなります。また、kintoneは必ずしも屋内で利用されるわけではありません。外回りしている営業の方や工事現場で勤務されている方など、屋外にいるユーザーの方も利用することがあります。屋外では日光が画面に反射し、薄い色が見づらくなることがあります。はっきりとした色を利用することで日光化でも画面が見やすくなります。さらに、視力の低い人やロービジョンの人にとっても、はっきりとした色が利用されていれば画面が見やすくなります。
改善した内容と効果
フロントエンド刷新では、kintoneのメインカラーの青色を変更しコントラストを高くしました。この青色はアプリ設定画面のさまざまなボタンやリンクに利用されているため、ボタンやリンクがより見やすくなりました。以下のスクリーンショットでは、フロントエンド刷新前後の色を比較しています。ボタンやリンクの視認性が向上していることがわかります。今後も、さらに視認性を向上できるように、メインカラーに限らずさまざまな色の調整を行いたいと考えています。
まとめと今後
kintoneではフロントエンド基盤の刷新に伴い、アプリ設定画面のアクセシビリティを改善しています。画面上のパーツをキーボードやスクリーンリーダーで操作できるようにする・多様な方法でドラッグ＆ドロップができるようにする・色の視認性を高めるといった、さまざまなアクセシビリティ改善を行っています。
今後はさらに複雑な画面のアクセシビリティも改善したいと考えています。具体的にはフォーム編集画面です。フォーム編集画面は上下左右にフィールドを自由にドラッグ＆ドロップしてフォームを設計します。多様なユーザーがフォームを設計できるようにするため、キーボードやスクリーンリーダーでもフォーム編集画面を操作できるようにしたいと考えています。
アクセシビリティを改善することで、今まで機能自体を利用できなかった方も機能を利用できるようになります。今後もさらなるアクセシビリティ向上に取り組んでいきます。
採用情報
kintone開発チームでは、アクセシビリティやユーザー体験を高めてくれるメンバーを募集しています。以下の募集要項からご応募ください。
この記事が気に入ったらサポートをしてみませんか？