Designing with Accessibility in Mind GALILEO Annual Conference July 12, 2018

Who We Are Angela Megaw, Reference Services Librarian Kara Mullen, Head of Access & Electronic Services Clayton State University Angela Megaw, Reference Services Librarian University of North Georgia

Who We Are NOT Lawyers/Legal Experts Professional Web Designers

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 Colour Contrast Analyser from The Paciello Group (www.paciellogroup.com) Color Contrast Checker from WebAIM (www.webaim.org) Text Example Text Example

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 When presenting think audience & distance when choosing size Accessible Fonts Calibri Arial Verdana Tahoma Times New Roman

Headings Use them! 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 Missing Alt Text Missing Slide Title Warnings Unclear Hyperlink Text Repeated Blank Characters Objects not Inline Tips Duplicate Slide Title Check Reading Order

PowerPoint Selecting Reading Order Menu item: Home tab Drawing Group: Arrange Menu item: Selection Pane 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 Accurate Consistent Clear Readable Equal Best Practices Only 2 lines per frame Limit to 28-32 characters per frame Never end a sentence and begin a sentence on the same line unless they are short [ 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) PDF File Word Document Excel Document PowerPoint Document HTML File 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/acc essibility/web) CADET (http://ncamftp.wgbh.org/cadet)

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

Questions