Skip to content

Accessibility

Jump to bottom
Simon Milfred edited this page Jul 22, 2022 · 9 revisions

Especially concerning our municipality clients, our solutions needs to live up to AA standards (and thus also level A). A quick, pre-filtered ref for these standards can be found at w3.org.

While non-government solutions does not require us to make the accessible, we should strive to make our work generally accessible when possible.

General Means of Accessibility

Helpful links

aria-label, title, aria-labelledby, aria-describedby...

Buttons, links and more all need labels to be accessible. If a link wraps a text, the text within will be the label, but sometimes a link just wraps an icon, in which case we need to supply it with a label, which can be done using various attributes.

  • aria-labelledby: if the title/text is already existing on the page/near context, we should use aria-labelledby. This could be when our link is related to a specific heading, for example. aria-labelledby takes a space-separated list of ids as its value. Most often we just need one, but sometimes extra ids can be good for specifying the link text further. This of course also mean that we need to set a unique id on the element which we want to refer to.
  • aria-label: if the label we want to use does not exist in the near context, we can assign the label using aria-label. This takes a string, the label we want, as its value.
  • title: unless you really need the tooltip that this one grants, don't use this one. aria-label is the right way to go. The tooltip is almost never necessary, as it doesn't work on touch devices anyway.

Note You should never set both aria-labelledby and aria-label, but if you do aria-labelledby is the value that will be used (read more here). aria-labelledby should also take precedence over <label>, inner text and everything else, although accessibility rules state that any label should include the already existing label/text content of the element - read more.

Warning Screen readers vary in how they use and implement labeling, so try to make an as clean implementation as possible and don't mix too many different values.

Adding more context to a link/button/etc.

Sometimes a link already have a text and simply needs more context. This could be a "Read more" link among a ton other "Read more" links. This extra context can be added in various ways.

  • aria-label: if you wish to include the original text content (fx. "Read more"), you can set an aria-label, however it must include the existing label/text! So you could do something like aria-label="Read more about the castle".
  • aria-labelledby: by using this, you can refer to another element (or multiple elements) by their id. This should overwrite the existing label/text. If you want to include the existing text, you may also refer to the element's own id. Using this could look like aria-labelledby="my-own-id a-title-id".
  • aria-describedby: if you have a longer form text (like a teaser) that adds context to your element, you should use aria-describedby instead. This works in the same way as aria-labelledby, except it is read out by screen readers after/separately from the label itself. This could be used like aria-describedby="some-teaser-id".

Where Things get Ridiculous

Zoom, Line Height and Word and Letter Spacing

Sites that need to live up to the WCAG 2.1 standards needs elements to be functional and without clipped/missing content or functionality when the site is zoomed in (up to at least 200% or 400% it seems) but also when the user uses tools to increase line height, word spacing and/or letter spacing. To test if a page or component works with zoom you can use the browser's zoom tools, but for the CSS-overwrites you can use following snippet saved as a bookmark in the browser:

javascript:(function()%7B%0A%09document.querySelectorAll('*').forEach(function%20(el)%20%7B%0A%09%09if%20(el.nodeName.toLowerCase()%20%3D%3D%3D%20'p')%20%7B%0A%09%09%09el.style.setProperty('margin-bottom'%2C%20'2em'%2C%20'important')%3B%0A%09%09%7D%0A%09%09el.style.setProperty('line-height'%2C%20'1.5'%2C%20'important')%3B%0A%09%09el.style.setProperty('letter-spacing'%2C%20'0.12em'%2C%20'important')%3B%0A%09%09el.style.setProperty('word-spacing'%2C%20'0.16em'%2C%20'important')%3B%0A%09%7D)%0A%7D)()%3B

Tools

Accessible Palette

Accessible Palette, as the name suggests, allows you to make accessible color palettes using LCh (which in loose terms is an upgrade to HSL). The tool and approach can be read about in this article.

The tool utilizes Chroma.js, which we can use in the frontend as well, if we need to generate or manipulate LCh colors.

Making Specific Element Types and Content Accessible

Link Tiles

Link tiles are something the municipalities often want, and in their most basic form, they can be setup without much trouble. However, in many situation such tiles can give trouble. Anatomically, a link tile is an anchor tag wrapping multiple elements - in extreme cases, this could include an image in the top, a heading, a timestamp, a teaser/description, a bunch of sub-links and an arrow pointing right at the very bottom (typically, they only contain some of these things).

<!-- anatomy of an extreme-case link tile -->
<!-- Note: Don't use this as your base! It's wrong! -->
<a>
  <img />
  <h2>...</h2>
  <time>...</time>
  <p>...</p>
  <ul>
    <li>
      <a>...</a>
    </li>
    <li>
      <a>...</a>
    </li>
    <li>
      <a>...</a>
    </li>
  </ul>
  <svg>...</svg>
</a>

Issues with the Link Tile

Non-unique Link Texts and Descriptions

Especially when it comes to agenda overviews (like this one on Roskilde), the content of the link tiles will often be the same as other link tiles in the same collection, which makes the link purpose unclear. Two links may not be the exact same.

To counter this, we always need some way to tell the links apart through the content. If the visible content doesn't give us the means, we need backend to hand over more (invisible) information for the customer to type in (or fetched from the linked page). Such content can then be referred by the link using aria-describedby, for example, to widen the context of the link.

Nested Links Inside

Due to the specifications of anchor tags, buttons and some other elements, it is wrongful parsing to have an anchor tag, button, etc. inside another anchor tag, button, etc..

Too Much Information Inside

If an element's label gets too long, it results in an aria error as well, so too much content inside a link will give issues.

Truncated Text

Text are not allowed to be truncated through CSS, as this cuts off text that should be visible. It is however allowed to truncate text through javascript and then only display the partial text.

Clone this wiki locally