アクセシビリティ

アクセシビリティとは#

アクセシビリティとは「利用可能な状況の幅広さ」を指します。

デジタルプロダクトやサービスにおけるアクセシビリティは「プロダクトやサービスが多様なニーズのもとで使える度合い」と言えます。多くの状況でアクセスできるものはアクセシビリティが高く、逆に特定の状況でしかアクセスできないものはアクセシビリティが低いと表現します。

アクセシビリティが高いWebサービスは、以下のようにユーザーの特性に合った形に変化でき、さまざまな環境で利用できるようになります。

Webページの色や文字が見えづらい場合でも、OSやブラウザの設定によって配色を変更する、文字サイズを変更するといったように、ユーザー側で上書きできる
画面がまったく見えない場合でも、スクリーンリーダーという支援技術を使うことで、画面上にあるものを音声で読み上げたり点字で表示したりすることでWebページの中身を理解できる
マウスやタッチデバイスが使えない場合でも、キーボードのみですべての操作を行える。ほかにも、頭の向きや視線、表情、音声や物理スイッチといったさまざまな操作方法が利用できる

Ubieの開発方針#

我々は「テクノロジーで人々を適切な医療に案内する」というミッションを掲げ、すべての人々が「健康」にアクセスできるプラットフォーム構築を目指しプロダクト開発をしています。すべての人々を適切な医療に案内するための土台となるにはアクセシビリティのさらなる改善が必要であり、継続してアクセシビリティの改善に取り組むことが重要です。

Ubieが掲げるアクセシビリティステートメントや対応方針、これまでの取り組みなどについては、コーポレートサイトのUbieのアクセシビリティページで詳しく説明しています。

ツール#

アクセシビリティに取り組む上で役立つツールを紹介します。

Lint・チェッカー#

ユビーの開発では、markuplitとeslint-plugin-jsx-a11yを利用してコードを静的検査しています。

実際にブラウザに表示された結果をチェックするにはaxeというツールが便利です。 axe DevToolsというChromeの拡張機能やaxe-coreというテストツールなどを提供してくれています。

Figmaプラグイン#

デザイン段階でアクセシビリティをチェックすることで開発時のコストを減らせます。特にコントラスト比やタップ領域、見出しの有無などはデザイン段階で確認できるとよいです。 Figmaプラグインを活用してアクセシビリティをチェックしましょう。

参考文献#

UbieではJIS X 8341-3:2016 適合レベルAAとWCAG 2.2の一部項目への対応を目指し改善活動に取り組んでいます。

各基準の詳細は以下のリンクを参照してください。