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