Skip to content

Manual Testing - It's in Your Hands

Today’s websites and web apps can be very complex. Many consists of 1000s of code lines, multiple user interactions, custom color palettes, and video and audio content.

Automated quality assurance tools, such as DubBot, are critical in alleviating the time spent checking and monitoring those websites for WCAG accessibility conformance issues. Automated testing tools can continuously monitor your website for accessibility issues, quickly locating obvious deficiencies, collecting those deficiencies, then generating reports that disclose the number, location, and severity of accessibility issues. Needless to say, automated testing saves not only time but money and person power.

Automated Testing Alone Can Not achieve conformance.

According to Usablenet, "Over 80% of WCAG 2.0 Success Criteria requires Manual Review and 100% of the new WCAG 2.1 Success Criteria will require the same."

Adding manual testing and testing with assistive technology to your quality assurance toolbox is the only sure-fire way to get a truly accurate assessment of your accessibility wins and areas that may need some work.

The 18 F Accessibility Guide breaks down manual testing into three degrees of importance; Critical, Less Critical, and Minor. Please note that just because a particular issue is not listed as "Critical," that does not mean that it is not required for full accessibility conformance.

For this post, I will concentrate on the issues listed as Critical on the 18 F list. Before you get started, you may want to review this list of common keystrokes used to navigate using only the keyboard.

  • Site is keyboard accessible - using the tab, arrow, and enter key or space bar, move around the page and identify all interactions ensuring that each can be triggered, including hovers and rollovers.
    • Who benefits: people with visual impairments, tremors and/or mobility issues, or other physical disabilities
    • WCAG 2.0 SC: 2.1.1 Keyboard, Level A
  • Site is free of keyboard traps - A keyboard trap occurs when a keyboard-only user can not move focus away from an interactive element or control. Using the Tab key, navigate until you reach the bottom of the page.
    • Who benefits: people with visual impairments, tremors and/or mobility issues, or other physical disabilities
    • WCAG 2.0 SC: 2.1.2 No Keyboard Trap, Level A
  • All form inputs have explicit labels - Identify all form controls and their corresponding instructions to ensure all elements are keyboard accessible. Also, the value of the for attribute must be the same as the value of the id attribute of the form control. (sample code) If implementing advanced form labels, ensure proper use of aria-labelledby, aria-describedby, aria-label.
  • All images have alt attributes - Inspect each alt attribute to ensure the following:
    1. a unique, detailed description of the image is provided WITHOUT using the terms “Image of” or “Photo of”
    2. repeated images of programmatic elements have matching alt attributes
    3. images of text (not recommended, but sometimes unavoidable) must include an alt attribute with the exact text displayed in the image
    4. if an image is present for purely decorative purposes, the alt attribute may remain empty.
    • Who benefits: People who have difficulty perceiving visual content or understanding the meaning of photographs, drawings, and other images. People who are deaf, hard of hearing, or have trouble understanding audio information can now read the description. And people who are deaf-blind can read the text in braille.
    • WCAG 2.0 SC:
  •  
  • Text has sufficient color contrast - The contrast ratio between text color and the background must be 4.5:1. This applies to link color as well, in addition to a non-color indicator such as an underline or highlight. Use a color contrast checker to compare text and link colors and background colors. If the color is a gradient, test the lightest portion of the text to the background's lightest portion. This comparison should be made for all link text states: link, visited, active, hover. And don’t forget to test images of text, if you have them.

A Combination of Tools and Techniques

There are many ways for us to test websites and web apps for accessibility. Using a holistic testing approach that combines automated, manual, and user testing provides data and insight that will help you move your website to a new level of accessibility, making it "essential to some but useful to all." ~ Mikey Ilagan, Product Manager, Comcast Accessibility

Resources:

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot