見出し画像

ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話(その5・コンテンツ登録・運用編)

この記事は「ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話(その4・コーディング・CMS実装編)」の続きです

最後は、コンテンツの制作・登録時やサイトローンチ後の運用時にも注意が必要な項目です。

このページの項目は、さまざまなユーザーに対して、コンテンツの理解を妨げない・全ての情報を差異なく提供するために必要なものです。
制作プロジェクト中だけの一過性のものではなく、サイトを運営する間は継続的に意識し続ける必要があります。


画像には必ず代替テキストを付与する

スクリーンリーダーなど視覚情報を解釈しない支援技術でも、視覚的オブジェクトで提供されている情報を取得できるようにしなければならない。

コンテンツ内の画像・写真・ロゴにつき、その画像自体に伝達すべき意味のあるものについては代替テキストを付与する。

なお、単純装飾のために用いられている画像の場合は、画像自体に伝達すべき情報がない。この場合は代替テキストは空でもよい。

関連項目:1.1.1(A)

映像・音声には必ず代替となるテキストを用意する

動画や映像・音声データといった非テキストコンテンツには、必ずその内容を表現するテキスト(スクリプト等)が提供されている必要がある。

映像と音声を含むメディア

メディアに含まれる視覚的情報の音声解説を提供するか、または視覚的情報と聴覚的情報の全ての情報をテキスト形式で提供する。

Youtube動画をサイトに埋め込む場合は、動画に字幕を付与してあることでこの基準をクリアしたものとみなす。

映像のみのメディア

映像メディアによって提供される視覚的情報を、正しい順序で説明したテキストあるいは音声メディアを提供する。

音声のみのメディア

音声メディアによって提供される聴覚的情報を、正しい順序で説明したテキストを提供する。

関連項目:1.2.1(A)、1.2.3(A)

見出しの内容は、包含するセクションの内容を表現したものにする

テキストを読む速度が遅くなる障害がある、あるいは短期記憶に制約のあるユーザーがページの内容を適切に理解できるようにする。

関連項目:1.3.1(A)、2.4.6(AA)、2.4.1(A)、2.4.10(AAA)

見出しはh1〜h6の順に使用し、抜けや逆順がないようにする

見出しは必ずh1〜h6のレベル順で親子構造を示し、見た目のデザインで見出しを選んではならない。
h1の次にh3の見出しを置いたりしてレベルを飛ばしてはならない。

関連項目:1.3.1(A)

ページの内容を示すユニークな(一意の)わかりやすいタイトルをつける

ページのコンテンツを読んだり解釈したりすることをユーザーに要求することなしに、ユーザーが現在位置を特定することができるよう、ページタイトルにはそのページの内容を示す主題を付与する。

複数のページでページタイトルがまったく同一のものにならないよう注意する。

関連項目:2.4.2(A)

箇条書きは<li>または<ol>を、説明リストには<dl>を使用する

スクリーンリーダーがリストを認識できるよう、リストは適切な要素を用いてマークアップする。

「・(中黒)」や英数字テキストをリストのマーカーとして利用してはならない。スクリーンリーダーはリストアイテムとして正しく読み上げできない。

関連項目:1.3.1(A)

リンクテキストは、単独でリンク先の内容を理解できるものにする

スクリーンリーダーには、ページの内容を把握するために、ページ内のリンクテキストだけを抽出して読むという使い方ができる。
このとき、ページ内のリンクテキストが「もっと見る」や「こちら」「READ MORE」ではリンク先の内容がわからないだけでなく、コンテンツの概要を推測することもできず、ユーザーに冒頭からすべての文章を読ませることを強いてしまうため、これらの文字は可能な限りリンクテキストとしては利用しない。

関連項目:2.4.4(A)、2.4.9(AAA)

表組みではセル結合や複数の見出し行列を極力行わない

表組み内部でセル結合や見出しが複数行列になっていると、スクリーンリーダーが正しい順でデータを読み上げできず、ユーザーが表組の内容を理解できなくなってしまう。

表組みが複雑になる場合は、情報を細分化してよりシンプルな複数のデータに分けることで、視覚障害者だけでなく認知機能に障害のあるユーザーにもわかりやすいコンテンツとすることができる。

関連項目:1.3.2(A)

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