見出し画像

自社サイト、音声読み上げ試してますか?- 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


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

最後までご覧いただきありがとうございます! 現在放送大学でPDFのアクセシビリティを卒業研究中。noteはそのメモを兼ねてます。ヘッダー写真はnzで私が撮影しました。 【ご寄付のお願い】有料noteの売上やサポートはnzクライストチャーチ地震の復興支援に使わせて頂いております。

[謎々]ひもに絡まって遊ぶ鳥ってどんなとり?
16
仕事はウェブアクセシビリティ屋、プライベートではnzでトレランしたくて走っているmoyaです。民間企業勤務後、中央省庁でウェブアクセシビリティ担当。放送大学でPDFのアクセシビリティを卒業研究。電子情報通信学会 正員、ウェブアクセシビリティ推進協会 賛助会員
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。