1 / 40

Blockers: What do I REALLY Need to Fix?

Blockers: What do I REALLY Need to Fix?. Elizabeth Pyatt, ejp10@psu.edu. Outline. Blockers Summarized Testing & Some Fixes WAVE Toolbar http://wave.webaim.org/ toolbar Plone Word/PDF Audit Where to learn more http://accessibility.psu.edu. Major Blockers Summary. Images (w/o ALT text)

ksena
Télécharger la présentation

Blockers: What do I REALLY Need to Fix?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Outline • Blockers Summarized • Testing & Some Fixes • WAVE Toolbarhttp://wave.webaim.org/toolbar • Plone • Word/PDF Audit • Where to learn more • 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 • 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 BJCImage 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

  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 • 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….Screenreaderuser 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

  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 • 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 <title>”) • 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 • <h3>Subheader</h3> • 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) • Highlight table • “Insert Caption” on References panel of ribbon • Word (Mac) • Highlight table • Right click and select “Insert Caption” • Reformat as needed • PowerPoint (Mac) • Cut and paste from Word • 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) • East Germanic (1 AD - 300 AD) • Gothic† (mostly extinct by 9th century AD) • Vandalic† (extinct by 6th century AD) • Burgundian (extinct by 6th century AD) • Crimean Gothic† • West Germanic (1 AD - 300 AD) • Irminonic (High German) to Old High German to German • Istaevonic/Franconian to Old Frankish to Middle Dutch • Dutch • Afrikaans • Ingvaeonic • Old Saxon to Low German/Saxon • Anglo-Frisian • Old Frisian to Modern Frisan • Old English • Scots • English

  35. Accessifying Tables • http://accessibility.psu.edu/ • 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) • Accessify as much as possible • File  Save As  PDF • Office 2011 (Mac) • Accessify as much as possible • Reopen in Open Office • (re) Add Image ALT tags • File  Export as PDF • Check option for “Tagged PDF” • InDesign • http://tv.adobe.com/watch/accessibility-adobe/preparing-indesign-files-for-accessibility/l

  37. Verify & Repair (Acrobat) • http://webaim.org/techniques/acrobat/acrobat • Video links on 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.edu • http://accessibility.psu.edu/commontools • 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/toolbar • FAE – • 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 Site • http://accessibility.psu.edu/headings • http://accessibillity.psu.edu/linktext

More Related