Accessible Design for GG.Deals
TL;DR
I improved GG.deals website accessibility by applying WCAG principles, addressing colour contrast and focus order. Using Figma plugins, I enhanced usability for keyboard and screen reader users. This project highlights the crucial role of WCAG in creating more inclusive digital experiences.
Platform
Web
Year
2023
Project
The goal of this project is to apply Web Content Accessibility Guidelines (WCAG) to the existing GG.deals website to make it more inclusive for keyboard and screen reader users.
Roles and Responsibilities:
Accessibility review:
Focus order review
Contrast testing
Focus State Design
Main Issues
Main Issues
Contrast
One of the main issues found on the Website concerns the colour contrast between the texts and the background.
Not only colour blinded people, but also people with lower vision can find problems reading some content considering the size of the text and its colour contrast.
To overtake this problem, I used a simple plugin on FIGMA, called “contrast”, which evaluates the colour contrast considering the font size. After evaluation, I was able to suggest more suitable colours as closely as possible to the original ones while still passing AA requirements.
Failing colour contrast
Intro
Playing video games on a PC is becoming more accessible with new technologies that allow people with disabilities to enjoy playing games that they would not be able to in the past. Accessible controllers, font size options, adjustable contrast options and customizable controls are just a few examples of accessibility technologies built into games.
Colour suggestion
Focus states and focus order
Focus Order is the order that the system should follow while keyboard navigating, from top to bottom, left to right.
Focus states are meant to draw attention to the element. Trying to make them blend in with the UI defeats the purpose. All interactive components on a page need a focus state, not just buttons or links.
On the existent website, the focus order and its state weren’t implemented, therefore keyboard and screen reader users couldn’t navigate properly on the platform.
To overtake this problem, I also used a plugin on FIGMA, called “A11y Focus Order”, which allowed me to define the focus order and design its state.
Focus states
Conclusions and learning
More and more designers are defining and enabling great user experiences, but doing so to the detriment of entire segments of society is a disservice. It is very clear now that every user should be considered and included when it comes to design. In that way, learning and applying WCAG becomes a must in every design skill set.
Therefore, I feel grateful for the opportunity of learning and applying this new ability while I keep studying and sharpening my skills, being sure that design should become more and more inclusive for everyone.
About GG.Deals
GG.deals is a price indexer for PC games. It scrapes the web looking for the best deals from multiple stores, comparing current prices to past prices assisting the buyer to make the best decision based on the pricing data.
Methodology
The first and most important thing in this project is to understand the constraints of people with disabilities and older people with changing abilities due to ageing/aging. Once we understand the needs of this target, It’s time to think about how to make the product accessible to these users.
To that end, I applied the Web Content Accessibility Guidelines (WCAG) AA level, which are guidelines to define how to make web content more accessible. WCAG provides a provide common definition for accessible content, a benchmark.
Previous project