Jump to main content
hgrid-icon

Accessibility

Interactive elements like input elements and links are fully accessible by default with hgrid.

File location: base/_a11y.scss (GitHub)

Consistent Focus Border

When navigated to, interactive elements are highlighted with a strong :focus outline (WCAG 2.1 success criterion 2.4.7) which is consistent regardless of browser styles.

You can customize its color and line weight with the hgrid variables $focus-border-weight and $focus-border-color when you initialize hgrid.

«Jump to Content»-Link

Try using tab from the top of this page (start in the URL field) to see the skip link in action.

It's good practice to add a visually hidden link at the top of every HTML document, which keyboard and assistive technology users can use to jump to the main content, bypassing menus, etc. Use the hgrid utility .jump-to-content for this.

Place the link as the first element in body. It will be revealed at the top of the page when in :focus.

It's (usurprisingly) semantically correct to use the <main> element for your main content:

<body>
  <a class="jump-to-content" href="#main-content">Jump to main content</a>
  <!-- <nav> and other layout elements -->
  <main id="main-content">
    <h1>Very nice headline</h1>
    <!-- etc. -->
  </main>
  <!-- <footer> etc. -->
</body>

Relative Units

All hgrid CSS with accessibility implications is set in relative units, such as rem and percentages. This makes resizing and zooming possible without layout shifts and alteration of internal element proportions (complies with WCAG 2.1's success criterion 1.4.4). The hgrid layout systems are by default completely flexible, and thus in compliance with WCAG's recently added content reflow criterion.

Your site should work responsively on screen sizes as narrow as 320 pixels without horizontal scrolling, according to the guidelines.

Compliant Headings

To stay compliant with WCAG, web content creators are asked to organize their text content under semantic headlines, using h1 to h6 elements. The next headline after a <h1> must be an <h2>. After an <h2> thou shalt always use an <h2> or <h3>. And so forth.

With hgrid you can keep the code semantically compliant, while avoiding being tied up to the visual style of a specific heading element. Use the provided utility classes .h3, .h4 etc. to reduce or increase the font size. Here's an example of how we can work around the guidelines using a h2 heading that visually looks like an h3: 

<h1>9 of 10 web bros favor semantic code</h1>

<p class="ingress">
  A large majority of web developers think semantic HTML is great for accessibility 
  – and for business.
</p>

<h2 class="h3">An h2 styled to look like an h3 is still semantically correct</h2>

<p>A text paragraph before it's time yet again to add another headline.</p>

<h3>Here we are allowed to use a regular h3</h3>

More about headlines in the typography section.

← Previous: Animations

Next: Production Build →