Techniques for WCAG 2.0とUnderstanding WCAG 2.0の更新(ドラフト)をチェックしようよ！
- 2014/02/03 13:50 JST
Techniques for WCAG 2.0とUnderstanding 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の中で変更がある項目
- G86: Providing a text summary that can be understood by people with lower secondary education level reading ability -Title [change] (Level AAA)
- G141: Organizing a page using headings - Resources [delete] [add] (Level A,AAA)
- G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width - Examples [delete] (Level AA)
- H42: Using h1-h6 to identify headings - Resources [add] (Level A)
- H45: Using longdesc - Description,Examples,Resources [change][add] (Level A)
- H69: Providing heading elements at the beginning of each section of content - Resources [add] (Level A)
- H92: Including a text cue for colored form control labels - Examples [change] (Level A)
- ARIA1: Using the aria-describedby property to provide a descriptive label for [begin change]user interface[end change] controls - Title,Description,Examples,Resources,Tests [change][add][delete] (Level A)
- ARIA2: Identifying a required field with the aria-required property - Title,Description,Examples,Resources,Tests [change][add] [delete] (Level A)
- F15: Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely - Description,Resources [add] (Level A)
- F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them - Title,Description,Examples,Tests [change][add][delete] (Level A)
- F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology - Examples [change] (Level A)
- F42: Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate links in a way that is not programmatically determinable - Examples [change] (Level A,AAA)
- F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content - Description,Tests [add][change] (Level A)
- F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control - Title,Applicability,Description,Resources,Related Techniques,Tests [change][delete] [add] (Level A)
- F62: Failure of Success Criterion 1.3.1 and 4.1.1 due to insufficient information in DOM to determine specific relationships in XML - Tests [delete][change] (Level A)
- F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link - Applicability,Description,Examples,Resources,Related Techniques,Tests [change][delete][add] (Level A)
- F68: Failure of Success Criterion 1.3.1 and 4.1.2 due to the association of label and user interface controls not being programmatically [begin change]determined[end change] - Title,Description,Examples,Related Techniques,Tests [add][delete][change] (Level A)
- F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order - Description,Examples [change][delete] (Level A)
- F86: Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number - Related Techniques,Tests [add][change] (Level A)
- F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a lin k- User Agent and Assistive Technology Support Notes,Description,Related Techniques,Tests [delete][change][add] (Level A.AAA)
- F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers - Examples [change] (Level A)
Techniques for WCAG 2.0での追加項目
- ARIA4: Using a WAI-ARIA role to expose the role of a user interface component (Level A)
- ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component (Level A)
- ARIA6: Using aria-label to provide labels for objects (Level A)
- ARIA7: Using aria-labelledby for link purpose (Level A)
- ARIA8: Using aria-label for link purpose (Level A,AAA)
- ARIA9: Using aria-labelledby to concatenate a label from several text nodes (Level A)
- ARIA10: Using aria-labelledby to provide a text alternative for non-text content (Level A)
- ARIA11: Using ARIA landmarks to identify regions of a page (Level A)
- ARIA12: Using role=heading to identify headings (Level A)
- ARIA13: Using aria-labelledby to name regions and landmarks (Level A)
- ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used (Level A)
- ARIA15: Using aria-describedby to provide descriptions of images (Level A)
- ARIA16: Using aria-labelledby to provide a name for user interface controls (Level A)
- ARIA17: Using grouping roles to identify related form controls (Level A)
- ARIA18: Using aria-alertdialog to Identify Errors (Level A,AA)
- ARIA19: Using ARIA role=alert or Live Regions to Identify Errors (Level A)
- F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information (Level A)
Techniques for WCAG 2.0とUnderstanding WCAG 2.0の更新(ドラフト)をチェックした感想
まず、WAI-ARIAの追加はLevelAばかりなのでしっかり覚えなければいけないと改めて実感しました。
その中でも印象に残ったのは、ARIA7とARIA8です。 その内容は、トップページなどに見受けられる新着情報などによくある「続きはこちら」のリンクについて(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属性の記述は必須ですね。