DEV 1 – Provide an accessible page structure and layout

Why is this important?

It is important to provide a logical, consistent structure to your site that is built semantically – that is, each element correctly conveys the nature of its content to users, browsers and assistive technology.

Always use native HTML elements and attributes where possible and only use ARIA when native HTML alone cannot provide the best accessible solution.

Use the right elements for the job and do not misuse semantic markup. Provide helpful visual and programmatic cues, in the form of headings and links.

In this section

Use headings to convey the structure of your content
Code text correctly
Code lists of items semantically, using native HTML list elements
Provide meaningful links
Do not misuse semantic markup
Maintain a logical tab and reading order and provide a clear focus indicator
Provide adaptive or responsive layouts
Provide an accurate and informative page title
Specify the default language of the page and any language changes
Provide native HTML 5 for elements and ARIA for landmarks
Use clear and simple language

References for this section

WCAG 2.1

EN 301 549 v 2.1.2

9.1.3.1 Info and Relationships
9.1.3.2 Meaningful Sequence
9.1.4.3 Contrast (Minimum)
9.1.4.4 Resize Text
9.1.4.5 Images of Text
9.1.4.10 Reflow
9.1.4.12 Text Spacing
9.2.1.1 Keyboard
9.2.1.4 Character Key Shortcuts
9.2.4.1 Bypass Blocks
9.2.4.2 Page Titled
9.2.4.3 Focus Order
9.2.4.4 Link Purpose (In Context)
9.2.4.6 Headings and Labels
9.2.4.7 Focus Visible
9.3.1.1 Language of Page
9.3.1.2 Language of Parts