ヌーラボ アクセシビリティレポート #4

こんにちは、ヌーラボのウェブサイト課でマークアップとフロントエンドを担当している榎本です。今回の記事では、2024年3月期から始まったアクセシビリティレポートの第4回として、2024年7月〜9月の3ヶ月間に行った改善内容をご紹介します。

過去のアクセシビリティレポートはこちらからご覧ください。

アクセシビリティレポート #1
アクセシビリティレポート #2
アクセシビリティレポート #3

2024年7月〜9月のウェブサイトのアクセシビリティの向上

お問い合わせフォームに「必須」テキストを追加

これまで「※」で必須項目を表していましたが、「必須」というテキストに変更し、スクリーンリーダーでも読み上げられるようにしました。この対応は、ヌーラボサイトBacklogサイトCacooサイトで実施しています。

ヌーラボサイトのお問い合わせフォームのスクリーンショット。各見出しの横に赤い背景に白い文字で「必須」と書かれたアイコンが表示されている。

フォーカスインジケータの表示

CSSのoutlineプロパティが非表示に設定されているところを表示されるようにしました。この対応はCacooサイトエンタープライズ版 Backlogを使いこなそう(ヘルプサイト)、Typetalkサイトのお問い合わせフォーム(ファイルを添付する)で実施しています。

ヘルプサイトの改善(リンクテキストに下線を追加・リンクの文言を具体的に)

エンタープライズ版 Backlogを使いこなそう(ヘルプサイト)にて、リンクテキストに下線を追加しました。また、ライティングチームの協力を得て、「こちら」が多用されていたリンクの文言を、より具体的な表現に改善しました。

モーダルの閉じるボタンを改善

WCAG 2.1.2の達成に向け、Backlogサイトのビデオライブラリページにて、動画を再生した際に表示されるモーダルに明示的な「閉じる」ボタンを追加しました。これまでもDialog要素内に閉じる機能を持つボタンはありましたが、ラベルがついておらず、フォーカスが見えないため、わかりにくい状態でした。これらの問題を改善し、より使いやすくしました。

WCAG2.1 Aの基準で試験を実施し、課題の洗い出し

Backlogサイトのトップページにて、JIS X 8341-3:2016の試験を実施し、アクセシビリティに関する課題を洗い出しました。この試験の目的は以下の3つです。

  • 明確な基準に基づいて課題を見つけ出し、改善の優先順位をはっきりさせること
  • 正式な試験を通じて、アクセシビリティに関する経験や知見をチーム内に蓄積すること
  • 将来的にWCAGへの準拠が求められた際に、必要な作業を事前に検討すること

社内での活動

WCAGの読み方勉強会を実施し、読み合わせ会をスタート

これまで行ってきたアクセシビリティガイドラインの読み合わせ会が一段落したため、今後はWCAGを読んでいくことに決定しました。早速読み合わせを始める前に「WCAGの読み方を知る必要がある!」との声を受け、WCAGの読み方を理解するための「WCAGの読み方勉強会」も開催されました。

『原則』という見出しのスライド。本文には『ガイドラインにおける大原則。4つある。2. 4. 3。』(数字の2に下線が引かれ、その下に)『2. 操作可能。UIはすべて操作できるようにする。』と書かれている。このようなスライドをチームメンバーに共有してもらいました

アクセシビリティ関連資格の取得に向けたもくもく会を開催

9月より、デジタルアクセシビリティアドバイザー(DAA)や色彩検定など、アクセシビリティ関連資格の取得に向けて、毎週30分のもくもく会を開催しています。9月には早速、DAA Basicの合格者が1名誕生しました。11月の色彩検定(UC級)に向けて取り組んでいるメンバーもいます。

社外での活動

アクセシビリティの向上の重要性についての記事を執筆

#ヌーラボ真夏のブログリレー2024の一環として、Yoshinoki(@4noki10)がアクセシビリティの向上の重要性についての記事「私の、あなたの、全ての人のためのアクセシビリティ」を執筆しました。

アクセシビリティについてよくわからないという方も、ぜひ一度読んでみてもらえると嬉しいです。

「アクセシビリティの実践と学び」というテーマのイベントに登壇

「アクセシビリティの実践と学び」というテーマで開催されたDesign Dontaku vol.4にて、榎本(@uraranbon)が登壇しました。イベントでは福岡に拠点を持つマネーフォワード、ふくおかフィナンシャルグループ、ヌーラボ、D-ZEROの4社がLTをおこなっています。

アクセシビリティの改善に取り組んだ際の個人的な経験を共有しており、登壇の内容は以下からご確認いただけます。

今後のウェブサイト課のアクセシビリティへの取り組み

この3ヶ月間も、細かな改善を重ねながら、アクセシビリティ向上への取り組みを着実に進めてきました。今後も、他チームと連携してアクセシビリティに関する情報をシェアする月1回のミーティングを継続していく予定です。また、新たに開始したWCAGの勉強会や、登壇、ブログでの発信といった新たな挑戦も継続して取り組んでいきます。

ヌーラボのウェブサイト課は、「すべての人に等しい情報を」というミッションのもと、誰もが快適に情報にアクセスできるよう、今後もアクセシビリティの向上に力を注いでいきます。

2024年11月30日に「アクセシビリティカンファレンス福岡」が開催されます!

2024年11月30日(土)、天神警固神社の社務所ビル貸会議室にて「アクセシビリティカンファレンス福岡」が開催されます!
タイムテーブルや登壇者、スポンサー情報については、公式サイトおよび公式X(旧Twitter)でご確認いただけます。お申し込みはconnpassから可能です。

お近くにお住まいの方はぜひご参加ください。ヌーラボは、おやつスポンサーとして参加予定です。遠方の方は、YouTubeでのライブ配信を通してオンラインでご参加いただけます。

今年のテーマは「つぎはどうする」。一緒に未来への行動を考える日にしましょう!

開発メンバー募集中

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる