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
- 1.3.1 Info and Relationships (A)
- 1.3.2 Meaningful Sequence (A)
- 1.3.6 Identify Purpose (AAA)
- 1.4.3 Contrast (Minimum) (AA)
- 1.4.4 Resize Text (AA)
- 1.4.5 Images of Text (AA)
- 1.4.10 Reflow (AA)
- 1.4.12 Text Spacing (AA)
- 2.1.1 Keyboard (A)
- 2.1.4 Character Key Shortcuts (A)
- 2.4.1 Bypass Blocks (A)
- 2.4.2 Page Titled (A)
- 2.4.3 Focus Order (A)
- 2.4.4 Link Purpose (In Context) (A)
- 2.4.6 Headings and Labels (AA)
- 2.4.7 Focus Visible (AA)
- 2.4.9 Link Purpose (Link Only) (AAA)
- 3.1.1 Language of Page (A)
- 3.1.2 Language of Parts (AA)
- 3.1.4 Abbreviations (AAA)
- 3.1.5 Reading Level (AAA)
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
- Web Accessibility 101: Web Headings for Screen Readers
- Checking Headings - W3C Digital Accessibility Foundations
- Why headings and landmarks are so important - A11ycasts #18
- Tab Order Accessibility - University of Colorado Boulder Office of Information Technology
- What is Focus? - A11ycasts #03
- What are ARIA Landmarks - Web Accessibility Education
Further reading
- WAI Page Structure Tutorial (Headings)
- Accessibility according to actual people with disabilities
- Pixels vs. Relative Units in CSS: why it’s still a big deal
- CSS units for font-size: px, em, rem
- Readability (Yale University)
- MDN Web Docs - <abbr> element
- Meaningful links (Princeton University)
- Links (Yale University)
- Making Accessible Links: 15 Golden Rules For Developers
- Accessible Rich Internet Applications (WAI-ARIA) 1.1
- Nomensa - What are Accesskeys?
- Scott O’Hara – Tabindex, It Rarely Pays to be Positive
- a {outline: none} DON’T DO IT!
- Adaptive vs. Responsive Design
- MDN Web Docs - lang Attribute
- Accessible Rich Internet Applications (WAI-ARIA) 1.1 Documentation
- WAI-ARIA - General Principles
- MDN Web Docs - WAI-ARIA Roles
- HTML 5 and ARIA Landmarks
- Understanding ARIA Landmarks – General Principle and Roles