designing with accessibility in mind
TRANSCRIPT
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,
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
