Our front-end designer Lucas Cumsille Montesinos highlights some of the work he’s been doing recently to make FixMyStreet and all integrated co-branded versions of the service running on FixMyStreet Pro more accessible – a crosspost from the SocietyWorks blog.
___
Over the past year we have been collaborating with users of FixMyStreet and FixMyStreet Pro to enhance the solution’s accessibility, making improvements to the user experience for people using assistive devices.
One of our clients, Transport for London (TfL), shared an accessibility audit of their installation of FixMyStreet Pro with us. The document listed issues detailing information regarding the Web Content Accessibility Guidelines (WCAG) and some improvements that could be applied.
Here are some of the points they shared with us:
- Description of the issue.
- Level success criteria using the WCAG standard: Level A (lowest), AA, and AAA (highest).
- A link to the page and location of the component where the issue can be found, along with instructions for replicating the problem if necessary.
- Status of the issue: Pass, Pass with comments, N/A, Fail.
- They also provided recommendations made by the auditor.
What improvements did we make?
The report from TfL allowed us to work on different areas of improvement, for example:
- Meaningful Sequence: We focused on making the order in which assistive devices present the information match the order in which the page is visually presented.
- Non-text Content: We hid purely decorative elements from screen readers, reducing unnecessary clutter for users when navigating the site.
- Info and Relationships: We improved and updated the role and attributes of some HTML elements so assistive devices can better understand the context and how to use those elements.
- Focus Order: When someone is tabbing through a website (using their keyboard instead of a mouse), everything should flow naturally and make sense. It’s making sure that when you hop from one thing to the next, the order matches how you’d understand the content – no jumping around to random spots that leave you scratching your head.
What did we learn?
- Include the WCAG conformance level (from A to AAA), where level A is the minimum. Ideally, you would like the website you are working on to comply with all Level AA success criteria. Using the conformance level makes it easier for you to prioritise which issues should be tackled first and which ones can be done later.
- Some issues won’t require a lot of time to fix. This can be your second factor when it comes to prioritising which improvements to make first. For example, easy fixes like adding aria-labels or increasing the contrast between the text and the background colour can be done in little time and greatly improves the user experience of your website.
- If you find an accessibility issue, always try to provide as much detail as possible, especially if someone else will be doing the work to fix it. The TfL document made solving the issues much faster and minimised any back-and-forth. Even sharing which browser you were using when experiencing the error can make a difference.
- One of the most interesting experiences was solving issues that didn’t seem like an issue (at the time), but once you deprive yourself of literally looking at the screen and using an assistive device, then the problem starts making sense. For example, the action of a button can make sense when you are looking at the screen and the elements that are surrounding it, but if you can’t see the context, the elements around the button, then the button might not make much sense. Adding further instructions like an aria-label that provide the context that the eyes are missing can help users understand where they are and what they can do much better.
- Finally, it is a great exercise to be more conscious when designing a website. Yes, a certain text, link, or button colour can look great, but can it be read easily? What about colourblind users? You can install plugins in your browser to help you see the page the way they would see it.
Our accessibility improvements were rolled out to the national FixMyStreet site and all co-branded FixMyStreet Pro sites. However it is worth noting that FixMyStreet Pro is designed to accommodate the branding and styling of each authority that uses it, which can mean that some of our accessible default settings are overridden. This is why we always recommend that authorities carry out an accessibility audit on their own services.
___
Thanks for sharing, Lucas!
Read more about how we design accessible digital services, or browse more posts from the SocietyWorks team.
