Semantic Structure
Success Criteria for Headings, Lists, and Structure
- 1.3.1 Information and Relationships (A)
- 1.3.2. Meaningful Sequence (A)
- 2.4.6. Describe Headings and Labels (AA)
Using appropriate semantic elements gives our documents and web content a cleaner and more consistent visual appearance. Semantic elements also provide the necessary structure for assistive technologies like screen readers to meaningfully parse and read page content.
Designing digital information with semantic elements is easy. Virtually every content authoring tool we use includes a graphical toolbar (WYSIWYG) for formatting headings, lists, hyperlinks, tables, and other semantic elements. Apply these structural elements whenever possible.
Techniques for Semantic Structure
Headings
Headings create hierarchical structure in web pages and documents. Heading levels include h1, h2, h3, h4, and sometimes h5 and h6. Headings “chunk” content into sections based on importance. Avoid skipping heading levels like jumping from h1 to h3 without an h2.
All heading levels can contain all types of content including paragraphs of text, hyperlinks, lists, images, embedded videos, tables, etc. Headings improve access for people with disabilities, but they also improve readability for everyone.
Techniques for Headings
- Using h1-h6 to identify headings
- Organizing a page using headings
- Providing heading elements at the beginning of each section of content
- Providing descriptive headings
Lists
Use list styles to format lists of information. Like headings, lists create semantic structure that improves readability for everyone and navigation for assistive technology.
- Unordered Lists
If the list has no particular order or sequence, then use a bulleted list. - Ordered Lists
If the list does have an order or sequence, then use a numbered list.
List Type |
HTML |
Rich Content |
---|---|---|
Unordered |
|
Shopping list
|
Ordered |
|
The five phases of ADDIE are
|
Techniques for Lists