July 3rd 2019
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%.