デジタル庁「ウェブアクセシビリティガイドブック」を読んだのでまとめメモ

はじめに

はじめまして、やまべです。(去年4月からエンジニアとして社会で働いています。ど初心者です優しくしてください)

普段はエンジニアという職種で仕事をさせていただいてる私ですが、デザイン関連の業務にも興味がありその旨を会社で話したところ、ありがたいことに少しずつそっちの方でもお仕事させてもらっています。
ただ、デザインとはなんぞや、Web制作するときに必要なことってなんだみたいなので情報収集の毎日で...

そんな中、年末あたりにデジタル庁から「ウェブアクセシビリティ」についてのガイドブックが発行されているとのことで、先輩から情報をいただいたので一読。

デザイナーの方やWeb制作に普段から関わっている人は読んだ方がいいなと思います。（読んで私自身知識が深まりできていないことが多いなと痛感しました...と共に新しい知識も広がったし運営しているサイトをまずどうにかします）

初めてのQiita記事投稿ということもあり、どのように書くべきか手探りなところはありますが、ひとまず自分が見直せるようにまとめメモを残したいなと思います。

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

ー　そもそもウェビアクセシビリティとはなんぞや
・利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供されている情報やサービスを利用できること。またはその到達度を意味している。

例えば・・・
・目が見えなくても情報が伝わる・操作できる
・キーボードのみで操作可能
・一部の色が区別できなくても情報が欠けない
・音声・動画コンテンツで、音声が聞こえなくても何を話しているかわかる

ー ウェブはアクセシビリティを担保しやすいメディア？
なぜ担保しやすいかというと「ウェブは最終的なアウトプットの形を変えられるから」だそうです。

ーー
中間言語（HTMLなど）で記述された情報を
ソフトウェア（ブラウザなど）が
人間が解釈できる情報に変換し、ユーザーに情報を伝える
→ユーザーが情報を閲覧する方法を選択できる
ーー

想定通りの見た目で閲覧したり、文字や色を変えたり、合成音声で読み上げたり...
確かに映像や紙媒体ではユーザーは選択の余地がないですもんね、なるほど。

大前提インターネットやウェブで使われる技術って、そもそもの開発思想として
「誰でも使えること　＝　アクセシビリティ」を念頭に設計されているようです。

ではどのようにウェブアクセシビリティを達成するのか、というところで下記からは達成すべきことを重要度順にメモしていきます。

ウェブアクセシビリティで達成すべきこと 【 重要度 ★★★】

・ 自動再生はさせない

・音声を自動再生することや強制的に再生させることは避ける
・自動再生する音声は「3秒以内」に収める
→それ以上続く場合はユーザーがとめられるようにする必要アリ

コンテンツ例：音声や動画

・ 袋小路に陥らせない

ちなみに袋小路とは

「行き止まりになっていて通り抜けられない小路。転じて、物事が行き詰まった状態。」だそうです（恥ずかしながら言葉の意味を知らなかったので一応メモ）

・キーボードだけで操作しているときに、一度フォーカスしたら抜け出せないコンテンツを作らない

コンテンツ例：モーダルダイアログ

・ 光の点滅は危険

・「1秒に3回以上」点滅するコンテンツは作らない
→光感受性発作等を誘発しやすくなるみたいです

コンテンツ例：アニメーションや映像

・ 自動でコンテンツを切り変えない

・自動で切り替わるコンテンツがある場合、一時停止、非表示、停止機能を設置する
→他の箇所の操作や閲覧を妨げられるユーザーがいるため

コンテンツ例：スライドショー

ウェブアクセシビリティで達成すべきこと 【 重要度 ★★】

・ 画像が指し示している情報を代替テキストとして付与する

・代替テキストとは
写真やイラスト、グラフなど主に画像で提供されている情報と「同等の役割を果たすテキスト」のこと。画像の代わりに文字を置いても違和感がないことがベスト
・代替テキストの長さは80字以内を目安にする
（画像が映らない時のことを考えながらその立場に立って、代替テキストとして何がベストか考える必要がありそう）

（代替例）
画像がリンクの場合：リンク先を示す内容
グラフや図表の場合：その要約
ロゴマークや見出しの場合：同じ文字
装飾や意味の持たない画像の場合：空でOK

・ キーボード操作のみで、すべての機能にアクセスできるようにする

※下記の内容はキーボード操作時についての記述
・フォーカスインジケーター（選択中の要素を枠線等で囲んで示すこと）が表示されるようにする
・フォーカス・入力がキャンセルされたり、瞬間的に何かが勝手に動作することがないようにする

・ 操作に制限時間を設けてはいけない

・閲覧や入力の操作に、制限時間は設けない
・設ける必要がある場合は回避手段を設けること
（確かに最近、海外のサイトで会員登録しようとしたら制限時間があって焦って入力した記憶がありました...間に合わなくてユーザー名とか「yamab...」で止まって悲しかったです）

（回避手段）
・制限時間があること、またそれを延長・解除できることをユーザーに事前告知
・入力フォームのセッション時間をユーザーが延長or無制限にできる
・ページ上のスクリプトで制御されている入力フォームの制限時間をユーザーが延長できる
・自動的に進むコンテンツをユーザーが一時停止できる

