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

Video

Further reading