Elizabeth Pyatt, ITSaccessibilityweb@psu.eduhttp://accessibility.psu.eduSee Notes panel for image ALT tags

Accessibility Testing with Firefox Plugins

AssumptionsMinimal HTML knowledge

Many testing tools assume HTMLBUT these tools work without forcing

testers to examine code

Some accessibility wrasslin’ experienceI will try to summarize fixes, but may need

to skip aheadI will be happy to answer questions

OutlineTools

Keyboard TestingJuicy StudiosWAVEOthers

WAVE TestsALT tagsHeadingsTablesFormsDisable CSS – Reading Order

Colo(u)r Contrast (Juicy Studio)

Triage/Protocol

Keyboard Accessibility Can you operate everything with keyboard commands?

Mouse not usable forSomeone with severe visual impairmentSomeone lacking fine motor control in

handscarpal tunnel, tremors, amputation…

Keyboard Testing in BrowsersTab to links, form fields in Browser

Mac - Set up in Preferenceshttp://accessibility.psu.edu/protocol#keyboard

Blockers for Keyboard UsersDrag/DropAutosubmitFlash/Javascript – If mouse event only

Test – Amazon.com

Low Vision Tests Some visual acuity

UsersZoom text 200% or moreRequire sufficient contrast between light

and darkcontrast in terms of light vs. darkbetween text/background or

graphic/background

Zoom in TestAbout 200%

Options under View menuLook for bad overlaps/ image pixellation

Color Contrast (Luminosity)Affects low vision, color deficient

Not too vivid or too bright

But not too subtle or too light eitherUse medium red, dark gray, dark teal on whiteAvoid ORANGE/YELLOW and white

Use with BLACK instead

CHECK!Juicy Studio and other calculators

Luminosity Contrast GoalsGoal:

Luminosity Contrast testWCAG 2.0, Level AA is goal at Penn StateAAA even better!

Large Text18 pt/px and above OR14 pt/px bold and aboveAA large text a Fail if used for regular text

Minor Color AdjustmentsCan make a huge difference

Luminosity Test TimePick a Site

NOT black and whiteOR http://www.miamidolphins.com/

Juicy StudiosClick

“Colour Contrast Analyser” in WAVE Tools

Report givesElement (e.g. A/H2)Hex color codeRatio to backgroundPass level or failText color only

WAVE: Disable Style Sheets Click “Disable Style Sheets”

Shows underlying orderUndoes CSS for menus, effectsShows reading order in a screen

reader

CSS DemoAmazon.com

CSS Positioning Gotchas Note how link moves

when CSS is disabledCSS used

fixed/absolute positionFloat:right can also

distort order

WAVE ReportClick “Errors, Features, Alerts”

Generates multiple iconsGreen/blue = goodYellow = caution (may be OK, may not be)Red = violation (usually a Fail)

Works for any single pageIncluding password protected pages

TestsALT text, headings, table tags, form labels,

vague link text, others

WAVE Report: ALT TextPurpose of ALT text

Describe image briefly

ALT Text ≠ Picture CaptionDescribe image literallyNOT copyright, credits, extra details,NOT snarky yearbook style captions

WAVE reportDisplays ALT text

Or error if no ALT text

ALT Tag Report DemoPick a Site with lots of pictures ORhttp://www.baltimoreravens.comhttp://www.baltimoreravens.com/news/artic

le-1/Courtney-Upshaw-Again-Trying-To-Shed-Pounds-/b6a24fc1-4b99-49aa-9591-0e44ff275620

Missing ALT tag Icon

ALT Tag Text Displayed

Bad ALT Text

Heading/H tag H1, H2, H3, H4….H6

Major sections on a pageUsed to enhance cognitive processingFormat changes not sufficient for screen

readers to recognize

Use also forIdentify menus in side/topNews headlines

Headings on ScreenreaderScreenreader

users can call up lists of headings and links in their screenreader and jump to that point in the screen

Headings TestPick site with lots of sections

OR http://www.bbc.co.uk/

Icons showPresence/level of heading (H1…H6)May warn if text has heading format, but

no H tag.

Blog Headings in WAVE

Fake H and Bad Link Text Warnings

HTML TablesShould have

Caption and/or SummaryFirst row are headers (TH)

TH scope=“col” for each cellvs. normal TD cell

First col can also be headersTH scope=“row” for each cell

HeadersScreen readers can read col/row header for

each cell

Well Formed Table (Success!)

Icons indicate presence of TH tags and scope

Caption visible at top of table

The Layout Table Table icon without cells =

probable layout tableNo cells are headers

Layout tables not recommended but NOT a major blocker for screen readers

Complex Table

Table Summary (Juicy Studios Toolbar)

Tables TestPick a site with lots of data tables

ORhttp://en.wikipedia.org/wiki/

List_of_capitals_in_the_United_States

Forms

Screen readers need Identify form field with a LABEL<label for=“email”>My e-mail address is</label><label for=“email”> goes with <input id=“email”><label for=“customer> goes with radio button

WAVE Report

WAVE DemoPick site!

Contact/Registration Form

Search Form

http://www.engineeringtoolbox.com/converting-cartesian-polar-coordinates-d_1347.html

Deaf and Persons with Partial Hearing LossVideo captions & audio transcript

Benefits for these audiencesNon-native speakersMuddled audioUnclear terminologyAudio connection lostNo headphones in CLC labsBack of lecture hall

Test for CaptionsPlay video

See if captions appear ORLook for “CC” or caption button

Play captions to verify accuracy

AudioLook for transcript link or text

Creating captionshttp://accessibility.psu.edu/video

YouTube Caption Example

CC Button Caption (TLT Channel)

Beware “English (Automatic)”

NOCd Up Episode 147

University of Georgia swim team peforming Harlem Shake

Example Audio Transcript

Full transcript on http://tlt.its.psu.edu/2012/08/09/conversations-episode-8-learning-design-summer-camp/

TriageDON’T Test all pages in all tools

ProtocolTest sample page for template (WAVE/Juicy

Colour)Test any images for ALT tagsTest any video for captionsTest all tables/forms in WAVEUse screen reader to test unusual items

Flash, PDF, HTML 5, a game, Twitter, …

Other Tools: Compliance SheriffCompliance Sheriff

Maintained by ITSScans entire sites BUT

Reports are “quirky” and incompleteUse to find specific issues

image ALT tags, table issues, page titles, redundant links

AccountsRequest through Web Liaison

Documentationhttp://accessibility.psu.edu/compliance-

sheriff

What Compliance Sheriff SkipsCompliance Sheriff can’t determineIf a video has captionsIf ALT tags on images make senseIf text formatted as a header IS a headerIf there are color coding issuesIf non-HTML document or tool works on a

screen readerWord, PowerPoint, Flash, PDF

Screen Reader TestingBest for

New technologyAll PDF, Flash, web apps

Use LASTOr send to a tester if available

Best configurationsJAWS + Win Internet Explorer

Available in select CLC facilities incl Libraries

Voiceover + Mac Safari (all Macs)http://accessibility.psu.edu/testing

Links!Accessibility at Penn State

http://accessibility.psu.edu/

Testing and Triagehttp://equity.psu.edu/ods