・ 赤字・太字・下線・拡大などの表現のみで情報は伝えない

・赤字など、色の違いだけで情報は伝えない
・太字、『右の写真』『丸いボタン』など、位置や形の違いだけで情報は伝えない

・ スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている

・目が見えている人はウェブサイトを斜め読みできてなんとなく情報が理解できるが
→スクリーンリーダーの場合は、キーボードを使って先頭から1つ1つ文章を辿っていくので内容の順序が大事

スクリーンリーダー：HTMLソースに記載されている順
視覚的：左上から右上に向かって読み上げ
→この順序を考慮してコンテンツやサービスを設計するとよい

・ 見出し要素だけで、セクションやブロックに含まれる要素を表現する

・見出しレベルを適切に設定（大見出し、中身だし、小見出しetc...）
・見出し要素は空にしない
・強調や文字を大きくするために見出し要素は使わない

◎見出しがあると内容の推測がしやすくなります

（確認方法）
・「NVDAでF7キー」を押し見出しリストを表示
→ページ中の見出しが過不足なく表示されているかどうかを確認する
◎ちなみにNVDAとは
→NonVisual Desktop Accessの略。無償で使用できるオープンソースのスクリーンリーダーのこと。
サイトはこちら▼

・Chormeの拡張機能の「HTML5 Outliner」を使う
→HTMLのアウトラインを確認する
◎ちなみにHTML5 Outlinerとは
→HTML5 Outlinerは、HTML文書のアウトライン（見出しなどの階層構造のこと）を簡単に確認するためのツール。
サイトはこちら▼

（かなり簡単に確認ができそうなので今度やってみます...使い方なんかはまたQiitaで記事書きます）

・ 文字と背景の間に十分なコントラスト比を保つ

・4.5:1以上のコントラスト比がある必要がある
→太字でないテキスト22ポイント（29px）未満
→太字テキストはテキスト18ポイント（24px）未満
の場合の値です
・大きいテキストでは3:1以上のコントラスト比である必要がある
（ここまではっきりした比率があるとは知らなかった、早速やってようと思いました。）

（確認方法）
機会チェックである程度確認できる

・ テキストの拡大縮小をしても情報が読み取れる

・ブラウザの文字拡大機能だけで文字サイズを200％まで変更できるようにする
・文字サイズなどが固定になっていない
・コンテンツを200％まで拡大したときに文字が重なったり見切れないようにする
・「user-scalable = no」（スマホの拡大縮小機能を無効にする）を使用しない

・ 文字や文字コード、フォントに関する注意

・現在のHTMLでは、UTF-8を使うべきとされているので他のコードは原則使用しない
・Webフォントを使用する場合は、ユーザーによってフォント設定をしていると異なる文字として表示される恐れがあるので要注意！！
・PDFから文字をそのままコピーする等の動作でたまに文字が書き換えられてしまうケースがある
→公開前に読み上げの確認を行う
・「*(アスタリスク)」や「※（こめじるし）」などの記号はスクリーンリーダーなどの設定によっては読み上げられないので、確認しながら使用すること。

・ ページの内容を示すタイトルを適切に表現する

・「内容 | サイト名」とすると判別が容易になる
・複数のページでページタイトルは重複させない
・ページタイトルとそのページの大見出し（h1）が揃っていると、ユーザーはより安心してページを利用できる

ウェブアクセシビリティで達成すべきこと 【 重要度 ★】

◎ここからはサイトや情報システムによってないこともあるコンテンツや確認事項なので、状況に応じて確認すること

・ 入力フォームを様々な使い方でも使えるようにする

・ラベルとフォームコントロールの関連付け
・文字制限等でエラーが起きる場合はユーザーが入力する前に説明しておく
（パスワードは大文字と小文字が必要です...みたいなやつですね）
・万が一エラーが起きたときはどこで起きているのかを正確に提示すること
・必要に応じて、一連のフォームグループをグループ化する
・法律に関わる捜査や金融取引についての入力フォーム
→入力エラーのチェック、入力内容の確認、送信取り消しができるように設計すること

・ 音声・映像コンテンツに代替コンテンツを付与

・前後のテキスト等から、音声、映像コンテンツの存在や種別を認知できる
・会話内容や重要な効果音が伝わるようなキャプション（字幕）を提供する
・動作や表情などの視覚的な情報を音声で伝える「音声解説」の導入

・ コンテンツの変化がスクリーンリーダーにもわかるようにする

（例）
・検索結果の読み込みがなされているか
。チェックボックスのオンオフ
・モーダルの挙動
→開く場合、押下すると、モーダルの内容にフォーカスがうつる
→閉じて戻るが読み上げた時に自然と理解できる

さいごに

一つサイトを作るにも気にしなければならない点がこんなにもあるのかと驚いた + できていないことも多々あったので重要度が高いものからガンガン改善していこうと思いました...！

皆さんも是非、一度目を通してみてください！
最後までご覧いただきありがとうございました mm