Optimizing Sites at Penn State (Word Press) for Accessibility Elizabeth Pyatt accessibilityweb@psu.edu 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 accessibilityweb@psu.edu 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? accessibilityweb@psu.edu http://accessibility.psu.edu http://sites.psu.edu/support/ Yammer – PSU Accessibility & Sites at Penn State group