Ashley Firth writes about making the octopus web site as user-friendly as doable…
The Dwelling Workplace just lately revealed steering on how firms can use internet design and improvement to make websites accessible to everybody. They outlined guidelines to assist these with low imaginative and prescient, bodily or motor disabilities, dyslexia, customers on the autism spectrum, or these utilizing display screen readers (software program that reads webpages or shows them on braille readers).
We took this as the proper alternative to audit our web site and see if we had been offering all of our guests and clients with a simple and pleasurable expertise. The outcomes of this audit had been good, however not excellent, so we started working. Listed below are among the checks we ran and some areas by which we improved – hopefully our progress will encourage others to do the identical.
Alt textual content
The very first thing we checked was that the textual content sitting behind the pictures of our web site really described the picture’s that means, quite than its operate on the web page. For instance, the alt textual content for our “About Us” web page banner needs to be “a picture of the Octopus Power operations crew,” and never “About us banner picture.”
Headers
The following step was web page headers. We wanted to ensure that the headers organised the web page in the correct approach, in a logical, hierarchical construction. We used a selected mapping program (Headings Map chrome extension) that confirmed us the headers’ positions and we optimised this in order that display screen readers gave every part the correct emphasis.
HTML5
Then, we needed to ensure that our web page was accurately structured in HTML5 (the code that describes webpages). By coding the positioning accurately, every factor of the web page works in concord – nothing is “marooned” with out context. This additionally means customers can generate a desk of contents utilizing assistive expertise, serving to them to navigate the positioning.
Tab index
Many customers desire to make use of only a keyboard, or can solely use a keyboard, to navigate an internet site. So this was in all probability an important addition to the positioning all through the audit. For pages corresponding to articles that is comparatively simple as all of the content material is there, however for core flows on our web site, corresponding to getting a quote, breaking it down and signing up, this content material exists over a number of pages, inside modals and dropdowns, and requires person enter.
Most browsers are superb at permitting keyboard interplay with parts corresponding to buttons, hyperlinks, and kind inputs. Nonetheless, typically design and UX dictates customized elements that stray from this, they usually must be simply as accessible. Tab index lets you outline a sequence that customers observe once they use the Tab key to navigate via a web page. With this, you may make sure that customers have entry to all the data on a web page in an order that’s each clear and logical. As soon as we’d accomplished this, we went via some further phases ensuring that after the weather of web page may very well be targeted on, that customers might work together with them too.
Distinction ranges
This can be a difficult challenge to identify typically, however simple to check. W3C Net Content material Accessibility Tips state that the distinction degree between foreground and background colors needs to be at the least 7:1 for normal textual content to beAAA compliant. That is particularly necessary for customers with low imaginative and prescient, who might have hassle specializing in textual content colored equally to the background.
As it will be extremely tough assessing distinction with the human eye, there are fairly a couple of useful on-line instruments. The Webaim distinction instrument is what we used (you submit the 2 hex codes manually), however there are instruments that may assess an entire web page, corresponding to Webaim Wave. The Google Accessibility developer instruments extension additionally raises any points with distinction if you audit a web page.
And lots of extra…
Some minimal effort “fast wins” that basically assist clients:
- Elevating the bottom font dimension to assist these with low imaginative and prescient. The gov.uk web site has 19px because the lowest font dimension, guaranteeing everybody can simply learn their content material (we use 18px).
- Guaranteeing that motion buttons state what you’re about to do, as a substitute of being obscure. For instance, a join button ought to say “Join” and never “Click on right here”.
- When utilizing icons or color to convey that means or motion, all the time help it with textual content. Color solely impacts these with low imaginative and prescient or colourblindness, and using figures of speech, idioms, or visuals that may very well be misinterpreted can have an effect on these on the autistic spectrum.
- Don’t have giant textual content in paragraph tags masquerading as headers. The visible that means attributed to it’ll by no means be conveyed through a display screen reader.
Instruments
Discovering the issues are typically simply as onerous as fixing them. These had been the perfect instruments we discovered over the course of the audit:
Inspiration
The Dwelling Workplace’s wonderful visible posters of the Do’s and Don’ts of Designing with Accessibility in Thoughts.
How have the modifications affected our clients?
Customers can now:
- Get a quote, work together with it, and join utilizing simply the keyboard or a display screen reader.
- Carry out common duties throughout the members space corresponding to submit a meter studying, view their payments or edit their particulars utilizing simply the keyboard or a display screen reader.
- Use display screen readers with extra ease, as all pages observe a logical informational and heading construction, with descriptive alt tags for photographs.
- Simply learn all content material on the web site, because it has a passing AAA distinction score.
- Clearly perceive the aim of hyperlinks and buttons, with descriptive motion textual content and no situations the place solely imagery is used to convey that means.
I’m pleased with the progress we’ve made on the positioning’s accessibility, however no web site we’ve seen is ideal on a regular basis. We’ll diligently keep the brand new requirements we’ve set for ourselves, with the purpose that no one will likely be excluded primarily based on the way in which they work together with our web site.
Ashley Firth,
Head of Interfaces
