ブログ・ホームページはアクセシブルに! ～基本的なウェブアクセシビリティについて～

突然ですが、皆さんはブログやホームページを作成・更新する際、掲載内容のアクセシビリティについて考えたことはありますか？ウェブ上のコンテンツには、画像やアイコン、特殊文字、アニメーション効果など視覚障害者には閲覧・確認できないものが多く存在します。そこで、今回の記事ではHTML編集機能を搭載したブログ・HPサービスを利用されている方向けに、基本的なウェブアクセシビリティの実装方法についてご説明していきたいと思います。

🔍 今回は少しレベルの高い内容となっています。HTMLの基礎知識の他に、HTML・JSの直接編集を許可しているブログサービス・HP作成サイト・レンタルサーバー等が必要です。
最近ではダイレクトHTML編集に対応したブログサービスが増えてきていますので、ぜひご登録中のサイトで確かめてみてください。

(1) ウェブアクセシビリティの重要性

具体的な実装方法をご紹介する前に、まずはウェブアクセシビリティとは何か、その重要性と共にご説明したいと思います。

「ウェブアクセシビリティ」という言葉は、普段からブログ・HPを運営している方でもあまり聞き慣れない用語かもしれません。ですが、自社HPの検索率・訪問者数を少しでも増やしたい企業等にとっては避けては通れない、大事なプロセスの一つでもあります。というのも、世界中で日々使われているGoogleの検索エンジンでは、サイトのアクセシビリティが検索結果表示順位を決める上で重要な要素の一つとして設定されているからです。

定義としては言葉通り「年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できるようにすること」で、主に視覚的に情報を認識することの難しい、視覚障害者や高齢者向けの補助機能を指す言葉です。これにはテキスト要素のレイアウト・フォントサイズの調整に加え、画像やアイコン、特殊フォント、操作を要するフォーム部品など閲覧に視覚を要する要素へのラベル・補足説明の追加が含まれます。

今回はそんなウェブアクセシビリティの中でも、設定が容易なものをいくつかご紹介していきます。具体例も提示しますので、ぜひスクリーンリーダー機能をオンにして読み上げさせてみてください。

※一部のHTML属性はOS・ブラウザによって表示が異なることがあります。特に古いバージョンのブラウザでは対応していないことが多いのでご注意ください。

画像の代替テキスト

最初にご紹介するのは、画像に任意の説明を加えられる「代替テキスト」と呼ばれるアクセシビリティ機能です。

代替テキストとは文字通り画像の代わりになるテキスト(文字列)のことで、元は画像や堂がが表示できない、テキストベースのブラウザで閲覧する時に、最低限の説明を提供するための属性でした。この属性が設定してある<img>タグでは画像のファイル名の代わりに設定した説明文が読み上げられるので、最も使いやすく、重要なアクセシビリティ機能の一つとなりました。最近ではTwitterやFaceBookなど数多くのSNSサイト・アプリでも個別に設定できるようになるなど、広く使われるようになってきました。

以下の例では、右の画像にのみ代替テキストを設定しています。

スクリーンリーダーで画像をフォーカスしてみると、右側の画像には簡単な説明が設定され、画像の内容を確認できるようになっているのがわかります。一方左側の画像だけでは何が表示されているのかわからず、ウェブアクセシビリティが低下してしまっています。

以下はHTMLの記載例です。代替テキストは「alt=""」という部分で指定しています。

*注意点*

画像(<img>タグ)にしか対応していません。その他の方法は次項以降でご説明します。
あくまで補足として、簡潔に記載した方が良いです。
Javascriptで画像を変化させる際、処理後の画像に代替テキストを付け忘れることがあります。例えば「bigimg.src = 'pic2.jpg';」で2枚目の画像に切り替える時には、必ず「bigimg.alt = '2枚目、柴犬のイラスト';」と代替テキストを再指定してください。

画像を直接確認することのできない視覚障害者にとって、代替テキストは最も重要なアクセシビリティ機能の一つです。ブログ・SNSでアップロード時に指定できる場合や、HTMLを編集できる場合には可能な限り設定するのが良いと思います。

スクリーンリーダーでのみ読み上げられるラベルの設定

続いてはテキスト要素を含まない、または用途のわかりにくい部分にスクリーンリーダーでしか確認できない、ラベルのようなものを設定する方法をいくつかご紹介します。尚、「Title」や「Label」など、純正のタグ・属性は省略します。

※本項以降では、度々「Aria-○○」という属性が登場します。これはW3Cが複雑化していくHTMLをよりアクセシブルにするために開発した「WEI-ARIA(ウェイ・アリア)」の一部で、主に目には見えない、スクリーンリーダー専用の属性となっています。WEI-ARIAには要素の役割などを指定できるRole属性など使いやすいアクセシビリティ機能が含まれていますので、ご興味のある方はこちらの「ウェブ開発を学ぶ」のWEI-ARIAに関する記事をご参照ください。

WAI-ARIAを利用する

