Sustainable web design is accessible web design – Conscious Communication Design Blog

Digital products offer opportunities print products don’t: the product can be adapted to the viewer. When I first heard about variable fonts and having to consider that viewers should be able to increase the type-size on a website, or adjust the colour scheme, I felt like everything I learned and loved about design was thrown over board: How dare those users adjust my carefully selected design choices!
Thankfully, I have come a long way and see modern web typography as an art form in itself, an underrated one as such. In my previous post Best practices in Sustainable Web Design I introduced the beautifully designed website sustainablewebdesign.org and it’s accessibility controls panel.

Screenshot from https://sustainablewebdesign.org/ accessibility

The drop-down menu is – very noticeably – located in the top right corner of the page. It allows for alterations in colour and font size, and even allows for the removal of the background design elements. It even allows for switching to dark mode, which apart from adding a different viewing experience, allows for site access with lower energy consumption.
Accessibillity is a very broad topic, and if you are, like me, not originally coming from a web design background but only dipping your toe in every once in a while, it is very easy to get overwhelmed.
Thankfully, there is a standard in Web Accessibility, the Web Content Accessibility Guidelines (WCAG).

WCAG is primarily intended for:

Web content developers (page authors, site designers, etc.)
Web authoring tool developers
Web accessibility evaluation tool developers
Others who want or need a standard for web accessibility, including for mobile accessibility[1]

The WCAG is developed by the Web Accessibility Initiative (WAI), as part of the World Wide Web Consortium (W3C) which develops standards for the web[3]. The website has a very handy quick reference guide that helps in understanding what is required for accessible web design in four categories: Perceivable (text alternatives, adaptability, distinguishability), Operable (keyboard accessibility, time adjustments, seizures and physical reactions, navigation and input modalities), Understandable (readable, predictable, input assistance), Robust (compatibility)[2].

There are of course also online tools that scan websites for these features. The w3.org website itself lists 162 software or online tools for web accessibility standard compliancy testing[4]. And it does not only go by its own standards but also offers filters for standards of specific countries, and also a guide that helps in selecting the right tool.

One of the tools is wave.webaim.org. I’ve tested the tool by running three different websites through it:

1. Ethics in Graphic Design Blog

http://www.ethicsingraphicdesign.org/

Screenshot from ethicsingraphicdesign.org

2. The Green Web Foundation

https://www.thegreenwebfoundation.org/

Screenshot from thegreenwebfoundation.org

Web accessibility test of the site thegreenwebfoundation.org using https://wave.webaim.org/

3. The UX Collective

https://uxdesign.cc/

The first report for ethicsingraphicdesign.org mostly consists of errors regarding missing alternative text for images and a lot of ‘suspicious’ link text or redundant links. The thegreenwebfoundation.org suffers of too much low contrast for its text elements that are placed on images. In comparison, the result for uxdesign.cc seems like a disaster. The many errors primarily stem from ARIA issues though. ARIA stands for Accessible Rich Internet Applications and is a set of attributes that can be added to HTML elements and are supposed to help users with disabilities who use assistive technologies (AT). When accessibility issues cannot be managed with native HTML, ARIA can help bridge those gaps[5]. Standard HTML accessibility features are prefferable though, as ARIA isn’t supported in older browsers. In this last website, a lot of the ARIA links seem to need fixing.

Web accessibility tools can be very helpful in assessing what needs more work, and the WCAG are indeed very helpful, but consulting experts, collaborating and testing with people with disabilities should be the way to go. I am hoping we will also see more little tools like the accessibility controls on the sustainablewebdesign.org website. With more and more variable fonts becoming available, we are entering an era of simpler, more accessible, and more adaptable web design. Have you seen any other interesting accessibility features? Please drop me a comment below!