「aria-hidden="true"」と「speak: none;」

スクリーンリーダー等で読み上げをスキップする方法として「aria-hidden="true"」を指定することが徐々に増えてきつつあるように感じます。

aria-hidden="true"

aria-hiddenプロパティはWAI-ARIAの仕様で定義されており、aria-hiddenプロパティの値に「true」を指定することで、その要素が非表示であることをブラウザに伝え、読み上げをしないようにすることができます。

BootstrapでもGlyphiconsを使う場合に以下のように指定し、アイコン部分をスキップするために、「aria-hidden="true」を使っています。


<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

他にも読み上げをスキップする方法として「speak: none;」を指定する方法があります。

speak: none;

音声を制御するためのCSSにCSS Speech Moduleというのがあります。2012年3月20日に勧告候補になっています。 speakプロパティは、そのモジュールで定義されています。

下記のようにすると要素は音声で読み上げられなくなります。


.skip-contents {
  speak: none;
}

この「speak: none;」ですが、これが定義されているCSSモジュールでは勧告候補になっているのですが、MacのVoiceOverで対応されていません。また、調べていないので、他のスクリーンリーダーで対応されているかどうかも不明です。

疑似要素を使っての表示

BootstrapやFont Awesomeのコード例にあるように、アイコンフォント表示のためにHTMLを用意する場合は、その要素に「aria-hidden="true"」を指定すればよいのですが、下記のように::beforeなどの疑似要素を使ってアイコンフォントを表示する場合はそうはいきません。


<a href="url" class="icon-pdf">リンク</a>


.icon-pdf::before {
  content: "\f1c1";
  font-family: FontAwesome;
}

上記のコードのように、a要素に「aria-hidden="true"」を指定してしまうとa要素のテキストがスキップされてしまいます。

そういった時に「speak: none;」が使えるとそういった問題を解決することができます。


.icon-pdf::before {
  content: "\f1c1";
  font-family: FontAwesome;
  speak: none;
}

まだ対応されていないので、あれこれ言っても仕方ないのですが、CSS Speech Moduleの「spaekプロパティ」はすぐにでも対応してほしいものです。