Blog

社内勉強会で出題した「アクセシビリティに考慮したツールバーとテキストボックス作成課題」の話

この記事は、ニフティグループ Advent Calendar 2022 16日目の記事です。

初めに

最近、アニメを見る欲が復活した会員システムグループの2年目社員の関です。
数ヶ月前に以下のブログ記事を書きました。
主催した社内勉強会の課題でアクセシビリティ的に優れているTODOリストの課題を出した話
上記はアクセシビリティ的に良いTODOリストを勉強会の課題として出したという記事でした。
その勉強会の最終課題としてアクセシビリティに優れたツールバーの課題を出したので今回はその話をしようと思います。
勉強会については前回のブログ記事に記述してあるのでそちらを確認ください。

勉強会の最終課題の概要

早速、勉強会の最終課題について説明します。
課題の概要は以下になります。
  • 課題
    • アクセシブルなツールバーとリッチテキストボックスを作成する
  • 要件
    以下の要件を満たすツールバーとテキストボックスを作成してください
    • 選択した文字の色を変えるボタン(任意の色で良い)
    • 選択した文字を太文字に変更するボタン
    • 選択した文字をコピーするボタン
    • 文字をペーストするボタン
    • 選択した文字をカットするボタン
  • イメージ
    勉強会の最終課題のイメージ画像。ツールバーとテキストボックスの画像がある
  • その他
    • React、Vue、Svelte、Solid.jsなどのライブラリは使っても良いが、React-modalなどのライブラリは使わずに自分で実装を行ってください
上記が課題の概要となります。
このようなツールバーはGitHubのIssueのテキストボックスやNotionなど多数のウェブアプリケーションで使用されています。
一方で、さまざまなユーザに使いやすいように作るにはさまざまな工夫が必要になります。
それではこの課題をどのようにアクセシブルに作成するかを見ていきます。

アクセシビリティの観点から気をつけるべき点

さて上記の課題に対して、どのようなことを気をつければ良いのかを以下で述べます。

Toolbarとして認識されるようにHTMLを作成する

ツールバーはHTML要素としては存在していません。そのため、WAI-ARIAなどの技術を使用してToolbarとして認識されるようにHTMLを作成する必要があります。
具体的には以下を満たすように作成すると良いです。

ToolbarのRole要素が入っている

以下のようにrole要素を使用して記述を行うことで、ブラウザにツールバーであることを認知してもらい、それを使用者に伝えることができます。

Toolbarにはaria-labelによってそのツールバーの意味が付与されている

そのツールが何をするものなのか、支援ツールを介して使用者に伝えることができます。
例えば、以下の例ではtoolGroupごとにラベルを指定しています。

Toolbarにaria-controlsで操作対象が指定されている

そのツールバーがどのコンテンツを操作するものなのか、ブラウザに伝えるとそれが支援技術(VoiceOverなど)に伝わり、多くのユーザにも使いやすいツールバーになります。

toolbar内のボタンはbutton要素で正しく記述されている

button要素を使用することで、そのツール要素がボタン操作できることをブラウザに伝えることができます。こうすることで、さまざまなユーザがボタンの認識がしやすくなり、ツールバーを使いやすくなります。
以上のようにツールバーを作成することで、支援技術がツールバーをツールバーとして認識するようにHTMLを作成することができます。
操作対象などを指定することで、音声でWebページを操作するユーザやキーボード操作するユーザにもツールバーの操作がしやすいようにすることが可能になります。

キーボード操作

HTMLとWAI-ARIAを使用してWebページを構築するだけではなく、JavaScriptなどを使ってキーボード操作しやすいようにするのも重要です。
キーボード操作を行う一定数のユーザはTabで操作を行いますが、ツールバー要素全てをTabでフォーカス可能にすると辿り着きたい要素まで時間がかかってしまいます。
そのため、矢印でツールバーの要素を操作できるようにし、タブではツールバーの前後の要素に移動するようになどを実装するとキーボードで操作するユーザにも使いやすい作りになります。
実際に作成する操作は以下になります。
  • HOMEを押すとToolbarの一番初めのToolに移動する
  • Endを押すとToolbarの最後のToolに移動する
  • 左矢印を押すと左のToolに移動する
  • 右矢印を押すと右のToolに移動する
  • ツールバーに戻ると前にフォーカスがあった場所にフォーカスされる
  • 最初の場合は左で最後に、最後の場合は右で最初にフォーカスが移る
