本文へ


Techniques for WCAG 2.0とUnderstanding WCAG 2.0の更新(ドラフト)をチェックしようよ!

  • 2014/02/03 13:50 JST

Techniques for WCAG 2.0Understanding WCAG 2.0が更新(ドラフト)されたと知ってからチェックしないとと思いつつもなかなか出来ずにいたのですが、Techniques for WCAG 2.0とUnderstanding WCAG 2.0のEditors' Draftに対するレビューの呼びかけ | アクセシビリティBlog | ミツエーリンクスの記事を読み、「もうチェックしておかないと」と思い、変更・追加された部分を全部読みました。

Techniques for WCAG 2.0とUnderstanding WCAG 2.0の変更・追加をチェックするにあたり@eriverさんがTechniques for WCAG 2.0とUnderstanding WCAG 2.0がアップデートのドラフトが公開 - E-riverstyle Vanguardという記事で変更・追加箇所をリストアップされていたのを知っていたので、こちらを参照させていただきながら読み進めたところ思ってたより早くチェックする事が出来きました。@eriverさんにはほんと感謝です!

チェックしていて「この項目ってLevelAだったはずだけど…」と思いながら1項目ずつリンクをクリックし確認していて「変更・追加箇所のリストアップにLevelも書いてあるといいかも」「原文をずくに確認出来るようにリストアップした項目にリンク付けたら少しでも多くの人に読んでもらえるんじゃないかなぁ」と思い付け足してみました。

Techniques for WCAG 2.0の中で変更がある項目

Techniques for WCAG 2.0での追加項目

Techniques for WCAG 2.0とUnderstanding WCAG 2.0の更新(ドラフト)をチェックした感想

まず、WAI-ARIAの追加はLevelAばかりなのでしっかり覚えなければいけないと改めて実感しました。

その中でも印象に残ったのは、ARIA7ARIA8です。 その内容は、トップページなどに見受けられる新着情報などによくある「続きはこちら」のリンクについて(ARIA7は、リンク先がPDF形式等の場合についての内容もあります)なのですが、 音声読み上げソフトでリンクをTabキーで読み上げていくと、 「続きはこちら」「続きはこちら」と同じ言葉ばかり読みあげリンク先がどういった内容なのかわかりません。 JIS X 8341-3:2010の「2.4.4 文脈におけるリンクの目的」では、リンク先を表すテキストがある<p>内に「続きはこちら」がある場合(H78: リンクテキストとそれが含まれているパラグラフとを組み合わせて、リンクの目的を特定する )や 直前にある見出しを読み上げれはリンク先の内容がわかる場合(H80: リンクテキストとその直前にある見出し要素とを組み合わせて、リンクの目的を特定する) 「2.4.4 文脈におけるリンクの目的(等級A)」を満たしている事になってます。 ですが、今回追加されたARIA7のExampleはリンク先の内容がわかる見出し等と関連付けて(idとaria-labelledby)記述し、 また、ARIA8のExampleではa要素にaria-label属性を記述する事によりリンク先の内容がわかるようになっています。

現状、音声読み上げソフトがどう読み上げるのか確認してみたのですが(環境:Win7)

  • ARIA7-Example PC-Talker7の場合、IE10ではaria-labelledby属性を追記していない状態と同じ読み上げ方で、 Firefox26.0では、Example 1の場合はリンク部分を「Storms hit east coast」と読み上げ、Example 2,3の場合はリンク部分を 「Download 2012 Sales Report: PDF | Word | Powerpoint PDF、Download 2012 Sales Report: PDF | Word | Powerpoint Word、Download 2012 Sales Report: PDF | Word | Powerpoint Powerpoint」 と読み上げるのでIE10ではまだサボートされていませんが、Firefox26.0ではaria-labelledby属性がサポートされているようです。
  • NVDA2013.3jp IE10では、Example 1の場合はリンク部分を「 Read more Storms hit east coast」と読み上げ、Example 2,3の場合はリンク部分を「PDFリンク、Wordリンク、 Powerpointリンク」と読み上げるので、 Example 1の場合のみサポートされています。 Firefox26.0では、、Example 1の場合はリンク部分を「 Read moreリンク」と読み上げ、Example 2,3の場合はリンク部分を「PDFリンク、Wordリンク、 Powerpointリンク」と読み上げるので、 まだサポートされていないようです。
  • iPad iOS7.0.4,VoiceOverでは、Example 1の場合はリンク部分を「Storms hit east coastリンク」と読み上げ、Example 2,3の場合はリンク部分を 「Download 2012 Sales Report: PDF Word Powerpoint PDFリンク、Download 2012 Sales Report: PDF Word Powerpoint Wordリンク、Download 2012 Sales Report: PDF Word Powerpoint Powerpointリンク」 と読み上げる事からaria-labelledby属性がサポートされているようです。

また、ARIA8-Exampleは

  • PC-Talker7の場合、IE10ではaria-label属性を追記していない状態と同じ読み上げ方ですが、 Firefox26.0では「Read more about Seminole tax hike」、「Read more about Seminole's new baby mayor」と読み上げる事からaria-label属性はサポートされているようです。
  • NVDA2013.3jp IE10ではaria-label属性を追記していない状態と同じ読み上げ方ですが、 Firefox26.0では、リンク部分を「 Read moreリンク」」と読み上げるのでまだサポートされていないようです。
  • iPad iOS7.0.4,VoiceOverでは、リンク部分を「Read more about Seminole tax hikeリンク」、「Read more about Seminole's new baby mayorリンク」と読み上げる事からaria-label属性はサポートされているようです。

まだ、サポートされていない環境があるとはいえ今後サポートされるはずなのでaria-labelledby,aria-label属性の記述は必須ですね。