View
218
Download
0
Tags:
Embed Size (px)
Citation preview
II. Cross-Cutting Strategies
A Web Accessibility Primer: Usability for Everyone Office of Web Communications
Provide Labels and Structure
• An organized, outline presentation makes content more accessible to everyone.
• Use real heading and bullet list formats so machines (screen readers) can recognize them.
Color Use
• Don’t use color alone to convey info. Cornell’s policy not Cornell’s policy
www.vischeck.com
• Use high contrast colors.
Acronyms
• Spell out acronyms in their first use.
• Even common acronyms (e.g., CEO) should be spelled out.
• Screen readers will pronounce acronyms as words if there are enough vowels.
Hyperlinks
• Link names should make sense out of context.
• Make links and hot spots big enough to hit with limited motor ability with a mouse.
“click here” … “more” … “Dr. Raj”
Avoid Flickering Images
• Flashing, strobing or flickering images can induce seizures in some people.
• Not to mention are annoying to almost everyone.
Tables
Screen readers read
Information across tables
in a linear way
Thereby making It
Difficult to understand
Information contained in tables.
Tables (continued)
Use the simplest layout possible. – Label rows and columns clearly– Don’t let headers span rows or columns– Use only one level of row/column names
Dept Course Days
PSYC 100 M, W, F
PSYC 240 T, Th
PSYC 360 M, T (lab), W, F
BIO 160 M, T (lab), W, F
BIO 220 T, Th, F (lab)
Dept Course Days
Lecture Lab
PSYC 100 M, W, F
240 T, Th
360 M, W, F T
BIO160 M, W, F T
220 T, Th F
Tables (continued)
• Define sizes with percentages (%).
• Not inches or cm.
Image Use
• Use real rather than graphical text
• Use images liberally – they aid comprehension.
• But avoid background images.
• Provide descriptive “alternative text” or “alt-text” for images.
versus University
Alt-Text for Images
• Screen readers read any alt-text you provide for images.
• Don’t duplicate descriptions if they are already in main content.
• Don’t describe images that are merely decorative.
Forms• Good clarity and organization help everyone.
• Need to be keyboard-only accessible (no JavaScripts that change browser location)
• Organize logically:– Clear instructions– Label required elements– Line up field names with response fields
Copyright Northeast ADA & IT Center
Form labels
Place the label adjacent to the form elementLast Name: Correct
First Last Incorrect
Provide good, clear instructions about information desired
Ensure logical order of form elements
Audio and Video
• Always provide a text transcript for all audio.
• Include captions for all audio associated with video or changing images (e.g. PowerPoint).– Synchronized– Equivalent– Accessible
• Don’t describe images that are merely decorative.
• Use simple, familiar fonts. No cursive or rare ones.
• Provide high contrast between text and background.
– E.g.
– Not
Text Presentation and Formatting
1to help keep them in context
• Use footnotes rather than endnotes.1
red on green
blue on yellow
Text Presentation and Formatting• Leave large, empty margins around the text.
• Use blank lines between paragraphs.
Clear Writing
• Use active verbs, avoid passive voice– e.g. She wrote the book not The book was written by…
• Avoid the verb “to be” as main verb– e.g., He charmed the audience not He was charming
• Keep sentences short and simple.
• Avoid double negatives.
• Organize your ideas logically, use headings.