5 hands-on (and easy!) ways to test your site’s accessibility
How can you tell if your website is accessible? We’ve written a step-by-step guide to help you do a mini accessibility assessment on the fly.
Websites designed and built with the core concepts of web accessibility ensure that your website can be accessed, understood, and used by as many people as possible. This includes members of diverse communities, like those with visual, auditory, mobility/dexterity, and cognitive disabilities.
So, how can you tell if your site is accessible? Well, the truest way to gauge your website’s performance is with a combination of real-world user testing, thorough auditing, and a detailed understanding of WCAG 2.0 guidelines. But until that point is reached, we’ve compiled a handful of step-by-step tests to help you conduct a manual assessment on the fly.
1. Check for focus states
Items needed:
Your website and a computer with a physical keyboard (no smartphones or tablets).
Goal/task:
Determine if your site clearly identifies links that are being selected/activated by your keyboard.
Step 1: Visit your site.
Step 2: Without clicking anywhere on the page, hit the “tab” key on your keyboard a couple of times — is there any visual indication of which link your keyboard is currently resting on?
What you should see:
A focus state (or, the glowing ring you might be seeing) helps users who navigate sites with a keyboard see which link is “in focus”. This default focus state may be orange (Firefox) or blue (Chrome, Safari, and IE), depending on which browser you’re using.
(Note: tabbing through websites is not a default option in Safari. To enable tabbing, go to Preferences > Advanced > and select “Press tab to highlight each item on a web page”.)
These default states can also be overridden in favour of custom focus states in order to make them even more obvious and/or visually appealing to your users. It’s pretty common for designers to specify that the custom focus states be the same as the mouse hover state.
Regardless of which treatment is used for the keyboard focus state, it must be noticeable (high colour contrasts are recommended) and distinct from the non-focused items on the page. Below is an example of a keyboard focus state on Sonnet.ca and a corresponding hover state. In this case, both states share a clean, identical treatment.
Why focus states matter:
It’s difficult to see where your keyboard is landing without a focus state. Unclear focus is a barrier for sighted keyboard users looking to access and interact with your content.
2. Check for keyboard traps
Items needed:
Your website and a computer with a physical keyboard (no smartphones or tablets)
Goal/task:
Interact with the links and content on your site, and navigate to the bottom of the page using only your keyboard. (No cheating!)
Step 1: Just like the previous tip, open your website and hit the tab key several times. To move back a step, hit Shift+tab, and to select a link, hit enter.
Step 2: As you make your way through your site, try to use the keyboard to open or interact with any element that would typically be clicked if you were using a mouse (for example, menus or buttons, and play/pause functions). Did you get stuck?
If you’ve become perpetually stuck within a menu dropdown or unable to trigger or close a pop-up modal, you’ve fallen into a keyboard trap.
What you should see:
You should be able to navigate and interact with every element on the page without getting stuck, or losing functionality.
Why keyboard-only navigation and interactivity matters:
Keyboard traps can prevent anyone with dexterity or mobility issues, and screen reader users, from accessing information on your site. Navigation restrictions or the inability to exit pop-ups is a bad user experience, period, so it’s best to test, find, and fix these errors early on.
3. Check for form errors (warning: caveats ahead!)
Items needed:
A website with a form that has required fields (any eCommerce or sign-up form should work), and a keyboard.
Goal/task:
Determine if you can navigate and submit a form using your keyboard alone, and identify if your form’s error messaging is accessible.
Step 1: Go to your site’s form and try to navigate and submit something by only using your keyboard. Is this possible?
Step 2: Try to make an incomplete form submission by leaving one or more of the required fields empty.
Step 3: Now, consider how each error is presented to you. Can you see text (e.g. Your Name is a required field) that indicates which specific information is missing or invalid? Where on the form is this information presented? Does your form use icons, an asterisk, text, or all three to highlight the errors?
What you should see:
Your form should communicate each error with more than just colour or iconography alone. In other words, each error should be communicated with text, and this text should indicate the exact information that’s missing/required. Alerting your users with a clear error message and an asterisk adjacent to the field in question is a solid start.
*Form accessibility caveat number 1:
Even if error text is present, there’s a chance that this text might still be missed by a screenreader and other assistive tech (this is a mark-up issue).
To improve help improve a form’s usability, we like to add a global error message to the beginning of our forms. A global error message communicates each error as a link in a list. When a specific error link is selected, it will bring the user to the exact field in question.
By using design/colour and text-based error cues on our contact form (displayed above), mistakes should be relatively easy to identify and fix.
Why accessible forms matter:
Forms that clearly convey requirements and errors are simply faster and easier to complete or everyone. For users of screen readers, speech to text software, or keyboard-only users, an inaccessible form is a huge barrier for willing participants (your potential customers!).
*Form accessibility caveat number 2:
Be wary of confusing your form’s accessibility with overall usability. A “technically perfect” and accessible form can still be frustrating to use based on its length, the information required, and a variety of other factors.
For more info, check out this useful guide to designing accessible forms.
4. Check for alternative text
Items needed:
Your site and a mouse/trackpad.
Goal/task:
Find images with appropriate alt text on your website.
Step 1: Go to your website and find an article or blog post with an image in the main text body.
Step 2: Hover over the image, right click it, and select “Inspect”. Now, look at the highlighted section of code on the right side of your browser. What’s written within the <img alt=”__”> tag? Does it make sense? Does it accurately describe what’s pictured?
Automated tools like SEO site checkup can also help. This tool crawls your page and will identify each image file (.jpg, .png, .svg, .gif) with missing alt text.
What you should see:
Alternative text, or alt text, is the text description of an image on a website. Alt text is read by search engines, web browsers, and assistive technology, and should provide meaningful context to users who can’t see the images on screen.
(Note: the irony of writing about accessibility/alt text on a blogging platform that doesn’t allow us to add alt text is not lost on us… tisk tisk, Medium.)
In the example above, the sentence “Together, we can all become one with the project,” is followed by an image with alt text that reads: “3 men meditate with legs crossed and the ocean in the background.” In this case, the alt text is descriptive, accurate, and appropriate, as it reflects the zen-like mantra that preceded it.
Why proper alt text matters:
Alt text helps convey the context of an image to users who can’t see the images. This helps ensure that valuable information and context isn’t (literally) “lost in translation” between the site and braille displays or screen readers.
Sighted users can also benefit from alt text. If a page is taking too long to load, or if the site is broken, alt text will be displayed instead of the image itself. Moreover, search engines like Google or Bing use alt text (along with other information from your site) to generate image search results and improve your SEO ranking.
5. Check if your page’s multimedia is accessible
Items needed:
A page on your site with video or audio content (embedded youtube videos, podcasts, etc.).
Goal/task:
Find alternative means of viewing, reading, or understanding the multimedia content on your website like closed captioning or text transcriptions.
Step 1: Visit your site and play any piece of video content (oh, and if your video auto plays, you might want to fix that, or, wait until Google Chrome 64 does it for you). Assess what you see and hear, and re-watch the video with the sound on mute. Are you able to understand what’s happening without verbal cues? What information have you lost?
Step 2: Now, rewatch this video with the sound on but don’t look at your screen. Again, can you understand what’s happening without visual cues? What information have you lost?
Step 3: Next, find and play a piece of audio content like a podcast or radio interview. Does your site provide a written transcript for users who can’t hear this audio-only content?
What you should see:
Video captions, written transcripts, and audio descriptions are three different ways to help deaf or blind users consume your site’s multimedia content.
Why alternative versions of multimedia matter:
Without other ways to view, read, or listen to the multimedia on your site, users will miss out on the content you’ve created (or only get half the story).
A homegrown example:
Our latest company video has an instrumental music track and no dialogue. As a sighted person, you would know that the video gives a glimpse of life at ecentricarts — who we are and how we work. But since there are no verbal cues, it’s hard for blind or partially-sighted users to make sense of what’s playing.
To remedy this issue, we created a described audio track to describe what’s on screen. Check out our 2017 company video with described audio below. (Disclaimer: our mic isn’t the best, but we’re so happy to have flexed our first described audio muscles!)
Report card time
So… did your site pass? Pass-ish? Fail spectacularly? Regardless, the fact that you’re curious about accessibility is an awesome step in the right direction.
And, even if your site passed the above test with ease, there are more aspects of accessibility that require testing in greater depth, and with different assistive technologies.
As our studio has learned, web accessibility is extremely nuanced and context is everything, so we hope that you’ll consider these tests small but useful pieces of the web accessibility puzzle. (We also hope that you keep learning!)
What to do if your site didn’t pass these tests
First, know that you’re not alone, and second, know that there are a ton of resources to help your business start the journey to better web accessibility. We often look to these key leaders in the inclusive design/web accessibility world for guidance: Léonie Watson, Heydon Pickering, Marcy Sutton, Billy Gregory, and Karl Groves (they’re all active members of the Twitterverse and they do especially great work).
Another good step would be to start familiarizing yourself with WCAG 2.0 guidelines and see if your business is required to meet local accessibility legislation.
Or, if this still feels a bit daunting, we’ve published Slide Share deck just for you; Web Accessibility 101 is a comprehensive crash course on the who’s, why’s, how’s, and what’s of web accessibility.
In our experience, the best accessible websites are built with inclusive design and accessible features from the very start. Some accessible site updates require small code tweaks or design revisions; however, in many cases, a site’s accessibility issues are widespread, and the cost of retroactive changes can really add up.
If you’re looking for some accessibility assistance, the ecentricarts accessibility team is happy to help. So, drop us a line and let’s make something for everyone!
