Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Ensure that information and relationships conveyed through presentation can be programmatically determined or are available in text.
Helps assistive technologies interpret and present content in a meaningful way.
Common issues are with incorrect use of HTML semantic elements. For example, using a <div> instead of <button>, <a> or heading tags.
Problems with ARIA use can also belong under this criterion.
Check the content for the use of headings:
Check the menus to see if the aria-current attribute is used in addition to the visual active path indicator. If not, it is an error. If the visual indicator is not used to indicate an active menu element, then ARIA is not needed either.
Automated tools are quite good at finding flaws in this criterion.
Related criteria: 4.1.2.
Ensure that you design a logical heading structure for all pages. If the content editor needs to add specific elements to ensure the correct heading levels, they need to be told to do that.
Remember that a heading is not a visual highlighting method. If the text shouldn't be a heading (if it doesn't have any content below it), don't make it a heading. If some text needs visual highlighting, that can be done with CSS styles.
Remember also that the layout acts as an implementation guide for the developer. Always ensure you use the correct markings for elements.
If you create a menu with a visually visible active path indicator, add aria-current attribute as well.
Ensure you create a logical menu structure in the code. And allow the content editor to mark up correct heading levels for the page content.
If the design requires specific elements for logical heading structure, add instructions for the content editor so that they know to add the elements on the pages.
If you get a design with an illogical heading level or headings used in the wrong places, don't implement those but instead, flag the issues to the designer.