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 8:44 AM 2 comments Links to this post

Friday, July 08, 2011

Adobe PDF Accessibility

AccessibleWeb@U Meeting, June 30, 2011
  • Terrill Thompson, tft@uw.edu, Technology Accessibility Specialist
    • Slides are at http://staff.washington.edu/tft, along with slides of other presentations by Terrill
  • Lawsuits relating to accessibility
    • The goal of lawsuits is to clarify what is required by law
    • NFB actively advocating and services
      • Actually aiming a vendors, which are not covered by law, while public institutions are
      • California State University actively screening products to be sure they are accessible before allowing them to be purchased
        • CSU Accessible Electronic and Information Technology Procurement - http://www.calstate.edu/Accessibility/EIT_Procurement/
        • Accessible Technology Initiative, June 10, 2011 - http://www.calstate.edu/AcadAff/codedmemos/AA-2010-13.shtml
  • What makes an electronic document accessible?
    • Text alternatives to non-text content
    • Information, structure (good semantic markup), and relationships
      • Headings
      • Lists
      • Good structure gets passed on to assistive technology, which uses it to effectively present the information
    • HTML, Word, and PDF all support these features
    • Example: Accessible University Web site
      • http://staff.washington.edu/tft/talks/fileformats/syllabus.html
      • Because page is structured, voice browser (JAWS) can describe structure
        • CTRL- H lists headings
          • With JAWS you can jump by heading levels, thus using headings as a map of the page's content
        • JAWS identifies lists before speaking the list contents (if it is marked up as a lists)
    • Example: Word document - same page
      • To make a Word document accessible
        • Use the predefined styles for headings
        • To put alt text on an image - have alt text as one of the options
          • Recent versions of Word offer two fields, use the Description field (not the Title field)
          • Keep the alt text short and sweet
        • When making lists, use the list button
      • When you create a PDF, the structure can be passed to the PDF file by creating a "tagged PDF" file
        • Office 2010 will create a tagged PDF (When saving, click on options, and check the tagged markup box)
          • Mac Word does not generate tagged PDF. Have to go in afterwards with Adobe Acrobat Pro
          • In older versions of Office, can obtain add-ons that help to create tagged PDF
        • To create a tagged PDF, use "Save As PDF"
          • Using "Print" to a PDF will not created a tagged PDF
    • Three different types of PDFs
      • Image
      • Image with embedded fonts
        • Content could be all scrambled, has no tagging
      • Tagged (optimized for accessibility)
        • Tagged PDF has been around for a while, developed in response to federal requirement that files be accessible
    • To Create an Accessible PDF
      • Use an authoring tool that supports...
        • Creating documents with headings and subheadings
        • Adding alt text to images
        • Exporting to tagged PDF
      • Use these accessibility features anytime you create a document
      • Can tools be configured to be required to do the right thing?
        • Some HTML tools require alt text, headings, etc., but most other tools only offer the ability; you have to know about it and use it
    • Is sitechecker available to other campuses?
      • Can scan 50,000 pages
      • Contact Gina Hills about using the service
    • What tools support tagged PDF
      • Microsoft Word and Powerpoint 2010 (windows only)
        • Save As PDF
      • Microsoft Word and PowerPoint prior to 2010
        • Use Adobe Acrobat Pro
    • PDF Accessibility Check
      • Check whether document contents are an image
        • Is the document skewed?
        • Is the font clear or fuzzy
        • Try to select text on the page
        • If the content is skewed, the text fuzzy, or you cannot select text, the content is an image and will not be accessible
      • Check whether document is tagged
        • Using Acrobat Reader (a free tool)
          • Go to File > Properties (CTRL-D) and look for Tagged PDF
            • Even if says Yes, content may not be structured well enough
        • File > Properties (Ctrl-D) in any version of Acrobat; will say Tagged PDF: yes or no
      • Run an accessibility check
        • Using Adobe X Reader: Edit > Accessibility
        • Using Adobe X Pro: View > Tools > Accessiblity
    • PDF Accessibility Repair
      • Using Acrobat Pro
        • Recognize text (if needed)
          • Can you select words within the page
        • Tag document (if needed)
          • In Acrobat Pro: View > Tools > Accessibility
        • Touch up reading order
          • In Acrobat Pro, can change reading order of elements
        • Touch up structure (if needed)
          • Can scroll through document, select item, change tag for the items
          • Can add alt text to any element
        • Sometimes easier to delete all tagging and go through and retag it
        • Acrobat Pro has "Recognize Text" tool that scans images with text and generates text
      • Where to find Acrobat Pro's accessibility features
        • Recognize Text
          • View > Tools > Recognize Text
        • Read Out Loud (built-in screen reader; not very useful for blind users but may help to spot problems)
          • View > Read Outloud
        • Accessibility Tools
          • View > Tools > Accessibility
            • Prior to Adobe X: Advanced > Accessibility
  • Discussion
    • PDF is way overused
      • Many times people create PDF by default
      • PDF is useful if you need the document to look the same for all users
      • Otherwise likely to be better off creating document in HTML
Posted by at 4:09 PM 4 comments Links to this post
Subscribe to: Posts (Atom)