16
II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

  • View
    218

  • Download
    0

Embed Size (px)

Citation preview

Page 1: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

II. Cross-Cutting Strategies

A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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

Page 3: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

Color Use

• Don’t use color alone to convey info. Cornell’s policy not Cornell’s policy

www.vischeck.com

• Use high contrast colors.

Page 4: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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.

Page 5: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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”

Page 6: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

Avoid Flickering Images

• Flashing, strobing or flickering images can induce seizures in some people.

• Not to mention are annoying to almost everyone.

Page 7: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

Tables

Screen readers read

Information across tables

in a linear way

Thereby making It

Difficult to understand

Information contained in tables.

Page 8: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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

Page 9: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

Tables (continued)

• Define sizes with percentages (%).

• Not inches or cm.

Page 10: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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

Page 11: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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.

Page 12: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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

Page 13: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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.

Page 14: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

• 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

Page 15: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

Text Presentation and Formatting• Leave large, empty margins around the text.

• Use blank lines between paragraphs.

Page 16: II. Cross-Cutting Strategies A Web Accessibility Primer: Usability for Everyone Office of Web Communications

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.