Accessibility, or the consideration of the wide range of disabilities throughout the design and creation process, can be tough to integrate throughout the product development process. This is a challenge MURAL is also facing, and its Design Systems & Accessibility (DSA) team is working to shift the company to an accessibility-first mindset. In this post we’ll explore one facet of their approach, an education platform, in depth, and discuss what worked well and what could be improved.
A Trip to A11yland
The DSA team started with an ambitious project known as “A11yland.”1 A11yland is a sprawling board game–like map linking to various video lectures, references, and practice exercises, and has multiple paths for various disciplines including design, development, testing, and marketing. The DSA team leads announced the program to the company at an All Hands meeting in November, closely followed by a strongly recommended voluntary “Power Hour”: a session with the DSA team that included a brief introduction to accessibility and empathy-building exercises like navigating the MURAL app using only a keyboard and watching a recording of a blind user traversing mural.co with a screen reader.
A11yland used this initial live workshop as a springboard into its first practical learning module: Assistive Technology. The DSA team tested this first chunk on five sponsor teams of about fifteen people each. These users were tasked with watching videos on people using assistive technology to navigate the web, explanations of different types of assistive technology including eye trackers and screen magnifiers, and practice exercises using the technologies demonstrated. The team also included additional recordings, written articles, and hands-on exercises that could be referenced if desired.
Of the roughly 75 people asked to test the training, six people participated, including two from the DSA team, and none had filled out the feedback request form nor asked for individualized help, which was also made available. The DSA team had been careful to start from a base of empathy and break lessons into thoughtful, digestible chunks that they called “bite-size,” so what was going on here? Why was no one “biting”?
More Than They Could Chew
To gain some insight, the DSA team surveyed their sponsor teams, asking testers what they thought of the training. Respondents said they felt overwhelmed by the amount of information and confused by what to do with it. They also had trouble seeing how the lessons related to work, and wanted to know the minimum requirements for their specific roles. In other words, they wanted a stronger focus on practical ways to implement accessibility and to spend less time on the “why.” The DSA team also noted that a majority of responses were from designers, while a couple were from managers, and only one from a developer.
The team then ran their own analysis, revisiting their initial thesis: a one hour workshop is not enough training to develop an accessibility-focused team. Did they still believe this was true?
Self Reflection
A11yland was never intended to be completed in a single day, but a resource to be visited time and time again while developing products at MURAL. If the team focused only on implementation and removed the extra resources, could they cram everything into one hour?
Educational feasibility aside, at a remote-first company it can be extremely difficult to find even fifteen minutes where everyone is free, so schedule-wise it seemed like an impossible feat. The team reexamined the feedback they collected, most of which asked for reduced focus on empathy. Could they afford to excise those sections?
In the team’s experience, empathy was the most effective way to engender “champions,” or people who actively promote accessibility practices within their team and/or outside the company; and was critical for developing products that are just not technically compliant to static rules, but also actually usable in practice. Thus, the team decided it wasn’t possible to significantly reduce the scope of their lesson plans. But before moving on to developing a new approach, the team discussed their own thoughts on what did and didn’t work for them in A11yland’s first iteration.
A11yland had been built with MURAL — a digital, visual, collaborative workspace — with the intention of dogfooding the company’s product while iterating on it. However, it was tough to track progress, which depended on an honor system approach where testers marked lessons taken on a table using screenshots. Seeing as this was difficult to keep an eye on for the six existing participants, the team concluded it would be impossible to scale to a company of 500 employees. In addition, because of the “sprawling canvas” nature of murals, it was tough for A11yland’s participants and facilitators to keep track of the overall scope of the lessons. Finally, the team realized they could have saved time and energy by starting to solicit feedback as early as possible.
A Sprinkle of Accessibility
With newfound focus on practical exercises and smaller lesson chunks, the DSA team decided to downsize each step of A11yland to just its hands-on practice sections, dubbing these “sprinkle-size” training. Because the empathy-building exercises are still key to motivating colleagues to take an accessibility-first approach, the team delegated these to a live workshop integrated into the required onboarding program all new hires go through. And to disseminate and track sprinkles across the company, the team decided to leverage KnowBe4, a training platform which already hosts MURAL’s wildly popular (really!) cybersecurity training program, which would allow them to automatically add new hires to the lessons as part of the onboarding process.
Before starting development on this new approach, however, the DSA team decided to roll out an RFC to get input from across the company, having learned their lesson from the A11yland rollout. This stage of the process is currently in progress, and we look forward to sharing how it goes!
Farewell to A11yland?
So with a new sprinkle-sized program in sight, is this the end for A11yland? Well... no. While A11yland was deemed to be an overwhelming first-time experience to the world of accessibility, it remains a great learning roadmap and resource for those excited to learn more about the practice, and the team plans to open it up to “a11y champions.” Identified by the speed at which they complete the sprinkle-size training, champions will be the primary advocates for accessibility on their respective teams at MURAL, acting as an embedded DSA team member to help educate and ensure accessibility practices are followed. The DSA team is also brainstorming incentives for champions, including swag and a possible budget for attending accessibility conferences.
Lessons Learned
While their trip through A11yland didn’t go exactly as planned, the DSA team remains excited to roll out both training programs across the company. The team learned a lot throughout the iteration of the education platform, and their biggest takeaway was to get feedback before building out the actual courses. While A11yland is still a valuable part of the platform and here to stay, the program is going to be assigned across MURAL slightly later than planned due to changes based on the feedback. Though a bit frustrating, the team doesn’t see this as a failure but as a necessary part of the development process; every organization is different and will require different approaches and research to challenge assumptions. Despite the change in approach, the team was able to maintain the same empathy-based foundation across both programs, the efficacy of which was recently validated by presentations at the 2021 CSUN Assistive Technology Conference.
Final Thoughts
Implementing and building excitement for accessibility can be extremely challenging, especially when working solo. The DSA team at MURAL feels lucky that this drive started with the executive team, responding to requests and requirements from academic and non-profit clients. They also face a relatively unique challenge to make accessible a visual application built on inherently inaccessible technology.
Reflecting on their situation, the DSA team leads feel both well placed and well supported to effect cultural change thanks to their broad experience in the field, the trust and support from leadership, and most importantly, the openness to collaborate and learn within their team; and they look forward to spreading that enthusiasm and knowledge across MURAL because “it’s the right thing to do.”
Top comments (3)
Great and interesting article and insight, glad to see the attempts to put accessibility on the map (literally, I love the idea of accessibility land!)
Couple of quick ones:
Is there a high quality image or better yet a way of accessing the map itself? I would love to see the steps you put in but dev.to compression makes it impossible to read.
If you want a way to slowly introduce the team to accessibility and not overwhelm them start with your website rather than the web app.
There are loads of things on there that can be fixed relatively quickly and it is the ideal place to learn how to use a screen reader, see how hard it is to navigate by keyboard etc.
The DSA team could put a lot of issues on your issue tracker in bite-sized pieces and then associate the fix with who it would help.
For example:
BUG:
honour
prefers-reduced-motionfor the six feature graphics on the home page.WHY:
People with vestibular (movement based) disorders can be made to feel sick by the movement. Also people with cognitive disorders such as ADHD or paranoia can be easily distracted / unsettled by unexpected movement.
RESOURCES THAT WILL HELP:
WHAT WCAG IS APPLICABLE:
TOOLS NEEDED TO TEST
(This could be screen reader, screen magnifier etc. incrementally introduce different technologies and make it part of the DSA teams job to provide information on installation and usage when the time comes. It also makes it easier to slowly introduce screen reader features. For example you could have a basic "heading levels skipped" task and introduce the shortcut keys 1 through 6, later you could have "read more" links and introduce the "K", "U" and "V" shortcut keys for cycling links etc.)
HOW TO ENSURE FIXED:
Go to developer tools and under "rendering" switch on "Emulate CSS Media feature
prefers-reduced-motion". If the animations no longer play on the page with this switched on it is successfully fixed.Anyway just a minor suggestion on one way to let people quickly get their hands dirty and benefit the company at the same time!
You could always keep an "inaccessible" version of the website somewhere that people can follow the same steps / bug fixes on in the future!
Thank you for reading and sharing your thoughts! Sadly, because dev.to is compressing our high res images, we have no way to share this image with you at the moment.
As for your WCAG suggestions, these are great ideas, and the DSA team has been working on a lot of them already! This piece just covers one part of their many initiatives.
You could upload the image to imgur or similar service and provide it as a link rather than an embedded image. As I said, I would love to see it!
Glad to hear some of my suggestions might be useful!