Designing with Accessibility in Mind

Designing with Accessibility in Mind

Georgia Libraries Conference

October 6, 2017

Who We Are

Kara Mullen, Head of Access & Electronic Services

Clayton State University

Angela Megaw, Reference Services Librarian

University of North Georgia

Who We Are NOT

Lawyers …

or any other type of legal experts Professional Web Designers

It’s not a choice. It’s the law.

…follows Section 508 Standards and WCAG 2.0 for web accessibility. If you experience any difficulty in using or accessing this content, contact...

Basics

Color Contrast

• Contrast between text and background

• Ratio should be 4.5:1

• Color should not be used to communicate meaning (required fields, error messages)

• White font on blue background

• Yellow font on black background

Resource Suggestions

1. Colour Contrast Analyser from The Paciello Group (www.paciellogroup.com)

2. Color Contrast Checker from WebAIM (www.webaim.org)

Fonts

• Use standard fonts with clear spacing and easily recognized upper and lower case

• Use font-family: Helvetica, Arial, sans-serif;

• Avoid italics, bold, underlined, and ALL CAPS

Accessible Fonts

• Calibri

• Arial

• Verdana

• Tahoma

• Times New Roman

Headings

• Style your text using headings instead of increasing the font size

• Style the headings to fit your design

• Screen reader users can use commands to navigate text by heading levels

Design Tips

h1 {

text-align: center;

}

Whitespace

• Use line space, tab stops, columns, page breaks, section breaks, margins, <hr>

• Avoid double enters, extra tabs, multiple spacebar hits, &nbsp;

Design Tip

Alt Text

• Use to describe images, graphics, photos, and content in tables

• The alt=“Image description“ is required. A web page will not validate correctly without it

• Use proper capitalization, grammar, spacing, and punctuation

Design Tip

The Devil is in the Details: Less obvious fixes

• Table Reading• Identify Header Rows/Columns

• No split cells, merged cells, nested tables, or completely blank rows or columns

• Provide ALT description

• Acronyms and ALL CAPS

• Symbols as words…What do you call #?

MS Word and PowerPoint Tips

Use the Built-in Checkers

Word > File > Info > Check for Issues > Check Accessibility

PowerPoint > File > Info > Check for Issues > Check Accessibility

Errors, Warnings, and Tips

Errors

1. Missing Alt Text

2. Missing Slide Title

Warnings

1. Unclear Hyperlink Text

2. Repeated Blank Characters

3. Objects not Inline

Tips

1. Duplicate Slide Title

2. Check Reading Order

PowerPoint Selecting Reading Order

1. Menu item: Home tab

2. Drawing Group: Arrange

3. Menu item: Selection Pane

4. Selection sidebar: all objects on the slide are listed in reverse order, the title should always be listed last

Design Tip

Videos

Quality Captioning

Guidelines

1. Accurate

2. Consistent

3. Clear

4. Readable

5. Equal

Best Practices

1. Only 2 lines per frame

2. Limit to 28-32 characters per frame

3. Never end a sentence and begin a sentence on the same line unless they are short

4. [ use brackets to insert descriptions ]

Additional Information & Resources

HHS Section 508 Accessibility checklists

508 Checklists on the U.S. Department of Health and Human Services website (www.hhs.gov/web/section-508/making-files-accessible/checklist)

1. PDF File

2. Word Document

3. Excel Document

4. PowerPoint Document

5. HTML File

6. Multimedia File

Tools and Support for Web Accessibility

• WAVE by WebAIM(http://wave.webaim.org)

• The Paciello Group (https://developer.paciellogroup.com/resources)

• University of Washington (http://www.washington.edu/accessibility/web)

Resources

• Web Accessibility Group (WAG) (www.amacusg.gatech.edu/wag) Handouts and Recorded Webinars

Tools and Checkers

• University of Virginia Darden School of Business Web Accessibility LibGuide (http://darden.libguides.com/c.php?g=446808)

Good topic overview

Provides guidance for making PDF files accessible

• CUNY LibGuides Presentation: Accessibility (Adina) (http://guides.cuny.edu/presentation/accessibility)

Provides good tips for making LibGuides accessible