Login

team@digitalaccessibilitytraining.org


Information and relationships

Public Article

Article is certified Certified Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.

1.3.1 Information and relationships (A)

This is a highly technical success criterion.

All content structure and relationships conveyed through presentation must be present in the HTML markup, i.e. they must be able to be programmatically determined. For example, text that visually appears as a heading must have appropriate markup

that programmatically identifies it as a heading and establishes its relationship with the content that follows it. Similarly, the content presented as a list, a form input and label, a blockquote, or link, etc. needs to have the appropriate markup to make sure that its structure and relationships are programmatically available. to ensure that information and relationships that are conveyed through presentation are preserved when the presentation changes. Then people with disabilities can still follow the information and structure by using assistive technologies (ATs).

Test at the same time

Tools required

  •  Developer tools (F12)

How to test

  1. Open the web page to be tested.
  2. Open the Developer tools (F12)

Look at:

Ensure that:

All images & styled text

Images of text or styled passages of text that convey structural information also use proper semantic HTML markup to convey that structural information. For example, content visually presented as a list of items is marked up using HTML list markup, ol when the items have a meaningful order and ul where they do not. Similarly, where an image of text, or a passage of text, is used to represent a heading, it is enclosed in an HTML heading (h1–h6) element that reflects the hierarchical structure of the content. [Note that skipping heading levels, e.g. going from h2 to h4, is not a WCAG failure. However, it is a failure to use heading levels in a way that does not reflect the hierarchical order or rank of the heading content, e.g. using an h3 heading for content that is visually presented as a subsection to content with an h5 heading.]

Lists of items

Items visually presented as a list use list markup, either ul or ol with li, or dl, dt, and dd, as appropriate.

Table header and data cells

The programmatic association between data cells and header cells are provided correctly by one of the following mechanisms:

·         Header cells are marked up with table header th elements, optionally with scope attributes

·         Header and data cells are associated using headers and id

attributes

·         Header cells are marked up as td elements with the scope attribute

·         Header cells are marked up with the [ARIA](#aria) role attribute with rowheader or columnheader values as appropriate

label elements

Where a form control has a visual label, the label uses a label element that is associated with the form control, either by containing the form control or using a for attribute whose value references the form control's id value.

id values

Any id attribute value that is referenced by other elements (e.g. by a label's for attribute or a table cell's headers attribute, or an in-page link's "#fragmentId") exists and is unique in the document.

White space

White space characters (e.g. space, non-breaking space, line break, Tab space, etc.) are not used to create the visual appearance of columns of text or a table.

Scripting events

If JavaScript event handlers have been used on an non-link element (i.e. not an a or area element) to emulate a link, the fact that the element serves and acts as a link can be programmatically determined. Is the role of the element a link, i.e., does it have role="link"?

pre element markup

The pre element is used to maintain plain text visual formatting, but not to present structural relationships, e.g. columns or tables, that don't exist in the content.

     Potential access issues

  • CSS was used to style an element to look like a heading but failed to use the proper HTML heading element.
  • Images of text have been used as headings where the images are not contained within heading tags.
  • CSS has been used to visually emphasise a phrase or word without conveying the emphasis using semantic markup.
  • The id value referenced by an attribute on another element does not exist or is not unique in the document.
  • A table using the axis attribute does not have a corresponding id value in a table header cell in the same table.
  • White space characters have been used to visually layout information.
  • Scripted event handling has been added to a span, div, or img element (with or without keyboard support) so that it functions as a link.
  • A layout table (that has been used only to visually lay out elements) uses th elements, a summary attribute, and/or a caption element.
  • The pre element has been used to present structural relationships visually, e.g. columns or tables, that don’t exist in the content’s markup.
  • A form visually presents labels for its controls, but does not use the label element to associate each label with its control.
  • Label elements are present, but they are not programmatically linked to the corresponding form controls.
  • :before and/or :after CSS pseudo-elements and the content property have been used to insert non-decorative content.
  • A table uses id and headers attributes but incorrectly associates one or more content cells to header cells.
  • Table headers have not been marked up appropriately.
  • The ARIA role="presentation" has been applied to an element whose purpose is to convey information and/or relationships in the content.

Information and relationships was posted on 12/09/2023 @ 11:28