Content, structure and relationships

For: Content, Design, Development

Info and relationships (1.3.1 level A)

https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships

Is correct semantic markup used?

Does the CMS offer the correct built-in styles to enable correct semantic markup?

Here are some areas to check:

General (Content, Design)

  • Is <em> and <strong> used for emphasis instead of <i> and <b>, is <blockquote> used to markup quotations, is the <p> tag used around sentences and/or paragraphs of text?
  • Is < i > used for icons instead of <span>?

Lists (Content, Design)

  • Are lists marked up correctly as bullets or numbers? Spaces or dashes, clip art or other images should not be used.
  • Are ordered lists <ol> used for things which should be in a logical sequence, for example instructions or pagination.
  • Are unordered lists <ul> used when the order does not matter, for example a list of names of people in a team.

Headings (Content, Design)

  • Check that font sizes or bold text are not being used to create headings.
  • Are pages organised properly with nested HTML headings. For example, each page should have one main heading (H1), followed by subheads to provide structure, (H2 - main section heading, H3 - sub section to H2 and so on).

Tables (Content)

  • Are tables used only for tabular data?
  • Are any tables used incorrectly for layout and presentation?
  • Are table headers and captions present?
  • Do any tables have split cells, merge cells, have blank cells or use nested tables? This makes them inaccessible to a screen reader and they will need re-working or removing.

Standard compliant built-in styles (Developer)

  • Has the developer included as standard the following styles in the WISIWIG editor? Heading tags (Heading 1 to Heading 5), <em>, <strong>, <blockquote>, <p>.

Define page structure (Design)

You can help people who use assistive technologies understand the structure of the page and navigate it by including "ARIA landmarks" (hidden labels for sections of the page). Landmarks also help users looking at multiple pages skip repetitive sections.

By viewing page source, you should be able to see if the following are visible:

  • banner: at the top of the page, usually contains the logo (e.g. role=”banner”)
  • navigation: elements that link to other pages, usually in the banner (e.g. role=”navigation”)
  • search (if applicable): the search field, usually in the banner (e.g. role=”search”)
  • main: contains the main content of the page. It should be unique on each page (e.g. role=”main”).
  • contentinfo: the footer. This is shared across pages. (e.g. role=”contentinfo”)

Links and buttons (Development, Design)

  • Are the ‘a’ and ‘button’ tags used appropriately?
  • Buttons are for performing an action, like submitting a form or loading something onto the page, which is controlled by JavaScript, for example, load more news or load a map.
  • Links and call to action links are for navigating to a different website or a different page in the same website and should look like a link (usually a distinct colour to body text and underlined).

Forms (Development, Design)

  • Forms fields should have visible labels.
  • Labels and fields should be associated by the same accessible name.
  • Elements like radio and checkboxes should use <fieldset> and legend to achieve grouping.