「具体的には何に配慮すればいいの?」
～ウェブアクセシビリティのJIS企画、JIS-X 8341:3の基礎的な達成基準についてご紹介～

☆以前に掲載した、「ブログ・ホームページはアクセシブルに! ～基本的なウェブアクセシビリティについて～」も合わせてご覧ください。

☆本記事で扱っているウェブアクセシビリティの企画・ガイドライン: 「JIS X 8341-3:2016 解説」・「Web Content Accessibility Guidelines (WCAG) 2.0」

1.1.1:レベルA　非テキストコンテンツの達成基準

最初にご説明するのはJIS企画・WCAGでも一番初め、1.1.1に記載されている「非テキストコンテンツ」についてです。

これは簡単に言えば「適切に代替テキストを設定しよう」という基準で、主にスクリーンリーダー利用者が画像等の非テキストコンテンツを正しく識別することができるように作られたものです。最近ではSNS・ブログサービスなどでも自由に代替テキストが設定できるようになっているので、聞き覚えのある方が多いのではないでしょうか。

と、要約だけを見ると簡単そうな基準に思えるかもしれませんが、少し複雑なポイントが2つあります。

ポイント1: 「非テキストコンテンツ」は画像とは限らない

一般的にSNSなどでは画像にしか設定できない代替テキストですが、HTMLなどウェブコンテンツでは画像の他にも、様々な「テキスト以外」の要素に付ける必要があります。

画像・リンク画像・アイコン・画像ボタンにはAlt属性、テキストが明記されていないリンクやフレーム要素にはTitle属性、通常のボタンにはボタンテキストやラベルなど、一般的にスクリーンリーダーで読み上げられないものには対応した代替手段を用意しましょう。

ポイント2: 何にでも「代替テキストを設定すればいい」とは限らない

何度も「代替テキストを設定する」と説明しておきながら矛盾したことを言うようですが、何にでも代替テキストを付ければ良いという訳ではありません。代替テキストが操作の妨げになってしまうこともありますので、特に下記のケースではAlt属性に空白の値(alt="")を設定して対処しましょう。

装飾的な画像(デザインの一部として表示されている画像)、リンクテキストと隣接していて代替テキストの値がリンクテキストと重なってしまう場合(同じフレーズを2度読み上げてしまうため)、個別にスクリーンリーダー利用者向けのオプションを表示しており意図的に操作不要にしたいボタン・フォームなど

非テキストコンテンツについては以上です。アクセシビリティ対策の中では基礎中の基礎なので、ホームページを運営されている方はまず取り入れてみてください。

1.3.1:レベルA　情報及び関係性の達成基準

続いてご説明する「情報及び関係性」は非テキストコンテンツの達成基準と同じく、スクリーンリーダー利用者のために作られた基準です。見出し・表題・表見出し・箇条書きなどの情報は、周囲との関係性がわかるようにすることでスクリーンリーダー利用者でもページのレイアウトがわかるようにしようというものです。

より端的に説明すると「情報に応じた要素を使う」という意味で、見出しはH(見出し)要素、表題はH要素やCaption要素、表見出しはTH要素、箇条書きは各種リスト要素で記載することになっているということです。

ページ上のコンテンツを判別しやすくなるのは勿論のこと、正しい要素が使われていれば、見出しジャンプ・リストジャンプなどスクリーンリーダー特有の機能で操作することができるようになるため、視覚障碍者にとってのユーザビリティについても大幅に向上するということになります。

本基準のポイントは以下の2つです。意識的に要素を使い分けてみましょう。

ポイント1: 外見だけ整えるのはNG

テキストサイズ・太字・枠線などの設定をして見出しらしく外見を整えたり、リスト要素を使わずに中黒(・)や数字を手入力してしまうと情報が正しく伝わらなくなってしまうので、避ける必要があります。

ポイント2: 不必要な箇所には要素を設定しない

逆に見出し・表題・箇条書きになっていない箇所に該当の要素を使ってしまっても、やはりユーザを混乱させ、情報へのアクセシビリティを低下させてしまうことになります。情報に即した、正しい要素を設定しましょう。