WAI-ARIAには、HTML上の要素にラベル・補足説明を付加するための属性が数多く用意されています。本記事では、その中でもよく使われているものをピックアップしてご紹介します。
※以下の説明文では「記載例」にHTMLの記述例、「動作例」には実際にHTMLタグとして起こしたものを載せています。

Aria-Label: 概要: 一般的なHTML要素、特にクリックできる要素や画像に、目に見えないラベルを設定します。主にページ上にラベルとして利用したい、他の文字列がない場合に利用されます。; 記載例: <button type="button" aria-label="閉じるボタン">X</button> (×マークだけが表示されるボタン)); 動作例:
Aria-Labelledby: 概要: この属性はHTML内に参照したいID名がある場合、そのIDをラベルとして利用することのできるもので、Aria-Labelなど他のラベル設定よりも優先されます。説明だけだとわかりにくいかもしれないので、下記記載例をご覧ください。; 記載例: <a href="" aria-labelledby="label">てすと<a> <span id="label">ラベル</span> (本来は「テスト」と書かれたリンク); 動作例: テストラベル
Aria-Describedby: 概要: Aria-DescribedbyはLabelledbyとほど同じ記述方法ですが、ラベルの代わりに補足説明を、本来記載されているテキストに続いて読み上げてくれます。残念ながら対応環境は多くなく、iOS+Safariの組み合わせなどでは確認することができません。; 記載例: <div aria-describedby="explanation">表示されているテキスト</div> <span id="explanation">補足説明</span>; 動作例:
表示されるテキスト
補足説明

クラス名「SR-Only」を利用する

BootstrapベースのサイトやFont Awesomeなどのアイコン提供サイトでは、画面上に表示されずスクリーンリーダーでのみ読み上げられるようになるクラス名「SR-Only」が用意されています。主に補足したい対象の要素に「aria-hidden="true"」という属性を追記してスクリーンリーダーで選択できないようにし、その横に記載した<span>要素にこのクラス名を追加することで、span要素の中身を代替テキストとして利用することができます。またデザインの指定方法も公開されていますので、以下の「CSS記載例」をコピーすることでもご利用頂けます。

※以下の説明文で、HTMLには予めFont Awesomeを読み込んでいることとします。また、CSSはBootstrapやFont Awesomeを利用している場合、本来設定する必要はありません。

.SR-Only: 概要: 通常のテキスト要素として入力した文字列を、スクリーンリーダーでのみ読み上げられる、代替テキストとして利用することができます。一般的にはAlt属性が使えない、<img>タグ以外で用いられます。; HTML記載例: <i class="fas fa-cat fa-4x" aria-hidden="true"></i><span class="sr-only">猫のアイコン</span>; CSS記載例: .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0);white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0;}; 動作例: 猫のアイコン

Aria-ExpandedやAria-Selectedによる選択・開閉状態の通知

前項ではAria属性やクラス名によるラベルの設定方法について開設しましたが、WAI-ARIAにはこの他にも要素の状態を説明するための属性が数多く用意されています。ボタンが押されているか、タブが選択されているか、リンクが無効になっているかなど操作可能な要素のアクセシビリティを向上してくれる便利な機能なので、此方についてもいくつかご紹介します。

Aria-Expanded: 概要: アコーディオンメニューなどの開閉状況をスクリーンリーダーでのみ通知します。Javascriptを活用すると、ラクセステックのメインメニューや本記事の目次ボタンのように、実際に開閉と合わせて読み上げさせることができます。; 記載例: <button type="button" aria-expanded="false" aria-controls="">サンプルボタン</button> (折りたたまれた状態のボタンサンプル); 動作例:
Aria-Selected: 概要: タブやフォーム要素などが選択されているかどうか、スクリーンリーダーで読み上げられるようになります。主にタブ切り替え時やアンケートの回答選択時に使われています。; 記載例: <button type="button" aria-selected="true">サンプル</button> (選択されたボタンのサンプル); 動作例:
Aria-Disabled: 概要: リンクやボタンがクリックできるかどうか通知してくれます。; 記載例: <button type="button" aria-disabled="true">サンプル</button> (無効になっているボタンのサンプル); 動作例:
Aria-Pressed: 概要: Aria-Selectedとほぼ同じ機能ですが、此方は「押されています」など、押されているかどうかを通知してくれます。; 記載例: <button type="button" aria-pressed="true">サンプル</button> (押されているボタンのサンプル); 動作例:

その他のWAI-ARIA

WAI-ARIAには記事中でご紹介したものの他にも、状況に応じて変更させられる、スクリーンリーダー専用の属性が数多く登録されています。やらねば.comでは複雑なJavascriptやCSSを使わずに各属性をわかりやすく解説されていますので、ぜひ参考にしてみてください。

ここまで、ブログやHPをよりアクセシブルにするための方法をご紹介してきました。ウェブアクセシビリティにおいて、最も重要なのは表示されている要素の目的・内容・状態を明らかにすることです。皆さんのサイトにも取り入れて、ウェブアクセシビリティの向上に役立てて頂ければ幸いです。

*本ページの記載内容に誤りがあれば、メール、TwitterのDMなどでお知らせください。