I NTRODUCING T URNITIN Elizabeth J. Pyatt ITS [email protected] To be recorded.
Elizabeth Pyatt [email protected] See Notes panel for image ALT tags Optimizing Sites at Penn...
-
Upload
moses-tracy-reeves -
Category
Documents
-
view
219 -
download
0
Transcript of Elizabeth Pyatt [email protected] See Notes panel for image ALT tags Optimizing Sites at Penn...
![Page 1: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/1.jpg)
Elizabeth [email protected] Notes panel for image ALT tags
Optimizing Sites at Penn State (Word Press) for Accessibility
![Page 2: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/2.jpg)
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
![Page 3: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/3.jpg)
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
![Page 4: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/4.jpg)
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
![Page 5: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/5.jpg)
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
![Page 6: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/6.jpg)
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.
![Page 7: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/7.jpg)
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)
![Page 8: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/8.jpg)
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
![Page 9: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/9.jpg)
Headings for Sighted Users
A syllabus uses headings to note different types of information
![Page 10: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/10.jpg)
Word Press Visual Editor
![Page 11: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/11.jpg)
Vague Link Experience
![Page 12: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/12.jpg)
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!
![Page 13: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/13.jpg)
Links on a Screen Reader
![Page 14: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/14.jpg)
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
![Page 15: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/15.jpg)
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.
![Page 16: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/16.jpg)
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
![Page 17: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/17.jpg)
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
![Page 18: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/18.jpg)
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
![Page 19: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/19.jpg)
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?
![Page 20: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/20.jpg)
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!
![Page 21: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/21.jpg)
Common Contrast Pitfalls
![Page 22: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/22.jpg)
Color Coded LinksOK Because
Links include keywords like “Vocabulary”, “Pronunciation”
![Page 23: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/23.jpg)
Chart Example: Which works best in Black and White?
![Page 24: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/24.jpg)
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
![Page 25: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/25.jpg)
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
![Page 26: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/26.jpg)
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
![Page 27: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/27.jpg)
Not so AccessibleTable Press
Output not completely accessible
Meta SliderRotating slideshows NOT accessibleDifficult for people with motion/cognitive
impairmentsStatic Slideshows with ALT text accessible
![Page 28: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/28.jpg)
Inaccessible Hero (PageLines)Looks good, no ALT text option
![Page 29: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/29.jpg)
Inaccessible Hero Fix (via HTML)Create using tool
Publish
Cut and paste code on another page
Tweak as needed (e.g. add ALT text)
![Page 30: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/30.jpg)
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?
![Page 31: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/31.jpg)
Which tab is highlighted?Keyboard tabbing
![Page 32: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/32.jpg)
Which tab is highlighted?With :hover styling
![Page 33: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/33.jpg)
Browser Default Link Focus
![Page 34: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/34.jpg)
Keyboard Focus on Accessibility SiteBy customer request
![Page 35: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/35.jpg)
Keyboard Focus in Forms
![Page 36: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/36.jpg)
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!*/
![Page 37: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/37.jpg)
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
![Page 38: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/38.jpg)
Line-Height Attributeline-height=1 vs. line-height=1.25 or 1.25 em
![Page 39: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/39.jpg)
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}
![Page 40: Elizabeth Pyatt accessibilityweb@psu.edu See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.](https://reader036.fdocuments.in/reader036/viewer/2022062309/5697bfa61a28abf838c98151/html5/thumbnails/40.jpg)
http://accessibility.psu.edu
http://sites.psu.edu/support/
Yammer – PSU Accessibility & Sites at Penn State group