Codebase CSS v.5.3.5
Download CSS
Github
Changelog
Getting started

Accessibility features in Codebase

Numerous accessibility considerations have been factored into Codebase 5. These are, in summary:

  1. Default font size is 100% (usually defaults to 16px), bumping up to 112.5% (18px) for sm viewports up (see responsive design).
  2. Accessible UI colors
  3. Link underine becomes thicker on hover, making the hover state more obvious
  4. :focus ring styling for form elements and buttons
  5. :focus-visible styling for links
  6. AlpineJS powered components have been refactored for accessibility

Default font size

The 100% font size defaults to 16px in most web browsers. Various guidelines recommend a larger font size, so the Codebase default bumps up 10 112.5% (18px) for devices larger than phones.

The advantage of not setting a default font size in px is that it allows your website to be scaled to the user’s preferred default font size – some people with sight impairments may increase their default font size in their browser settings. You don’t want to prevent that from happening by setting your font size in px.

From there, all typography sizes and spacing sizes (margins, paddings, and gaps) in Codebase are set in rems or ems -- making them dependant on the root font size.

// In: 00_setup/_default-variables.scss
:root {
  --t-fs: 100%; /* usually 16px */
  --t-fs-bump: 112.5%; /* usually 18px */
}

// In: 01_basics/_base.scss
body {
  ...
  font-size: var(--t-fs);
  ...
}

@if $font-size-bump == true {
  @include break-min(w-sm) {
    body {
      font-size: var(--t-fs-bump);
    }
  }
}

For more information on font size and accessibility, see:

Accessible UI colors

Colored UI components are those most commonly expected worldwide, as used on signage, traffic lights, and user interfaces:

  • Success is green
  • Warning is amber
  • Danger is red
  • Information is blue

These are the colors used for UI elements such as buttons, badges and labels have their colors set to conform with WCAG 2.1 Level AA guidelines for text at 17pt and below, using the Adobe Color accessible color generator. The required color contrast ratio is 4.5:1 or better.

success
#128a12
3.45:1 warning
#e6de00
14.81:1 danger
#cf000f
5.74:1 info
#1262ed
5.26:1

Note: yellowish colors (yellow, amber, orange, yellow-green) are especially difficult to pair with white for an accessible color contrast. Therefore the text color is set to black on “warning” buttons, badges, and labels.

The default color for links <a href=""> is also the UI color for information (blue), because blue is the most commonly expected color for links, and links generally link to further information within paragraphs of text on the internet. Meanwhile, the default text color #242424 on a white background has a color contrast ratio of 15.52:1.

In addition, three “accent” colors are provided:

primary
#9400d3
6.56:1 secondary
#0080a2
4.56:1 tertiary
#767676
4.54:1

While other CSS frameworks (such as Bootstrap) have set blue as their primary (accent) color, a purple has been chosen for Codebase, so that blue can be used for the UI “info” color.

Focus state styling

Interactive elements require a visual indicator that to lake them obvious for sighted keyboard users, who use “tabbing” to get around the webpage’s accessibility tree (a.k.a. tab index).

Codebase has undergone several improvements in the way it has handled :focus and :focus-visible styling for forms, links, and other interactive elements over the years. As of November 2024 (Codebase v.5.3.4), we have adopted styles similar to the UK National Health Service NHS web design system and UK Government GOV.UK Design System.

There are two focus state styles:

  1. Links (including links syuled as buttons, a.k.a. pseudo buttons) are given an amber background, and black text when link is interacted with by anything that triggers :focus-visible, such as keyboard tabbing.
  2. Form elements (inputs, textareas, checkboxes, real buttons) are given a double ring around them when :focus happens: an outer amber ring and an inner black ring. The same focus styling happens on interactive elements such as <details><summary>, buttons and .btn pseudo-button styled links when they receive :focus-visible.

Examples: Interact with these two demo elements (by clicking and/or tabbing) and you will see the focus state styling:

A link   A .btn link    

Notes on focus states in Codebase:

  1. If a <button> is not part of a form (e.g. it is being used to control a dropdown, tab, or modal), or if a button is <button type="button"> (even if it is inside a <form>), then it will not recieve the focus ring on :focus but it will on :focus-visible. But a <button> with any other attribute when nested indide a <form> then it will get the :focus focus ring. This is the expected behavior.

<form>
  <label>A button in a form:</label><br>
  <button>Click me</button>
</form>
  1. If a scrollable element has overflowing content, then it will recieve :focus-visible when tabbing — except that are using the Safari browser can't tab onto e.g. overflowing <pre> elements, or overflowing elements with the Codebase overflow-x or overflow-y class.
  2. Images within Links (i.e. a img) will become slightly transparent (using an opacity filter) when the link has recieved :focus-visible, allowing the amber background to show though. See media: linked images
  3. Codebase also has panel links — these are simply links where you want only some of the text to look like a link (e.g. maybe you have an explainer in smaller text on a big button; maybe you have a feature panel where you want the whole thing wrapped in an <a href=""> (link), but only the title to be styled as a link (with an underscore etc.)). For these, when the panel recieves :focus-visible, only the panel link title text becomes black and recieves the thick black underline, while the other text becomes a dark amber color (so that the user's attention goes to the link title), while the whole panel gets the amber background :focus-visible panel gets the amber background. And if there's an image in your panel link, then it will get the opacity filter effect too.

AlpineJS powered components

Besides moving up to AlpineJS version 3, the Alpine powered components in these docs have been improved to enable usability via keyboard and assistive tech:

For all these components, keyboard tab, enter, space and escape can be used to expand and retract hidden panels, or to switch between tabs or slides. aria attributes have also been built in.

Note: the modal component also requires the AlpineJS Focus plugin to trap the focus within the modal panel while it is open. You can also add this focus trapping to the offcanvas component if you need it in your design.

Building an accessible website

It should therefore be possible to achieve WCAG Level AA using Codebase on a well-designed website.

To design a wesite well for accessibility includes:

  • Properly structured HTML
  • Heading hierarchy
  • Sufficient color contrast for text and backgrounds
  • Meaningful alt tags on images
  • Keyboard tabbing navigation, modals, dropdowns, etc.
  • ARIA attributes where required
  • And more

See WCAG 2.1 at a Glance for a brief introduction.

Accessibility resources

If you are unfamiliar with web accessability, I would encourage you to learn about it. Here are several to get you started. This is very much an inexaustive list – there's a lot more out there.

Note: Accessibility is sometimes shortened to A11y (the number 11 because there are 11 letters in between “a” and the “y” in the word accessibility).

Guidelines

Some websites you should know

Also, study some websites of governments, local governments, universities, etc. to see how they handle accessability.

Articles

Videos

Tools

Apps and browser extensions