1. Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility

2. 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

3. 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

4. More Audiences  Deaf  Captions & Transcripts please  http://accessibility.psu.edu/video 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

5. 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

6. 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.

7. 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)

8. 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

9. Headings for Sighted Users  A syllabus uses headings to note different types of information

10. Word Press Visual Editor

11. Vague Link Experience

12. 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) 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 International Society for Music Education Publications  Use This  Learn more from “International Music Links”International Music Links  This strategy works across all tools!

13. Links on a Screen Reader

14. 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

15. 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.

16. 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

17. 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/tableshtmlhttp://accessibility.psu.edu/tableshtml  Keys:  Don’t merge cells, Label all columns

18. Site Owner - Themes  Choose for Function Not Looks  Choose contrastive colors in options or CSS  http://accessibility.psu.edu/contrasthtml http://accessibility.psu.edu/contrasthtml  Simple, but Accessible  2011-2015  More options  Divi, Genesis, PageLines  Caution  Not EVERY option accessible  Test unusual layouts & options  accessibilityweb@psu.edu can do screenreader testing accessibilityweb@psu.edu

19. 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?

20. Color Contrast (Luminosity)

21. Common Contrast Pitfalls

22. Color Coded Links  OK Because  Links include keywords like “Vocabulary”, “Pronunciation”

23. Chart Example: Which works best in Black and White?

24. 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

25. 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

26. 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

27. 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

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

29. Inaccessible Hero Fix (via HTML)  Create using tool  Publish  Cut and paste code on another page  Tweak as needed (e.g. add ALT text)

30. 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?

31. Which tab is highlighted? Keyboard tabbing

32. Which tab is highlighted? With :hover styling

33. Browser Default Link Focus

34. Keyboard Focus on Accessibility Site By customer request

35. Keyboard Focus in Forms

36. 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!*/

37. 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 http://archive.tlt.psu.edu/accessibility/tabinde x0.html#nonform

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

39. 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}

40. Questions?  accessibilityweb@psu.edu accessibilityweb@psu.edu  http://accessibility.psu.edu http://accessibility.psu.edu  http://sites.psu.edu/support/ http://sites.psu.edu/support/  Yammer – PSU Accessibility & Sites at Penn State group