Friday, October 28, 2011

Accessible Web Design Overview

Rick Ells
UW-IT Web Guy
rells@uw.edu

AccessibleWeb@U

The Goals of Accessible Web Design

  • Be usable and intelligible to as many people as possible, including
    • People not able to use a mouse
    • People not navigating by touch
  • Be interpretable by assistive technologies
    • Structured
    • Semantic
    • Standard

Quick Evaluation

QE: headers

  • Are header elements being used semantically and are they organized hierarchically?
    • Pseudo headers created with bolding and sizing will not be recognized as headers
  • Check headers with the Web Developer toolbar Information item; pull it down to "View Document Outline".

QE: layout

  • Are tables being used for page layout?
    • Tables layout makes navigation much more complex
  • Check for tables with the Web Developer toolbar Outline item; pull down to "Outline Tables" and then "Table Cells".
  • Can content be interpreted intelligibly without layout (when CSS is turned off)?
    • Check content without layout with the Web Developer toolbar CSS item; pull down to "Disable Styles" and then "All Styles". Scroll down through bare-bones content; could you make sense of it in the sequence it is presented.

QE: alternative text

  <img src="gw.jpg" alt="George Washington">
Alternative text should be...
  • Accurate and equivalent
  • Be succinct
  • Not be redundant
  • Not use phrases like "image of..."
(Example from WebAIM (http://webaim.org)
Check alternative text with the Web Developer toolbar Images item; pull down to "Display Alt Attributes".

QE: labelling

The label element associates a name (for="first"with the input element with an id of that name (id="first")
<form action="form_action.asp" method="get">
  <label for="first">First name:</label> 
    <input type="text" name="fname" id="first"/><br />
  <label for="last">Last name:</label>
    <input type="text" name="lname" id="last" /><br />
  <input type="submit" value="Submit" />
</form>
Check labelling in a form with the Web Developer toolbar View Source item; Search in the source for "<label"

QE: colors

Color choice and the contrast between adjacent colors are important for determining reability. Contrast levels should be higher for small characters than for larger.
Evaluate colors and contrast with WCAG Contrast Checker. Check the "Text selector" and move your cursor around the page.

QE: semantic markup

Assistive technologies use semantic element types to help in presenting content.
Semantic:
<h2 style="font: medium bold verdana, sans-serif"> New Technology</h2>
Non-Semantic:
<div style="font: medium bold verdana, sans-serif"> New Technology</div>
There is nothing wrong with using DIVs for structural elements such as navigation, content, header, and footer.
Recognize that semantic element types have to do with structuring the content. Presentation (font size, font family, font size, etc.) of the types is controlled by the CSS.

QE: problem areas

  • Tables layout
  • Essential information in graphics without alt text
  • Content buried in scripts
    • Not using progressive enhancement methods
  • Content added after page load (Ajax)
    • ARIA roles needed to signal assistive technology which areas might receive updates

Accessibility at the UW

Accessibility Research at the UW

Web Accessibility Guidelines

Motivations

  • Personal
  • Community
  • Added value to our institution
  • Legal guidelines and requirements
  • Public relations
  • The baby-boomers are coming (and they have money)

The Legal Situation

  • Are UW Web sites a “public accomodation” under the Americans with Disabilities Act?
  • Do Washington state guidelines apply?
    http://ofm.wa.gov/ocio/policies/documents/1000g.pdf
  • Do you have a contractual agreement with students?
  • Do you have obligations to your funding sources?

Walk the Path

Welcome to the Basics 201 class! Today in class you will...
  1. Login with your UW NetID
  2. View a course page
  3. Download a PDF article
  4. Submit a question
  5. Use an online Web tool to take a test
  6. Watch a video

Where Are the Obstacles?

  • The login form might not have labels
  • The class Web page may not make use of semantic headings
  • The PDF article may be a scanned graphic image that assistive technology cannot interpret
  • The Ask a Professor IM interface may use Ajax, rewriting the display without a way for the assistive technology to know the rewrite has occurred
  • The online test tool may use tables layout
  • The video may not have captioning
  • Participating in the class requires that all steps can be done reasonably well.
  • Steps that are difficult are costs or "sacrifices" for the user, as they impose burdens that others in the class may not have to deal with.

Goals/Principles/Patterns

A good way to work toward comprehensive accessibility is to use the Goals/Principles/Patterns way of thinking.
  • Goals – Why are we doing this
  • Principles – How are we going to reach the goals
  • Patterns - What we are going to do to solve specific problems that come up as we implement the principles
  • As the patterns are chosen and developed, keeping the higher goals and principles in mind will encourage keeping accessibility in mind through the project
  • From Luke Wrobelski “Design Principles”, (http://www.lukew.com/ff/entry.asp?1292), which he derived from Service Oriented Architecture literature

Accessibility Goals

  • Inclusive
  • Effective
  • Efficient
  • Supportive

Accessibility Principles

We will design our Web services so they are…
  • Perceivable
  • Operable
  • Understandable
  • Robust

Accessibility Patterns

  • Adhere to standards
  • Use semantic elements
  • WCAG 2.0
  • Accessible Rich Internet Applications (ARIA)
  • ECMA Standard Scripting
  • Progressive enhancement methods in scripting

Content Management Systems

Most CMSs come out-of-the-box with good accessibility; don’t ruin it

Vendors Invest in Accessibility

HTML5

  • Capable of very good accessibility
  • Structured
  • Semantic
  • Roles
  • Validatable
  • HTML5 Accessibility
    http://html5accessibility.com/

Trends Going Forward

  • Rapid change
  • Mobile devices – smartphones to tablets – do it now, here, get immediate results
  • Web sites and apps need to work with wide range of sizes – smartphone, tablet, laptop, desktop
  • Pressure for simplification – Keep It Seriously Succinct

Mobile First

  • Start with designing for the mobile device, then supplement the design for laptops and desktops
  • Priority of mobile is rising
  • Mobile design forces you to focus
  • Mobile offers new capabilities (knows location, direction, talks to the cloud)
  • Mobile First – Luke Wroblewski
    http://www.abookapart.com/products/mobile-first

Responsive Web Design

Resources

Posted by at 2 comments:
Subscribe to: Posts (Atom)