Skip to main content

Blog Post

5 Ways to Sneak Accessibility into Your Next Design

OK stop what you are doing...save that SVG, stop fidgeting with that font, manage that mock-up and take a quick coffee break to read up on some practical ways to sneak accessibility into your next design. Your clients will thank you for the additional users, better SEO performance and overall improvement to the UX/UI.                                    

1. Color and Contrast is Key

One of the easiest (and arguably most important) elements you can control as a designer is color and contrast ratios. Users who are colorblind or have low vision use monochrome displays or text-only browsers and have CSS/JS disabled. Users viewing a site under less than ideal circumstances (ex. low-light, glare, etc) can also benefit from accessible color and contrast.

Contrast ratios represent how different a color is from another color, typically written as 1:1 or 21:1. The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors. If there is not enough contrast, a user with low vision simply cannot read your content...which is kind of the point. But you don’t really need to worry about the science behind the ratios, there are plenty of great tools to help you get the color and contrast right.

Guidelines:

  • Small text should have a contrast ratio of at least 4.5:1 against its background

  • Large text (18pt and larger) should have a contrast ratio of at least 3:1 against its background

  • Icons or other critical elements should also use the above recommended contrast ratios

  • Decorative visual elements (including logos) are exempt from contrast ratios

  • In general, use colors on the opposite ends of the color spectrum and be careful with light shades and “bad” color combinations (ex. purple and blue) 

Color and Contrast Resources:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
http://www.onextrapixel.com/2015/07/25/using-color-theory-to-improve-website-accessibility/
http://www.colorhexa.com/
http://colorsafe.co/                                                                                                                                                 

2. All Things Fonts

Your choice of fonts can make or break a site, especially from an accessibility point of view. Users with reading disorders, learning disabilities, or attention deficit disorders (ex. dyslexia, ADHD) and users with low vision all benefit from accessible fonts.

While it can be a bit overwhelming when you think of all the elements you have to consider when choosing an accessible font: serif vs sans-serif, number of fonts, font variations, font size, letter-spacing, etc., if you follow the guidelines below you will have taken the first steps to making your website more accessible.

Guidelines:

  • Use a limited number of fonts and provide alternative fonts (ex. dyslexie font) whenever possible

  • Specify the font size in terms of %, em or a relative value to allow easy resizing

  • Use adequate font size - 10px min

  • Limit the use of ALL CAPS. Screen readers will read the uppercase word letter by letter, while sighted users see it as yelling

  • Limit the use of font variations (ex. bold, italic)

  • Do not use font icons! Screenreaders don’t like font icons. Users with dyslexia don’t like font icons. Users who like crisp, scalable images don’t like font icons. Basically, avoid them when you can. SVGs rock, so use them instead (see #4 below)

Font Resources:

http://webaim.org/techniques/fonts/
http://accessibility.psu.edu/fontfacehtml/
https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/
https://www.dyslexiefont.com/en/dyslexie-font/                                                                                                       

3. Layout and Content are Your Friends

Layout and content are important to consider when making your design more accessible. Users with screen readers, reading disorders, learning disabilities, or attention deficit disorders will greatly benefit from having structured layout and concise content. As an added benefit, paying attention to layout and content will also improve the overall user experience and will potentially increase your SEO rankings, since your site will be easier for search engine robots to scan.

Simply adding white space and keeping the text short and simple (both in the body and functional elements), provides a cleaner layout and helps the reader focus on the text or action. By additionally utilizing proper headers, you can visually make your site more user friendly to people of all abilities.

Guidelines:

  • Use whitespace to distinguish paragraphs and set the content apart from other website elements

  • Keep content and accessibility text short and to the point. Screen readers read all text on screen aloud (including both visible and nonvisible alternative text), so the shorter the text the faster the screen reader users can navigate it

  • Use headings and spacing to group related content and pay attention to hierarchy order (ex. h1s first, h2s, etc.)

  • Place important actions at the top or bottom of the design. These will be more reachable with shortcuts on the actual website (ex. navigation items)

  • Don't use complex words, when simple ones will do

  • Use the Golden Ratio Typography Calculator tool to help determine the perfect font size, line-height, width, and characters per line (CPL) for your website 

Layout and Content Resources:
http://webaim.org/techniques/textlayout/
https://material.google.com/usability/accessibility.html#accessibility-writing
https://webdesignledger.com/accessibility-for-responsive-websites/
https://www.w3.org/WAI/perspectives/layout.html                                                                                                    

4. Accessible SVGs Rock

Scalable Vector Graphics (SVGs) have been around since 1999, but have been more widely used recently in website development/design for a myriad of reasons:

  • SVGs are great for scalability

  • SVGs have better clarity (this is especially great for retina devices)

  • SVGs have the ability to embed metadata

  • SVGs can be interactive

  • SVGs allow developers to modify them with simple code changes, so you don’t have to make version #117 of the same image

But with great power, comes great responsibility, so it is important to take a few extra steps to make your SVGs accessible.

Guidelines:

  • Add the appropriate ID’s to the title and descriptive tags:

    • <title id="uniqueTitleID">The title of the SVG</title>

    • <desc id="uniqueDescID">A more detailed description of the SVG</desc>

  • If the SVG conveys information, make sure the SVG tag has the TitleID and DescriptionID included:

    • <svg aria-labelledby="uniqueTitleID uniqueDescID">

  • As with other images, if the SVG is purely decorative, you do *not* need to add a descriptive label. Adding ‘aria-hidden="true"’ will allow screen readers to bypass this SVG:

    • <svg aria-hidden="true">

  • Be consistent. The element should use the same description throughout the website 

SVG Resources:
https://www.w3.org/TR/SVG11/expanded-toc.html
https://css-tricks.com/accessible-svgs/
https://www.sitepoint.com/tips-accessible-svg/
https://webdesignledger.com/svg-images-in-web-design/                                                                                        

5. Don’t Forget About Touchscreen Devices

Speaking of SVGs, after spending your time designing and creating new icons for a website, do not lose sight of how people actually use them on touchscreen devices. Icons and links that have an action when touched are called “touch targets.” Due to the great variation in user’s finger size and mobility, you should try to design for the minimum sizes/spacing to allow greater ease of use and clicking accuracy.

Guidelines:

  • Make touch targets focusable by keyboard navigation, not just touch alone

  • Indicate what a touch target element does. Use action verbs (ex. call), not what it looks like (ex. phone), so a visually impaired person can understand the functionality

  • Users typically click slightly below a link or icon, so it is important to have enough bottom padding on your design

  • Make sure touch icons are spaced far enough apart to avoid interference errors and accidental taps. If small targets are too close together, adjust their size and spacing

  • Touch target sizes:

    • Minimum—17 pt / 6 mm

    • Preferred—23 pt / 8 mm

    • Maximum—43 pt / 15 mm

  • Spacing between targets:

    • Minimum—23 pt / 8 mm

    • Preferred—28 pt / 10 mm

Touch Target Resources:
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size
http://zurb.com/word/touch-targets
https://material.google.com/layout/metrics-keylines.html#metrics-keylines-touch-target-size
http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

Additional Resources
Easy Ways to Make Your Website More Accessible | Blog Post
Designing Websites for Everyone | Blog Post
Accessibility Best Practices for Content Editors | eBook