Login

team@digitalaccessibilitytraining.org


Markup

Public Article

Article is certified Certified Article

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

Parsing

4.1.1  Parsing (A)

This guideline ensures that the web page’s HTML markup can be accurately parsed and interpreted by browsers and AT and then correctly presented to users.

To pass this test, the page’s HTML must meet all of the following conditions:

  • Elements have complete start and end tags, e.g. every <p> start tag has a corresponding </p> end tag.
  • Elements are nested according to the specification for the HTML version being used. For instance, block-level elements (e.g. div, p, li) are not nested in inline elements (e.g. span, a, strong); or an element is not placed where it is not allowed (e.g. a div as an immediate child of a ul).
  • Elements do not contain duplicate attributes. For instance, the class attribute doesn’t appear twice on the same element, e.g. <li class="last" class="detail"></li>.
  • All id attribute values are unique in the page. For instance, if an element has id="main", no other instance of id="main" exists on any other element on the page. Ensure that browsers, AT, and software parsing web content can accurately interpret and present it to users.

Tools required

W3c Validator

How to test

  1. Open the web page to be tested.
  2. Copy the URL from the address bar and paste it into the Address field of the W3c Validator.
  3. Expand the More Options panel, select the Group Error Messages by Type radio button, and click the Check button.
  4. Check that the report returns none of the following errors:
  5. An element is missing a start or end tag.
  6. An element is improperly nested as a child of another element where it is not permitted.
  7. An attribute (regardless of its value) is duplicated on a single element.
  8. An id attribute value is duplicated.

Potential access issues

  • There is an incorrect use of start and end tags.
  • An element is used where it is not allowed.
  • There are duplicate attribute names on the same element.
  • There are duplicate id attribute values.

Name, Role and Value

HTML image

4.1.1  Name, Role, Value (A)

This is a highly technical success criterion for web authors who develop or script their user interface components. Correctly assessing a web page against this success criterion requires advanced technical knowledge. Assessing against this success criterion, more than others, will be aided by reviewing the W3C’s Understanding SC 4.1.2 documentation and sufficient techniques.

It is essential that for all user interface components (including form elements, links and components generated by scripts), the following is true:

  • The name and role (e.g. button, link, textbox) can be programmatically determined;
  • States, properties, and values that the user can set can be programmatically set;
  • Notifying changes to these items are available to user agents, including assistive technologies.

Test at the same time

1.3.1  Info and Relationships

Tools required 

Developer tools (F12)

Exceptions

Web pages using standard, valid HTML and no custom scripted user interface components.

How to test

  1. Open the web page to be tested.
  2. Open the Developer tools (F12).
  3. Review the markup and check that each user interface component has a programmatically established role and name, either by properly using standard HTML components or reusing other HTML elements and supplementing them with appropriate ARIA attributes. Check that the current state of a control (e.g. expanded/collapsed, selected, pressed) can be programmatically determined; it is updated accordingly based on user interaction and is not just displayed visually.

Potential access issues

  • Instead of standard HTML controls, span and div elements have been used without suitable markup to programmatically identify the component’s role. For example, a checkbox may be created by using a span with an img element or CSS background image. Still, it will not be recognised as a checkbox by assistive technologies unless the ARIA role="checkbox" and aria-checked="true|false" attributes are applied.
  • Non-text content has been dynamically updated on the page, and the alternative no longer reflects the updated content, e.g. a picture of the minister has alternative text identifying the previous minister.
  • Input, select, and textarea elements do not have a label, e.g. a correctly associated label element or properly configured aria-label, aria-labelledby, or title attribute.
  • A control changes state, but its state change is not made programmatically available.
  • A link contains only an img element with an empty alt attribute.
  • An iframe element is missing a title attribute.

Markup was posted on 23/01/2023 @ 13:57