blockers: what do i really need to fix?

Elizabeth Pyatt, ejp10@psu.edu

Blockers: What do I REALLY Need to Fix?

OutlineBlockers SummarizedTesting & Some Fixes

WAVE Toolbarhttp://wave.webaim.org/toolbar

PloneWord/PDF Audit

Where to learn morehttp://accessibility.psu.edu

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?

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

storyWord/PowerPoint

Right 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/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 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.eduThis 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 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

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

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

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

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 undoTest in screen reader

ConclusionGet to know your accessibility gurusAnd http://accessibility.psu.eduhttp://accessibility.psu.edu/

commontools Common sense often appliesAccessibility killed the BLINK tag

Breathe!

Remediate, then PostKlingon Accessibility StoryAthena Server

Finder, 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