Accessibility Testing for Mobile and Web Apps

What is accessibility?

The extent to which people with disabilities can independently use, navigate, acquire information from, and interact with the site or app that you have built.

Several resolutions in higher education legal cases define "accessible" as follows:

“'Accessible' means a person with a disability is afforded the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services as a person without a disability in an equally effective and equally integrated manner, with substantially equivalent ease of use. The person with a disability must be able to obtain the information as fully, equally and independently as a person without a disability."

http://www.washington.edu/accessibility/requirements/legal-cases-by-issue/

Why is accessibility important?

Accessibility is a civil rights issue.

“The Web is an important medium for receiving information as well as for providing information and interacting with society. Therefore, it is essential that the Web is accessible in order to provide equal access and equal opportunity to people with disabilities.” - the W3C

https://www.w3.org/WAI/bcase/soc.html

Laws

Legal Cases in Commerce

  • AOL
  • Intuit, H&R Block
  • Equifax, Experian, Trans Union
  • Bank of America, Bank One
  • Fleet Bank, Washington Mutual
  • Charles Schwab
  • Southwest Airlines, JetBlue
  • Amazon, Ebay
  • Radio Shack
  • Sutter Health, Rite Aid
  • Target, Staples, ToysRUs
  • Hilton, Carnival
  • Disney, Ticketmaster, Netflix

http://www.karlgroves.com/2011/11/15/list-of-web-accessibility-related-litigation-and-settlements/

Legal Cases in Higher Education

  • Harvard and MIT
  • University of Phoenix
  • University of Cincinnati and Youngstown State University
  • University of Montana
  • Louisiana Tech University
  • South Carolina Technical College System (SCTCS)
  • Penn State University
  • University of California at Berkeley
  • Maricopa Community College District (MCCD)
  • Florida State University
  • Ohio State University, University of Kentucky
  • most of the above are from the last 5 years

http://www.washington.edu/accessibility/requirements/accessibility-cases-and-settlement-agreements/ and http://www.karlgroves.com/2011/11/15/list-of-web-accessibility-related-litigation-and-settlements/

Prioritization and Impact

  • New sites (in development) over old sites
  • Larger user base over smaller user base
  • High traffic over low traffic
  • Template changes that apply to many pages over changes that affect individual pages

Use Cases

  • Blind (JAWS, NVDA, VoiceOver)
  • Low Vision (Zoom, ZoomText)
  • Color Blindness
  • Deaf / Hearing Impairment
  • Dexterity / Hand/Arm Disability
    • Keyboard Only, No Mouse
    • No/Limited Keyboard Use (Dragon)
  • Cognitive Impairment and Learning Disabilities

VoiceOver Demo

Standards, Guidelines, Best Practices

Four Principles of Accessibility (POUR)

  • Perceivable
  • Operable
  • Understandable
  • Robust

 

Policies and Governance
at the
University of California

Testing Tools - Spidering

These are examples. This is not a comprehensive list.

Testing Tools - Browser Plugins

Testing Tools - Color Contrast

Testing Tools - Others

Voluntary Product Accessibility Template (VPAT)

http://www.itic.org/policy/accessibility

Automated vs Manual Testing

  • automated testing can only test about 20% of what needs to be tested
  • most Level AA criteria require manual testing

UCLA DCP
Quick Tests

  • meant to be done in addition to automated testing
  • sampling based methodology, not comprehensive

UCLA DCP
Quick Tests

  • Consistent Navigation
  • Color Contrast
  • Double-Size Test
  • Copy Test
  • Logical Structure
  • Visible Focus
  • Captions
  • Image Accessibility

Consistent Navigation

3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user (Level AA)

3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently (Level AA)

Consistent Navigation

Maximum 5 min: Are there unusual changes to the navigation or other page components?

Things to Check:

  • Consistency between Front page and secondary page navigation
  • Choose a common navigation element and use keyboard only to get there

Color Contrast

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (Level AA)

Color Contrast

Run tests on 4-5 potential problem areas, concentrating on extreme cases requiring immediate fix

  • WebAIM’s Jared Smith mentions "readability is a continuum", as you can always be more accessible
  • Text at 4.4:1 isn’t suddenly totally illegible. So focus on the biggest problems

Double Size Test

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

  • Use CTRL-+ (CMD-+) to test whether the site is readable at 2x magnification

Copy Test

1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

  • Text that cannot be copied is likely to be inaccessible
  • To test if images of text are being used, try copying any “suspicious” items

Logical Structure

2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)

  • Headings should not be used for visual effects, on large blocks of content
  • Use judiciously (too much structure without content is a problem)

Logical Structure

  • Are headings used for logical structure?
  • Does structure make sense?

Visible Focus

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

  • Is there a clear focus indicator when tabbing with keyboard
  • On the homepage & 5 subpages, test focus by tabbing through the page

Captions

1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

Captions

  • Quantify & assess portion of content that is multimedia
  • Ensure controls are easy to identify and to enable captioning
  • If significant in quantity or importance, play 30 sec of 3-5 clips
    • Are captions present?
    • Are they readable?

Images

  • Survey Content: Appropriate Use of ALT text on Images
    • content and function
    • Alt text should NOT equal the filename
    • Avoid images with lots of text
    • Alt text should be brief, max around 100 characters
    • For a complex diagram, include a description of the image in the content of the page

You can create sites and apps
that are both
beautiful and accessible.

 

Thanks!

Chris Patterson
chris@oit.ucla.edu
spiritcapsule [GitHub]
spiritcapsule [Twitter]