Elizabeth Pyatt See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility

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   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. ction&layout=blog&id=6&Itemid=1 7) ction&layout=blog&id=6&Itemid=1 7  International Society for Music Education Publications International Society for Music Education Publications  Use This  Learn more from “International Music Links”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 processed  ALT=“Washington at Valley Forge in winter snow”  Appears when image fails to load Image from Wikipedia

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   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  Keys:  Don’t merge cells, Label all columns

Site Owner - Themes  Choose for Function Not Looks  Choose contrastive colors in options or CSS   Simple, but Accessible   More options  Divi, Genesis, PageLines  Caution  Not EVERY option accessible  Test unusual layouts & options  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)

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  x0.html#nonform 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?     Yammer – PSU Accessibility & Sites at Penn State group