DEV 1.5 – Do not misuse semantic markup
Why is this important?
Assistive technologies often rely on semantic markup to navigate within documents or communicate key pieces of information to a user (for example, whether what you're reading is a heading, or a link).
If markup is used incorrectly, for example using an <h2> tag to style a piece of body text, it may confuse users trying to navigate and understand the document.
As a result, it is important to ensure that the correct HTML markup is used for the job. Using the correct HTML markup will ensure that the characteristics of a document or web page can be programmatically determined.
Use native HTML structural and semantic markup to add meaning to elements
HTML is rich in native, semantic markup, to help convey the type of information – image, main heading, sub-heading, ordered list, table column header – to users, even when they are not able to see it.
Native HTML elements also carry many built-in behaviours that allow users to interact with them appropriately, such as hyperlinks and input fields.
Always use semantic markup and rely on CSS to finesse the appearance of your HTML elements as required.
Do not use headings or lists for decorative purposes
- If, for example, you require different sized text for something, speak to your design team who will be to create an appropriate CSS-delivered style for you – do not use an <h1> just to create large text;
- Neither should you use <th> to centre-align text in tables. Similarly, do not use <address> for italics.
Do not use decorative elements to suggest lists or headings
- Things may be made to look like lists but if they are not coded semantically then they are not recognised as lists programmatically, so screen readers will not be able to communicate any semantic information;
- Users who depend on their own CSS to alter the appearance (line height, padding) of lists will not be able to do so if they have not been coded semantically;
- Do not simply use bold and large text to suggest a heading – if it is a heading, use a heading element.
- These links cannot be navigated to with the tab key and do not receive keyboard focus.
Use the correct semantic markup for text
- For example, use <strong> instead of <b>, or <em> instead of <i>
Do not use deprecated features of HTML
Consider using WAI-ARIA roles for dynamic content
- For example, <alert>, <checkbox>, <slider>
Tips: Even though ARIA role attributes can be assigned to elements to aid assistive technologies, ARIA best practise still calls for the use of native elements wherever possible.
Examples of bad practice
Using decorative elements to suggest lists without coding them semantically
* Item 1<br />
* Item 2<br />
* Item 3<br />
* Item 4<br />
* Item 5<br />
* Item 1
* Item 2
* Item 3
* Item 4
* Item 5
Using an <h1> heading just to produce large text on a page
<h1>Don't forget your passport!</h1>
Don't forget your passport!
Examples of good practice
EN 301 549 v 2.1.2
- 126.96.36.199 Info and Relationships