A11yCraft

Appearance

Sections ​

By breaking the content into sections, it is easier for a user to find the information they are looking for as well as providing more clarity as to how pieces of content relate to each other.

Accessibility Checklist ​

  • Have you used the HTML elements to mark the sections of your website?
    • If No, have you used the role attribute?
  • Have you provided labels for the repeatable landmark areas?
    • If No, you can either use the aria-label or aria-labelledby attributes.

Landmarks ​

Ensure that you are using HTML5 elements to correctly section your websites. Where possible, using the HTML element instead of the landmark role to provide the widest support.

The list of HTML elements that you are likely to be using are:

  • aside
  • footer
  • form
  • header
  • main
  • nav
  • search
  • section

IMPORTANT

Do not overuse landmarks as it can make it hard for screen readers to understand the layout. You will want to provide labels for the landmarks that can be repeated.

html
<nav aria-label="main navigation"> ... </nav>
<nav aria-label="secondary navigation"> ... </nav>

Example

html
<header>
  <p>The header information for your website...</p>
  <search aria-label="Search">A place for people to search your website...</search>
</header>
<main>
  <section aria-label="Section 1"> A section of content... </section>
  <form aria-label="Form"> A form for people to fill out... </form>
</main>
<footer>
  <p>The footer information for your website...</p>
</footer>

ARIA Landmark Role ​

If you cannot use the HTML elements, then you can provide roles to your content. The equivalent landmark roles are in the table below.

HTML ElementLandmark RoleLabel Required?
<aside>complementaryYes
<header>bannerNo
<footer>contentinfoNo
<form>formYes
<main>mainNo
<nav>navigationYes
<search>searchYes
<section>regionYes

Example

html
<div role="banner">
  <p>The header information for your website...</p>
  <div role="search" aria-label="Search">A place for people to search your website...</div>
</div>
<div role="main">
  <div role="region" aria-label="Content"> A section of content... </div>
  <div role="form" aria-label="Form"> A form for people to fill out... </div>
</div>
<div role="contentinfo">
  <p>The footer information for your website...</p>
</div>

Associated WCAG Criteria ​

1.3.1 Info and Relationships (Level A)

Information and relationships are accessible to non-sighted users. See the WCAG 2.2 Guidelines for Info and Relationships for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Info and Relationships

2.4.1 Bypass Blocks (Level A)

Provide a mechanism for users to bypass repeated blocks of content. See the WCAG 2.2 Guidelines for Bypass Blocks for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Bypass Blocks