Three new WCAG checks

Silktide now performs three additional WCAG checks, which cover areas you previously could only test manually.

Ensure controls change appearance when they are selected

Covers WCAG 2.0 AA 2.4.7

If a user is browsing via their keyboard they should see whatever is selected on screen. For example, on the BBC News website, the currently selected menu option has a clear blue border:

WCAG requires that you make this ‘focus’ area visible. This is automatic, but unfortunately most websites add specific CSS to turn it off, breaking accessibility for keyboard users.

Silktide now identifies where your website fails to highlight areas when they are selected by the keyboard, like so:

You can test this yourself by visiting the webpage and pressing the Tab key to step through options one at a time.

Ensure links are distinguished by more than just color

Covers WCAG 2.0 A 1.4.1

Where a link appears in the middle of a block of text, that link must be sufficiently distinct from the surrounding text. Consider these links:

To pass WCAG A, you must either have very strong colour contrast between your text and your link color, or you must distinguish these links through more than color alone. For example, with an underline:

Relying on color alone to distinguish links from regular text is highly discouraged. There are relatively few color combinations with enough contrast (as your text and links must contrast both with each other, and with their background). It’s much easier just to add an underline or similar.

Note that this check does not apply to links which are outside of blocks of text. For example, links in a menu or a footer are usually clearly links based on their context, and don’t need to be distinguished further.

Ensure form controls contrast sufficiently with their surroundings

Covers WCAG 2.1 A 1.4.1

A new requirement of WCAG 2.1 is that form controls contrast sufficiently with their surroundings. For example, these fields would fail WCAG 2.1:

Generally you will need either a border with a strong contrast (3:1) or for your fields to be a strongly contrasting colour compared to their background.

Note that the default field styles for most browsers (like those pictured above) would not pass WCAG 2.1. You will usually have to add stronger border or backgrounds manually to comply.

Using the new checks

These checks will appear automatically the next time you run a report. On average they will impact your score by around 3%.