View
220
Download
4
Category
Preview:
Citation preview
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
Recommended