By Janus Boye
Gavin Colborne presenting in Aarhus at the Boye 19 conference
Accessibility has long been the bad conscience of digital leaders, but in recent years it has gained increased attention in modern web development.
The Web has always been intended for everyone, so it's important we can meet the different accessibility needs of all users. Similar to GDPR, new legislation combined with a desire to avoid lawsuits, and bad press, are driving most organisations today to ask for compliance.
In a recent member conference call, Gavin Colborne from Little Forest, shared what it takes to achieve the highest level of compliance - known as triple-A - as a brand.
Inclusive design makes your website the best it can be for all your users
To get us started, Gavin shared an illustration on inclusive design. The illustration is from a 2019 behind-the-scenes post by GSK titled Inclusive design: making our differences visible.
Besides being a helpful reminder that accessibility is so much more than making your website work for those with say reduced or no sight, it’s also a good way to systematically approach designing for everyone. Also beyond websites. To quote from the post:
This approach is not just important for reasons of social equality; it also makes good business sense.
Microsoft has also made great strides on inclusive design and has a well-documented and publicly available Inclusive Design methodology.
From their Inclusive 101 Toolkit manual (PDF), Gavin also shared the persona spectrum. A quick way to understand related mismatches and motivations across a spectrum of permanent, temporary, and situational scenarios. This also illustrates how a solution scales to multiple audiences.
As shown on the illustration, there are different types of disabilities divided into permanent, temporary and situational.
When we got to this slide, actually just a few minutes into the call, content strategist Hilary Marsh enthusiastically shared this quote on the chat:
Accessibility is not separate from design, it informs the design
Before we move onto reaching the highest level of compliance, let’s just clarify that we speaking about the Web Content Accessibility Guidelines (WCAG) which has three levels of conformance: A, AA and AAA. Today, most organisations ask for AA compliance.
Lessons learned from adventures into AAA
There are already some websites out there claiming to have the 'AAA' accessibility compliance rating, but what does it actually mean?
According to Gavin, Little Forest is aiming for AAA with their current website redesign and it’s been more challenging than expected. To quote from the designer on the project:
Accessible brands are hard work
and from an email later on in the process of creating a new logo:
Seriously! First time creating a brand that isn’t all about aesthetics.
The contrast is the key. See below initial palette and then the accessible palette
and then without the brighter yellow, green and orange below is the AAA accessible palette
In the slides (see link below), you’ll find more examples on accessible alerts, icons, buttons, colors, forms and typography.
I would have normally just copied the slide where Gavin shared design criteria at the AAA level, but that would break the accessibility best practice as in the 2nd bullet below
Text and images of text have a 7:1 minimum contrast ratio
You have no images with text
Hyperlinks self-identify their ultimate destination
He also shared these three content criteria:
Unusual words - use glossaries
Abbreviations - provide expanded form for each
Reading level - make sure someone with 9 years schooling can understand
Pronunciation - help screen readers pronounce correctly, eg. desert
Learn more about accessibility
During the call, a reference was made to the recent W3C CMS selection process. They made accessibility, also in the editor interface a big requirement. Read about the project: What can we learn from the W3C CMS selection process.
Gavin also talked about the introduction of new Equality, Diversity and Inclusion (EDI) officers in the UK and provided an update on the upcoming guideline update to WCAG 2.2.
Quite a few helpful resources were also shared in the chat during the call.
WebAIM: Contract checker - WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
A special font for people with dyslexia: Omotype. Another option is Dyslexie Font.
Standard guidelines from the W3C for how a product should work to be accessible. See Authoring Tool Accessibility Guidelines.
In October 2019, Gavin hosted another member call with an Accessibility Update Towards 2020. This covered the timeline for compliance, the importance of an accessibility statement, and finally a word on the limitations of automatic testing.
Finally, you can also browse the slides from the call (PDF). You can also view the entire recording from the call below