アクセシビリティ
アクセシビリティはアクセスしやすさを表す言葉で、ウェブページでは情報へのアクセスのしやすさを表します。どんな人でも能力に影響されず、どんな端末や環境でも欲しい情報にアクセスし取得できることが重要です。
Accessibility は省略して A11y とも表され、11は先頭 A と末尾 y の間の ccessibilit の11文字を省略しています。
アクセシビリティの必要性・重要性
アクセシビリティと聞くと障害者の為のもの、とイメージしている方もいると思います。その為、身近に当事者がいないとなかなか必要性を感じられないかもしれません。
例えば動画再生において音声が聴こえないユーザーの為にアクセシビリティ向上として字幕をつけるとします。字幕が聴覚の不自由なユーザーへの配慮になることは勿論なのですが、それだけではありません。聴覚に不自由がないユーザーであっても、電車の中で動画を再生しようと思った時にイヤホンがなければ音声付きで楽しむことができません。
このように情報は能力だけでなく環境によっても制限されます。誰しもがいつでも情報にアクセスできるとは限らないのです。
アクセシビリティの実践
アクセシビリティは重要なものですが決して難しいものではありません。
確かにアクセシビリティは課題とする点やそれを解決する為の技術等の多くの情報があり、それらを見ると難しそう、遠い道のりのように感じるかもしれません。しかし、全てを完璧にする必要はなくできることからコツコツと対応していくことが重要なのです。
すぐにできる簡単なアクセシビリティを紹介すると、画像への代替テキストの設定があります。
<img src="img.png" alt="ネコが寝ている写真">
このようにalt
属性に画像の適切な説明を記述することでスクリーンリーダーが説明を読み上げ、画像を見られないユーザーにも情報を伝えることができます。
代替テキストに限らず HTML をセマンティクス (各 HTML 要素が持つ役割) に合わせてマークアップすることも効果的です。
例えば見出しにはh1
~h6
要素を使う、ヘッダーにはheader
要素を使うようにすることです。セマンティスクに合わせたマークアップはマシンリーダブルになるのでスクリーンリーダーの読み上げを捕捉します。更にはマシンリーダブルになることで機械翻訳の精度を向上したり、アクセシビリティだけでなく SEO にも効果を発揮したりもします。
また HTML の技術以外にもデザインでは色を認識できないユーザーに考慮し色だけに頼らない柄やアイコンも活用する情報伝達が必要です。
アクセシビリティを実践するにあたり重要なのは完璧を目指すことではなくアクセシビリティに関心を持ち少しずつでも良いものにしようとする意識です。そしてアクセシビリティの視点を持ちどんなユーザーでも不自由なく体験できるサービスをデザインしていきましょう。