読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

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

アクセシビリティ Microsoft Edge

参照元をざっくり翻訳

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 ではスコアが上がると思われます。

f:id:x67x6fx74x6f:20160516194803p:plain

 

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"> はコンテンツではなくサイトのナビゲーションだということが分かります。 (

スポンサーリンク