Hacking Digital Style Guides for Accessibility: Type, Colour, Imagery
Channel: Tatiana Mac
Date: 2020-03-29

Accessible design is more important than ever, with over 15% of people affected by a disability that changes how they interact with the web. As designers, it is our responsibility to ensure our designs are inclusive and reflect all of our users' needs.

Join independent interactive art director and designer Tatiana Mac on a 42-minute class that will show you how to consider accessibility for your next project.

This class focuses on the basics of accessibility:

• why you should care
• how to make a business case
• categories of disabilities
• web standards and resources

Then, we will take that foundational knowledge to break down basic components of a style guide:
• typography
• color
• photography and images


While the class is geared toward interactive designers and developers and provides some tactical and technical recommendations, anyone working in the interactive design and product space would benefit from this class' primer to accessible design and how it impacts businesses.

RESOURCES

Key Organizations & Data
Excellent resources to help make a business case and gain a richer understanding of accessibility.

    World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG)
    https://www.w3.org/TR/WCAG20/
    Ally Project
    https://a11yproject.com/

    WebAim
    https://webaim.org/

    HTML 5 Accessibility
    http://www.html5accessibility.com/

    SEO/Accessibility Overlap
    https://moz.com/blog/global-accessibility-awareness-day
    Disability Compendium
    https://disabilitycompendium.org/sites/default/files/user-uploads/2016_AnnualReport.pdf

Tools
Helpful tools to make checking your designs easier.
    Contrast: MacOS tool
    https://www.usecontrast.com

    Stark: Sketch Plugin for Contrast/Color-Blindness
    http://www.getstark.co/
    Colour Contrast Analyser
    https://developer.paciellogroup.com/resources/contrastanalyser/
    WebAim Contrast Checker
    https://webaim.org/resources/contrastchecker/
    Inclusive Design Toolkit
    http://www.inclusivedesigntoolkit.com/

Articles
Deep-dive into specific aspects of disabilities in order to understand how to best design around them.

    Understanding how Screen Readers Navigate Pages:
    https://developer.paciellogroup.com/blog/2018/01/a-tale-of-two-rooms-understanding-screen-reader-navigation/

    Reducing Cognitive Overload for a Better User Experience
    https://www.smashingmagazine.com/2016/09/reducing-cognitive-overload-for-a-better-user-experience/

    6 Surprising Bad Practices that Hurt Dyslexic Users
    http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/

    Color Vibration
    http://accessibility.psu.edu/color/brightcolors/