blockers: what do i really need to fix?

40
Elizabeth Pyatt, [email protected] Blockers: What do I REALLY Need to Fix?

Upload: ksena

Post on 26-Feb-2016

57 views

Category:

Documents


2 download

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 Presentation

TRANSCRIPT

Page 1: Blockers: What do I  REALLY  Need to Fix?

Elizabeth Pyatt, [email protected]

Blockers: What do I REALLY Need to Fix?

Page 2: 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

Page 3: Blockers: What do I  REALLY  Need to Fix?

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?

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?

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?

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?

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?

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?

Plone2 Steps

Upload File Insert Image in text

“Text equivalent” = ALT tag

Page 10: Blockers: What do I  REALLY  Need to Fix?

Word/PowerPointRight click image, “Alt(ernative) Text”

Page 11: Blockers: What do I  REALLY  Need to Fix?

WAVE test for ALT tags

Page 12: Blockers: What do I  REALLY  Need to Fix?

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?

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?

Plone TitlesThe title field in Plone

Page 15: Blockers: What do I  REALLY  Need to Fix?

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?

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?

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?

Plone HeadingsUse “Normal paragraph” menu

Heading, Subheading

Page 19: Blockers: What do I  REALLY  Need to Fix?

Headings in WAVE

Page 20: Blockers: What do I  REALLY  Need to Fix?

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?

Table Captions/Headers

Page 22: Blockers: What do I  REALLY  Need to Fix?

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?

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?

Dreamweaver Table Tool

Page 25: Blockers: What do I  REALLY  Need to Fix?

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?

Word/Powerpoint HeadersTable Headers

Check “Header Row” in Table format ribbon

Page 27: Blockers: What do I  REALLY  Need to Fix?

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?

TABLE Troubleshooting 1

Page 29: Blockers: What do I  REALLY  Need to Fix?

Add Styled Captions, Headers

Page 30: Blockers: What do I  REALLY  Need to Fix?

Troubleshooting 2: Latin Verb Table

Page 31: Blockers: What do I  REALLY  Need to Fix?

Splitting TablesEach table captioned

Can combine with appropriate headings (H3/H4)

Page 32: Blockers: What do I  REALLY  Need to Fix?

Alternate Complex Table Example

Page 33: Blockers: What do I  REALLY  Need to Fix?

Very Very Complex Table

Page 34: Blockers: What do I  REALLY  Need to Fix?

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?

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?

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?

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?

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?

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?

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