見出し画像

Webアクセシビリティを理解したい

Yudai Sasaki

業務で視覚障害者・色弱者のアクセシビリティを考慮したサイト制作に携わるため事前に自分の理解を深めるのと、チームに共有する目的で書きました。

視覚に関してのアクセシビリティでよく聞くのはコントラストや色彩ですが、他考慮すべき点は何か。また全盲や弱視の方も考慮したアクセシビリティとは何かを調べています。

今回デジタル庁のウェブアクセシビリティ導入ガイドブック、freeeアクセシビリティー・ガイドラインを参考にさせていただきました。
freeeはより具体的な内容が書かれている印象で、実際に使用できそうな項目をピックアップしています。
また、所属するデザインコミュニティ「BONO」の勉強会でも丁度デジタル庁のアクセシビリティガイドブックを読んで理解を深めようという勉強会があったので他の方々の考えも参考にさせていただきました。
今後も学んだこと、ポイントを追記していきます。

そもそもアクセシビリティとは？

Accessibilityとは日本語に訳すと「接近できること」「近づきやすさ」になりIT関連では「製品の使いやすさ」というニュアンスで使用されてます。
あと私の感覚では「健常者、障害者、年齢や文化の違いなど個人の状態や環境に関係なく皆が使いやすい製品を提供しよう」というニュアンスで捉えていました。

デジタル庁のガイドブック作成の背景と目的

デジタル庁のミッションは「誰一人取り残されない、人に優しいデジタル化」が記載されています。
デジタル化が進むと同時に少子高齢化も進む日本。コンテンツやサービスが「様々 な人にとって使いやすい」状態で提供できるよう、行政や受託事業者がアクセシビリティの理解を深め、アクセシビリティが向上することを目的とされています。

ウェブアクセシビリティの基礎

一般的に「ウェブアクセシビリティが担保できている」状態とは、具体的に次のような状態になることが望まれます。

  • 目が見えなくても情報が伝わる・操作できること

  • キーボードだけで操作できること 

  • 一部の色が区別できなくても情報が欠けないこと

  • 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること

目が不自由な方がどのように操作されているのか、スクリーンリーダーって実際にどう使用されているのか、スマートフォンはどう利用されているのかを知るため参考動画を探しました。
https://youtu.be/2RLK09LmzCs *参考動画
https://youtu.be/ebgPRcBfkys *参考動画

iOSにはVoice Overという機能が初期搭載されているため、視覚障害者で利用されている方が多いようです。誰でも使いやすい製品を作る理念を理解した上でHuman Interface Guidelinesを読むとよりAppleの考えがわかるかもと思いました。

他の動画も見て疑問に思ったのがテキスト入力されている方が多いですが、音声入力を利用されている方や、オンスクリーン・キーボード+スイッチ・インターフェースなど多様な手段で利用されているユーザーがいます。様々な方式になるべく広くサポートするために注意することが多くあるでしょう。

視覚障害者、色弱者を考慮したウェブアクセシビリティで達成すべきこと

ウェブアクセシビリティを担保する上で「必ず達成すべきこと」、「基本的に達成すべきこと」を分けました。

必ず達成すべきこと

自動再生はさせない
スクリーン・リーダーを利用時に、自動再生される音声があると、音声を聞き取れず、閲覧や操作を進めらません。その場合3秒以内とし、一時停止・ミュートをつける。ただ実装コストを考えると、自動再生機能は利用しない方が良いでしょう。

袋小路に陥らせない
キーボード操作だけで利用している時、抜け出せないような仕様にしない。モーダルで起こりやすいので注意。

Tab/Shift+Tabキーを用いたチェック
参考動画にもありましたが視覚障害者にはマウス操作が難しいのでキーボード操作のみの方がいます。スクリーン・リーダーを使用する場合もキーボードのみで操作ができるようにするのが重要です。
そのため操作を受け付けるあらゆるコンポーネント（リンク、ボタン、フォーム・フィールドなど）に、Tab/Shift+Tabキーが当たる状態でなければいけません。

1秒に3回以上光るコンテンツがない
光の点滅は光感受性発作等を防ぐためになります。

