Let’s begin by posing a few questions.
What is a Style Guide?
A style guide is a design document that can be used to establish a set of standards when putting together collateral or user interfaces for a business—basically any product or artifact produced for the business.
Who Uses a Style Guide?
A style guide may be created for a developer, so that they know the specifics about what to build, or a designer so they understand design considerations and the bigger picture. It might also be used more broadly across an organisation to give guidance and clarity when creating new documents.
What is Accessibility?
Accessibility is ensuring your designs follow a shared standard and are accessible to a diverse array of people, such as those with physical or cognitive disabilities.
Why Use a Style Guide for Accessibility?
A style guide is a great way to self enforce consistency through your designs. It makes sure you have a solid foundation to work with. When we talk about style guides we normally think about logo integrity, typography, colour. But what about accessibility? Consider the following cases for using an accessibility style guide:
1. To Set Direction
A style guide gives direction. For example, instead of having to put together a pixel perfect mock-up each time you design a form, a developer might prefer to reference an accessibility guide to decide how to build it. When setting accessibility guidelines you might include instructions about which types of form control to use and when.
2. SEO
SEO is another reason why designers need to be aware of accessibility. For example, placing text within an image means that screen readers won’t be able to access it and Google will penalise your website for having poorly marked up content. Making your website accessible has the added positive outcome of helping SEO.
3. User Experience
Accessibility is a big part of UX; after all, not everybody will experience a product in the same way. Contrasting colours may direct a user through an intended flow, but someone unable to distinguish those contrasting colours may find the experience unintuitive. Anticipating usability impediments and planning for them in an accessibility style guide is good practice.
4. Hand Off
Hand off is a perfect example of when you would look to use an accessibility style guide. You may be working on a contract basis and looking to tie things up for the next contractor or agency that comes in to take over where you left off. Give the next line of workers some insight into your thinking from the perspective of accessibility.
Start With the Basics
Forms
Forms have a number of heuristics or rules of thumb associated with accessibility. How a form is built is very important. When was the last time you included a <legend> element with a <fieldset>? Markup details like this are really helpful for assistive technologies.
Visually speaking you might consider the proximity of labels to form inputs. Another example maybe alignment and how they render on mobile.
Touch Target
Touch target size is very important. On mobile and tablet devices the user should have the optimum amount of space to select a button element. If it’s too small they are likely to think the system is lagging or that the link may not be working! Ideally you’d like a target to be about 44 points high and wide, so that they can be accurately tapped with a finger.
Colour Contrast
Is there enough colour contrast on elements in your page? Is text legible against certain photos? This is important to consider as many people suffer impaired vision, or are colour blind in some way.
Text Size
Small text is another common issue, especially for senior citizens. Developers need to style UIs for flexibility, so that users that have trouble reading text can zoom in and out. If you’re designing for an app you want to create a layout that fits the screen of the device. Users should avoid any controls where the user needs to zoom or scroll horizontally.
Furthermore, text size should be a minimum of 11 points, so that it’s legible. Ideally you want the average user to avoid needing zoom in and out to read the content.
Graceful Degradation
Graceful degradation refers to how effectively your product works when someone has a slower connection, different screen size, different resolution, a different browser, or even restrictions on their browser. Awareness of these constraints and limitations can help your organisation determine whether audiences can still access your content with any of these imposed constraints. Most failures aren’t shocking surprises. They are predictable events that you can plan for, instead of wishing them away as rare unpredictable accidents.
Make it Relevant
If you’re conducting a usability evaluation you may use what you’ve observed; accessibility issues throughout your system can help outline accessibility rules in your style guide. For example, if you’ve been using test metrics such as critical errors and you find that they are occurring because of colour contrast, touch sizing issues or any other accessibility issue, include it in your accessibility style guide. Highly relevant examples are more likely to give your document more credibility and buy in from stakeholders.
Conclusion and Takeaways
Style guides are commonplace. Accessibility style guides are not as common, but should not be overlooked. In fact they can be critical in some cases. However, they are also beneficial when thinking about the general user experience. Colour contrast, touch target size and form elements are all potential for issues if not executed right.
- Think about the essentials first. Only include relevant information in your accessibility style guide.
- Don’t assume that anything is common sense. You take for granted the knowledge you accumulate over the years. Don’t be afraid to outline things you might take as given.
- Form follows function. If your design style guide clashes with your accessibility style guide it may be time to go back and try to align both (see colour contrast example above).
- Start with issues you have already identified in your heuristic evaluations. What are some of the usability issues you’ve encountered? Particularly the frequently occurring issues and those with high severity ratings?
Further Reading
