At Jackrabbit, we understand the importance of website accessibility and strive to make our clients’ websites inclusive for users. In our commitment to deliver tangible results, we took a unique approach by hiring a freelancer who is trained and specializes in actual accessibility checking using various screen readers to review our website. For those who have yet to enter into the world of ADA, a screen reader is a type of software designed to assist individuals who are blind or visually impaired in accessing the content displayed on a computer screen by utilizing a speech synthesizer or a braille display to read the text aloud. From our recent experience, we will explore just a few of the insights we gained from this hands-on accessibility review and highlight the distinction between accessibility tests and the real-world impact on users.
For context, our reviewer was using JAWS 2023 on Google Chrome and Windows 11 and was reviewing our new Jackrabbit website before our launch. JAWS (Job Access With Speech) supports a wide range of applications and operating systems and includes a variety of features to help users customize their experience.
Example 1: Page Titles
One of the things mentioned was that our team page title didn’t use “Jackrabbit Design” (at the time it was “Exceptional Talent, Creative Excellence | Meet the Jackrabbit Team”) and did not parallel the language in the homepage link text (“The Rabbits“). A best practice would be to have the link text match the title, and the title to match the level 1 heading tag (H1). These might seem like small details, but they can make a big difference in the accessibility experience as well as SEO.
The Fix:
This was an easy one! Using Rank Math, we updated the team page title per her recommendation, so now it is “The Rabbits | Jackrabbit Design”.
Example 2: Navigating with First-letter Navigation for Accessibility
This is something that third-party accessibility tools would not alert and was a surprise for us as it did not come up in any of our prior research and education around website accessibility. According to our freelancer, many people will use a feature of the screen reader software that allows them to skip to a list of all of the links on the site, allowing them to quickly and precisely find the content they’re looking for (i.e. using “L” to look for LinkedIn links). Oftentimes, links will use things like “View” or “Visit” at the start of their link text, which would render this useful feature almost unusable, as most of the links on the page would all start with ‘Visit’, making each link indistinguishable from the others.
The Fix:
After being enlightened with this information, we altered the way our templates labeled our page buttons and links within the link text and also where we utilized the Aria Label attribute. This allowed us to have consistent text like “View Case Study” in our buttons visually, but in the code utilized by the screen reader, it would say something like “Southport Boats Case Study”, which offered better compatibility with the first letter link navigation feature.
Example 3: Copyright Callout
It’s worth considering that someone using a screen reader might expect that the copyright is the last item on a given page. It could be worth rethinking the reading focus order and having the focus of the cursor go to the copyright last. This is also a good spot to put an accessibility policy and/or a technical link.
The Fix:
To solve this, we altered the code in the footer in a linear way, making the copyright text the last content on the page. Then using CSS to control the visual styles on the page, we altered the order in which other footer content was displayed so that it fell after the copyright in the visual hierarchy. This ensured that the screen reader would read the copyright information last even though visually it did not appear in that order.
What Does This All Mean?
These are just a few examples to get across the process and outputs of ADA testing. The feedback we received emphasized the significance of user-centered design and thoughtful implementation of accessibility features. Her insights went beyond identifying technical issues; she provided invaluable suggestions to improve the overall user experience, such as clearer navigation, better organization of content, and more descriptive alternative text for images.
We’ve done accessibility webinars with Perkins School of the Blind, which were incredibly valuable. However, when we initially think of accessibility, it often is in the context of making sure sites “pass” tests. Accessibility tests, while important, often focus on technical compliance and guidelines. Sometimes, tools that grade your site or provide feedback in this manner are challenging because of the intention. With tests, the question being answered is if the site checks the boxes for what has been deemed as making it “accessible”—but we’re learning that this doesn’t always line up with what an actual user of a screen reader is going to find the most helpful.
Ultimately, the real measure of accessibility lies in how users with disabilities interact with a website. Our collaboration with our freelancer highlights the need to bridge the gap between meeting guidelines and ensuring a seamless experience for those who rely on assistive technologies. By experiencing our website firsthand, she provided feedback that shed light on potential barriers and guided us in making meaningful improvements.
Incorporating direct feedback from an experienced screen reader user has been a transformative experience for us at Jackrabbit. It has reinforced our commitment to creating accessible websites that go beyond meeting guidelines and truly empower individuals with disabilities, also giving us a better appreciation for how people interact with our site. By focusing on the real-world impact and addressing the specific needs of users, we can collectively make the web a more inclusive and welcoming space for everyone.