Transcript Optimizing Sites at Penn State (Word Press) for Accessibility

Optimizing Sites at
Penn State (Word
Press) for
Accessibility
Elizabeth Pyatt
[email protected]
See Notes panel for image ALT tags
Outline
Audience for Accessibility & Policy
Tasks by Role
Blog/Page Editor: Posts, Pages
 Headings, Link Text, Image ALT Text, Other
Site Owner: Plugins, CSS, Widgets
WP Admin (beyond Sites)
Adjustments without Code
Adjustments with Code
Accessibility Audiences
Severe Visual Impairments
No usable vision. Use audio cues from screen
reader
Need descriptions for images
Use headings, link text, table , form labelsas
navigation cues
Low vision & color deficient
Some vision, but legibility important
Responsive design important
More Audiences
Deaf
Captions & Transcripts please
http://accessibility.psu.edu/video
Cognitive/Learning Disabilities
Usability & legibility critical
Use menus & widgets well
Motion Impaired
Can’t use hands (easily)
Neurological (e.g. Epilepsy)
Please don’t flicker quickly
Policy
A.D. 69
Online content relating to core PSU business
(e.g. teaching) must comply with accessibility
standards
Core Business
Dept. & Program sites
Course sites
Research sites
NOT wedding & personal hobby sites
Accessibility Benefits of Sites
Properly Coded Template
Search Form
 Proper use of Labels
Navigation Templates
 Proper use of Headings. Some ARIA Roles.
Page Titles
 Based on titles of blog entries/pages
 Rendered as appropriate Headings
Good editing tools
 But YOU must use them well.
2 Main Roles (Editor & Owner)
 Page/Blog Editor
Use Heading Styles
Specific Link Text
Add image ALT text
Tables (there’s a trick)
 Site Owner
All above
Choose appropriate plugins
Legible color scheme + fonts
Adjust CSS (power user)
Accessible HTML in widgets (power user)
Headings and Screen Readers
 Headings =
H1, H2, H3…H6
Use 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 link
 Also 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=se
ction&layout=blog&id=6&Itemid=1 7)
 International Society for Music Education Publications
 Use This
 Learn more from “International Music Links”
 This strategy works across all tools!
Links on a Screen Reader
Image ALT Tag/Text/Attribute
Image from
Wikipedia
Text which replaces image if it can’t be
processed
ALT=“Washington at Valley Forge in winter
snow”
Appears when image fails to load
Pick the Best ALT Tag
Context: Multilingual Signage
1. Wow – a bilingual ad in State College!
2. CATAMultilingualCrop.jpg
3. 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 Sites
 Code
<img src=“x.jpg” alt=“ALT
Text Here”>
 Add Media (WYSIWYG)
During Insert
During Upload
 Use “ALT Text”
 Title, Description are metadata
 Caption appears below image
 Caption ≠ ALT Text
What to do with Tables
 Bad News
No good WYSIWYG table editor in Sites
 BUT
Dreamweaver, ANGEL, Canvas do
Can 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 - Themes
 Choose for Function Not Looks
Choose contrastive colors in options or CSS
http://accessibility.psu.edu/contrasthtml
 Simple, but Accessible
2011-2015
 More options
Divi, Genesis, PageLines
 Caution
Not EVERY option accessible
Test unusual layouts & options
 [email protected] can do screenreader testing
Color Deficient Vision
Affects 9% U.S. Men
Usually causes inability to distinguish
 Red/green
 Sometimes blue/purple
 Sometimes red may appear black
Also blind users can’t use color coding
Workarounds
Supplement 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 left
Many “elderly” (40 y.o. +) users require some
accommodation in this area
Not too vivid or too bright
But not too subtle or too light either
Use medium red, dark gray, dark teal on
white
Avoid
and white
 Use with
CHECK!
instead
Common Contrast Pitfalls
Color Coded Links
OK 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 if
Supplemented by shape
 Green check vs red X in ANGEL answer Key
 Labels in or near colored areas
Change green to blue
Useful Plugins
Jet Pack
 Full control of CSS for any theme
 Requires WordPress.com account
Gravity Forms
 Generally accessible output form
 Descriptions might not be accessible to screen
readers
More Useful Plugins
SiteMap
 Can be useful for some users to find page
Events Calendar (not bad)
 Individual event generally accessible (not map)
 Generates ical & Google cal links
 List view best
 Sites.psu.edu/xx/events/list
MathJax-LaTeX (+MathML)
 If you have math content
Not so Accessible
Table Press
 Output not completely accessible
Meta Slider
 Rotating slideshows NOT accessible
 Difficult for people with motion/cognitive
impairments
 Static 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 Focus
Anyone with motor control issues but who
retain vision
Carpal Tunnel
Parkinson’s/Essential Tremor
May rely on keyboard or joystick buttons
Where’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 Site
By customer request
Keyboard Focus in Forms
CSS :focus attribute
When 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 Application
Self Check Rollover
Use both a:hover and a:focus on a pseudo
link to reveal an answer
http://archive.tlt.psu.edu/accessibility/tabinde
x0.html#nonform
Line-Height Attribute
line-height=1 vs. line-height=1.25 or 1.25 em
Absolute vs. Relative Line Height
Relative (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?
[email protected]
http://accessibility.psu.edu
http://sites.psu.edu/support/
Yammer – PSU Accessibility & Sites at Penn
State group