1.3.2:レベルA　意味のある順序の達成基準

3つ目にご紹介する基準は「意味のある順番」です。こちらの基準には、主に下記2つのポイントがあります。

ポイント1: フォーカスが見た目通りの順番で移動するひつようがある

次項でもご説明しますが、スクリーンリーダー利用者以外にもマウスが使えない・ポインタが追えないなどの理由で、キーボードを使ってパソコンを操作するユーザは少なくありません。

そんなキーボード利用者がページ上を移動する際、外見上の順番とキーボードフォーカス(Tabキーで移動するカーソル)が違ってしまうと、ページのレイアウト・コンテンツを正しく識別できなくなってしまう可能性があります。あまり複雑なレイアウトにはせず、キーボードフォーカスは必ず見た目通りに移動するよう設定しましょう。

ポイント2: 単語間には空白を入れない

「意味のある順番」とは何も要素の順番に限ったものではなく、文字列、つまり単語や文章にも適用されるものなんです。それでは「単語の順番に問題がある」とはどのような状況かというと、単語間(単語の文字と文字の間)に空白が入ってしまっていることを言います。

普段からスクリーンリーダーを利用されている方であれば何度かみかけたことがあるかと思いますが、レイアウト目的で空白が挿入された単語では読み上げに問題が生じてしまいます。

例えば「生年月日」という単語の間に空白を入れて「生　　年　　月　　日」と記載してしまうと、スクリーンリーダーは漢字同士の連続性を識別できず「なま、とし、つき、ひ」のように間違った読み方をしてしまいます。

そのため、レイアウトを整える場合には空白は使わず、CSSやブログ・CMSサービスのデザイン調整機能を利用するようにしましょう。

2.1.1:レベルA　キーボードの達成基準

4つ目、「キーボードの達成基準」は前項で触れた、キーボード利用者のために設けられた基準です。「マウスで操作できる要素はキーボードでも同じように操作できること」という、シンプルながら非常に奥の深い基準です。

ポイント1: キーボードフォーカスを受け取らないボタン・リンク等がないか

HTMLベースのページではボタン・リンク・フォーム部品などの操作を受け付ける要素はデフォルトでキーボードフォーカスを受け取るようになっているのですが、本来操作を受け付ける要素でないものにクリックイベントを設定していたり、だいたいテキストが空になっている画像ボタンなどがあるとフォーカスできない場合があります。

必要な操作が割り当てられた要素にはTabIndex要素(tabindex="0"など)を設定して、キーボードでもフォーカスできるようにしましょう。

ポイント2: マウスで操作・展開できる要素はキーボードでも使えるようにする

キーボードで要素をフォーカスできることは勿論、登録されているクリックイベントもキーボードから操作できる必要があります。

動画の再生ボタン・ドロップダウンの展開ボタン、画像リンクを含め、マウスと同様にキーボード操作(Enterキー)で機能を呼び出せるように設定しましょう。

2.4.1:レベルA　ブロックスキップの達成基準

次にご紹介する「ブロックスキップの達成基準」は、比較的単純で達成しやすい内容になっています。

簡単に説明すると「共通部分を容易に読み飛ばせるようにしよう」というもので、キーボード利用者が本文にたどり着くまでに何度もTabキーを押さずに済むように設定されています。

ポイント1: 本文の冒頭に見出し要素を設定する

見出しジャンプ機能を使って本文へ移動することができるよう、本文の冒頭部分にはH1などの見出し要素を設定します。

なお、見出しが適切に設定されている場合ブロックスキップの条件は満たされたことになるので、下記ポイント2を実施する必要はありません。

ポイント2: ブロックスキップ用のページ内リンクを設置する

本文の冒頭に見出し要素が設定されていない場合、ページ最上部に「本文へ」や「メインコンテンツへ」などのページ内リンクを設定する必要があります。

過剰なキーストロークを強いてしまわないよう、ブロックスキップの手段を用意しましょう。

2.4.4:レベルA　リンクの目的(コンテキスト内)の達成基準

