Techniques

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.

You have to do a lot of work to get a generic element, like a span, to behave as well as look like, for example, a link – this generally requires JavaScript, CSS, ARIA and extra HTML attributes – and even then there is no guarantee that your new element will be recognised by all browsers and assistive technologies.

Always use semantic markup and rely on CSS to finesse the appearance of your HTML elements as required.

See DEV 7.1 – Use structural and semantic markup properly and validate code

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.

Do not use JavaScript event handlers to emulate links

  • 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

  • <p>
    • * Item 1<br />
    • * Item 2<br />
    • * Item 3<br />
    • * Item 4<br />
    • * Item 5<br />
  • </p>

 

* Item 1

* Item 2

* Item 3

* Item 4

* Item 5

Using an <h1> heading just to produce large text on a page

  1. <h1>Don't forget your passport!</h1>

Don't forget your passport!

Further examples

Examples of good practice

References

WCAG 2.1

EN 301 549 v 2.1.2

  • 9.1.3.1 Info and Relationships

Further reading