HTML5 と UIA によるアクセシビリティの構築

参照元をざっくり翻訳

blogs.windows.com

Microsoft Edge のアクセシビリティは UI Automation (UIA) フレームワーク通して使用されており、 HTML、CSS、ARIA マークアップは UIA オブジェクトに変化されます。

今回のほとんどの機能はここ最近の Insider Preview の Microsoft Edge でしか動作しません。

HTML5Accessibility

アクセシビリティのサポートは、アクセシビリティ API、キーボードアクセシビリティ、エラー状態のアクセシビリティマッピングで判断されているようです。

HTML5Accessibility の確認サイトでは Edge 13 （EdgeHTML 13） での集計となっており IE 11 に次いで低い値となっております。 http://stevefaulkner.github.io/HTML5accessibility/

EdgeHTML 14 で様々な対応をしているため、次期 Windows 10 である Anniversary Update ではスコアが上がると思われます。

HTML5 セマンティック要素によるユーザーエクスペリエンスの改善

HTML5 には、新しいセマンティック要素やコントロールが新たに追加されており、主な利点は、アクセシビリティの向上です。

今まではヘッダーとなる個所を DIV 要素、ナビゲーションメニューを ul などで使用していましたが、
HTML5 で header や nav などが使用できるようになったため、要素の意味を推測できるようになりました。
Role 属性を書かなくてもスクリーンリーダーなどの支援機能でページのヘッダーであることがわかります。

<header> 
  <h1>A wonderful web site</h1> 

  <nav>
    <ul> 
      <li>Some page</li> 
      <li>Another page</li> 
    </ul> 
  </nav>
</header>

ランドマークナビゲーション

ARIA、header、footer、nav、aside、main、section 要素は書き換えをされない限りランドマークとして使用され、 Windows キー + Enter などで Windows 10 のナレーター機能が有効になるとランドマークが読み上げられます。

また、F12 開発者ツールでアクセシビリティ ツリー ビューが追加され、開発者は視覚的に確認できるようになりました。

メインコンテンツへのジャンプ

ユーザーがすぐにアクセスしたいコンテンツは、ページのメインコンテンツです。
メインコンテンツへ素早くアクセスする際にはスキップする仕掛けを作る必要がありますが main 要素、または ARIA の role="main" で対処することができます。

アクセス可能なコントロール

フォームなどで画像などをボタンにしたい場合、そのままではスクリーンリーダーは画像と認識します。
role="button" を追加することでボタンとしての役割を果たします。

アクセス可能なラベルと説明

a 要素や画像の alt 属性はその説明を持ちますが、他のものはその要素が直接的な意味を持たないものがあります。
そのため、aria-label または aria-labelledby 属性を付加することで意味合いをつけることができます。

例えば <nav aria-label="site"> はコンテンツではなくサイトのナビゲーションだということが分かります。 （

は

と異なりページ上いくつも置くことが許されるため、どれがサイトのナビゲーションかわかりやすくするため）　

また、input のプレースフォルダで説明しきれない場合、その説明をほかの要素と関連付けることができ、 aria-labelledby="ID名" で指定することができます

<form>
  <label for="url">Link to avatar:</label> 
  <input type="url" id="url" aria-describedby="url-desc" required /> 
  <p id="url-desc">Include the protocol (http:// or https://) with the URL. The image format must be either PNG, JPEG, or SVG. Maximum dimensions are 800×800 pixels.</p>
</form>

ユーザーへバリデーションエラーの提示

バリデーションエラーなど警告のポップアップ表示されます。
こちらもスクリーンリーダーの読み上げが行われます。

ハイコントラストページの読みやすさを向上

Windows 10 では白と黒の愛コントラストモードを設定でき、
こちらはウィンドウ設定の Dark, White モードとは異なるものです。

–ms-high-contrast-adjust プロパティと -ms-high-contrast media feature の CSS が用意されています。

–ms-high-contrast-adjust の値が auto の場合以下の設定が可能

@media screen and (-ms-high-contrast: active) {
  /* ハイライト時に適応 */
}
@media screen and (-ms-high-contrast: black-on-white) {
  /* ハイライト、「黒」背景時に適応 */
}
@media screen and (-ms-high-contrast: white-on-black) {
  /* ハイライト、「白」背景時に適応 */
}