ウェブアクセシビリティを意識したコーディングのポイント②

ウェブアクセシビリティを意識したホームページを制作する際に、心掛けたいポイントを紹介しています。
前回に引き続き、コーディングで意識したいポイントを集めました。

ブラウザやOSの機能を制限する実装を避ける

キーボード操作禁止、右クリック禁止、戻るボタン禁止など、ブラウザやOSが標準搭載している機能を制限・禁止する実装は避けましょう。
スクリーンリーダーを使用しているユーザーや、キーボードを使って操作しているユーザーが正しい動作を行えなくなる場合があります。

右クリック禁止で画像の保存を禁止したい場合もありますが、画像にコピーライト表記を含めるなど、別のアプローチを考えましょう。

PDFに注意

PDFも、紙媒体のコンテンツをそのまま貼ったものなどは、目の見えない人は読むことが出来ません。
アクセシブル化したものを提供するようにしましょう。

横スクロールを出さない

縦横両方にスクロールがあると、ページの把握が困難になります。
なかでも、上肢に障がいのある利用者ではスクロール操作が難しい場合があります。
スクロールを縦方向だけにすることで、多くの利用者が参照しやすいページにしましょう。

単語の間に空白文字を入れない

単語の間にスペースで空白を入れないようにしましょう。
例：a p p l e

装飾目的で見栄えが良くなったとしても、スクリーンリーダーは1単語として認識しません。
「エーピーピーエルイー」と読み上げてしまいます。
文字の間隔を調整する際には、空白文字ではなくCSSで調整しましょう。

英単語を大文字で実装しない

英単語を大文字で実装しないようにしましょう。
例:APPLE

これも、スクリーンリーダーによっては「エーピーピーエルイー」と読み上げてしまいます。
表記上全て大文字で表したい場合は、CSSのtext-transformプロパティで大文字に変更するようにしましょう。

画面を拡大しても崩れないレイアウトにする

ブラウザによって、画面全てを拡大する機能と、文字サイズのみ変更できる機能があります。
例えば、 FireFoxの場合は、
表示タブ→ズーム→文字サイズのみ変更
で文字サイズのみの拡大が確認できます。
文字だけを拡大してもレイアウトが崩れないような実装をしましょう。

まとめ

スクリーンリーダーの読み上げ方など、実際に使ったことがなければ気づかないポイントも多かったと思います。
しかし、アクセシビリティを意識したコーディングで大事なのは、正しいHTMLを書くことです。まずは「単語の間に空白文字を入れないようにする」など、できることから始めてみましょう。