Skip to content
tally learning

Style Guides

6 minute read

Last updated:

Summary

Section titled “Summary”

Style guides provide documentation and instruction for design and development. Accessibility should be a core component of guides. Style guides ensure that accessibility principles are consistently applied throughout the product development cycle.

Overview

Section titled “Overview”

A style guide is a document that outlines how a design team should write content or create visual materials for a product or organization. Style guides are essential to accessible design and development processes. While they often focus on brand guidelines, they should also establish how designers and developers make accessible design decisions. There are established style guides for academic writing, like the Associated Press (AP) Stylebook or the Chicago Manual of Style. These are typically used in journalistic contexts as standards for formal or informational writing. However, technology teams also use style guides to establish the necessary criteria and preferred format for technical documentation, user-facing content, or other needs.

A style guide defines key brand terms and specifies the tone for the copywriting. It may also function as a glossary for brand-specific jargon and acronyms. When creating a style guide, provide their respective definitions in understandable language for accessibility. Use plain language, and target an 8th grade (US and Canada) reading level. A style guide informs its users about the needs of a product’s audience. It allows design and development teams to work separately while remaining unified under a consistent brand message. Style guides should be readily available to all members of the team, and as a best practice, content designers and developers should refer to it as a source of truth.

You can make products accessible from the start by including accessibility in your style guide. The Guidance section of this article will outline the key accessibility concepts to include in a style guide.

Including information about accessibility is just as important as ensuring that the style guide itself is presented in an accessible format. The two major ways to share a style guide with design and development teams are as a website or as a word document. Be sure that these are accessible too. Avoid hosting your style guide in a PDF document as this document type is difficult to make accessible. PDFs also limit your team’s ability to update the content in the style guide. As brand priorities change and accessibility guidelines are updated by various entities, ensure your team is keeping the style guide up-to-date.

Who is Helped?

Section titled “Who is Helped?”

Creating an accessible style guide mainly helps a brand’s design and development teams. It helps these web content professionals by ensuring they build with accessibility in mind, which makes it more likely that their brand content will be compatible with the widest possible range of assistive technologies. This will in turn help their companies avoid legal repercussions of violating WCAG rules.

Ultimately, an accessible style guide helps your customers and users. A style guide enables your design and development teams to make accessibility a priority from the earliest stages of the product cycle and allows them to create a website that is usable by a diverse audience.

Guidance

Section titled “Guidance”

Style guides can determine how a design team incorporates accessibility into their work. Although branding priorities might be the central focus of a style guide, accessibility concerns should also be incorporated. This might be a negotiation with the brand. Establishing these decisions early on and documenting them in a style guide helps avoid confusion later in the product development cycle and allows for easy hand-offs between teams.

Although accessibility best practices require you to always write in plain language, when creating a website for a specific brand you may need to use specific terms related to the product. For example: when describing parts of a car that the general public may not know, like a powertrain or an electric battery, use visual aids to clarify these parts for users. If these images convey content, always accompany them with a text alternative.

You can use your style guide as a place to create templates for alt text. If your brand website has multiple pictures of the same kind of object, list all the angles or perspectives from which the photographs are shot to ensure your alt text is as descriptive as possible. In this scenario, a content author adding a birds-eye view photo to your site will be able to refer to the style guide to know how best to convey this angle using brand-approved language. Your style guide can ensure that designers, developers, and content authors know to keep alternative text brief and to the point. Another type of text alternative that is crucial for accessibility is providing captions and transcripts for videos. Your style guide can include instructions on how best to format these captions by determining font style, size, and color. Your style guide can also provide instructions on how to write descriptive audio that aligns with your brand’s messaging.

For another example of a way to incorporate accessibility in your style guide, think of how color is used in your branding. Many brands have signature colors that distinguish their products in the market. Use a style guide to ensure that your color palette does not violate color contrast standards. Text should always have a 4.5:1 contrast ratio against the background. You should never rely on color alone to convey information in your branding. These are important considerations that can be outlined as rules in your style guide, thus ensuring you are thinking about accessibility even before you begin the design process.

When incorporating accessibility standards in style guides, teams have the opportunity to set standards for legibility even beyond what is covered by the WCAG standards. For example when choosing a font, your style guide can make recommendations that maximize accessibility as a stylistic choice. Though WCAG does not specify a minimum font size or style for digital products as magnification tools are widely available and habitually used to overcome legibility issues, in a style guide, design teams have the opportunity to set their own standards for minimum font sizes or styles that can aid in accessibility. For instance, a style guide could indicate when and where a digital product should use a specific font to support people with reading disabilities.

Section titled “Related Ta11y Articles”

References

Section titled “References”