6つ目にご紹介するのは「リンクの目的(コンテキスト内)の達成基準」です。少し解釈が分かれるところではありますが、一言で言えば「リンクテキスト・画像はその目的がわかるように示し、リンクの目的はリンクテキスト・画像に適したものにする」というものです。

ポイント1: スクリーンリーダーで読み上げられるリンクテキスト・リンク画像を設定する

まず、スクリーンリーダーで正しく読み上げられるリンクテキストを、目的に応じて設定する必要があります。

おしゃれなページではあえてリンクテキストを入力せずCSS・JavaScriptで画像やアイコンを挿入しているケースが多いですが、このような方法で設定されたリンクテキストの多くはスクリーンリーダーに対応していません。必ず通常通りリンクテキストを設定した上で、CSSなどからデザインを調整するようにしましょう。

リンク画像については非テキストコンテンツの基準でご説明したルールが適用されます。

意味のあるものには代替テキストを設定する、リンクテキストと隣接していて代替テキストが重複してしまう場合にはAlt属性を空にするなど、状況に応じて代替テキストを活用しましょう。

ポイント2: ページ内リンクはキーボードフォーカスも移動するよう設定する

少し「リンクの目的」とは関係なさそうに感じるかもしれませんが、ページ内リンクが正しく遷移するかという点も、本基準の大きなポイントです。

前項でご説明した通りブロックスキップの観点からも有用なページ内リンクですが、キーボードフォーカスが動かず、外見だけが目的の位置まで移動するというケースがよく見られます。

このような場合、画面が正しく遷移していたとしてもフォーカスは元の位置に取り残されてしまうため、Tabキーやカーソルキーを押した瞬間に元の場所に戻ってしまい、キーボード利用者は目的の場所にアクセスすることができません。

ページ内リンクはHref属性にID名を設定するなどし、キーボードでも目的の位置へ遷移できるよう作成しましょう。

4.1.1:レベルA　構文解析の達成基準

最後に開設する基準は「構文解析」つまりHTMLの文法に関する基準です。

「HTMLの文法を正しく記載しよう」というのは当たり前すぎてあまりアクセシビリティの基準とは結び付かないかもしれませんが、スクリーンリーダー等の支援プログラムは基本的にウェブページが正しく作成されていることを前提に作られています。

そのためHTMLに誤りがある場合、特に下記4種類の誤記がある場合には正しく動作しなくなってしまう可能性が高まります。

ポイント1: 要素が正しく記載されていない

要素のスペルに誤りがある(span→sapnなど)、終了タグで「/」を書き忘れている、"が過不足している、必要な個所にスペースが入っていないなど要素そのものに誤記がある場合、支援プログラムはそもそも何の要素名を読み上げ・表示すればよいか識別できなくなってしまいます。

ポイント2: 要素が正しい入れ子構造となっていない

詳細は省きますが、HTMLには厳密な入れ子構造のルールがあり、認められていない子要素を指定した場合(UL要素の中に直接画像要素など)、例え要素が正しく記載されていたとしても、その子要素が除外・無視されてしまう可能性があります。

ポイント3: 1つの要素内に、同じ属性が複数記述されている

1つの画像要素に複数のAlt属性が記述されているなど、属性が重複している場合には最初に指定されたものを除き無視されてしまいます。

その場合、せっかくアクセシビリティを高めようと追加したはずの属性がなかったことになってしまいますので、必ず同名の属性は1つにまとめるようにしましょう。

ポイント4: 1つのページ内で同じID名が重複して使われている

HTMLにおいて一意的であるはずのID名が重複している場合、やはり1つ目を除き除外されてしまいます。

IDの代わりにClassを使う、ID名が重複しないように名前を付けるなど、複数個所で使ってしまわないよう注意しましょう。

まとめ

前回の記事に続いてかなりボリューム満点になってしまいましたが、今回はウェブアクセシビリティの企画について解説してみました。

これでも企画全体から見ると10分の1程度しかカバーできていないのですが、本記事でご紹介している基準はその中でも重要度の高いものばかりなので、ぜひホームページ・ブログを運営する際にご参考にしてみてください。