Semantic HTML evaluation
Proper HTML semantics form the foundation of accessible web experiences. When code uses the right HTML elements for their intended purpose, assistive technologies can better understand and communicate content to users.
When conducting semantic HTML evaluations, follow these steps:
- Check that headings use proper heading tags (H1-H6) rather than styled paragraphs
- Verify that lists use appropriate elements (ul for unordered lists, ol for ordered lists, dl for description/definition lists with term-description pairs)
- Ensure tables use table elements with proper headers and captions for data presentation
- Confirm that interactive elements use native controls (buttons, links, form elements) where possible
- Examine landmark regions (header, footer, nav, main, aside) for proper structure
- Check that forms use fieldset (to group related form elements), legend (to provide a title for the fieldset), and label elements correctly
- Test that language attributes are properly set for the document and any content in different languages
Document issues by identifying elements using incorrect semantics and recommend proper tag replacements. Note that semantic HTML benefits not just accessibility but also SEO, device compatibility, and code maintainability. Proper semantics create a solid foundation that makes other accessibility improvements more effective.
