Perceivable / 1.3 Adaptable
1.3.1Info and Relationships
Level AStructure and relationships conveyed visually -- headings, lists, table associations, label-input pairings -- must be made programmatically determinable through HTML markup or ARIA. Screen reader users can't see the visual layout, so structure expressed only through color or spacing goes unnoticed. A classic failure is text styled to look like a heading with color or bold weight but marked up as a plain paragraph.
Note
A detailed commentary for this success criterion is not yet available. In the meantime, this page lists related patterns, techniques, and links to the normative sources.
Related Techniques
Specific implementation techniques for meeting this success criterion. This site doesn't include the full text, so follow the links to the original W3C documents.
Sufficient Techniques(35)
Show all (35)
- ARIA11: Using ARIA landmarks to identify regions of a page(opens in a new tab)waic.jp(opens in a new tab)
- ARIA12: Using role=heading to identify headings(opens in a new tab)waic.jp(opens in a new tab)
- ARIA13: Using aria-labelledby to name regions and landmarks(opens in a new tab)waic.jp(opens in a new tab)
- ARIA16: Using aria-labelledby to provide a name for user interface controls(opens in a new tab)waic.jp(opens in a new tab)
- ARIA17: Using grouping roles to identify related form controls(opens in a new tab)waic.jp(opens in a new tab)
- ARIA20: Using the region role to identify a region of the page(opens in a new tab)waic.jp(opens in a new tab)
- ARIA24: Semantically identifying a font icon with role="img"(opens in a new tab)waic.jp(opens in a new tab)
- G115: Using semantic elements to mark up structure(opens in a new tab)waic.jp(opens in a new tab)
- G117: Using text to convey information that is conveyed by variations in presentation of text(opens in a new tab)waic.jp(opens in a new tab)
- G138: Using semantic markup whenever color cues are used(opens in a new tab)waic.jp(opens in a new tab)
- G140: Separating information and structure from presentation to enable different presentations(opens in a new tab)waic.jp(opens in a new tab)
- H39: Using caption elements to associate data table captions with data tables(opens in a new tab)waic.jp(opens in a new tab)
- H42: Using h1-h6 to identify headings(opens in a new tab)waic.jp(opens in a new tab)
- H43: Using id and headers attributes to associate data cells with header cells in data tables(opens in a new tab)waic.jp(opens in a new tab)
- H44: Using label elements to associate text labels with form controls(opens in a new tab)waic.jp(opens in a new tab)
- H48: Using ol, ul and dl for lists or groups of links(opens in a new tab)waic.jp(opens in a new tab)
- H49: Using semantic markup to mark emphasized or special text(opens in a new tab)waic.jp(opens in a new tab)
- H51: Using table markup to present tabular information(opens in a new tab)waic.jp(opens in a new tab)
- H63: Using the scope attribute to associate header cells with data cells in data tables(opens in a new tab)waic.jp(opens in a new tab)
- H65: Using the title attribute to identify form controls when the label element cannot be used(opens in a new tab)waic.jp(opens in a new tab)
- H71: Providing a description for groups of form controls using fieldset and legend elements(opens in a new tab)waic.jp(opens in a new tab)
- H85: Using optgroup to group option elements inside a select(opens in a new tab)waic.jp(opens in a new tab)
- H97: Grouping related links using the nav element(opens in a new tab)waic.jp(opens in a new tab)
- H101: Using semantic HTML elements to identify regions of a page(opens in a new tab)waic.jp(opens in a new tab)
- PDF6: Using table elements for table markup in PDF Documents(opens in a new tab)waic.jp(opens in a new tab)
- PDF9: Providing headings by marking content with heading tags in PDF documents(opens in a new tab)waic.jp(opens in a new tab)
- PDF10: Providing labels for interactive form controls in PDF documents(opens in a new tab)waic.jp(opens in a new tab)
- PDF11: Providing links and link text using the Link annotation and the /Link structure element in PDF documents(opens in a new tab)waic.jp(opens in a new tab)
- PDF12: Providing name, role, value information for form fields in PDF documents(opens in a new tab)waic.jp(opens in a new tab)
- PDF17: Specifying consistent page numbering for PDF documents(opens in a new tab)waic.jp(opens in a new tab)
- PDF20: Using Adobe Acrobat Pro's Table Editor to repair mistagged tables(opens in a new tab)waic.jp(opens in a new tab)
- PDF21: Using List tags for lists in PDF documents(opens in a new tab)waic.jp(opens in a new tab)
- T1: Using standard text formatting conventions for paragraphs(opens in a new tab)waic.jp(opens in a new tab)
- T2: Using standard text formatting conventions for lists(opens in a new tab)waic.jp(opens in a new tab)
- T3: Using standard text formatting conventions for headings(opens in a new tab)waic.jp(opens in a new tab)
Advisory Techniques(5)
- ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls(opens in a new tab)waic.jp(opens in a new tab)
- ARIA2: Identifying a required field with the aria-required property(opens in a new tab)waic.jp(opens in a new tab)
- C22: Using CSS to control visual presentation of text(opens in a new tab)waic.jp(opens in a new tab)
- G141: Organizing a page using headings(opens in a new tab)waic.jp(opens in a new tab)
- G162: Positioning labels to maximize predictability of relationships(opens in a new tab)waic.jp(opens in a new tab)
Failures(11)
Show all (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(opens in a new tab)waic.jp(opens in a new tab)
- 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(opens in a new tab)waic.jp(opens in a new tab)
- 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(opens in a new tab)waic.jp(opens in a new tab)
- F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links(opens in a new tab)waic.jp(opens in a new tab)
- F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content(opens in a new tab)waic.jp(opens in a new tab)
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables(opens in a new tab)waic.jp(opens in a new tab)
- F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information(opens in a new tab)waic.jp(opens in a new tab)
- F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes(opens in a new tab)waic.jp(opens in a new tab)
- F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers(opens in a new tab)waic.jp(opens in a new tab)
- F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information(opens in a new tab)waic.jp(opens in a new tab)
- 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(opens in a new tab)waic.jp(opens in a new tab)
Normative References
- Success Criterion 1.3.1 Info and Relationships — WCAG 2.2(opens in a new tab)The normative requirement text.
- Understanding Info and Relationships — W3C(opens in a new tab)Official guidance on intent, examples, and techniques.