elizabeth pyatt, [email protected] blockers: what do i really need to fix?
TRANSCRIPT
OutlineBlockers Summarized
Testing & Some FixesWAVE Toolbar
http://wave.webaim.org/toolbarPloneWord/PDF Audit
Where to learn morehttp://accessibility.psu.edu
Major Blockers SummaryImages (w/o ALT text)
ALT text reads description of image
No Page TitlesWhere am I?
No Headings SubheadingsCan I can this page quickly?
Poor link textWhere is “here”? Read more where?
More BlockersNo Table Headers/Captions
Caption: title of the tableHeader: tops of rows, left col
Listing types of data
Videos without CaptionsAudio without transcripts
http://accessibility.psu.edu/multimediaETS Caption queue
Poorly labeled form fieldsCan test some. Programmers fix.
Image (w/o ALT Tags)Why it’s a blocker
If it’s not text, it’s not read by the screenreader
AlsoImage MapsAnimationsChartsDiagrams
ALT Tag/Text/Attribute
Text which replaces image if it can’t be processedALT=alt=“TWT Certificate Program”Appears when image fails to load
ALT Tag Exercise
E-Commerce Site
Sesame Street Live at BJCImage from Penn State Live
Twinned Pyrite Crystal. Image from Wikipedia
How ToPlone (TLT Site)
Upload file“Alternative Text” field in upload or title of
story
Word/PowerPointRight click image and select “format picture”Fill in “Alternative Text” tab.
BlogsTitle is ALT text
Morehttp://accessibility.psu.edu/images
Plone2 Steps
Upload File Insert Image in text
“Text equivalent” = ALT tag
Word/PowerPointRight click image, “Alt(ernative) Text”
WAVE test for ALT tags
Wave It!WAVE Toolbar
http://wave.webaim.org/toolbar
Pick your own site!Lots of images
Does not work for Flash
You will see additional test icons
Click “Errors, Features, Alerts” Reload to clear iconsOther modes
Disable Styles, Text Only, Structure/Order
Page TitlesANGEL/Plone/Blogs/Wikispaces
So….Screenreader user knows locationTitle field IS document title.This is very easy!
PowerPointEach slide should have a unique title
Word/PDFStart page with document title
Use Heading 1 style
http://accessibility.psu.edu/headings
Plone TitlesThe title field in Plone
Poor Link TextAvoid
For more information about accessibility, click here
Try ThisYou can get more information from
http://accessibility.psu.edu
This strategy works across all tools!
Repetitive LinksUnique Link text
Avoid starting links with same textE.g. “Tips on Links, Tips on Lists, Tips on
Tables”Better “Links Tips, Lists Tips, Tables Tips”
“Read More” linksGenerated by many CMS systemsBetter Template (“Read More on <title>”)Make sure headline is a linkAvoid placing “Read More” links together
HeadingsScreenreaders
Read out list of headings we visually scan them
Screen readers skip format changes So they need to be H1..H6 type tags
Many HTML EditorsHeading 1…Heading 6 menu option
WordHeading…Heading 6 styles
PowerPointSlide titlesBulleted list
Plone HeadingsUse “Normal paragraph” menu
Heading, Subheading
Headings in WAVE
Drupal/BlogsNot all HTML editors include headings option (Grr!)
Hand Code (WT*?)HTML View<h3>Subheader</h3>Or use Dreamweaver WYSIWYG
Cut/paste HTML code
Unformatted HeadingsCSS of some systems “disables”
headings formattingCan template be adjusted?
Table Captions/Headers
Simple vs. Complex Data TablesSimple Tables
Have no merged cellsRows represent one type of dataColumns represent another type of dataAre easier to accessifyAre easier for screen readers to process
Complex TablesAre popular, but not always user friendlyTricky to maintain code wiseOften based on layout from print sources
We have different options on the Web!
PloneCheck “Create Headings” option
Caption can be filled in code modeTables can be generated in Dreamweaver
Dreamweaver Table Tool
WAVE test on TablesSimple table withTH and scope labeled
No overt test for captions
Simple table, no captionTH with no scope
Word/Powerpoint HeadersTable Headers
Check “Header Row” in Table format ribbon
Table Caption in OfficeWord/PowerPoint (Windows)
1. Highlight table2. “Insert Caption” on References panel of
ribbon
Word (Mac)1. Highlight table2. Right click and select “Insert Caption”3. Reformat as needed
PowerPoint (Mac)1. Cut and paste from Word2. Reformat as needed
TABLE Troubleshooting 1
Add Styled Captions, Headers
Troubleshooting 2: Latin Verb Table
Splitting TablesEach table captioned
Can combine with appropriate headings (H3/H4)
Alternate Complex Table Example
Very Very Complex Table
Maybe it’s a ListProto Germanic (750 BC - 1 AD)
I. East Germanic (1 AD - 300 AD)a. Gothic† (mostly extinct by 9th century AD)
b. Vandalic† (extinct by 6th century AD)
c. Burgundian (extinct by 6th century AD)
d. Crimean Gothic†
II. West Germanic (1 AD - 300 AD)a. Irminonic (High German) to Old High German to German
b. Istaevonic/Franconian to Old Frankish to Middle Dutchi. Dutch
ii. Afrikaans
c. Ingvaeonici. Old Saxon to Low German/Saxon
ii. Anglo-Frisian
A. Old Frisian to Modern Frisan
B. Old English1 Scots2 English
Accessifying Tableshttp://accessibility.psu.edu/
http://accessibility.psu.edu/tablesChoose technology option
Website includesEvent CalendarWhat To FixFixes for
Common Tools (covers many teaching tools)
Multimedia (Video/Animation)Web Developer Reference
PDF Generation: OfficeOffice 2010 (Windows)
1. Accessify as much as possible2. File Save As PDF
Office 2011 (Mac)1. Accessify as much as possible2. Reopen in Open Office3. (re) Add Image ALT tags4. File Export as PDF5. Check option for “Tagged PDF”
InDesignhttp://tv.adobe.com
/watch/accessibility-adobe/preparing-indesign-files-for-accessibility/l
Verify & Repair (Acrobat)http://webaim.org/techniques/acrobat/acrobat
Video links on http://accessibility.psu.edu/
Verify all filesTags
Save after each successful adjustment. There is no undo
Reading order Save after each successful adjustment. There is
no undo
Test in screen reader
ConclusionGet to know your accessibility gurusAnd http://accessibility.psu.eduhttp://accessibility.psu.edu/
commontools
Common sense often applies
Accessibility killed the BLINK tag
Breathe!
Remediate, then PostKlingon Accessibility Story
Athena ServerFinder, then Command K, afp://athena.staff.win.psu.eduETS_Projects/Accessibility Training/
Firefox Testing ToolbarsFavorite Firefox Toolbars
WAVE – http://wave.webaim.org/toolbarFAE –
https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/
JuicyStudios (Color/ARIA) – https://addons.mozilla.org/en-US/firefox/addon
/juicy-studio-accessibility-too/
Jim Thatcher (Tables/ARIA) http://jimthatcher.com/favelets/
AccessAbility Sitehttp://accessibility.psu.edu/headingshttp://accessibillity.psu.edu/linktext