Problem
The Chooser currently uses the <h1>-<h6> heading levels according to the design. Headings are used for creating the outline for a page, which is important for accessibility purposes. Skipping heading levels makes the outline, or website's table of contents, incorrect. This also lowers our Lighthouse Accessibility score:
Description
Fortunately, CC's design system provides a way to use the headings' visual styles in an accessible way:
To create a second-level heading that visually looks like <h5>, we can use <h2 class="title is-5">.
So, this is the list of changes that need to be introduced:
- Main heading ('License Chooser') should be
<h1> that looks like h2
- Section headings (
h3) should be <h2> with the style of h3
- Step header headings (
h5) should be <h2> with the style of h5
Implementation
Problem
The Chooser currently uses the
<h1>-<h6>heading levels according to the design. Headings are used for creating the outline for a page, which is important for accessibility purposes. Skipping heading levels makes the outline, or website's table of contents, incorrect. This also lowers our Lighthouse Accessibility score:Description
Fortunately, CC's design system provides a way to use the headings' visual styles in an accessible way:
To create a second-level heading that visually looks like
<h5>, we can use<h2 class="title is-5">.So, this is the list of changes that need to be introduced:
<h1>that looks likeh2h3) should be<h2>with the style ofh3h5) should be<h2>with the style ofh5Implementation