blockers: what do i really need to fix?
DESCRIPTION
Blockers: What do I REALLY Need to Fix?. Elizabeth Pyatt, [email protected]. 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) - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/2.jpg)
OutlineBlockers SummarizedTesting & Some Fixes
WAVE Toolbarhttp://wave.webaim.org/toolbar
PloneWord/PDF Audit
Where to learn morehttp://accessibility.psu.edu
![Page 3: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/3.jpg)
Major Blockers SummaryImages (w/o ALT text)
ALT text reads description of imageNo Page Titles
Where am I?No Headings Subheadings
Can I can this page quickly?Poor link text
Where is “here”? Read more where?
![Page 4: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/4.jpg)
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.
![Page 5: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/5.jpg)
Image (w/o ALT Tags)Why it’s a blocker
If it’s not text, it’s not read by the screenreader
AlsoImage MapsAnimationsChartsDiagrams
![Page 6: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/6.jpg)
ALT Tag/Text/Attribute
Text which replaces image if it can’t be processedALT=alt=“TWT Certificate Program”Appears when image fails to load
![Page 7: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/7.jpg)
ALT Tag Exercise
E-Commerce Site
Sesame Street Live at BJCImage from Penn State Live
Twinned Pyrite Crystal. Image from Wikipedia
![Page 8: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/8.jpg)
How ToPlone (TLT Site)
Upload file“Alternative Text” field in upload or title of
storyWord/PowerPoint
Right click image and select “format picture”Fill in “Alternative Text” tab.
BlogsTitle is ALT text
Morehttp://accessibility.psu.edu/images
![Page 9: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/9.jpg)
Plone2 Steps
Upload File Insert Image in text
“Text equivalent” = ALT tag
![Page 10: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/10.jpg)
Word/PowerPointRight click image, “Alt(ernative) Text”
![Page 11: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/11.jpg)
WAVE test for ALT tags
![Page 12: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/12.jpg)
Wave It!WAVE Toolbar
http://wave.webaim.org/toolbarPick your own site!
Lots of imagesDoes not work for Flash
You will see additional test iconsClick “Errors, Features, Alerts”
Reload to clear iconsOther modes
Disable Styles, Text Only, Structure/Order
![Page 13: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/13.jpg)
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
![Page 14: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/14.jpg)
Plone TitlesThe title field in Plone
![Page 15: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/15.jpg)
Poor Link TextAvoid
For more information about accessibility, click here
Try ThisYou can get more information from
http://accessibility.psu.eduThis strategy works across all tools!
![Page 16: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/16.jpg)
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
![Page 17: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/17.jpg)
HeadingsScreenreaders
Read out list of headingswe visually scan them
Screen readers skip format changesSo they need to be H1..H6 type tags
Many HTML EditorsHeading 1…Heading 6 menu option
WordHeading…Heading 6 styles
PowerPointSlide titlesBulleted list
![Page 18: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/18.jpg)
Plone HeadingsUse “Normal paragraph” menu
Heading, Subheading
![Page 19: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/19.jpg)
Headings in WAVE
![Page 20: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/20.jpg)
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?
![Page 21: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/21.jpg)
Table Captions/Headers
![Page 22: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/22.jpg)
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!
![Page 23: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/23.jpg)
PloneCheck “Create Headings” option
Caption can be filled in code modeTables can be generated in Dreamweaver
![Page 24: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/24.jpg)
Dreamweaver Table Tool
![Page 25: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/25.jpg)
WAVE test on TablesSimple table withTH and scope labeled
No overt test for captions
Simple table, no captionTH with no scope
![Page 26: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/26.jpg)
Word/Powerpoint HeadersTable Headers
Check “Header Row” in Table format ribbon
![Page 27: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/27.jpg)
Table Caption in OfficeWord/PowerPoint (Windows)
1. Highlight table2. “Insert Caption” on References panel of
ribbonWord (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
![Page 28: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/28.jpg)
TABLE Troubleshooting 1
![Page 29: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/29.jpg)
Add Styled Captions, Headers
![Page 30: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/30.jpg)
Troubleshooting 2: Latin Verb Table
![Page 31: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/31.jpg)
Splitting TablesEach table captioned
Can combine with appropriate headings (H3/H4)
![Page 32: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/32.jpg)
Alternate Complex Table Example
![Page 33: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/33.jpg)
Very Very Complex Table
![Page 34: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/34.jpg)
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 Germanb. Istaevonic/Franconian to Old Frankish to Middle Dutch
i. Dutchii. Afrikaans
c. Ingvaeonici. Old Saxon to Low German/Saxonii. Anglo-Frisian
A. Old Frisian to Modern FrisanB. Old English
1 Scots2 English
![Page 35: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/35.jpg)
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
![Page 36: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/36.jpg)
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
![Page 37: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/37.jpg)
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 undoTest in screen reader
![Page 38: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/38.jpg)
ConclusionGet to know your accessibility gurusAnd http://accessibility.psu.eduhttp://accessibility.psu.edu/
commontools Common sense often appliesAccessibility killed the BLINK tag
Breathe!
![Page 39: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/39.jpg)
Remediate, then PostKlingon Accessibility StoryAthena Server
Finder, then Command K, afp://athena.staff.win.psu.eduETS_Projects/Accessibility Training/
![Page 40: Blockers: What do I REALLY Need to Fix?](https://reader036.vdocuments.mx/reader036/viewer/2022062400/5681696a550346895de1379e/html5/thumbnails/40.jpg)
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