知覚可能/1.3 適応可能
1.3.1情報及び関係性
レベル AInfo and Relationships
見た目で伝えている構造や関係(見出し・リスト・表の対応・ラベルと入力欄の結びつき)を、HTML のマークアップや ARIA でプログラムにも伝わる形にする。スクリーンリーダー利用者は視覚的なレイアウトを見られないため、色や余白だけで表現された構造は伝わらない。色や太字だけで見出しに見せかける実装はこの基準に抵触する典型例。
補足
この達成基準の詳細解説は準備中です。現在は関連パターン・達成方法・原典への参照を掲載しています。
関連する達成方法
この達成基準を満たすための具体的な実装方法です。本サイトでは本文を収録していないため、各リンク先の W3C 原文を参照してください。
十分な達成方法(35)
すべて表示(35件)
- ARIA11: Using ARIA landmarks to identify regions of a page(新しいタブで開きます)waic.jp(新しいタブで開きます)
- ARIA12: Using role=heading to identify headings(新しいタブで開きます)waic.jp(新しいタブで開きます)
- ARIA13: Using aria-labelledby to name regions and landmarks(新しいタブで開きます)waic.jp(新しいタブで開きます)
- ARIA16: Using aria-labelledby to provide a name for user interface controls(新しいタブで開きます)waic.jp(新しいタブで開きます)
- ARIA17: Using grouping roles to identify related form controls(新しいタブで開きます)waic.jp(新しいタブで開きます)
- ARIA20: Using the region role to identify a region of the page(新しいタブで開きます)waic.jp(新しいタブで開きます)
- ARIA24: Semantically identifying a font icon with role="img"(新しいタブで開きます)waic.jp(新しいタブで開きます)
- G115: Using semantic elements to mark up structure(新しいタブで開きます)waic.jp(新しいタブで開きます)
- G117: Using text to convey information that is conveyed by variations in presentation of text(新しいタブで開きます)waic.jp(新しいタブで開きます)
- G138: Using semantic markup whenever color cues are used(新しいタブで開きます)waic.jp(新しいタブで開きます)
- G140: Separating information and structure from presentation to enable different presentations(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H39: Using caption elements to associate data table captions with data tables(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H42: Using h1-h6 to identify headings(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H43: Using id and headers attributes to associate data cells with header cells in data tables(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H44: Using label elements to associate text labels with form controls(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H48: Using ol, ul and dl for lists or groups of links(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H49: Using semantic markup to mark emphasized or special text(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H51: Using table markup to present tabular information(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H63: Using the scope attribute to associate header cells with data cells in data tables(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H65: Using the title attribute to identify form controls when the label element cannot be used(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H71: Providing a description for groups of form controls using fieldset and legend elements(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H85: Using optgroup to group option elements inside a select(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H97: Grouping related links using the nav element(新しいタブで開きます)waic.jp(新しいタブで開きます)
- H101: Using semantic HTML elements to identify regions of a page(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF6: Using table elements for table markup in PDF Documents(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF9: Providing headings by marking content with heading tags in PDF documents(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF10: Providing labels for interactive form controls in PDF documents(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF11: Providing links and link text using the Link annotation and the /Link structure element in PDF documents(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF12: Providing name, role, value information for form fields in PDF documents(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF17: Specifying consistent page numbering for PDF documents(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF20: Using Adobe Acrobat Pro's Table Editor to repair mistagged tables(新しいタブで開きます)waic.jp(新しいタブで開きます)
- PDF21: Using List tags for lists in PDF documents(新しいタブで開きます)waic.jp(新しいタブで開きます)
- T1: Using standard text formatting conventions for paragraphs(新しいタブで開きます)waic.jp(新しいタブで開きます)
- T2: Using standard text formatting conventions for lists(新しいタブで開きます)waic.jp(新しいタブで開きます)
- T3: Using standard text formatting conventions for headings(新しいタブで開きます)waic.jp(新しいタブで開きます)
参考達成方法(5)
- ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls(新しいタブで開きます)waic.jp(新しいタブで開きます)
- ARIA2: Identifying a required field with the aria-required property(新しいタブで開きます)waic.jp(新しいタブで開きます)
- C22: Using CSS to control visual presentation of text(新しいタブで開きます)waic.jp(新しいタブで開きます)
- G141: Organizing a page using headings(新しいタブで開きます)waic.jp(新しいタブで開きます)
- G162: Positioning labels to maximize predictability of relationships(新しいタブで開きます)waic.jp(新しいタブで開きます)
失敗例(11)
すべて表示(11件)
- F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information(新しいタブで開きます)waic.jp(新しいタブで開きます)
- F111: Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name(新しいタブで開きます)waic.jp(新しいタブで開きます)
原典・規範文書
- 達成基準 1.3.1 情報及び関係性 — WCAG 2.2 日本語訳(waic.jp)(新しいタブで開きます)規範訳。正式な要件の本文はこちら。
- Understanding Info and Relationships — W3C(英語)(新しいタブで開きます)意図・具体例・達成方法の詳しい公式解説。