こんにちは、ヌーラボのウェブサイト課でマークアップとフロントエンドを担当しているYoshinokiです。
ウェブサイト課は、日々のアクセシビリティ向上の取り組みを発信するために、三ヶ月に一度アクセシビリティレポートを発行しています。
今回はその第5弾として、2024年10月〜12月の三ヶ月間に行ったウェブサイトの改善内容をご紹介します。
過去のアクセシビリティレポートは以下のリンクからご覧ください。
目次
2024年10月〜12月のウェブサイトのアクセシビリティの向上
HTMLの構文エラーを修正
Backlogサイト内の主要ページに対してNu HTML Checkerによる構文チェックを実行。発見したエラーをすべて解消しました。
以下に改善の具体例を示します。
- ID属性の重複を修正
- 非推奨属性や古い記述(iframeのframeboder属性や古いバージョンのIE向けの記述)などの削除
- 必要な属性（img要素のalt、width、heightなど）の追加
- タグの閉じ忘れの修正
この改善内容に対応するWCAGの達成基準 4.1.1 構文解析はWCAG2.2において削除されました。しかしこれまでと変わらず、HTMLを正しく書くことはウェブアクセシビリティにおいて最も大事なポイントの一つです。
ウェブサイトの品質観点でも構文エラーはゼロにしていくべきだと考えているので、今後もエラーの修正と、リリース前に自動でエラーに気づくことのできる仕組みづくりに努めていきます。
参考記事：
フォームの必須フィールドをテキストで説明
Nulabサイトの資料ダウンロード用フォームにて、必須フィールドを表すテキストを「*」から「必須」に変更しました。
改善前後のフォームの比較
「この項目は必須である」ということをより多くの人に伝えることが目的です。
「*」のみで必須を示すことには以下のような問題があるため、「必須」という明示的なテキストを設定しました。
- 「*」が必須を示すという前提を知らなければ意味が分からないこと
- スクリーンリーダーでは「ほし」などと読み上げられるため意図が不明瞭になること
WCAG2.2では達成基準3.3.2: ラベル又は説明 に該当する項目です。
動き続ける要素を削除、または一時停止ができるように
Backlogサイト・トップページのリニューアルに伴い、動き続ける要素を削除または一時停止できるようにしました。
改善前後の企業ロゴ表示エリアの比較
ページ内に動き続ける要素があると他の部分に集中することが困難になるユーザーがいます。より多くの人がウェブサイトを集中して閲覧できるようにするために変更を行いました。
変更した箇所は次の三点です。
- ロゴスライダー（削除）
- 自動再生動画（controls属性を付与して一時停止できるように変更）
- 自動再生スライダー（自動再生をしないように変更）
WCAG2.2では達成基準 2.2.2 一時停止、停止、非表示 に該当する項目です。
なお、この対応によりBacklogサイト全体でWCAG2.2における非干渉の達成基準をすべてクリアしました。
参考記事：
スライダーライブラリを変更
BacklogサイトのトップページとCacooサイトのテンプレートページのスライダーUIに利用するJSライブラリをSlickからSplideに変更しました。
（なお、現在スライダー要素のフォーカスインジケータの一部がかけてしまっている箇所があります。こちらは修正を行う予定です）
Splideはさまざまなアクセシビリティ上の要件への配慮がなされているスライダーライブラリです。
Splideの導入によりスクリーンリーダー等の支援技術に状態を伝えることや、キーボード操作が可能になりました。
WCAG2.2では達成基準 1.3.1 情報及び関係性、2.1.1 キーボード などに該当する項目です。
余談ですが、日本語サイトにもかかわらず、Splideで実装されたスライダーのラベルが日本語化されていないケースをしばしば見かけます。Splideは手軽にラベルを更新できる機能を提供しているので「Splideを利用する際は文脈に応じて適したラベルを設定する」という認識がもっと広まることを期待しています。
また前提として、スライダーUIにはそれ自体にアクセシビリティ上の懸念が含まれています。そのため将来的にはスライダー自体を無くすことも検討していきます。
参考記事：
サイト内で使われている色を調整しコントラスト比を向上
Backlogサイト内で使われている色をアップデートし、コントラスト比を高めました。
ロービジョンのユーザーや、明るい屋外でサイトを見るユーザーの視認性を高めることが目的です。
改善前後の色の比較
具体的には
- テキストの黒
- ボタンのオレンジ色
- 背景やリンクテキストの緑
をアップデートしました。
これにより特に緑×白、オレンジ×白の組み合わせのコントラストが向上しました。
ただし、この状態でもオレンジ×白のコントラストはWCAG2.2の達成基準 1.4.3 コントラスト (最低限) で示されている4.5:1をクリアできていません。
オレンジ色のコントラストについては調整が難しいことが知られており、この点は今後もデザイナーと相談しながら最適解を探していきたいと考えています。
参考記事：
- 【WCAG2.1 アクセシビリティ対応】 コントラスト比の罠｜Kotoko Yamamoto
- 第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
- Case Study on Color Ratio and Accessibility | Bounteous
アイコン画像に適切な代替テキストを付与
Backlogサイトのフッター内にある言語選択UIのアイコンの代替テキストを「地球儀のアイコン」から「言語選択」に変更しました。
改善前後の代替テキストの比較
WCAG2.2では達成基準 1.1.1 非テキストコンテンツに該当する項目です。
パンくずリストを追加
Backlogサイトにパンくずリストを追加しました。
新たに追加したパンくずリスト
これはもともとアクセシビリティの向上施策として実施したものではありませんでした。また、WCAG2.2の中にもパンくずリストのようなナビゲーションの設置を必須とする旨の記述はありません。
しかし、「現在サイト内のどの位置にいるのか？」という情報を伝えることはサイト全体のアクセシビリティの向上にも繋がっていると考えたため、今回のレポートに含めることにしました。
また、実装するうえでは、aria-label=”現在位置”を付与したnav要素でリスト全体をマークアップし、支援技術に意図が正しく伝わるようにしています。
アクセシビリティカンファレンス福岡に参加しました！
2024年11月30日（土曜日）に福岡で開催された「アクセシビリティカンファレンス福岡」に参加しました。ヌーラボはおやつスポンサーとしてブースを出展し、ウェブサイト課からも4名が現地に赴きました。
また、前夜祭では私がLT登壇し、一年間のウェブサイト課の取り組みを発表させていただきました。
参加レポートやLTの内容は以下のリンクからご覧いただけます！
今後のウェブサイト課のアクセシビリティへの取り組み
この三ヶ月間も細かな改善を重ねながら、アクセシビリティ向上の取り組みを着実に進めてきました。
ヌーラボのウェブサイト課は「すべての人に等しい情報を」というミッションのもと、誰もが快適に情報にアクセスできるよう、今後もアクセシビリティの向上に力を注いでいきます。
