Read on Twitter
How we made Atila more accessible
A thread
A thread
In Canada, about 5.7% of adults are visually impaired.
We realized that the shade of blue we used for our link colours did not pass the Contrast ratio accessibility test.
For average users, an acceptable ratio is 3.0, but for the visually impaired the target ratio is 4.5.
We realized that the shade of blue we used for our link colours did not pass the Contrast ratio accessibility test.
For average users, an acceptable ratio is 3.0, but for the visually impaired the target ratio is 4.5.
At first, we slightly made the blue darker (hex code #0072ec).
We didn’t want to create a giant culture shock and this colour of blue was dark enough to meet requirements well still being similar.
However, we failed to take into account our hover effect.
We didn’t want to create a giant culture shock and this colour of blue was dark enough to meet requirements well still being similar.
However, we failed to take into account our hover effect.
What we found is that it didn’t even meet the standard colour contrast ratio for those who are not visually impaired.
We also realized the Contrast Ratio varied depending on location. i.e. the footer pictured below needed a contrast ratio of 7.0 to pass the test.
We also realized the Contrast Ratio varied depending on location. i.e. the footer pictured below needed a contrast ratio of 7.0 to pass the test.
To fix these issues, we decided to draw some inspiration from Google.
When you hover over a link in a Google search, the page underlines the text that you are hovering over.
See example
When you hover over a link in a Google search, the page underlines the text that you are hovering over.
See example
So we changed our hover tag to underline too.
We also changed the blue to an even darker shade so that we meet the 7.0 contrast ratio. We ended up using the hex code #0056b3 as the colour for our links.
We also changed the blue to an even darker shade so that we meet the 7.0 contrast ratio. We ended up using the hex code #0056b3 as the colour for our links.
The site was looking great, it met the Contrast Ratio requirements for all users, and the darker blue fit in nicely with the white background.
However, we found that our new changes had made the button text go dark blue upon hover as well. It made the button unreadable.
However, we found that our new changes had made the button text go dark blue upon hover as well. It made the button unreadable.
The final step was to ensure that the button was easy to see and interact with on the website.
To do this, we changed the button text colour to white, to ensure that even when hovered over the button text is easy to read with all.
To do this, we changed the button text colour to white, to ensure that even when hovered over the button text is easy to read with all.
After reviewing the changes, we pushed it to the site where it is now live! ( http://atila.ca )
We made these changes to our links to ensure that Atila is accessible for everybody and we want users to have the best possible experience when finding funding for school.
We made these changes to our links to ensure that Atila is accessible for everybody and we want users to have the best possible experience when finding funding for school.
Having a disability shouldn’t put you at a greater disadvantage, and we understand that and are continuously working towards improvements to our site.
If you have any other suggestions for us please email [email protected], or tweet or DM us at @atilatech
If you have any other suggestions for us please email [email protected], or tweet or DM us at @atilatech
Check out the full blog post here: https://atila.ca/blog/aarondoerfler/how-we-made-atila-more-accessible/#atila #accessibility #tech #design
