Fixed a bunch of accessibility issues for my website(and how)
This video from Google Web Fundamentals’ Accessibility section blown my mind last weekend; it’s about how blind people use websites.
People who have vision disabilities can use the Web as efficient as people who have nice eyesight, as long as the website has good accessibility(a11y) support.
And that support does not take a huge effort.
So, after this git commit, I’m very confident that my personal website will still be accessible to myself when I became blind.
The website doesn’t change from the visual and functionality perspective(nearly no features provided actually).
Let me summarize the changes I made along with the resources I think might help you get started if you want to :)
Make sure every user-interactive element have the screen reader understandable label
The image below is the footer of my website, which has two links for the platform profiles.
What happens if the screen reader looks at them on the yesterday version of my website?
It will tell its user, they are “link”, and that’s it.
By specifying the label with aria-label, now, the screen reader will speak “link, David’s linkedin profile”.
For links below, previously, the text is included in the a tag, so the screen reader will say “Github, link”.
Isn’t “David’s Gtihub profile, link” provides more context?
As the image above, by inspecting the element through Chrome devtools’ accessibility tab, the “Contents” is overwritten by the aria-label.
Like so, changed all the elements to have proper labels.
Using Html5 landmarks to improve page navigation
Before today, I didn’t understand what’s the difference between <article />, <section /> and <div />.
They are very helpful to the screen reader users navigating content.
By adopting the <article />, <section />.
My website’s landmarks section changed from a single main to:
You can read the landmark reference to explore more :)
The focused element should have a focus ring
Previously, I removed the focus ring for the footer elements, why?
Because I think it’s ugly.
For people who cannot use a physical mouse, the focus ring is their pointer. Image ourselves moving the pointer and cannot see anything moving?
Content should have a high color contrast ratio
High color contrast ratio helps readers identify content easier.
Chrome dev tool can tell you what’s the ratio for your elements :)
The changes I made to my website just belong to a subset of the web a11y due to its limited functionality, two links will be very helpful if you wanna explore more:
The overall principles(WCAG):
The developer reference(WAI-ARIA Authoring Practices 1.1).
It will answer questions like “what if I build the web components on my own like slider and modal, how to make them more accessible?”
Thanks for your time!
