ラベルをレベルアップする

May 08 2023
謙虚な <label>。それは一般的です。

謙虚な人<label>。それは一般的です。それは明白です。それは基本的なことです。それはありふれたことだ。表面的には、特別なことは何もありません。多くの場合、テキストのスタイルを設定するための CSS の単なるターゲットとして使用されます。これ以上何を知る必要があるでしょうか? フォームフィールドの上でこの小さな奴を叩くと、JavaScript for CSS に戻ってページをダイナミックでエキサイティングなものにすることができますよね?

おそらくそうではありません。

前文

HTTP サーバーにアクセスできるほぼすべての a11y 専門家が、ラベルについて書いた金額はかなりの額になると思います。これを死馬に勝つと言うのは簡単でしょうが、2023 年の WebAIM ミリオン レポートによると、インターネット上の上位 100 万のホームページのうち、96.3% で少なくとも 1 つのアクセシビリティ エラーが検出され、そのうち 45.9% のページでアクセシビリティ エラーが検出されました。フォームラベルにエラーが含まれていました。これは、色のコントラストが不十分であること、代替テキストのない画像、アクセシブルな名前のないリンクに次いで 4 番目に一般的なアクセシビリティの問題となります。どちらの数値も過去 5 年間で減少傾向にありますが、数値を下げるためにはまだ多くの取り組みが必要です。この投稿で少なくとも 1 人が「おお、知らなかった」と思ってくれたら、これは大成功だと思います

ラベルの目的

Web アプリケーションの枠組みにおけるラベルについて考えるとき、おそらく、テキスト フィールド、ラジオ ボタン、チェック ボックスなどの要素に隣接するフォームを想像するでしょう。これらは、名前や日付、または他の選択が表すものなどの期待値を伝えます。視覚的には理にかなっていますが、さらに多くのことが関係しています。

なぜそれが重要なのか

「ユーザー」という一枚岩の用語を剥がすとき、ユーザーは人間であることを理解する必要があります。人々はユニークかつ複雑であるため、ペースの速いソフトウェア開発の世界では迷子になる可能性があります。包括性を念頭に置いてデザインするには、精神的な変化が必要です。「平均的な」ユーザーだけをターゲットとして想像すると、一部の人々がアプリケーションから除外される危険があります。障害のある人々はこの排除の矢面に立たされていますが、必ずしもそうである必要はありません。

そして良いニュース: アクセシブルなラベルは簡単です。これらは、チームが達成できる最も簡単なアクセシビリティの「勝利」の 1 つであると私は主張します。何がラベルをアクセスしやすくするのか、そして同様に重要なことですが、使いやすくするものなのかを詳しく見ていきましょう。

アクセシブルにしましょう

異なる状況にある 2 人の人を想像してください。

ジェレミーは41歳です。彼は地元の銀行で財務アドバイザーとして働いています。彼は水泳、ハイキング、友人や家族とのキャンプが大好きです。ジェレミーも、30代前半の脳手術による合併症のせいで失明している。Jeremy は、仕事中だけでなく余暇にもスクリーン リーダーを使用してテクノロジーを操作しています。

ヴァイオレットは73歳。彼女は弁護士として成功した後、退職した。引退後は、歴史的名所や東ヨーロッパからの移民だった両親の故郷を訪ねるために世界中を旅している。彼女は最近、孫の近くに住むために引っ越しました。ヴァイオレットは両手に関節炎を患っています。彼女は、不必要な苦痛を避けるために、音声認識ソフトウェアを使用してコンピュータや電話を操作することを好みます。

Jeremy と Violet はどちらも同じ Web ページ、つまり医療提供者の Web サイトにある患者ポータルを使用しようとしています。このページでは、医療費の支払い、個人情報の更新、予約などを行うことができます。

ジェレミーの問題:

「医療費の支払いにクレジット カードを使用する必要がありますが、支払いページのフィールドが何なのかわかりません。」

ラベルがフォーム要素に正しく関連付けられていない場合、スクリーン リーダーは要素のタイプのみを読み取り、近くのテキストは読み上げません。

ヴァイオレットの問題:

「ファイルのアドレスを変更する必要があるのですが、コンピューターに何を伝えても、[保存] ボタンがクリックされません。」

上記のスクリーン リーダーの例と同様、音声認識ソフトウェアも適切なラベルの関連付けに依存して、フォーム フィールドとボタンを移動し、アクティブにします。

それは正しい。これらの問題は両方とも、フォーム要素のラベルが不適切であることが原因で発生します。通常、これらの結果を生成するコードをいくつか見てみましょう。

