自社サイト、音声読み上げ試してますか?- Apple社アクセシビリティページの問題点

「アクセシビリティの祭典」の話をしようと思っていたけど、今日は表題の件を。

Apple社のアクセシビリティのページをご覧になったことはあるだろうか。

アクセシビリティ

こちらのページの問題点を指摘するツイートを見かけた。

正直、私はこのページの存在をこのツイートで初めて知って、早速音声読み上げしてみた。なお、調査日2018年5月20日時点での私の使用環境は以下の通りである。

・Windows10
・chrome最新版(バージョン: 66.0.3359.181（Official Build）64 ビット)
・NVDA 2018.1jp

画面のグローバルナビ下の、サブのナビゲーション(左上の『アクセシビリティ』とある部分辺りからスタート)と見出しh1を読み上げた音声データは以下の通り。
なおスクリーンショットをご覧いただきながらどの部分が読まれているかご確認頂きたい。

録音された音声が聞き取れない場合は、以下文字おこしをご覧いただきたい。

アクセシビリティ マイナス (クリック)日本
クリック可能リスト 6項目
リンク Mac リンク iPad リンク iPhone リンク Watch リンク TV リンク ストーリー
リストの外 ランドマーク

見出しレベル1
テクノロジーはすべての
見出しレベル1
人に力をもたらす時に
見出しレベル1
もっともパワフルになります まる
※(クリック)は私の操作に反応したものでAppleのウェブサイトによるものではありません

最初に左上の「アクセシビリティ」の文字が、次いで右上にあるナビゲーション部分が順に読まれ、その後大きな文字で書かれている見出し部分が読み上げられた。
見出しの箇所で「見出しレベル1」(太字部分)という言葉が何度か読み上げられたのは聞き取れただろうか。

その見出しレベル(h1)部分のソースを確認してみよう。

<h1 class="hero-headline-super overview-hero-headline column large-12">
テクノロジーは、<wbr />す<wbr />べ<wbr />ての<br class="small-hide" />
人に力をもたらす時に、<br class="small-hide" />最も<wbr />
<span class="nowrap">パワフル</span>に<wbr />
<span class="nowrap">なります。</span></h1>

見た目を重視するために強制的な改行(<br class="small-hide" />の部分)をしていることが災いして何度も「見出しレベル1」と読み上げられている。

この改行<br />がなければ、次のようにスムーズに読み上げられるはずなのに。

見出しレベル1
テクノロジーは、すべての人に力をもたらす時に、最もパワフルになります。

他の部分を見ると、動画の英語は日本語でテキスト化したものを読み上げられるようにするなどしてはいるので、(社内的に)アクセシブルなページになるよう試みてはいるのだろう。ただ、実際読み上げソフトで聞いてみたことはないのだろうか。

スクリーンリーダーユーザーの声、届いてますか? 
これを機に私も自分が関わるウェブコンテンツを、今一度確認してみたい。

(了)

ヘッダー写真 撮影地 ニュージーランド 南島ダニーデンそば ©moya