Structure

Page title

• Ensure each page has a descriptive title that reflects its topic or purpose
• Ensure the title is unique and make sense on its own
• Start the title by stating what the page is about, followed by the site name.
  • E.g., "Designing for Neurodiversity - Smashing Magazine"

Headings

• Use headings to group related content
• Ensure headings clearly describe their content
• Ensure all content fits into a logical heading structure
  • Add main heading (h1) to each page or view, that communicate its main purpose or topic
  • Organize sub-headings hierarchically by level h1→h2→h3

Annotations:

• Annotate headings with the appropriate level, e.g. <h1>, <h2>, <h3>

Additional resources:

• W3 guide on headings

Landmark regions

• Each page should have at least one region for main content
• Most pages also have regions for header, navigation, and footer

Annotations:

• Annotate landmark regions, e.g. <header>, <nav>, <main>, <footer>
• If a page has multiple navigation regions, each one needs a unique and descriptive label, e.g.
  • <nav aria-label="Main">
  • <nav aria-label="[section name]">
• Landmark regions are commonly similar on all pages, so need to be annotated once, e.g. front page

Additional resources:

• W3 guide on landmark regions

Tables

• Ensure tables have a descriptive title (caption)
• Consider responsive design - how the table will look and function on smaller screens

Annotations:

• Annotate table headers (column, rows), especially for irregular tables
  • Column header using <th scope="col">
  • Row header using <th scope="row>

Additional resources:

• W3 guide on tables
• Accessible patterns for responsive tables

Lists

• Use lists for grouping a collection of related items

Annotations:

• Annotate using the proper list type:
  • unordered <ul>
  • ordered <ol>
  • description (mainly for metadata) <dl>
• If the list doesn't have a bullet or number, annotate it as unordered list <ul>

Additional resources:

• W3 guide on lists

Grouped content

• Ensure that each group of content includes a heading

Annotations:

• Annotate visually grouped content as follows:
  • <article> - e.g. blog entry, news article, product card
  • <section> - any generic section that doesn't have more specific semantic element, e.g. content section

Additional resources:

• The article element
• The section element

Reading order

• Ensure content follows a logical and meaningful order
• Add Figma annotations for pieces of content that the order may not be clear to developers, e.g:
  • custom numbered lists
  • form fields
  • multi-column and multi-section content
  • main content and sidebars

Additional resources:

• Guidelines and examples on reading order

Status updates

Add Figma annotations to status messages that dynamically appear or updated on screen.

Examples:

• success and error messages
• loading progress updates
• shopping cart notifications
• new chat messages
• data filtering updates

Status messages have to be properly implemented to support accessibility for assistive technologies.

Additional resources:

• Guidelines on ARIA live regions for status updates