Codebase
Download CSS
Github
Getting started

Accessibility features in Codebase 5

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

  1. Default font size is 100%
  2. Accessible UI colors
  3. Focus ring styling
  4. AlpineJS powered components have been refactored for accessibility

Default font size

For improved accessibility, since v.5.0.6 Codebase defaults to font-size: 100% on the <body> element. This font size defaults to 16px in most web browsers (in 2022).

// In: 00_setup/_default-variables.scss
$text-font-size: 100% !default;

// In: 01_basics/_base.scss
body {
  ...
  font-size: $text-font-size;
  ...
}

The advantage of not setting a default font size in px is that it allows your website to be scaled to the user’s chosen 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.

For more information, 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 font-size 16px, using the Adobe Color accessible color generator. The required color contrast ratio is 4.5:1 or better.

success
#128a12
4.5:1 warning
#f0b300
11.15:1 danger
#cf000f
5.74:1 info
#1262ed
4.54:1

Note: yellowish colors (yellow, amber, orange, yellow-green) are notoriously difficult to pair with white for an accessible color contrast. Therefore the text color is set to black on “warning” buttons, badges, and labels. (Until v.5.2.0 Codebase “warning” color was a dark orange, but it was to close to the “danger” red.)

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 #212121 on a white background has a color contrast ratio of 16.1: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 ring 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).

Since Codebase v.5.2.5, focus rings have mostly reverted to the browser default styling, now copying the Accessability Style Guide. The handling of the focus ring havs improved in all the popular evergreen browsers (Chrome, Edge, Safari, Firefox): now light on dark backgrounds and light on dark backgrounds, and now rounded around rounded corners (e.g. on buttons and form fields).

input:focus,
form button:focus,
:focus-visible {
  outline: auto 2px Highlight;
  outline: auto 5px -webkit-focus-ring-color;
}

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.

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