自社コーポレートサイト改修記録！アクセシビリティ向上への取り組み

こんにちは！アシスタントコーダーの山田です。

ノベルティでは、Webアクセシビリティの向上を目指し、より多くのユーザーがWebコンテンツを利用できるように取り組んでいます。

その一環として、Next.jsで構築されている自社のコーポレートサイトをよりアクセシブルに改修しました。今回は改修箇所について一部ご紹介します！

改修トピックには、対応するWCAG2.1の適合レベルとWCAG2.1解説書(日本語訳)のリンクも記載しています。興味のある方はぜひこちらもご覧ください。

画像のalt(代替テキスト)の最適化

altとは、Webサイトの画像の代替テキストのことです。画像が何らかの原因で表示されないときや、音声読み上げ支援技術(スクリーンリーダーなど)を使用する際に、画像の情報を取得できるようになります。X(旧ツイッター)の投稿時も、画像にALTをつけることができますね。

ALTの内容には、あくまで画像から伝わる情報を記載し、主観的なことは書かないほうがよいとされています。また、あまりに長い説明ですと読み上げも長くなってしまいますので、文章をコンパクトにまとめることも大切です。

今回の改修では、画像に適切なaltを設定し、装飾的な画像に関しては、スクリーンリーダーの読み上げが冗長になってしまうことを避けるためにaltを空にしています。

【適合レベル】A

【参考】

非テキストコンテンツ - WCAG 2.1 解説書

フォーカスリングの可視化

フォーカスリングは、キーボードナビゲーションを使用するユーザーが現在どの要素にフォーカスがあるかを視覚的に確認できるようにするためのものです。これにより、マウス以外の支援技術を用いて操作するユーザーがより快適にWebサイトを利用できるようになります。

アクセスしたいリンクや操作したいボタンがあるのに、自分がどこにいるかわからない状態はとても困りますよね。

そのため、キーボードで操作する際、どこにフォーカスが当たっているかわかるように、フォーカスリングを実装しました。

【適合レベル】AA

【参考】

フォーカスの可視化を理解する - WCAG 2.1 解説書

ナビメニューの開閉操作

ヘッダーのナビメニューをホバーしたときに出てくるメニュー。皆さんも一度はご覧になったことがあると思います。

呼び方には諸説ありますが、ここでは「メガメニュー」と呼ぶことにします。

このメガメニュー、ホバーして出てくるのは便利なのですが、フォーカスが少し外れるとすぐ非表示になってしまい、操作しにくいことってありませんか？

マウススティックを利用しているユーザーや、マウスを動かすことが困難なユーザーにとっては、マウスカーソルを合わせること自体が大変な場合があります。また、画面が拡大されたときにホバーすると、ホバーを解除する術がなくなり、メニューを閉じることができない問題も発生します。

上記を踏まえ、ヘッダーのメガメニューを、マウスクリックかつキーボードのEnterキー(もしくはSpaceキー)で開閉できるように改修しました。

【適合レベル】AA

【参考】

キーボードを理解する - WCAG 2.1 解説書

ホバー又はフォーカスで表示されるコンテンツを理解する - WCAG 2.1 解説書

1.4.13 ホバーまたはフォーカスで表示されるコンテンツを制御できる - Ameba Accessibility Guidelines

メガメニュー内のフォーカストラップ

キーボードのフォーカス順序はHTMLの順番のため、メニューを操作している時にフォーカスがメニューの外に出てしまう問題があります。キーボードユーザーにとって、開いているメニューを閉じることができずにその背景にフォーカスが当たってしまうことは、操作性に関わるとても大きな問題です。

そのため、メニュー内の最後のリンクにフォーカスが当たったら次は閉じるボタンにフォーカスが当たるように、フォーカストラップを実装しました。ReactのカスタムフックであるuseRefを使用しています。useRefは、ナビメニューのフォーカス順序にも使用しています。

【適合レベル】A

【参考】

キーボードを理解する - WCAG 2.1 解説書

キーボードトラップなしを理解する - WCAG 2.1 解説書

スライダーの一時停止ボタン

画面上に継続して動くコンテンツがあると、そちらに気を取られ、他の操作や閲覧が困難になるユーザーがいます。

そのため、トップページのスライダーに一時停止ボタンを設置しました。この一時停止ボタンにより、注意力が分散しやすい状況を防ぎ、視覚的負担を軽減することができます。

ボタンはマウスクリックとキーボード操作の両方に対応し、一時停止ボタンのクリックイベントを制御してスライダーの動作を停止・再開します。

【適合レベル】A

【参考】

一時停止、停止、非表示を理解する - WCAG 2.1 解説書

継続的に動くコンテンツの停止

上記の停止ボタンと同様の理由で、継続的に動くコンテンツを停止するように改修しました。

「はじめての方へ」のアニメーションは、以前は動き続けていましたが、3秒以内に止まるようにしています。

【参考】

一時停止、停止、非表示を理解する - WCAG 2.1 解説書

ボタンのラベル追加と開閉状況の通知

以前に私が書いた記事、アクセシビリティツリーとは？ウェブの使いやすさを支える技術で解説したように、スクリーンリーダーを使用している際にボタンにフォーカスが当たると、そのボタンの役割やボタンの状況が読み上げられます。

反対に、ボタン要素なのに<button>タグではなく他のhtmlタグを使っていたり、誤ったARIA属性の付け方をしたりしていると、適切な状況がスクリーンリーダーユーザーに伝わりません。

下記は自社コーポレートサイトのハンバーガーボタンにカーソルが当たったときの読み上げです。aria-labelに「メニューボタン」aria-expandedでボタンを開閉状況を設定しているため、どのボタンか、またボタンがどのような状況かがわかります。

【適合レベル】AA

【参考】

名前 (name)・役割 (role)・値 (value) を理解する - WCAG 2.1 解説書

スクリーンリーダーの英単語読み上げ対応

スクリーンリーダーの中には、大文字の英単語をアルファベットごとに読み上げるものがあります。アルファベットでの読み上げは、意味が伝わりづらくなり、ユーザーの混乱を招いてしまう恐れがあります。

そのため、英単語のマークアップを小文字にし、見た目をCSSで調整するようにしました。

【適合レベル】A

【参考】

意味のあるシーケンスを理解する - WCAG 2.1 解説書

おわりに

いかがでしたか？

ノベルティでは、アクセシビリティに重視したWeb制作・開発に取り組んでいます。

自社コーポレートサイトをアクセシビリティに対応させたい方、アクセシビリティに興味があるWeb担当者様は、ぜひ下記リンクからお問い合わせください！

お問い合わせをする

アクセシビリティに関してもっと詳しく知りたい方は、下記のサイト内ページやコラム記事をご覧ください！

• Webアクセシビリティ向上支援
• Webアクセシビリティとは？｜なぜ対応が必要なのかわかりやすく解説
• 合理的配慮とは？ウェブでの具体例を踏まえて解説します。