Webアクセシビリティにおける「フォームの改善」で重要なポイント／「Webアプリケーションアクセシビリティ──今日から始める現場からの改善」を読んで
はじめに
本記事は、「Webアプリケーションアクセシビリティ──今日から始める現場からの改善」という書籍を読んで、自分自身がアクセシビリティの知識を身に付け、実務でも有効に取り入れていくために、重要だと感じた部分を引用したものです。
書籍では、すぐに現場でも取り入れられそうな具体的なTipsが数多く、とても分かりやすく盛り込まれています。
この記事では、第３章の「フォームの改善」について抜粋しています。
フォームの改善(第３章より)
フォームコントロールやグループに対する「ラベル」と「説明」を取り扱う際に注意すべきこと
1.BAD事例
プレースホルダーをラベルで表している
これより生じる問題点
- プレースホルダーの色が薄く視認しづらい
- プレースホルダーとフォームコントロールの値との区別がつかない
- フォームコントロールに値を入力した時にプレースホルダーの値が見えなくなってしまう
1.改善事例
ラベルや説明をプレースホルダーの外に配置する
フォームコントロールの外に配置することで、ラベルの内容を覚えておく必要がなくなり、何を入力するべきか常に確認できる。
また、プレースホルダーを入力済みの値と誤解する恐れもなくなる。
さらに、label要素を利用して、ラベルとフォームコントロールを関連づければ、ラベルをクリックしてフォームコントロールにフォーカスできる。
※HTML Living Standardでも、プレースホルダーはlabel要素の代替えとしては使用すべきでないとされており、また、「短いヒント」を表すとされている。
2.BAD事例
ラベルと説明の位置が分かりづらい
ラベルや説明の配置がわかりづらいため、ラベルや説明とフォームコントロールの関係性がわかりづらい。
テキストを入力する際に”説明”が画面に収まらないことがあるため、ユーザーは説明の存在に気づかずに入力を始めてしまうことがある。
また、項目数が多いラジオボタンやチェックボックスが横に並べられ、かつ接近している場合では、グループ全体を見渡すのが難しく、ラベルとフォームコントロールの関係性を誤解しやすい。
2.改善事例
フォームコントロール・グループのラベルと説明を分かりやすく配置する
基本的に、ラベルと説明は共にフォームコントロール・グループの前に配置する。
項目数の多いラジオボタンやチェックボックスでは、項目を縦に並べて、ラジオボタンやチェックボックスのラベルを整列させるのが良い。難しく横に並べる場合は、十分な余白をとる。
3.BAD事例
フォームコントロールにラベルと説明が関連づけられてない
<label for="username">ユーザー名</label><span>(半角英数字で入力)</span>
<input type="text" id="username">
スクリーンリーダーはフォームコントロールにフォーカスすると、フォームコントロールに関連付けられたラベルと説明を読み上げる。ラベルのみが関連付けられていると、スクリーンリーダーは説明を読み上げないため、スクリーンリーダーのユーザーは入力前に説明の存在に気づかない場合がある。
3.改善事例
フォームコントロールにラベルと説明が関連づける
<label for="username">ユーザー名<span>(半角英数字で入力)</span></label>
<input type="text" id="username">
label要素を使い、フォームコントロールにラベルだけでなく説明も関連づける。
WAI-ARIAを使った事例(※label要素が使えない場合にのみ)
label要素が使えない場合・・・さまざまなフォームコントロールのラベルにdiv要素やspan要素を使用していて、label要素に変更するには影響範囲が大きすぎる場合など
<span id="username-label">ユーザー名</span>
<span id="username-description">(半角英数字で入力)</span>
<input type="text" aria-labelledby="username-label" aria-describedby="username-description">
フォームコントロールに不可視のラベルをつける
ラベルがなくてもフォームコントロールに入力するべき値が自明な場合(検索フォームなど)
不可視ラベルは濫用すべきでは無い。
良い例：title属性を使う
<input type="search" title="検索キーワード"><button>検索</button>
良い例：aria-title属性を使う
<input type="search" aria-title="検索キーワード"><button>検索</button>
4.BAD事例
グループにラベルと説明が関連づけられてない
グループにもラベルと説明を関連づけることが必要な場合がある。特にフォームコントロールのラベルだけでは何を入力すべきか特定できず、グループのラベルと組み合わせることが必要な場合。
以下の例ではグループのラベルと説明が関連付けられていない。
<div>
<span>商品(どれか１つを選択)</span>
<label><input type="radio" name="product-color">青</label>
<label><input type="radio" name="product-color">緑</label>
<label><input type="radio" name="product-color">赤</label>
<label><input type="radio" name="product-color">黄</label>
</div>
<div>
<span>興味のあるトピック(3つまで選択)</span>
<label><input type="checkbox" name="topic">政治</label>
<label><input type="checkbox" name="topic">経済</label>
<label><input type="checkbox" name="topic">国際</label>
<label><input type="checkbox" name="topic">科学</label>
</div>
上記の内容では、「青 ラジオボタン」としか読み上げられないため、スクリーンリーダーユーザーは、グループがあることに気づかない場合がある。
4.改善事例
グループにラベルと説明を関連づける
グループ全体をfieldset要素で囲み、グループのラベルと説明をlegend要素に含める。
<fieldset>
<legend>商品(どれか１つを選択)</legend>
<label><input type="radio" name="product-color">青</label>
<label><input type="radio" name="product-color">緑</label>
<label><input type="radio" name="product-color">赤</label>
<label><input type="radio" name="product-color">黄</label>
</fieldset>
<fieldset>
<legend>興味のあるトピック(3つまで選択)</legend>
<label><input type="checkbox" name="topic">政治</label>
<label><input type="checkbox" name="topic">経済</label>
<label><input type="checkbox" name="topic">国際</label>
<label><input type="checkbox" name="topic">科学</label>
</fieldset>
WAI-ARIAを使った事例
role属性を使うことでグループであることを表現できる。role="group"をつけると、要素がグループであることを示す。ラジオボタンのグループである場合はrole="radiogroup"でも可能。
<div id="radiogroup-label">商品の色</div>
<div id="radiogroup-description">(どれか１つを選択)</div>
<div role="radiogroup" aria-labelledby="radiogroup-label" aria-describedby="radiogroup-description">
<label><input type="radio" name="product-color">青</label>
<label><input type="radio" name="product-color">緑</label>
<label><input type="radio" name="product-color">赤</label>
<label><input type="radio" name="product-color">黄</label>
</div>
<div id="group-label">興味のあるトピック</div>
<div id="group-description">(３つまで選択)</div>
<div role="group" aria-labelledby="group-label" aria-describedby="group-description">
<label><input type="checkbox" name="topic">政治</label>
<label><input type="checkbox" name="topic">経済</label>
<label><input type="checkbox" name="topic">国際</label>
<label><input type="checkbox" name="topic">科学</label>
</div>
5.BAD事例
入力必須の説明が伝わらない
5.改善事例
入力必須をテキストで説明する
-
入力必須であることを示すために「(必須)」と書かれている
-
フォームの冒頭で「*」が入力必須であることを示している
まとめ
デザイン時のチェック
- ラベルはフォームコントロールの外に配置する
- 長い説明や重要な説明はフォームコントロールの外に配置する
- ラベルと説明がどのフォームコントロール・グループに関係しているかわかりやすく配置する
- 必須入力であることをテキストで説明する
実装時のチェック
- フォームコントロールにラベルと説明を関連づけるためにlabel要素を使う。またはaria-labelledby属性・aria-describedby属性を使う。
- フォームコントロールに不可視のラベルを付けるためにtitle属性またはaria-label属性を使う
- フォームコントロールのグループにラベルと説明を関連づけるためにlegend要素を使う。またはaria-labelledby属性・aria-describedby属性を使う
- 入力必須のフォームコントロールにrequired属性かaria-required属性を使う
感想
私は現在の会社に入るまで、アクセシビリティの観点まで深く考えて実装できた経験はほとんどありませんでした。
デザイナーやコーダー、エンジニアは他部署でそれぞれ役割が異なり、関わる工程が分かれていて、コミュニケーションにも垣根があるように感じていました。
ですが書籍を読み、それぞれの職能ごとに役割を生かしながら、協力して作り上げて行くことが品質を高める点においてとても重要であることだと再認識しました。
書籍では、アクセシビリティの具体例だけではなく、どうすればアクセシビリティを組織内に浸透させることができるかについても深く考察されています。
アクセシビリティを強化するためには、事前にどの役割がどの段階で何をするべきかを定義し、連携し合える組織体制を作る必要があります。
そのためにも、情報の共有やキャッチアップなどを行いながら、役割ごとの垣根を超えて連携し、改善の実績を積んでいくことが大切だと思いました。
参考
著者の伊原力也さんは株式会社freeeで、アクセシビリティを社内に導入し改善した実績など、実務での取り組みを記事で紹介してくださっています。とても参考になる部分が多く、良い記事でした。
2022年、freeeのアクセシビリティを振り返る