Audio, Video, Forms and Design: The Final Step in Our Web Accessibility Guide

Step 5: Audio, Video, Forms and Design

Videos and Audio

1. Take stock of your videos to ensure all videos have captioning or transcripts. Ensure your users can pause and control the video speed to make the content work for their individual needs.

Pro Tip: The simplest way to make this a reality is to upload your videos to YouTube and then embed the videos into your site.

1. Avoid producing images or videos that could induce seizures. We’ve all encountered videos so in-your-face that you have to avert your eyes and scroll quickly away. Don’t do this. Videos or images with more than three flashes per second can negatively affect the health of a user, and have on occasion induced seizures.
2. Audio and Visual Transcripts and captions for multimedia are essential. The quality of these materials is also important.
   1. For audio-only content, such a podcast, provide a transcript.
   2. For audio and visual content, such as training videos, provide a transcript and also provide captions.
      1. Include important non-spoken information such as, “eerie music plays,” “door slams” or €˜Michelle leaves the room’.
   3. Captions should be synchronised to the media being displayed.
   4. WCAG Best Practices Resources for Audio and Video Content
      1. Captions (Prerecorded) 1.2.2 (Understanding 1.2.2)
      2. Audio Description or Media Alternative (Prerecorded) 1.2.3 (Understanding 1.2.3)

Forms

Forms need to be simple. If you’re requiring your user to complete a form, the only thing that should be on the page is the form. A good example are login pages – they should contain only the essential fields required to login. Users should not have to scroll past ads or other content to login. Here is a brief checklist to help you review your web site’s forms:

1. Provide clear instructions. Ensure there are instructions at the top of each form’s page.
2. Label fields clearly with requirements. Ensure each field’s label is viewable at all times with the required input. Example: “Date of Birth: 00/00/0000”

We’ve all experienced frustration trying to fill out a web form. You click into the field and can no longer see what you need to type. You then click out of the field to see what the field was for and/or check to see how the information has to be formatted. Imagine this experience as a user with limited ability.

1. Ensure that users are notified if they were successful at completing the form.
2. Ensure that form error messages are clear and provide instructions to help users correct mistakes.
3. Forms should not be subject to a time limit; allow users to complete the form at their own pace. There may be times when a time limit needs to be in place, for example, for security reasons. In these instances, the users should have the option to turn the timer off or extend the allotted time. This restriction does not apply if the time limit is due to a live event, such as an auction or a game, or if the time to complete the form is essential for a valid submission.

We recently tested a site that has a pop-up with a thirty second time limit after an item is added to the cart. The user has to either click a “Continue shopping” or a “Go to check out” button within 30 seconds. The screen reader we were testing didn’t see or read the pop-up. Tabbing also didn’t focus on the pop-up. For a blind user trying to continue shopping or go to the checkout this would be very confusing and they would be stuck. We’ve also seen instances where time expires and the user is logged out of their account and/or the cart emptied for not clicking the, “continue shopping” button. As you can see, many of the suggestions for better form accessibility (as with previous on-page elements) align with best practices for all user’s experience, not just those with limited abilities. Learn more about Forms Concepts €¢ Forms €¢ WAI Web Accessibility Tutorials

WCAG Contrast Checker

We mentioned earlier the importance of contrast, and how different colors, fonts, and light conditions can affect the ability of a user to read and navigate a site. Review the contrast of your brand, website, and app colors in content – comparing backgrounds, fonts and effects. The minimum required contrast is a 4.5:1 ratio and the recommended contrast is a 7:1 ratio.

1. Use a WCAG Contrast Checker tool to check the color contrast ratio of your content colors. There are great extensions for Chrome and other tools to get you started. Here are a few:
   1. WCAG Color Contrast
   2. Color-pair Contrast Test
   3. accessibilityinsights.io
   4. Accessibility Insights for Web
2. Ensure that roll-over effects don’t have any color ratio issues (like blue-on-blue as our site did below). The default blue roll-over was something we hadn’t even noticed but have since addressed. Below are a handful of examples of text and roll over issues:
   1. 1. Headline (H1) is white on a blue background which is just fine. But once someone moused over the title, the font turned blue on a blue background – which made the text nearly disappear for everyone.
   
   1. 1. Some fonts turned from white to orange which worked fine for a couple of the blues, but not for all of the blues nor all of the font sizes.
   
   1. 1. Our green-colored font on a white background wasn’t compliant because the color contrast ratio wasn’t high enough.
   
   1. 1. Same for the green font rollover effect on the blue navigation bar.
   

Pro Tip: Lay out your brand colors in a spreadsheet and compare the font color codes versus the background color codes found in your content to understand where colors are compliant. Include white and black, you may be surprised that not all of your colors have enough contrast even on a white background.

What’s Next?

Now that you’ve read through how you can make your site forms, audio, video and other design elements accessible to all, check out what’s next for making your web sites & apps accessible, or pop back through the previous sections using the table of contents below. And be sure to download a PDF copy of this guide – just click the button below!

The AIMCLEAR Guide to Web Accessibility and WCAG Best Practices

• Introduction

A Guide to Help Make Your Content Accessible

• What is WCAG and why is it important?
• WCAG Section 508 & The Laws

5 Steps to WCAG Compliance and A Better User Experience

• Step 1: Web Accessibility Statement
• Step 2: Preliminary WCAG Tests and Checks
• Step 3: Going Mobile
• Step 4: Accessible Off and On-Page Elements (Your SEO was right)
• Step 5: Audio, Video, Forms and Design

Summary and Next Steps

• Start Making Your Web Sites & Apps Accessible