1. Elizabeth Pyatt, ejp10@psu.edu Blockers: What do I REALLY Need to Fix?

2. Outline  Blockers Summarized  Testing & Some Fixes  WAVE Toolbar http://wave.webaim.org/toolbar http://wave.webaim.org/toolbar  Plone  Word/PDF Audit  Where to learn more  http://accessibility.psu.edu http://accessibility.psu.edu

3. 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?

4. 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  http://accessibility.psu.edu/multimedia http://accessibility.psu.edu/multimedia  ETS Caption queue  Poorly labeled form fields  Can test some. Programmers fix.

5. 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

6. 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

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

8. 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  http://accessibility.psu.edu/images http://accessibility.psu.edu/images

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

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

11. WAVE test for ALT tags

12. Wave It!  WAVE Toolbar  http://wave.webaim.org/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 icons  Other modes  Disable Styles, Text Only, Structure/Order

13. 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  http://accessibility.psu.edu/headings http://accessibility.psu.edu/headings

14. Plone Titles  The title field in Plone

15. Poor Link Text  Avoid  For more information about accessibility, click here  Try This  You can get more information from http://accessibility.psu.edu http://accessibility.psu.edu  This strategy works across all tools!

16. 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

17. 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

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

19. Headings in WAVE

20. 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?

21. Table Captions/Headers

22. 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!

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

24. Dreamweaver Table Tool

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

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

27. 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

28. TABLE Troubleshooting 1

29. Add Styled Captions, Headers

30. Troubleshooting 2: Latin Verb Table

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

32. Alternate Complex Table Example

33. Very Very Complex Table

34. Maybe it’s a List  Proto 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 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

35. Accessifying Tables  http://accessibility.psu.edu/ http://accessibility.psu.edu/  http://accessibility.psu.edu/tables http://accessibility.psu.edu/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

36. 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  http://tv.adobe.com/watch/accessibility- adobe/preparing-indesign-files-for- accessibility/l http://tv.adobe.com/watch/accessibility- adobe/preparing-indesign-files-for- accessibility/l

37. Verify & Repair (Acrobat)  http://webaim.org/techniques/acroba t/acrobat http://webaim.org/techniques/acroba t/acrobat  Video links on http://accessibility.psu.edu/ http://accessibility.psu.edu/  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

38. Conclusion  Get to know your accessibility gurus  And http://accessibility.psu.eduhttp://accessibility.psu.edu  http://accessibility.psu.edu/commontoo ls http://accessibility.psu.edu/commontoo ls  Common sense often applies  Accessibility killed the BLINK tag  Breathe!

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

40. Firefox Testing Toolbars  Favorite Firefox Toolbars  WAVE – http://wave.webaim.org/toolbarhttp://wave.webaim.org/toolbar  FAE –  https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation-toolb/ 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/ https://addons.mozilla.org/en-US/firefox/addon/juicy- studio-accessibility-too/  Jim Thatcher (Tables/ARIA)  http://jimthatcher.com/favelets/ http://jimthatcher.com/favelets/  AccessAbility Site  http://accessibility.psu.edu/headings http://accessibility.psu.edu/headings  http://accessibillity.psu.edu/linktext http://accessibillity.psu.edu/linktext