いまさら聞けない ウェブアクセシビリティの基本

行政デジタル化を進めるうえで知っておきたい「ウェブアクセシビリティ」について、デザインの専門家の視点で分かりやすく紹介します。今回は、ウェブアクセシビリティの基本的な内容について取り上げます。

株式会社グラファー
Digital Product Desiner 佐野 彩

ウェブアクセシビリティとは？

ウェブアクセシビリティとは、高齢者や障害者など、ウェブサービスの利用に不慣れな人々を含めて、誰もが支障なく利用できることを意味します。日本では2010年から国際基準に則った動きが始まりました。

参考：アクセシビリティとは（ウェブアクセシビリティ基盤委員会）

なぜアクセシビリティが大事？

リアルな場として、駅の階段にある昇降機をイメージしてみてください。これは階段を上り下りできない車椅子の方などに向けた設備ですが、設計時の段階でスロープを設置しておけば、車椅子の方だけではなく、ベビーカーやカートを押している方など、様々な方が利用できるようになります。これは誰にとっても好ましい状況だといえます。

駅の階段にある昇降機。昇降機の代わりにスロープが設置できれば、より多くの方が支障なく利用できる。

ウェブの世界でも同じように、多様な利用者を想定することによって、障害がある方を含む多くの方が、より支障なく利用できるようになります。反対に、アクセシビリティに配慮しないデザインの場合には、例えば「スマートフォンからオンライン申請をしようとしたが、色覚障害のため、ボタンに何が書かれているのか分からない」といったことが起きてしまいます。

特に現代においては、人口の3人に1人が高齢者となる時代だと言われています。そのため、以下のようなものはデジタルツールを使ううえでの大きな「壁」となってしまいます。

• 小さい文字

• 低いコントラスト（明暗の差）

• 音声読み上げに対応していないページ

アクセシビリティの例

さらにイメージをつきやすくするために、私が携わる行政向けのプロダクト「Graffer スマート申請」の職員向けの画面を例に挙げて紹介します。

以下のBeforeでは、「受付中」のラベルが薄いグリーンの背景色に白文字で書かれています。このラベルは、コントラストが低いために、色覚障害がある方は、テキストをうまく読み取れない可能性があります。

そこで、Afterのように背景色およびテキスト色を変更し、アクセシビリティを改善しました。変更後、色覚障害がある方から「ここまで見やすくなるものかと少々感動しています。対応いただき本当にありがとうございました。」といったコメントを頂戴し、影響の大きさを再認識しました。

簡単なチェック方法

毎日の業務の中で「ボタンの色が見えにくくないかな？」「聴覚に障害がある方がスクリーンリーダーを使う場合、どのように聞こえるのかな」と思ったとき、以下のようなツールを使うと便利です。

Microsoft 「アクセシビリティ チェックを使用してアクセシビリティを改善する」（Outlook、Word、Excel、PowerPoint、OneNote）

さいごに

より多くの市民が等しくデジタルを活用するために、アクセシビリティへの配慮は避けては通れません。この記事が、今まさにデジタル化を進めている職員の皆さまにとって、毎日の業務の中でアクセシビリティについて考えるきっかけになれば幸いです。

市民のための行政デジタル化に「Graffer Platform」を活用いただけます

市民に寄り添った行政デジタル化のためのサービス「Graffer Platform」を使うことによって、職員自らの手でデジタル化を進めることができます。費用や導入期間などについては、無料お問い合わせからお気軽にお問い合わせください。