01
problem
An extensive accessibility audit was conducted across all of Stellantis brand websites. This audit revealed that a lot of the sites were inaccessible and didn’t meet, at least, level AA compliance. Although most issues found were coding-related, there were unique instances that required components to be redesigned from a UI and UX perspective.
One particular component that needed to be made accessible was called, the “Comparison Slider.” This particular component that was very visual and interactive didn’t carry the same capabilities for non-sighted users like it did for sighted users.
02
project goal
Improve upon the current visuals and functionality of the component and ensure that the focus order makes sense to non-sighted users.
03
role/team
I was the lead UX Designer partaking in this project alongside a Visual Designer. We worked closely with the Tech Accessibility Lead to come up with unique solutions alongside a Project Manager, BA and a team of Front and Backend Developers, and QA.
There were two versions of this component that existed in the Stellantis design ecosystem. Version one was primarily used for brands, Jeep, RAM, Dodge, Chrysler and FIAT, while version two was only used for Alfa Romeo. Even though both versions pretty much functioned the same way, the Alfa Romeo version did have additional capabilities that the former lacked. Therefore, the decision was made to enhance the Alfa Romeo version and sundown the other one.
04
business requirements
A. Update Comparison Slider component UI
B. Add flexible sub-component that allows for Content and CTAs to be included
C. Improve slider bar functionality across breakpoints
F. Ensure colours and animation meets colour contrast accessibility standards
G. Re-think Focus Order of component for non-sighted and/or keyboard users
05
Visual and functional updates
Great lengths were taken to ensure the flexibility of this component in order for all six Stellantis brands to be able to utilize it. But, we also made sure to still put limitations on how flexible it could be by only asking brands to identify the MOST IMPORTANT features they’d want to include. By taking this approach, we would be able to design, develop and test every permutation within a manageable amount of time allotted for this project.
Initially, when the accessibility audit took place, this component wasn’t flagged as inaccessible. This is because all the elements that made up this component–two images, content and slider bar–passed basic accessibility requirements. Images had alt-text attached, and the slider bar–an interactive element–would receive focus, announcing which direction the bar was sliding. But, upon further analysis, we realized that this way of interacting with the slider bar didn’t allow non-sighted users to know what the purpose of this bar was for–comparing two images.
06
focus order exploration #1
With the logic that a user should be able to use the Tab key to navigate interactive elements from left to right and top to bottom, this component challenged that logic, especially when looking at the mobile breakpoint.
One major element we decided to include in this component for non-sighted users was the HIDDEN BUTTON ELEMENT, commonly used at the top of a page. If someone tabs into a page, a button that reads “skip navigation” that was hidden will appear, giving them the option to not tab through the entire navigation menu. We repurposed this element to fit our component in a unique way.
07
focus order exploration #2
Wanting to pull away from forcing users to interact with this component and allow for more autonomy, two focus order paths were mapped out and the placement of the Hidden Element changed.
When mapping the second path, the mobile breakpoint showed us that the focus order jumped too far back and Users could run into the issue of forgetting their spot in the tabbing order
08
final focus order
With the adjustment to place the Hidden Element above the Content,
we decided on a focus order path of least resistance.
Why allow for autonomy? Much like how Sighted Users can choose to interact with this component, we wanted to give that option to Non-Sighted/Keyboard Users
Of course there’s no skipping the entire component completely, but to these users, this path can be tabbed through like any typical image and content component with the added function of the Hidden Button Element to toggle between Images
09
final thoughts
This project truly challenged my team and I to really go beyond the scope of what we knew about accessibility. Designing for accessibility brings about its limitations, and oftentimes, design gets the short-end of the stick in favour of accessibility. But, this project proved that we didn’t have to sacrifice beautiful design as long as the accessible logic was fair and made sense.
Even though we were designing for such a small percentage of users, they’re still human at the end of the day and they should be given the autonomy that the majority have.