「ウェブアクセシビリティ」という言葉をご存知でしょうか？

この言葉は、さまざまな事情でウェブの情報や機能にアクセスするのに困難が生じやすい人にもウェブページを使いやすく工夫することをいいます。

新型コロナウイルス感染症の拡大に伴い教育や行政機関や福祉に関わる申請もオンライン化が加速し、ウェブが生活基盤を支えるインフラの一つとなろうとしている今、改めてウェブアクセシビリティの重要性に注目が集まっています。

そこで今回は、ウェブアクセシビリティで気を付けたいポイントや個人のサイトや単一のページからでも簡単にできる工夫などをご紹介いたします。

ウェブアクセシビリティって？ユーザービリティと何が違うの？

ウェブアクセシビリティとよく似たキーワードとして「ユーザービリティ」があります。それぞれの意味を表にすると以下のようになります。

ユーザービリティが特定のユーザーに的を絞ってウェブページや機能の高い操作性を考慮するものであるのに対し、ウェブアクセシビリティはどんな人でもウェブページや機能にアクセスできることを考慮するものです。

したがってユーザーを絞ってページや機能を制作するときはユーザービリティを、より多くの人に見てもらいたい、あるいは多くの人にとって必要があるページや機能を制作するときははウェブアクセシビリティを重点的に考える必要があります。

ウェブアクセシビリティって何に気をつければいいの？

ではウェブアクセシビリティを考慮する上で気をつけるべき要素として、どのようなものがあるのか、具体的に挙げていきます。

画像や映像で情報や機能を表示する場合は代替テキスト（alt属性）を付与しよう！

スマートフォンが普及し手軽に写真や動画をとったり、オリジナルの画像を作成したりできるようになった昨今、画像や動画で情報を提供するコンテンツが増えてきています。そうした中で、重要な情報に画像や映像のみでしかアクセスできない状態というのは一部のユーザーにとって非常に不便なものなのです。

例えば、視覚障害で画面を見ることができなかったり、識字障害で文字を読むことが難しかったりする人にとって、デバイスやブラウザの読み上げ機能でアクセスできない情報を知ることはできません。

そこで便利なのが（alt属性）です。

代替テキストはネットワークの問題で画像が読みこみにくいときに画像の説明を補うために使われるもので、音声ブラウザなどでページを読み上げられる際にも使われています。

またサイトの文字情報を増やすことにもつながるため、SEO（検索エンジン最適化）にも効果があると言われています。

HTMLでブログやウェブページに代替テキストを組み込むことができます。

また最近ではTwitterが公式に「画像の説明」という名前でユーザーが投稿する画像に代替テキストを付与できる機能を標準搭載したことで話題になっています。

個人でも活用できる代替テキストですが、どのように付与したらいいのか、迷った際には日本ウェブアクセシビリティ普及ネットワークが公開している情報バリアフリーポータルサイトの「ウェブアクセシビリティ事例集」などを活用し入力する情報を整理していくのがおすすめです。

また動画などをアップロードする場合は、重要な部分を中心に適宜字幕を入れるなど工夫することも非常に重要です。

画像や映像の色彩にも注意が必要！

また、画像や映像で情報を表示する場合に注意したいのが色彩です。

色覚特性は人によってさまざま。D型と呼ばれる赤緑の色覚が弱いタイプに該当する人は男性では20人に1人、女性では300人に1人と言われています。

色覚のタイプ別に画像の見え方は色と持続可能な社会をテーマにしたウェブサイトTOYO INK 1050+の「色覚障がいのタイプ」で非常にわかりやすく提示されています。

さまざまな色覚特性を持つユーザーに画像をわかりやすく伝えられるか、不安な場合は画像を作成する前に配色の見え方を色覚特性に合わせてシュミレーションできる「UDingシミュレーター（TOYO INK）」などを活用するのがおすすめです。

また、画像の彩度についても注意が必要で、彩度の高い画像の情報は自閉症スペクトラムのユーザーにとって受け取り辛いものであると知られています。

レイアウトがきちんと順序だったものになっているか確認する

続いて重要なのが情報の並び方が適切で順序だったレイアウトになっているか、という点です。

情報が順序立っていない場合、画面のみ、あるいは音のみなど限られた情報しか受け取れないユーザーにとって、大きな混乱や勘違いにつながる可能性もあるため、画面で見てわかりやすいか、音声読み上げソフトを使ったときにきちんと読み上げされるか、など確認が必要です。

ボタンのクリック可能範囲を広くする

身体障害などで体の可動域が少ない人にとって、ウェブ上で精密な動きを求められることは情報にアクセスする上で困難な要素になり得ます。

そこで、ボタンなどクリック操作が必要になる要素ではクリックできる範囲をできる限り広くすることでこの苦労を軽減することができます。

おわりに

今回紹介した例に限らず、ウェブアクセシビリティを改善する方法はたくさんあります。

逆に方法がありすぎて、どこから手をつければいいかわからない、という方は内閣府のウェブアクセシビリティの取り組みを紹介するページが用件などについてまとめてありわかりやすいので事例として非常に参考になります。

ウェブアクセシビリティを考慮したデザインや工夫をし続けることは非常に大変なことですが、その努力の分だけサービスやブログ、サイトを利用できるユーザーの数は増え、ユーザーとサービス提供者双方にとってメリットがあるものとなります。

ウェブアクセシビリティに関するさまざまな工夫は1ページ単位でも、個人のサイトでも活用することができます。代替テキストや情報の並びの整理など、まずできるところからやってみてください！

【参考URL】
・ 色覚シミュレーション・補助ツール | カラーユニバーサルデザイン  
・ ウェブアクセシビリティ基盤委員会 
・ やさしいウェブのためにすべきこと。英国のウェブアクセシビリティ啓蒙ポスターの日本語版が公開 
・ 色覚障がいのタイプ | 「色覚障がい」とは  
・ ユーザビリティ とは 意味/解説/説明 【usability】 
・ カラーユニバーサルデザイン | SUSTAINABILITY 
・ ウェブアクセシビリティ事例集 

（大藤ヨシヲ）

メルマガ登録をしていただくと、記事やイベントなどの最新情報をお届けいたします。