実際の実装は以下のようになります。
changeToolでイベントを受け取り、イベントの内容に合わせてmoveFocus関数を使用してフォーカスを移動します。
moveFocus関数内ではchangeTabindexという関数を読んでおり、changeTabindex関数がDOM要素のtabindexを変更することでフォーカスを受け取れる対象を操作しています。
tabindexとは

tabindexは要素が入力フォーカスを持てることとキーボードナビゲーションに加わるかどうかを指定できるHTMLのグローバル属性です
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/tabindex
こうすることで、ユーザがツールバーの外に移動した後にツールバーに戻ってきたときに、前操作していたボタンにフォーカスが当たるようになります。

音声で伝える

音声を使用してウェブ操作をするユーザがツールバーを使用するために、アラートなどを使用して操作の内容を伝えることは重要です。
例えば以下の実装のようにすることでカット操作などをユーザに伝えることが可能です。

様々な色覚特性に適応した配色にする

筆者である私は色弱持ちですが、色のコントラストがはっきりしていないと色が正しく認識できないことが本当に多いです。
私のような色覚に障害がある方々のために色のコントラストをはっきりさせることはとても重要です。
Googleの開発者ツールを使用すると以下のようにコントラストの確認が可能です。
Google拡張機能の画像。
拡張機能による吹き出し内にアクセシビリティという項目があり、その中でコントラストを確認できる。

操作の可不可を伝える

ユーザが操作に対して可能か不可能かを認知できるように、ツールバーにDisable属性を設けて押せないようにすると親切です。また、CSSでそのことが見分けがつくように色の変更を行います。
isDisabledなどを用意してHTMLのプロパティを書き換え、操作が可能かどうかを切り替えます。また、こうすることで音声で操作をしているユーザにも操作が不可能かどうかを伝えることができます。
操作不可になっているボタンの画像。操作可能なボタンに比べてコントラストが
以下はVueで行う例です。属性要素を状態として保持しておきます。
次に以下のような関数を用意して操作します。
上記の関数では
  1. クリップボードにテキストがない場合はペーストボタンをdisableにする
  2. 文字が選択されていないときはカットとコピーボタンをdisableにする
という二つの処理を行なっています。

tooltipの表示

ツールバーの要素はアイコンで作成されていますが、アイコンだけだとユーザの文化の違いや慣れの違いなどから意味がわからない可能性があります。そのため、操作名を表示するようにすることでツールバーのボタン操作が文字でわかるようにすると良いです。
ボタンにツールチップが出ている画像。ペーストのボタンの上にペーストするというツールチップが表示されている。
ツールチップは以下のようにspan要素などでHTMLで記述し、CSSでフォーカス時などに表示されるようにします。

まとめ

アクセスフルなツールバーとリッチテキストボックスを作成するときに気をつけなければいけない点を紹介しました。 これ以外にも
  • スマートフォンや低スペックなPCなどのユーザの機器の違い
  • 言語の違い
  • 文化の違い
などなど、使うユーザによって、もっと考慮する点はあるように思えます。
これからもアクセシビリティについてもっと学んで、全てのユーザが使いやすいシステムを構築できるようなエンジニアになれるように頑張っていきたいです。


明日は、@takenokoroidさんの記事です。
お楽しみに!!

We are hiring!

ニフティでは、さまざまなプロダクトへ挑戦するエンジニアを絶賛募集中です!
ご興味のある方は以下の採用サイトよりお気軽にご連絡ください! Tech TalkやMeetUpも開催しております!
こちらもお気軽にご応募ください!