Date post: | 20-Jan-2016 |
Category: |
Documents |
Upload: | moses-tracy-reeves |
View: | 220 times |
Download: | 0 times |
Elizabeth [email protected] 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
[email protected] 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}
http://accessibility.psu.edu
http://sites.psu.edu/support/
Yammer – PSU Accessibility & Sites at Penn State group