Elizabeth Pyattaccessibilityweb@psu.eduSee Notes panel for image ALT tags

Optimizing Sites at Penn State (Word Press) for Accessibility

OutlineAudience for Accessibility & Policy

Tasks by RoleBlog/Page Editor: Posts, Pages

Headings, Link Text, Image ALT Text, Other

Site Owner: Plugins, CSS, WidgetsWP Admin (beyond Sites)

Adjustments without Code

Adjustments with Code

Accessibility AudiencesSevere Visual Impairments

No usable vision. Use audio cues from screen reader

Need descriptions for imagesUse headings, link text, table , form

labelsas navigation cues

Low vision & color deficientSome vision, but legibility importantResponsive design important

More AudiencesDeaf

Captions & Transcripts pleasehttp://accessibility.psu.edu/video

Cognitive/Learning DisabilitiesUsability & legibility criticalUse menus & widgets well

Motion ImpairedCan’t use hands (easily)

Neurological (e.g. Epilepsy)Please don’t flicker quickly

PolicyA.D. 69

Online content relating to core PSU business (e.g. teaching) must comply with accessibility standards

Core BusinessDept. & Program sitesCourse sitesResearch sitesNOT wedding & personal hobby sites

Accessibility Benefits of SitesProperly Coded Template

Search FormProper use of Labels

Navigation TemplatesProper use of Headings. Some ARIA Roles.

Page TitlesBased on titles of blog entries/pagesRendered as appropriate Headings

Good editing toolsBut YOU must use them well.

2 Main Roles (Editor & Owner)Page/Blog Editor

Use Heading StylesSpecific Link TextAdd image ALT textTables (there’s a trick)

Site OwnerAll above Choose appropriate pluginsLegible color scheme + fontsAdjust CSS (power user)Accessible HTML in widgets (power user)

Headings and Screen ReadersHeadings =

H1, H2, H3…H6Use in long pages/posts

Also menus and other sections of a page template

Users scan to get overview of content

NOT H1 (Page title)

Paragraph (P)Enclose text in P so

screen readers can read passages one P at a time

Headings for Sighted Users

A syllabus uses headings to note different types of information

Word Press Visual Editor

Vague Link Experience

Clear Link Text (Same Fix Everywhere) Important because

Screen readers may jump from link to linkAlso enhances “link scent” for all users

Avoid Vague or Wordy Links “For more information about international music, click here” “Learn about additional international music resources that might

be useful in class or in research”Too may URL links (e.g.

http://www.isme.org/index.php?option=com_content&view=section&layout=blog&id=6&Itemid=1 7) International Society for Music Education Publications

Use ThisLearn more from “International Music Links”

This strategy works across all tools!

Links on a Screen Reader

Image ALT Tag/Text/Attribute

Text which replaces image if it can’t be processedALT=“Washington at Valley Forge in

winter snow”Appears when image fails to load

Image fromWikipedia

Pick the Best ALT Tag

Context: Multilingual Signage1. Wow – a bilingual ad in State College!2. CATAMultilingualCrop.jpg3. As you can see, State College is a

multilingual community.4. Ad on State College bus for

Nationwide agent Andy Jiang with text in Chinese and English

5. Multilingual ad on XG line of CATA bus.

Add ALT Text in SitesCode

<img src=“x.jpg” alt=“ALT Text Here”>

Add Media (WYSIWYG)During InsertDuring Upload

Use “ALT Text” Title, Description are

metadata Caption appears below

image Caption ≠ ALT Text

What to do with TablesBad News

No good WYSIWYG table editor in Sites

BUTDreamweaver, ANGEL, Canvas doCan copy and paste HTML code

Can copy and paste from TablePress output, but must tweak code to WCAG compliance

Code?See http://accessibility.psu.edu/tableshtml Keys:

Don’t merge cells, Label all columns

Site Owner - ThemesChoose for Function Not Looks

Choose contrastive colors in options or CSShttp://accessibility.psu.edu/contrasthtml

Simple, but Accessible2011-2015

More optionsDivi, Genesis, PageLines

CautionNot EVERY option accessibleTest unusual layouts & options

accessibilityweb@psu.edu can do screenreader testing

Color Deficient VisionAffects 9% U.S. Men

Usually causes inability to distinguish Red/greenSometimes blue/purpleSometimes red may appear black

Also blind users can’t use color coding

WorkaroundsSupplement color coding with text/shape or

some other non-color cue.Does it work in black and white?

Color Contrast (Luminosity)Affects low vision, color deficient users“Low vision” = some visual acuity leftMany “elderly” (40 y.o. +) users require some

accommodation in this area

Not too vivid or too bright

But not too subtle or too light eitherUse medium red, dark gray, dark teal on whiteAvoid ORANGE/YELLOW and white

Use with BLACK instead

CHECK!

Common Contrast Pitfalls

Color Coded LinksOK Because

Links include keywords like “Vocabulary”, “Pronunciation”

Chart Example: Which works best in Black and White?

Right/Wrong Color Coding(Red = wrong, Green = OK)

Can use ifSupplemented by shape

Green check vs red X in ANGEL answer Key Labels in or near colored areas

Change green to blue

Useful PluginsJet Pack

Full control of CSS for any themeRequires WordPress.com account

Gravity FormsGenerally accessible output form Descriptions might not be accessible to

screen readers

More Useful PluginsSiteMap

Can be useful for some users to find page

Events Calendar (not bad)Individual event generally accessible (not

map)Generates ical & Google cal linksList view best

Sites.psu.edu/xx/events/list

MathJax-LaTeX (+MathML)If you have math content

Not so AccessibleTable Press

Output not completely accessible

Meta SliderRotating slideshows NOT accessibleDifficult for people with motion/cognitive

impairmentsStatic Slideshows with ALT text accessible

Inaccessible Hero (PageLines)Looks good, no ALT text option

Inaccessible Hero Fix (via HTML)Create using tool

Publish

Cut and paste code on another page

Tweak as needed (e.g. add ALT text)

CSS & Keyboard FocusAnyone with motor control issues but who retain visionCarpal TunnelParkinson’s/Essential Tremor

May rely on keyboard or joystick buttonsWhere’s the cursor?Where’s the Skip Nav link?

Which tab is highlighted?Keyboard tabbing

Which tab is highlighted?With :hover styling

Browser Default Link Focus

Keyboard Focus on Accessibility SiteBy customer request

Keyboard Focus in Forms

CSS :focus attributeWhen element has keyboard focus (e.g. TAB)a:focus – control link style for keyboard users:focus – any element (link, form field, element

with TABINDEX attribute)

Example:focus {

background-color: #DEF;outline: 2px solid #018 !important;(margin-left:0) /*if you need to unhide item*/}

How to disable:focus {outline: none} /*Nooooooo!*/

Another ApplicationSelf Check Rollover

Use both a:hover and a:focus on a pseudo link to reveal an answer

http://archive.tlt.psu.edu/accessibility/tabindex0.html#nonform

Line-Height Attributeline-height=1 vs. line-height=1.25 or 1.25 em

Absolute vs. Relative Line HeightRelative (Recommended)

body {line-height:1.25} /*125% of font size*/

h1,h2,h3 {line-height: 1}

Absolute (Wonky, but Common)body {font-size:14px; line-height:21px}Can negatively impact other elements (e.g.

table cells}

Questions?accessibilityweb@psu.edu

http://accessibility.psu.edu

http://sites.psu.edu/support/

Yammer – PSU Accessibility & Sites at Penn State group