Elizabeth Pyatt, Blockers: What do I REALLY Need to Fix?

Outline  Blockers Summarized  Testing & Some Fixes  WAVE Toolbar  Plone  Word/PDF Audit  Where to learn more 

Major Blockers Summary  Images (w/o ALT text)  ALT text reads description of image  No Page Titles  Where am I?  No Headings Subheadings  Can I can this page quickly?  Poor link text  Where is “here”? Read more where?

More Blockers  No Table Headers/Captions  Caption: title of the table  Header: tops of rows, left col  Listing types of data  Videos without Captions  Audio without transcripts   ETS Caption queue  Poorly labeled form fields  Can 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  Also  Image Maps  Animations  Charts  Diagrams

ALT Tag/Text/Attribute  Text which replaces image if it can’t be processed  ALT= alt=“TWT Certificate Program”  Appears when image fails to load

ALT Tag Exercise E-Commerce Site Sesame Street Live at BJC Image from Penn State Live Twinned Pyrite Crystal. Image from Wikipedia

How To  Plone (TLT Site)  Upload file  “Alternative Text” field in upload or title of story  Word/PowerPoint  Right click image and select “format picture”  Fill in “Alternative Text” tab.  Blogs  Title is ALT text  More 

Plone  2 Steps  Upload File  Insert Image in text  “Text equivalent” = ALT tag

Word/PowerPoint  Right click image, “Alt(ernative) Text”

WAVE test for ALT tags

Wave It!  WAVE 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 icons  Other modes  Disable Styles, Text Only, Structure/Order

Page Titles  ANGEL/Plone/Blogs/Wikispaces  So….Screenreader user knows location  Title field IS document title.  This is very easy!  PowerPoint  Each slide should have a unique title  Word/PDF  Start page with document title  Use Heading 1 style 

Plone Titles  The title field in Plone

Poor Link Text  Avoid  For more information about accessibility, click here  Try This  You can get more information from  This strategy works across all tools!

Repetitive Links  Unique Link text  Avoid starting links with same text  E.g. “Tips on Links, Tips on Lists, Tips on Tables”  Better “Links Tips, Lists Tips, Tables Tips”  “Read More” links  Generated by many CMS systems  Better Template (“Read More on ”)  Make sure headline is a link  Avoid placing “Read More” links together

Headings  Screenreaders  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 Editors  Heading 1…Heading 6 menu option  Word  Heading…Heading 6 styles  PowerPoint  Slide titles  Bulleted list

Plone Headings  Use “Normal paragraph” menu  Heading, Subheading

Headings in WAVE

Drupal/Blogs  Not all HTML editors include headings option (Grr!)  Hand Code (WT*?)  HTML View  Subheader  Or use Dreamweaver WYSIWYG  Cut/paste HTML code  Unformatted Headings  CSS of some systems “disables” headings formatting  Can template be adjusted?

Table Captions/Headers

Simple vs. Complex Data Tables  Simple Tables  Have no merged cells  Rows represent one type of data  Columns represent another type of data  Are easier to accessify  Are easier for screen readers to process  Complex Tables  Are popular, but not always user friendly  Tricky to maintain code wise  Often based on layout from print sources  We have different options on the Web!

Plone  Check “Create Headings” option  Caption can be filled in code mode  Tables can be generated in Dreamweaver

Dreamweaver Table Tool

WAVE test on Tables Simple table with TH and scope labeled No overt test for captions Simple table, no caption TH with no scope

Word/Powerpoint Headers  Table Headers  Check “Header Row” in Table format ribbon

Table Caption in Office  Word/PowerPoint (Windows) 1.Highlight table 2.“Insert Caption” on References panel of ribbon  Word (Mac) 1.Highlight table 2.Right click and select “Insert Caption” 3.Reformat as needed  PowerPoint (Mac) 1.Cut and paste from Word 2.Reformat as needed

TABLE Troubleshooting 1

Add Styled Captions, Headers

Troubleshooting 2: Latin Verb Table

Splitting Tables  Each table captioned  Can combine with appropriate headings (H3/H4)

Alternate Complex Table Example

Very Very Complex Table

Maybe it’s a List  Proto Germanic (750 BC - 1 AD) I.East Germanic (1 AD 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 AD) a.Irminonic (High German) to Old High German to German b.Istaevonic/Franconian to Old Frankish to Middle Dutch i.Dutch ii.Afrikaans c.Ingvaeonic i.Old Saxon to Low German/Saxon ii.Anglo-Frisian A.Old Frisian to Modern Frisan B.Old English 1Scots 2English

Accessifying Tables    Choose technology option  Website includes  Event Calendar  What To Fix  Fixes for  Common Tools (covers many teaching tools)  Multimedia (Video/Animation)  Web Developer Reference

PDF Generation: Office  Office 2010 (Windows) 1.Accessify as much as possible 2.File  Save As  PDF  Office 2011 (Mac) 1.Accessify as much as possible 2.Reopen in Open Office 3.(re) Add Image ALT tags 4.File  Export as PDF 5.Check option for “Tagged PDF”  InDesign  adobe/preparing-indesign-files-for- accessibility/l adobe/preparing-indesign-files-for- accessibility/l

Verify & Repair (Acrobat)  t/acrobat t/acrobat  Video links on  Verify all files  Tags  Save after each successful adjustment. There is no undo  Reading order  Save after each successful adjustment. There is no undo  Test in screen reader

Conclusion  Get to know your accessibility gurus  And  ls ls  Common sense often applies  Accessibility killed the BLINK tag  Breathe!

Remediate, then Post  Klingon Accessibility Story  Athena Server  Finder, then Command K,  afp://athena.staff.win.psu.edu  ETS_Projects/Accessibility Training/

Firefox Testing Toolbars  Favorite Firefox Toolbars  WAVE –  FAE –  US/firefox/addon/accessibility-evaluation-toolb/ US/firefox/addon/accessibility-evaluation-toolb/  JuicyStudios (Color/ARIA) –  studio-accessibility-too/ studio-accessibility-too/  Jim Thatcher (Tables/ARIA)   AccessAbility Site  