まず今日のキーワードの紹介です。 1つ目は、入力要素。ユーザーに入力をさせるためのUIコンポーネントのことです。 HTML要素でいうとinput、select、textarea,buttonなどのことです。
そして2つめはラベルです。 ラベルは「入力要素に何を入力するか」を視覚的に示す役割をします。 そして、inputなどの入力要素ではlabel要素を使ってマークアップすることで 同じ情報をスクリーンリーダーを始めとした支援技術に伝えることができます。
はい ではなぜラベルが大事なのか？という話をします 今日ここにいるみなさんはご存知だと思いますが。 まず１つ目、ユーザーが迷わず入力できること。ユーザビリティに関わる部分。まあアクセシビリティにも関わりますね ２つめ スクリーンリーダーなどの使用時にも情報が正しく伝わる。アクセシビリティ ３つめ、こちら意外と普段意識しないかもしれませんが、もしラベルが適切に設定されていないためにユーザーが本来送信しなくてよい・すべきでない情報を送信するというのは情報セキュリティのリスクといえます。というわけで、そういった観点でもラベルって重要なんですね。
はいここで、私が見た！ラベルがないがちなUIの第一位を発表します。ジャジャン
第一位はSelect要素です。特にSelectを利用したプルダウンメニューでよく省略されることがあります。 原因としては、これ単純にドロップダウンメニューみたいな使い方がされてしまうんですね。まあ確かに似てはいるのですが。 このケースではほとんどこの選択した情報はサーバーに送信されたりしないんですね。表示切替とかに使われたりします。 なんですが、Selectは入力要素なので、ラベルがないと「ラベルのない"入力要素"」となってしまいますので 原則としてはNGです。 まあそして実際、これ何を選択するのSelectなのか、プルダウンの中身 選択肢を見るまでは特定しにくいですよね。
では１つ目のまとめです。入力要素には原則としてラベルが必要です。これはWCAGだと3.3.2で、ユーザーに入力の期待値がわかるようにしろーというのがあります。 また、label要素を使えば、同じ内容がaccessible nameとしても提供される。とても便利なので絶対label要素使いましょうね。
はい。ラベルないがちなUIの紹介は第一位のみで、次の話題にいきます。次ラベルがないけどアクセシブルネームが漏れるケースの紹介です。
ではアクセシブルネーム漏れちゃうあるあるとして、分割された入力欄の話をします。
inputを分割しなければ、このような悩みは発生しないのですが どうしても分割が必要な場合は、aria-labelなどを使ってそれぞれのinputにaccessible nameを付与する必要があります。このとき見た目上のラベルがaccessible nameにも含まれるように設定してください。 これはWCAGの2.5.3で含めてね♪となっています。
では本日のまとめ2です アクセシブルネームは各input事に必要なので、分割inpuのときは気をつけてください。あとラベルに入っているテキストを含めてくださいというのは、こちらもWCAGの達成基準にありますので、後ほど見てみてください。 分割のinputを使わなければ、この悩みは不要になります。。
そして、ちょっと番外編で最近SmartHRでよく見るUIを3つ紹介します。1つめが期間の入力です。波ダッシュで区切って期間の開始と終了を入力することを表しています。 ラベルは「入社年月日」となっていて、２つのinputには個別のラベルはついていません。この場合はaria-labelで開始日・終了日などのアクセシブルネームを提供します。
こちらは範囲条件の入力UIです。 入力欄歳以上 入力欄歳未満という入力です。この場合はinputに「下限値」「上限値」などのAccessible Nameをつけることができます。 また、この入力ででてくる「以上・未満」などの言葉は、英語など他の言語では挿入すべき位置が数字の前だったり後だったりして、いろいろ考慮が必要になることにも注意してください。
そして最後に、文章型の条件入力です。 このUIの場合、条件1というテキストが全体のラベルの役割をしていそうですが、各入力欄にはどんなアクセシブルネームをつけるのがよいでしょうか？ このスクリーンショットの場合だと1つ目が条件の分類みたいなものなので「分類」、2つ目がマーケティング部とはいっているので「部署」3つ目が「あり」なので多分「有無」が固有の名前(アクセシブルネーム)かなーと思います。 これは今このスクショに値が入っているので、推測から個別のアクセシブルネームを考えてみましたが 値が空だったら、多分検討が難しかったと思います。 また可視ラベルをつけるのは、これは非常に難しいですね。今のUIのままラベルを入力欄の上部につける みたいにすると、視覚的にゴチャゴチャしすぎて見えにくかったり入力に集中できなくなってしまう可能性があると思います。