Accessibility Evaluations With Cheap, Readily Available Tools

Next Meeting: Thursday, October 22. The topic will be captioning videos

Your Keyboard – Unplug Your Mouse and Don’t Touch Your Touchpad

Navigating With Your Keyboard (from http://uw.edu/acccessibility/checklist/keyboard/)

• Tab – move to the next link, form element or button.
• Shift+Tab – move to the previous link, form element, or button.
• Enter – activate the current link or button.
• Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus.
• Up/Down arrow keys – move between radio buttons or, in some cases, menu links.
• Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins.
• Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.

Just exploring a webpage or website with your keyboard (no mouse, no touchpad) can reveal the following:

• Is the location of focus indicated somehow, such as by a change in color or a border around the element with focus?
• Is the sequence of content coherent?
• Are the link texts understandable and not repetitive?
• Is the menu navigable by the keyboard (tabs, arrow keys, escape key)

Colour Contrast Analyser – Paciello Group

• Available for Mac and Windows at http://www.paciellogroup.com/resources/contrastanalyser/
• Goal (level AA): Text (and images of text) have a contrast ration of at least 4.5:1, except where the text is pure decoration. Large scale test (at least 18 point or 14 point bold) or images of text can have a contrast ratio of 3:1.

The Colour Contrast Analyser (note the Aussie spelling) is a very capable tool for assessing color choices

• Contrast between text color and its background; the smaller the text, the greater should be the contrast
• Color choices that may not be very discernable by people with color blindness
• Developing an understanding of the relationship between design ideas and visibility for people with various kinds of visual limitations
• Information on Contrast can be found at http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Web Developer Toolbar – Chris Pederick

• Available for Chrome, Firefox, and Opera at http://chrispederick.com/work/web-developer/help/)
• Use the Toolbar to evaluate the use of headings in the page, the presence and use of ARIA roles, the sequence of text in the page, and the division structure of the page.

The Toolbar has a whole set of tools you can use to figure out what is going on on a webpage

• Use "Information -> View Document Outline" to see the structure of headings in the page. Are there appropriate headings and subheadings and are they hierarchical?
• Use "Outline -> Headings" to draw outlines around headings on the page. Are all headings on the page outlined? Headings that are not outlined have been created without using the <h> tags and will not be interpreted as headings by assistive software.
•  Use "Information -> Display ARIA roles" to see how ARIA attributes have been used on the pages. Are there any ARIA attributes? If so, have they been used to identify the role of each of the major segments of the page?
• Use "CSS -> Disable All Styles" to see what the page content is like without the color, font and layout provided by CSS. Is the text in a coherent sequence?

Free Voice Browsers

• Apple VoiceOver screen browser is on every Apple desktop, laptop, tablet, and smartphone. Learn it. Use it to experience listening to and navigating your pages by feel alone.
• VoiceOver Getting Started - https://www.apple.com/voiceover/info/guide/
• VoiceOver for OSX - http://www.apple.com/accessibility/osx/voiceover/
• VoiceOver for iOS - http://www.apple.com/accessibility/osx/voiceover/
• NVDA Screen Reader (http://www.nvaccess.org/) is free and quite capable screen reader for Windows

Screen Readers on Touchscreen Devices

Nielsen/Norman Group’s Katie Sherwin just posted an article discussing the experience of a blind person trying to interact with a touchscreen device and its rich vocabulary of gestures. The complexity of the interface, plus the many gestures available can create quite a “cognitive load” as the blind user tries to maintain an idea of what is happening on the screen to know what gestures to use.

While some products have experimented with tactile/haptic interfaces that give physical feedback, the potential of such designs is limited. The better answer, Sherwin argues, to simplify content and workflow so people can accomplish their goals more efficiently.

Screen Readers on Touchscreen devices

http://www.nngroup.com/articles/touchscreen-screen-readers/

AccessibleWeb@U August 27 Meeting Notes

We had a small group but a good discussion:

·         Windows 10 Edge browser

·         If you have not switched to Windows 10 yet, Microsoft offers a virtual machine version of Edge that you can download for testing at http://dev.modern.ie/tools/vms/windows/ (Pointed out by Anna Marie Golden)

·         The SSB Bart Group has evaluated Edge and sees it as a much improved replacement for IE, which will be deprecated. See http://www.ssbbartgroup.com/blog/release-of-the-windows-10-edge-browser-what-it-means-for-accessibility-and-aria-support-in-ie/ (Pointed out by Jonathan Swanson

·         Basic accessibility evaluation tools

·         Chris Pederick's Web Developer Toolbar, available for Chrome, FireFox, and Opera at http://chrispederick.com/work/web-developer/

·         Use "Information -> View Document Outline" to see the structure of headings in the page. Are there appropriate headings and subheadings and are they hierarchical?

·         Use "Outline -> Headings" to draw outlines around headings on the page. Are all headings on the page outlined? Headings that are not outlined have been created without using the <h> tags and will not be interpreted as headings by assistive software.

·         Use "Information -> Display ARIA roles" to see how ARIA attributes have been used on the pages. Are there any ARIA attributes? If so, have they been used to identify the role of each of the major segments of the page?

·         Use "CSS -> Disable All Styles" to see what the page content is like without the color, font and layout provided by CSS. Is the text in a coherent sequence?

·         Apple VoiceOver screen browser is on every Apple desktop, laptop, tablet, and smartphone. Learn it. Use it to experience listening to and navigating your pages by feel alone.

·         VoiceOver Getting Started - https://www.apple.com/voiceover/info/guide/

·         VoiceOver for OSX - http://www.apple.com/accessibility/osx/voiceover/

·         VoiceOver for iOS - http://www.apple.com/accessibility/osx/voiceover/

• NVDA Screen Reader (http://www.nvaccess.org/) is free and quite capable screen reader for Windows

·         Your keyboard, without mouse or touchpad

·         WebAIM's Keyboard Accessibility - http://webaim.org/techniques/keyboard/

·         Social Security's Accessibility Help - http://www.ssa.gov/accessibility/keyboard_nav.html

Accessibility of Front-end Technologies

On Friday, August 7, I gave a quick talk to the Front-end Technologies Community of Practice meeting. About 40 interface developers from UW campuses were in attendance.

My slidedeck is available as a PDF at http://staff.washington.edu/rells/accessibility/front-end-technologies.pdf

Special thanks to Jeane Marty for organizing the Front-end Technologies CoP and lining up a great program. I am looking forward to future programs.

The CoP web site is at http://depts.washington.edu/frontend/ Meetings are generally on the first Friday of each month. See the website for specifics.

The CoP email list is at https://mailman1.u.washington.edu/mailman/listinfo/frontenddev​

Info-graphics About Topics Related to Disabilities

Home Healthcare Adaptations, a company based in Dublin Ireland, likes to create info-graphics about topics related to disabilities:

Best Mobile Apps for Sensory Impairment

http://www.home-healthcare-adaptations.ie/best-mobile-apps-sensory-impairment/

World Disability Facts

http://www.home-healthcare-adaptations.ie/world-disability-facts-infographic/

Assistive Technology Gadgets That Could Change Your Life

http://www.home-healthcare-adaptations.ie/assistive-technology-gadgets/

Interesting info about some clever technologies.

Of course, the infographics have only brief alt texts and no longdesc texts. Sigh.  

Creating Accessible Documents With Office 365 Word Online

General Conclusions: Word Online has potential since everyone working on a document through Word Online is running the same program. If good methods are followed (see below) the result is a Word document that is generally accessible. Export to PDF works relatively well, but not perfectly.

Accessible Documents

The Basics

• Use headings
• Use lists
• Add alternate text to images
• Identify document language
• Use tables wisely
• Understand how to export to other formats

http://www.washington.edu/accessibility/documents/

Goals

• Structured content
• Tagged elements in the structure
• Tags have “semantic” meaning to help assistive software understand what the element is
• More than just looking good
• Looking good does not help if you can’t see it
• Meta information, such as language and alt text
• Structure and tags transfer when document is exported to other formats

Challenges

• Habitual use of visual approach
• Multiple versions of Word
• Members of the team developing the document may each have different Word versions with different abilities
• Providing comment and edit features

Methods

Headings

• Use Heading styles in Styles menu

Lists

• Use bulleted and numbered lists from Paragraph menu

Adding Alt text to images

• Place graphic, right mouse click, select Format Picture, select Alt Text from popup, enter text into Title field and Description field, Close

Identify document language

• Click Review, then Language, then Set Proofing Language, then select language (you may want to click Set As Default)
• Otherwise the language is only set for selected text

Use tables wisely

• Keep them simple
• Identify the column header row
• Select the header row
• Right click on the row and select Table Properties
• Click Row tab
• Check “Repeat as header row at top of each page”

Exporting to other formats while preserving tabs and structure

• Method depends on Word version
• Do not print to PDF (tags will be lost)
• On Word 2013 and Word 2010
• Use File Save As, selecting PDF
• Click on Options, make sure Document Structure Tags for Accessibility is checked
• Mac Word 2011 does not export accessible PDFs

Office 365 Word Online

• Microsoft Office 365 ProPlus available at no charge to all students, faculty, and staff (https://www.washington.edu/itconnect/wares/uware/microsoft/microsoft-office-365-proplus/)
• Online distribution (in the cloud)
• Works on PC, Mac, iPad, iPhone, and Windows and Android phones
• Avoids the problem of people working on different versions

Giving Word Online a Try

• Microsoft wants you to download their complete set of Office software to your local computer and use it in conjunction with Office 365 and all of its cloud based components.
• All of the functionality described above is available in Word Online, although the specifics of where they are in the menus vary a bit
• The accessibility checker that is part of later versions of the Word app does not seem to be in Word Online, but you can open your current file in your Word app to run a check.
• Saving the document to PDF using Save As -> Download as PDF produced a PDF file that passed Adobe Acrobat Pro's accessibility scan with few problems.
• Word Online does not seem to offer a way to associate a Title with the document that Adobe Acrobat Pro recognizes.
• The ALT text given to the image was not recognized by Adobe Acrobat Pro. When I saved the image to PDF from the Word 2010 app, the same thing happened.
• If everyone on a team uses Word Online to develop a document, they all have the same version of software, they can use the same features, and the result is a document that is itself accessible and which can export to an accessible PDF file.
• Files are stored in your account space in the cloud and can be shared to other people.

Discussion

• How well will it work to create text in Word Online, then select/copy/paste it into Canvas?
• Can multiple people edit the same Word Online document at the same time, as in Google Docs?
• Are there other tools for assessing the accessibility of a Word file and PDF file?
• Which is the better choice, Google Docs or Word Online?
• Can Word Online be used to prepare footnotes?

AccessibleWeb@U May 28 Meeting Notes

Some quick notes on last week’s AccessibleWeb@U meeting

University of Washington Information Technology Accessibility Guidelines (http://www.washington.edu/accessibility/guidelines/)

• Signed on May 1 by Kelli Trosvig, VP of UW Information Technology and UW Chief Information Officer
• They are guidelines, not policies
• Affirms UW commitment to "in its services, programs, activities, education, and employment for individuals with disabilities." This commitment includes access to information technology (IT) that the UW develops, procures, or uses, such as websites, software, hardware, and media.”
• States that “The UW looks to the Web Content Accessibility Guidelines (WCAG) 2.0 developed by the World Wide Web Consortium (W3C) Level AA for guidance in meeting its IT accessibility commitments. WCAG 2.0 provides success criteria for measuring web accessibility.”
• Points to the UW IT Accessibility Checklist  (http://www.washington.edu/accessibility/checklist/) for specifics.
• PDF version available at http://www.washington.edu/accessibility/files/2015/04/UW_IT_Accessibility_Guidelines.pdf

IT Accessibility Checklist (http://www.washington.edu/accessibility/checklist/)

• Organized by Perceivable, Operable, Understandable, Robust categories
• Closely coordinated with the WCAG 2 level AA criteria

Discussion

• Demonstrated how the Checklist can be used to find guidance on specific questions, such as how to do a Skip to Content link
• Also discussed the No Mouse campaign (http://nomouse.org/)

Feb. 26 AccessibleWeb@U Meeting Notes

Below is a link to the slides Sheryl used in her talk on Thursday, February 26. A special thanks to Sheryl for all her work and for her presentation.

          Topic:    Overview of IT Accessibility Issues & Our UW Journey

          Speaker:    Sheryl Burgstahler, Director, UW-IT Accessible Technology Services

Sheryl will guide us through the current state of IT accessibility issues in higher education and describe the steps being taken at the UW to address those issues. Topics with include defining what "accessible" means, lessons learned from legal cases, defining our IT accessibility goals, and work currently underway to take us toward those goals.

   http://staff.washington.edu/rells/accessibleweb/burgstahler0226.pdf

February 26 Meeting: Overview of IT Accessibility Issues & Our UW Journey

Topic: Overview of IT Accessibility Issues & Our UW Journey
Speaker: Sheryl Burgstahler, Director, UW-IT Accessible Technology Services
Date: Thursday, February 26, 2015
Time 11:30 a.m. to 1:00 p.m.
Location: Allen Auditorium

Sheryl will guide us through the current state of IT accessibility issues in higher education and describe the steps being taken at the UW to address those issues. Topics with include defining what "accessible" means, lessons learned from legal cases, defining our IT accessibility goals, and work currently underway to take us toward those goals.

---

AccessibleWeb@U meetings are held on the fourth Thursday of each month in Allen Auditorium. You can subscribe to (or unsubscribe from) the AccessibleWeb@U mailing list at https://mailman2.u.washington.edu/mailman/listinfo/accessibleweb. Notes from past AccessibleWeb@U meetings are available on our funky AccessWebU blog at http://accesswebu.blogspot.com/.

The Allen Auditorium is located in the part of the Allen Library directly attached to Suzzallo Library, on the northeast corner of the room with the help desk and the crows.

Creating Accessible PDFs With Adobe InDesign

AccessibleWeb - Creating Accessible PDFs With Adobe InDesign
January 22, 2015, Rick Ells

• Making Them Right to Begin With
  • Making a PDF accessible after it has been created is difficult, sometimes impossible
  • Use the capabilities of your publishing program to enable it to generate accessible PDFs
• What Assistive Technology Needs
  • Language
  • Structure
  • Flow
  • Tagged Text
  • Headers
  • Alt text for graphics
• The InDesign-to-Accessible-PDF Workflow
  • In InDesign
    • Define paragraph styles, including headers
    • Paragraph Styles mapped to Export Tags
    • Thread text into a flow
    • Anchor images in text flow
    • Give images alt text
    • Create any bookmarks, table of contents, hyperlinks, or cross-references
    • Define content order in Articles panel
    • Add file metadata
  • In Adobe Acrobat Pro
    • Assign language
    • Set tab order to Use Document Structure
    • Run Accessibility Check and do further tweaks as needed
  • The advantage of this workflow is that you are setting up structure, order and alt texts in InDesign, and then simply using that document structure, rather than trying to define that structure in Adobe Acrobat. From personal experience I can say that doing all that in Acrobat is very difficult.
• Why InDesign Generated PDFs Are Often Not Very Accessible
  • InDesign is essentially a graphical layout engine with lots of additional abilities. It is easy to create blocks of text and place graphics, move them around, and create a reasonably good looking layout without thinking about styles, text flow, alt texts or content order. The temptation is to just do the layout, generate the PDF, and go on to the text project.
  • The steps to improve accessibility of PDFs are just good professional practice for an InDesign user. Defining styles, and applying them as text is entered, ensures consistent presentation of text. Threading text into flows makes it simpler to adjust how text is presented as various layouts are considered.
  • The hardcopy orientation of InDesign and its very flexibility tempt the designer into layouts that will be difficult to make intelligible with assistive technology. For example, a document layout that has independent text flows breaking across multiple pages is going to be hard to navigate and follow for a person using a voice browser.
• Setup Paragraph Styles
  • Type -> Paragraph Styles brings up the window for defining paragraph styles and group of styles
  • Clicking on each paragraph style will bring up the Paragraph Style Options, with has menus for setting fonts, spacing, indents, and much more for the style
  • You can create a paragraph style group by clicking on the little folder icon on the bottom margin of the window. Then you create your styles into that group. Typically, you would define all the styles you expect to use in a project in a group.
  • At least you should define the following styles: Paragraph, Header 1, Header 2, and Header 3
• Set Export Tagging for Each Paragraph Style
  • For each style, go to Paragraph Style Options -> Export Tagging
  • Set export tagging for both PDF by selecting the appropriate tag from the drop down list. It would be a good idea to also select the appropriate tag for export to EPUB and HTML at the same time.
• Thread Text Blocks Into a Flow
  • Connect the out port from each text block to the in port of the following text block
  • Defining the flow helps define the linear structure of the text in the document
• Anchor Graphics in the Text Flow
  • The simplest way to do this to simply drag and drop the graphic into the appropriate location in the text flow
• Give Each Graphic Alt Text
  • Select the graphic, go to Object -> Object Export Options
  • If the graphic is purely decorative and contains no meaningful content, leave the text field blank for each of the types of alternative text (Alt Text, Tagged PDF, and EPUB and HTML)
  • If the graphic has meaning, enter the appropriate text in the alternative text field for each type of export.
• Export the Document to a PDF File
  • File -> Export... , then select Save As Type to "Adobe PDF (Interactive)"
  • Be sure the "Use Structure for Tab Order" option is checked in the Export to Interactive PDF window.
• Final Steps in Adobe Acrobat Pro
  • Set the document language by going to File -> Properties -> Advanced -> Reading Options
  • Review and tweak the reading order with the TouchUp Reading Order tool at View -> Tools -> Accessibility -> Accessibility right column menu
• Resources
  • Penn State: InDesign Accessibility - http://accessibility.psu.edu/indesign
  • Adobe: InDesign Accessibility - http://wwwimages.adobe.com/content/dam/Adobe/en/accessibility/products/indesign/pdfs/indesign-cs55-accessibility-whitepaper.pdf