自動でコンテンツを切り変えない
使用する場合は一時停止、非表示などの機能を設置する必要があります。
ロービジョン者や認知障害者が、集中を阻害されないようにする意図があります。

フォームの値の変更時の挙動
フォーム中のフィールドの値の変更や、入力によりレイアウトが変更されたり、画面変更すると変化に気づけず混乱させてしまう為。

テキストによる画像の説明
画像の説明をテキストで提供します。この際重要なことは、過不足なく情報を提供するということです。alt属性で代替えテキストを入れ説明テキストを入れます。


基本的に達成すべきこと

操作に制限時間を設けてはいけない
設ける場合は通知が必要となり、延長・解除ができなければいけません。
動画にもありましたが、コンテンツを全て把握するには時間がかかります。なので制限時間を設けると操作が完了していない、予想していないログアウトになる可能性があります。

赤字・太字・下線・拡大などの表現のみで情報を伝えてはいけない
赤字・色の違いだけで情報を伝えず、他の手がかりでも情報が伝わるような配慮が必要です。

スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている
スクリーンリーダーは、HTMLのソースに記載されている順、視覚的には左上 から右下に向かって読み上げます。この順序を考慮してコンテンツやサービスを設計しなければいけません。

見出し要素だけで、セクションやブロックに含まれる要素を表現する
見出しを適切に設定し、何が列挙されているか推測しやすくします。

文字と背景の間に十分なコントラスト比を保つ
4.5:1以上のコントラスト比が必要になります。弱視の方には低いコントラスト比の影響をより強く受けるかもいるようです。

テキストの拡大縮小をしても情報が読み取れる
画面拡大ソフトなどを使わずに、ブラウザの文字拡大機能だけで文字サイズを 200%まで変更でき るようにしましょう。

リンクを適切に表現する
ボタンのリンク先が前後の文脈で理解出るようにし、ボタンテキストもリンク先が理解できるようにします。

同じ機能には、同じラベルや説明をつける
同じ機能を複数のページで提供する場合は、同じラベル、説明で提供されているようにしてく ださい。


具体的アクション内容

コントラスト比のチェック
コントラスト比を保つためツールにて確認。
FigmaであればContrastというプラグインを使えば簡単に計測されます。

テキスト情報の文言とアクセシビリティー
テキスト情報の文言について、アクセシビリティーの観点から特に重要なのは、「わかるだろう」というバイアスが掛かってないか注意する必要があります。一つの情報だけでなく、必要に応じて複数の情報を提示することで、この問題を回避することができます。
もう1点は見出しやラベルに用いるテキストの文言を分かりやすいものにすることで、判断がしやすくなります。スクリーンリーダーのユーザーには重要なことになります。

色を用いた表現に関する注意点
色の違いだけで色弱者や視覚障害者にその意図が伝わりません。
テキストによる説明を併記する方法と背景の模様を変えるといった方法が考えられます。

カラー・ユニバーサル・デザイン（CUD）を行うことも有効です。
カラーユニバーサルデザイン機構（CUDO）は、CUDのポイントとして以下の3つを挙げています。

1.出来るだけ多くの人に見分けやすい配色を選ぶ。
2.色を見分けにくい人にも情報が伝わるようにする。
3.色の名前を用いたコミュニケーションを可能にする。

—CUDのポイント – 多様な色覚に対応したデザインと社会の改善　特定非営利活動法人カラーユニバーサルデザイン機構CUDO

最後に

アクセシビリティについてまとめてみました。
アクセシビリティって言葉は知っていても、じゃあ具体的に何を知っているのと聞かれれば、恥ずかしながら全く理解できていない状態でした。
まずは動画でも良いので、視覚障害者の方が普段どういう使われ方をしているのかまず知るっていうのが大切だと感じました。加えて実際に自分も体験するのも大切ですね。
それを踏まえた上で実装の際に気をつけなければいけないポイントが自分の中でも解像度が上がるなと思いました。
まだまだ全てを見れていないので今後も気づきと学んだ点があれば追記していきます。

この記事が気に入ったらサポートをしてみませんか？