本文へ


aria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果

OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。

  • Windows7/NVDA2015.1jp/Firefox38.0.5
  • Windows7/PC-Talker7/Internet Explorer11
  • iOS 8.3/VoiceOver/Safari
  • Android4.4.2/TalkBack4.2.0.8/Sブラウザ
HTMLの記述 NVDA PC-Talker VoiceOver TalkBack
<label id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" />
<span id="description--email">半角英数で入力してください。</span>
メールアドレス※
エディット
オートコンプリート
半角英数で入力してください。
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
半角英数で入力してください。
メールアドレス
エディットテキスト
半角英数で入力してください。
<label>メールアドレス ※</label>
<input type="text" id="email" name="email" aria-describedby="description--email" />
<span id="description--email">半角英数で入力してください。</span>
エディット
オートコンプリート
半角英数で入力してください。
空行
メールアドレス※の文字入力 半角英数で入力してください。
テキストフィールド
エディットテキスト
半角英数で入力してください。
<label id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="label--email" />
<span>半角英数で入力してください。</span>
メールアドレス※
エディット
オートコンプリート空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
メールアドレス
エディットテキスト
<label id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-describedby="label--email description--email" />
<span id="description--email">半角英数で入力してください。</span>
エディット
オートコンプリート
メールアドレス※
半角英数で入力してください
。空行
メールアドレス※の文字入力 メールアドレス※
半角英数で入力してください。
テキストフィールド
エディットテキスト
メールアドレス
半角英数で入力してください。
<label id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="label--email description--email" />
<span id="description--email">半角英数で入力してください。</span>
メールアドレス※
半角英数で入力してください。
エディット
オートコンプリート
空行
メールアドレス※の文字入力 メールアドレス※
半角英数で入力してください。
テキストフィールド
メールアドレス
半角英数で入力してください。
エディットテキスト
<label id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-describedby="description--email label--email" />
<span id="description--email">半角英数で入力してください。</span>
エディット
オートコンプリート
半角英数で入力してください。
メールアドレス※
空行
メールアドレス※の文字入力 半角英数で入力してください。
メールアドレス※
テキストフィールド
エディットテキスト
半角英数で入力してください。
メールアドレス
<label id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="description--email label--email" />
<span id="description--email">半角英数で入力してください。</span>
半角英数で入力してください。
メールアドレス※
エディット
オートコンプリート
空行
メールアドレス※の文字入力 半角英数で入力してください。
メールアドレス※
テキストフィールド
半角英数で入力してください。
メールアドレス
エディットテキスト
<label for="email" id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" />
<span id="description--email">半角英数で入力してください。</span>
メールアドレス※
エディット
オートコンプリート
半角英数で入力してください。
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
半角英数で入力してください。
メールアドレス
エディットテキスト
半角英数で入力してください。
<label for="email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-describedby="description--email" />
<span id="description--email">半角英数で入力してください。</span>
メールアドレス※
エディット
オートコンプリート
半角英数で入力してください。
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
半角英数で入力してください。
メールアドレス
エディットテキスト
半角英数で入力してください。
<label for="email" id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="label--email" />
<span>半角英数で入力してください。</span>
メールアドレス※
エディット
オートコンプリート
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
メールアドレス
エディットテキスト
<label for="email" id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-describedby="label--email description--email" />
<span id="description--email">半角英数で入力してください。</span>
メールアドレス※
エディット
オートコンプリート
メールアドレス※
半角英数で入力してください。
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
メールアドレス※
半角英数で入力してください。
メールアドレス
エディットテキスト
メールアドレス
半角英数で入力してください。
<label for="email" id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="label--email description--email" />
<span id="description--email">半角英数で入力してください。</span>
メールアドレス※
半角英数で入力してください。
エディット
オートコンプリート
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
メールアドレス
半角英数で入力してください。
エディットテキスト
<label for="email" id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-describedby="description--email label--email" />
<span id="description--email">半角英数で入力してください。</span>
メールアドレス※
エディット
オートコンプリート
半角英数で入力してください。
メールアドレス※
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
半角英数で入力してください。
メールアドレス※
メールアドレス
エディットテキスト
半角英数で入力してください。
メールアドレス
<label for="email" id="label--email">メールアドレス ※</label>
<input type="text" id="email" name="email" aria-labelledby="description--email label--email" />
<span id="description--email">半角英数で入力してください。</span>
半角英数で入力してください。
メールアドレス※
エディット
オートコンプリート
空行
メールアドレス※の文字入力 メールアドレス※
テキストフィールド
半角英数で入力してください。
メールアドレス
エディットテキスト

| 印刷用ページ