Relicのアクセシブルなる飛躍

こんにちは、株式会社Relicのエンジニアをしています斉藤です。
アクセシビリティ改善一歩目の記事を出してからだいぶ日が経ってしまいました。。。
コーポレイトサイトのアクセシビリティ改善活動の発信ができずにいましたが、さらなる改善についてお伝えしようと思います。

「改善一歩目」の記事の続きになるので、よかったらそちらもご覧いただけたら嬉しいです。

この記事を読んでくださる方へ

• この記事では「アクセシビリティとは何か？」については発信いたしません。「アクセシビリティ改善ってこんなことをするんだ」と興味をもってくれると嬉しいです。

• しばしばアクセシビリティ関連の専門用語が出てくることがあります。 「ちょっと難しいな」と思ったらごめんなさい。
  詳細リンクも載せますので合わせて読んでもらえると嬉しいです。

今まで改善された項目のおさらい

事業内容 | 株式会社Relic(レリック)

Relicのコーポレイトサイトのグローバルナビゲーションの改修に着手している中、以下の達成基準については既にクリアしました。
※ぺージごとで段階的に改修をしているため、一部ページが対象となります。

• 1.4.1 色の使用 ：達成基準レベルA

• 2.4.7 フォーカスの可視化 ：達成基準レベルAA

• 2.4.8 現在位置 ：達成基準レベルAAA

改善された達成基準

1.4.3 コントラスト (最低限) ：達成基準レベルAA

https://waic.jp/docs/WCAG21/#contrast-minimum

以前は、マウスオーバー時のCSSのopacity指定の影響でカラーコントラスト比（4.5:1）が担保できていませんでした。
その指定色の見直しをして解決しました。

また、どの色でも透過度でカラーコントラスト比を保つ補償ができないため、マウスオーバー時に透過度を変化させる表現は、全体的に撤回する方向になりました。

2.1.1 キーボード：達成基準レベルA

https://waic.jp/docs/WCAG21/#keyboard

マウスオーバー時で下層メニューが展開されるメニューです。
今まではマウス操作のみ操作が可能でしたが、PCとモバイルレイアウト共にキーボード操作ができるようになりました。

「会社情報」にマウスを当てると下層メニューがー表示される

「会社情報」メニューの青い枠線がフォーカスインジケーター

2.4.3 フォーカス順序：達成基準レベルA

https://waic.jp/docs/WCAG21/#focus-order

モバイルレイアウトのメニューは展開ボタンをタップすることでメニューが開閉するUIです。
HTMLの構造を見直し、メニュー開閉後もフォーカスの順序が自然になるよう改善しました。

以下は展開ボタンのコードの一例です。
React Ariaというアクセシビリティに特化したReact Hooksを提供しているAdobe製のライブラリを起用しており、コンポーネントによってはWAI-ARIAの付与はライブラリ側でやってくれる箇所もあります。

<button
  class="euf4raf0 css-r5hxpl e7pwb840"
  type="button"
  aria-label="カテゴリーメニューを開ける"
  aria-expanded="false"
  aria-controls="react-aria7651595557-26"
  aria-pressed="false"
>
  <svg ...省略...>
</button>

こだわりの改善

2.4.7 フォーカスの可視化

Web Content Accessibility Guidelines (WCAG) 2.1

前回の改善時にフォーカスの可視化は既にできていたのですが、フォーカスインジケーターのスタイルを全ブラウザ共通にするために、CSSでカスタマイズ指定しました。

サイト全体のカラーを起用して、コントラスト比をデザイナーさんが工夫してくれたのですが、いざ実装すると結構大変でした。

box-shadow: #2340b7 0 0 0 2px inset, #ffffff 0 0 0 4px inset;

上記スタイルのようにbox-shadowプロパティを起用しましたが、元々box-shadowプロパティがついている要素の場合は、フォーカス時に既存スタイルが消えてしまうため、この指定方法は不完全だと感じています😔

フォーカスインジケーターの青枠がくっきり見えるように、白枠を隣接させた工夫をプラス

そんなことをしなくてもoutlineプロパティでスタイルすれば良いのでは？とお思いかもしれませんが、デザインを再現しようとするとSafariで言うことを聞いてくれなかったりします。涙　実装とデザインの両立は難しいですね。
（これだけでも一記事書けるぐらいの検証はしました😅）

フォーカスインジケーターのカスタマイズはなるべくせず、ブラウザデフォルトがなんだかんだ良さそうだ、というのが今の私の感想です。

他コンポーネントの改善

グローバルナビゲーション1つとってもアクセシビリティ改善ポイントが多く大変でしたが、他のコンポーネントも並行して実装は進めていました。

• パンくずナビゲーション

• カルーセル

• アコーディオン

• モーダル

• 表示非表示が切り替わる展開要素

• アニメーション低減の考慮

など…

「あとはコンポーネントを使い回していけばページごとにアクセシビリティが改善されていくぞ！！」・・・そんな未来を想定していますが、ページ実装を進めていると、現実はそううまくはいきませんね🥺

コンポーネントの組み合わせ方や、マークアップの少しの差でアクセシビリティは損なわれてしまいます。
もちろん静的解析ツールや自動テストでカバーする試みもしようとしていますが、全てを網羅することはできません。（もちろんこれらの仕組みは無駄ではないです）この点が難しいところです。

ふりかえり

改善活動がスタートして約一年経ち、スローペースではありながらもアクセシビリティに考慮できた実装は着実に進められています。
改善箇所まだまだ残っていますが、これまでの経験は大きいな一歩であり飛躍と感じています！

アクセシビリティの改善について他にも語りたいことはありますが、また改めて記事にしたいと思います！乞うご期待🙌

長文となりましたが、読んでくださりありがとうございました。