A11yCraft

Appearance

Headings ​

These techniques help to show the relationships between different sections of the page and help to ensure that the page is readable to everyone.

Accessibility Checklist ​

  • Have you used the HTML elements to define the headings?
    • If No, have you used the role and aria-level attributes?
  • Have you checked the contrast for each colour combination?
  • Can the text be resized up to 200%?
  • Are the headings descriptive and consistent?

Heading Elements ​

Use the HTML elements such as <h1> and <h2> to show the relationship between different aspects of content.

Example

html
<h1>Animals</h1>
<p>This page provides information about different animals</p>

<h2>Lions</h2>
<p>Information about lions goes here...</p>
<h3>Habitats</h3>
<p>More information goes here...</p>

<h2>Tigers</h2>
<p>Some information about tigers...</p>

ARIA Heading Role ​

If using the HTML elements is not an option, you can also define something as having the role of a heading and provide the corresponding aria level.

Example

html
<div role="heading" aria-level="1">Animals</div>
<p>This page provides information about different animals</p>

<div role="heading" aria-level="2">Lions</div>
<p>Information about lions goes here...</p>
<div role="heading" aria-level="3">Habitats</div>
<p>More information goes here...</p>

<div role="heading" aria-level="2">Tigers</div>
<p>Some information about tigers...</p>

Contrast ​

Check the font size of your heading and ensure you have the correct contrast against the background. Headings should normally require a contrast ratio of 3:1 due to the text being larger and bolded.

You can use a contrast checker to find out what contrast your colours have, then compare it to the table below to find what result you need to match.

Font SizeBoldedContrast Required
less than 19pxY4.5:1
19px or greaterY3:1
less than 24pxN4.5:1
24px or greaterN3:1

Resize ​

You must ensure that the text can be resized and allow an increase of up to 200%. This is to help users with visual impairments to read the content of your website.

The text being resized must not end up hidden or cause other content to become hidden, so the easiest way to achieve this is to avoid using set pixel values when defining font-sizes. Instead, you can use relative values to ensure that the text can be resized.

You can either use em values to make the text relative to the parent contain or rem values to be relative to the root page.

Example

css
.heading-1 {
  font-size: 150%;
}

.heading-2 {
  font-size: 125%;
}

Example

css
.heading-1 {
  font-size: 1.5rem;
}

.heading-2 {
  font-size: 1.25rem;
}

Descriptive Headings ​

Headings should be descriptive to help the user understand how the information is broken down on the page. This will help the user navigate the page and find the content that they are looking for easily.

Headings do not need to be long, and a couple of words is perfectly acceptable as long as they describe the content. It is helpful to also ensure that these headings are consistent when websites contain many articles with similar information.

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

1.4.3 Contrast (Minimum) (Level AA)

Text should have a minimum contrast ratio of 4.5:1, or 3:1 for larger text. See the WCAG 2.2 Guidelines for Contrast (Minimum) for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Contrast (Minimum)

1.4.4 Resize Text (Level AA)

All text, with the exception of captions and text on images, can be resized up to 200% without causing a loss of functionality or content. See the WCAG 2.2 Guidelines for Resize Text for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Resize Text