Viewing My React Site Through a 4.5:1 Ratio Lens
Sure, I’ve always put alt tags for my images, but I hadn’t made a site that focused on accessibility design from start to finish. The project that I had in mind was for a new podcast that talks to those living with and without chronic illness and/or disabilities. I wanted to make a React site for this podcast, and in doing so, make sure that the listeners and guests could view the site easily. In starting the project, I knew that I had to incorporate the following as a bare minimum:
- High contrast colors — to ensure that those with low vision can view the text and images, I used a dark violet and a chartreuse as my two main colors.
- Link Accessibility — When you hover over a link the background color changes to highlight the link and creates a border around the text. This is to make sure that links are discernible from the page text.
- Semantic Buttons — Having buttons not only change colors when hovered over as well but also having the text within the button specific to where that button takes you.
- Semantic HTML tags — For this project, I took out all of the <div>’s and utilized semantic tags such as <section> <article> <main> and <nav> to separate each of the elements. I also made sure to use the heading tags properly and utilize only one <h1> with headings being and <h2> and text utilizing the <p> tag.
- Alt text on all photos — obviously.
- Left aligned text — This broke my *center-aligned forever* heart but it was fun to design with text all in left-alignment and I’m looking forward to the challenge again in later projects.
- Closed captioning option — Since this site was for a podcast, I wanted to include an option for closed captioning. For now I added a button to view a Google document with the time stamps and the text, but in the future I would love to incorporate a toggle button to show the closed captioning or better yet have the text there and highlight the words as someone would be speaking. Thoughts for the future!
After I implemented the accessibility options above, I read that you could do an audit through the Chrome DevTools’ Lighthouse tab so you can test a sites’ performance, accessibility, best practices and SEO.
The first time I ran the audit on my site I got an 85% for accessibility. 🤦 ‘How could this be?’, I asked myself. But, really, I knew that there were so many options for making a site more accessible by looking though only a bit of the WCAG20 documentation and not event addressing ARIA tags yet. It was very likely that I could’ve scored lower TBH, but — I wanted to see how I could improve here.
I scrolled down within the audit after clicking on Accessibility. From there it highlighted three main issues within the site. Contrast, names and labels and navigation.
I scrolled to the contrast error to look a bit further:
Background and foreground colors do not have a sufficient contrast ratio.
Low-contrast text is difficult or impossible for many users to read. Learn more.
Failing Elements
li.stp-text
li.stp-text
It was so nicely laid out where this issue was coming from! So, I went back in and decided to darken the purple background image even more and added a black shadow to the back of the text to make the contrast more apparent. The color contrast for text requires a 4.5:1 ratio as stated by the Web Content Accessibility Guidelines and how they’ve come up with the ratio is by checking a colors’ relative luminance. You can find accessible color pallets anywhere but this was a pretty straight forward site for finding colors to match standards.
The second issue I got on my site audio was for Names and Labels. I scrolled to that section and looked at where the issue was detected:
Links do not have a discernible name
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more.
Failing Elements
a.new-title
I thought I got them all! But, one <a> tag slipped by me for the newest episode link on the main screen. I used to have just the text clickable but I took off the text-decoration in the CSS. After running this audit and reading more into tabbing through a page and accessing links, I added a button in order to specify where it is the user will go when clicking on it. I titled this button “Episode Details” and formatted it within the main page.
Finally, the last issue that came up within the audit was for Navigation. I originally thought it was for the nav bar that I had set up, but when I scrolled to the issue description it was pointing to a different element:
Some elements have a
[tabindex]value greater than 0A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more.
Failing Elements
img.stp-dwayne
For some reason I had this image set on tabindex=‘1’ so that it could be a focusable image but I found that when it was focused, it stretched out too much and distorted the image. I switched it to 0 and it I saw that the focus after switching the number actually blows the photo out less when focused on, so it ended up working out very nicely.
I learned so much through this project and by using the A11y project check list to not only dive deeper into the topic but also to have a reference of the standard in which an accessible site should be at. My next step in this process is to learn more about ARIA tags and how to best utilize them within my projects. Going forward I will absolutely take the knowledge that I found throughout this experience and apply it to all of my sites, and you should too! Gain access to “ 650 million people,” who live with a disability and design them a kick ass, functional website! Because just doing alt text for my images will no longer cut it for me.