Jeremy のコードの問題

支払いフォームを調べてみましょう。

<form>
  <label>Card Number</label>
  <input type=”text” id=”card-number” />
  <label>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

属性for_

最も簡単な方法は、for属性を使用することです。これは要素のネイティブ属性です<label>。その期待値は、idターゲットのフォーム要素の属性です。idこの例では、 、 、 のcard-number3expiration-dateつの入力がありますsecurity-codeforラベルに属性を追加し、その値を対応する入力 ID に設定できます。それがどのようなものかを見てみましょう。

<form>
  <label for=”card-number”>Card Number</label>
  <input type=”text” id=”card-number” />
  <label for=”expiration-date”>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label for=”security-code”>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

留意すべき事項

  • 属性は入力ではなく要素for上にある必要があります。<label>
  • input 要素には属性が必要ですid。に<label>はまだ独自のid属性がある可能性がありますが、ここでは関係ありません。
  • ラベルと入力の関係は 1 対 1 です。

ARIA の使用

ARIA は、要素の名前、状態、役割を支援技術に通知するために要素に追加できる強力な属性のセットです。この例では、aria-labelledby 属性を使用してラベルを入力に関連付けることができます。それがどのように機能するかを見てみましょう。

<form>
  <label id="card-number-label">Card Number</label>
  <input type="text" aria-labelledby="card-number-label" />
  <label id="expiration-date-label">Expiration Date</label>
  <input type="text" aria-labelledby="expiration-date-label"/>
  <label id="security-code-label">Security Code</label>
  <input type="text" aria-labelledby="security-code-label"/>
  <button type="submit" id="submit">Submit</button>
</form>

<form>
 <label id=”card-number-label”>Card Number</label>
 <label id=”card-number-instructions”>Enter the 16 digit number on the front of your card</label>
 <input type=”text” id=”card-number” aria-labelledby=”card-number-label card-number-instructions”/>
 ...
</form>

Jeremy が直面していた問題を解決したので、Violet が使用しているページで何が問題になっているのかを調べてみましょう。

コードにおけるヴァイオレットの問題

ヴァイオレットが使用しているページには、連絡先情報のフォーム フィールドと、保存およびキャンセル機能を実行するツールバーのボタンが含まれています。これら 2 つのボタンはアイコンのみで表され、テキスト ラベルは表示されません。これ自体は改善できますが、現実の世界ではよくある状況です。

問題のあるコードは次のとおりです。

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only”></button>
  <button type=”button” id=”cancel” class=”icon-only”></button>
</form>

ARIA の使用 (もう一度)

このaria-label属性を使用すると、ほとんどの HTML 要素にアクセス可能な名前を直接提供できます。その値は、支援テクノロジーに公開されるテキストです。スクリーン リーダーが aria-label テキストを読み上げ、音声認識ソフトウェア ユーザーがそれを使用して要素を操作するため、これは人間の言語である必要があります。

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only” aria-label=”Save”></button>
  <button type=”button” id=”cancel” class=”icon-only” aria-label=”Cancel”></button>
</form>

aria-label には多くのニュアンスがありますが、それらは別の記事にする価値があります。簡単な例では、これで十分です。aria-labelledbyaria-label when を使いすぎないように注意してください or would do the same job.

今すぐアクセス可能です!

これらの簡単な変更により、ジェレミーとヴァイオレットの両方が、それぞれのページで実行するように設定したタスクを完了できます。これらの技術を使用することで、フォーム上の要素が支援技術によって適切に識別され、支援技術を使用する人々に情報が確実に伝達されるようになりました。Accessible™ ステッカーを貼って、その作業は終了です。

…しかし、もっと改善できるはずです

WCAG 2.1 の成功基準の横にあるチェックボックスにチェックを入れるだけで終わってはいけません。WCAG では、障害のある人が Web を利用する際の障壁を取り除くためのベースラインを設定していますが、単に「使える」だけではなく、常に「快適に使える」を目指すべきです。アクセシビリティと使いやすさは密接に関連しており、フォームに入力するユーザーのエクスペリエンスを大幅に向上させるために導入できる非常に簡単なテクニックがあります。

私たちの新しいペルソナ

「アクセシビリティ」という言葉を聞いてすぐには思い浮かばない人のことを想像してみましょう。

ミアはセントラルフロリダ大学の新入生で、天体物理学の学位を取得しています。彼女はとても聡明な学生で、勤勉です。彼女の細部へのこだわりと鋭いファッションセンスは、友人がワードローブを更新するときに頼りになる専門家です。寮に移動して箱の開梱中に誤って利き手の人差し指をカッターで切ってしまいました。

