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.

Another productive month for the Climate team: Climate Emergency UK’s launch of the Council Climate Plan Scorecards project is very close. We’ve been providing them with technical help, designing and building the website, and it’ll all finally come to life very soon.

I’m happy to mention that this is my first contribution to mySociety’s blog. Hi everyone, I’m Lucas, one of the recent acquisitions on the Design team, and I’ve been working on the design and front-end aspects of the Council Climate Plan Scorecards for the past few months.

Without further ado, let’s see what we’ve been up to this month.

Council Climate Plan Scorecards

We have some exciting news regarding the Climate Scorecards. The CEUK team has led their teams of motivated, trained volunteers and consulted with local authorities to complete the right to reply followed by the second marking process. We’re now super close to launch.

CEUK have also been busy securing press coverage – it looks like at least one major national will be carrying the story in detail, and there’ll be a co-ordinated effort, again, made possible by those amazing volunteers – to ensure that regional press know the stories around their local councils’ scores, too.

Ideally this website will reach as many people as possible, hopefully then inspiring them to take further actions to combat climate change, encourage more communicative councils, and thereby strengthen local communities.

The design for the social media infographics has been approved, ready to be used and shared on Twitter and Facebook on the launch date. We want users to share their council’s score and celebrate those councils who have performed well in the different sections and, of course, in the overall scores.

The Scorecards design process

I started three months ago at mySociety as a Front-end/Developer to work and provide support across the wide range of projects we manage — but the Council Climate Plan Scorecards was the first big project that I had to design from scratch.

From the beginning, it’s been an interesting experience, getting to know key stakeholders such as CEUK, understanding their requirements for the Scorecards website and at the same time, getting familiar with mySociety’s procedures and processes.

When we started the design process, there was an idea, a concept, a “something” we wanted to achieve. That was enough to allow us to create the Scorecards’ grey wireframe model: not so good looking, but a great help and an efficient way to understand how users will interact with the tables, while also checking whether we’d planned all the right components for the website. 

At this stage, Zarino and I were focusing primarily on the usability aspect of the site. With feedback from the team and CEUK, we were able to improve those wireframes and give them some light and colour, for a better representation of what the final experience would look like. At this point, we were still working on some of the components and improving the user interface and the usability side of things, especially for the tables and filters.

Weekly design/comms meetings helped us achieve the design we have now, and served as a basis for the front-end development of the website, while we could also keep up to speed on getting the word out about the launch.

And so, here we are today, about to launch the climate scorecards project. Let’s not forget to mention the amazing help from Struan on development, Zarino on design and Alex on methodology/number crunching.

Who’s got an idea?

The Climate team has started the new year recharged and ready to explore new ideas on how to maximise the impact of our work.

Zarino and Louise came up with the idea of exploring several promising ideas that we’ve had sitting in our Hopper, our list of ideas that have been sitting in the backlog waiting for the team to add some magic. This will happen via ‘rapid prototyping’ weeks – “six weeks to change the world”, as Louise put it. 

The process we are developing leans heavily on Google Ventures’ sprint design process – albeit it will in all likelihood be collaborating to develop ideas rather than taking our solutions to partners / the ‘market’. In some weeks we might spend some time building rough versions of what they might look like, which then enable us to make decisions about whether they have the ‘legs’ to go further; in others it’ll be a looser exploration.

We’re aware that not all ideas will fit a prototyping approach, and we’re also keen to make sure those are given equal chance at implementation, so this isn’t the only way for ideas to be considered. But our first prototyping weeks are pencilled into the diary for this spring: watch this space for more progress.

We discussed several exciting new initiatives, some related to procurement, useful data for climate justice and tech action and finally, a pledge system to strengthen local communities.

Research commissioning

Some more great news this month, around the research commissioning process we outlined in last month’s notes: bids for our first commission (“Public understanding of local authorities and climate”) closed last week. We’re glad to say that there are some really good submissions.

The team will review these in the coming days, and we’re also looking forward to releasing the next two commissions on “public pressure and local authorities” and “how local authorities make decisions around climate”.

That’s it for this month! Lots going on.

—

Image: Emiliana Hall