Interactive elements like input elements and links are fully accessible by default with hgrid.
Consistent Focus Border
When navigated to, interactive elements are highlighted with a strong
(WCAG 2.1 success criterion 2.4.7)
which is consistent regardless of browser styles.
«Jump to Content»-Link
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
.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
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>
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
Your site should work responsively on screen sizes as narrow as 320 pixels without horizontal scrolling, according to the guidelines.
To stay compliant with WCAG, web content creators are asked to organize their text content under semantic headlines, using
h6 elements. The next headline after a
<h1> must be an
<h2>. After an
<h2> thou shalt always use an
<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
.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 →