一部の障害は一時的なものです。たとえ小さな怪我であっても、人の可動範囲が狭くなり、当たり前だと思っていた作業がかなり困難になる可能性があります。切り傷を負った指にガーゼ包帯を巻いたミアは、慣れない方法で携帯電話を使用しなければなりません。

ミアの問題

「この医師のサイトに自分の健康情報を入力する必要があるのですが、携帯電話が使いにくいため、間違ったチェックボックスをオンにし続けています。」

携帯電話のチェック ボックスやラジオ ボタンなどのフィールドを操作するのは、最も良いときでも困難な場合がありますが、一般的な怪我であっても、すぐにフラストレーションに陥る可能性があります。ミアは、健康背景を提供するために、服用している甲状腺薬の横にあるボックスにチェックを入れる必要がありますが、要素のサイズが小さいため、もう一方の手または別の指でそれを行うのは難しいことが判明しています。

ミアのコードの問題

チェックボックスを見てみましょう。一見すると、適切なラベルが関連付けられており、アクセスしやすいように見えます。しかし、もっと近づいて見てみましょう。

<form>
  <label for=”synthroid”>Synthroid</label>
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  <label for=”levothroid”>Levothroid</label>
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  <label for=”levoxyl”>Levoxyl</label>
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
</form>

フォーム コントロールに表示ラベルがある場合に、クリック可能またはタップ可能な領域 (ターゲット サイズとも呼ばれます) を増やすために利用できる非常に簡単なテクニックがあります。必要なのは、<label>要素内にフォーム コントロールを配置することだけです。フォーム コントロールが の子である場合、<label>ラベルをクリックまたはタップすると、関連付けられたフォーム フィールドがアクティブになります。ではその変化を見てみましょう。

<form>
  <label for=”synthroid”>
  Synthroid
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  </label>
  <label for=”levothroid”>
  Levothroid
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  </label>
  <label for=”levoxyl”>
  Levoxyl
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
  </label>
</form>

この特定のテクニックに関するいくつかの詳細

  • これはネイティブ要素の機能です<label>。フォーム フィールドに次のような要素をラベル付けしている場合<span>(そうすべきではありません!)、この機能は無料では入手できないため、手動で実装する必要があります。
  • この機能は、<label><要素がフォーム フィールドをラップする場合にのみ適用されます。を使用しても、aria-labelledby自動的に同じ動作が行われるわけではありません。
  • 要素<label>には属性が含まれている必要がありforidフォーム フィールドの属性と一致する必要があります。
  • 複数の入力を 1 つのラベルでラップしないでください。

出発前に

もう一人の人物に会いましょう。繰り返しになりますが、アクセシビリティを考えるときに思い浮かぶような人物ではないでしょう。

ベンは、サンフランシスコのテクノロジー系スタートアップ企業のソフトウェア アーキテクトです。彼の会社は未来のワッフルアイロンの開発に取り組んでいます。いつでも完璧にサクサク、納税にも役立ちます。彼はこのプロジェクトに夢中になっており、起きている日のほとんどを、どうしたらプロジェクトをさらに良くすることができるかを考えることに費やしています。ベンはオフィスに行く必要があるとき、バスに乗って市内へ行きます。彼には何の障害もありません。

ベンは、ブレザーをワッフル焼き器に集中させていたため、自分の診察の際にミアと同じ用紙に記入する必要があることを忘れていました。彼も携帯電話を使用してフォームに記入しています。交通状況はストップアンドゴーなので、バスは作業中に予期せぬ勢いで前に進んでしまいます。

投薬フォームフィールドのターゲットサイズが大きくなったため、Ben はフォームに簡単に記入することができます。間違ったチェックボックスをクリックしたり、間違ったラジオ ボタンをタップしたりすることを心配する必要はありません。その考えは彼の心にもよぎりません。彼はフォームを完了し、ワッフルのことを考えることに戻ることができました。

今、私たちはユニバーサルデザインをしています!!

この投稿では、単純なフォームが障害を持つ人々にとってどのように障壁となるのか、また <label> 要素を使用してそれらの障壁を取り除く方法を説明しました。また、簡単な変更によってフォームが障害のある人にもない人にも使いやすくなる様子も見てきました。これがユニバーサルデザインの本質です。障害を持つ人々のニーズを考慮することで、アプリケーションをすべての人にとってより良いものにすることができます。

読んでくれてありがとう。何か新しいことを学んだり、忘れていたかもしれないことを思い出したりしたことを願っています。