Knowbility's Be A Digital Ally series covers basic skills and principles of accessible digital design. In this post, Digital Accessibility Specialist Melissa Green discusses styles and style guides in advance of our November "Be a Digital Ally" session on the topic, November 17, 2022 at 5 PM Central Time (US and Canada). Register through Humanitix.
What is a Style Guide?
A style guide, also referred to as a stylebook, manual of style, or style sheet, contains rules and guidelines for print and digital publications. For example, the Associated Press Stylebook is widely used as a writing and editing reference in news writing, classrooms, and corporate settings and provides guidelines for grammar, spelling, punctuation, and language use. Style guides may also address design, such as the use of logos, colors, fonts, icons, and other graphics. The Digital.gov Style Guide is a good example of a guide that does both, containing sections on Voice and Tone, Grammar and Spelling, Branding, Logos, and Image Use.
In addition to providing writing and design guidance, these style guides also explicitly address accessibility:
- National Center on Disability and Journalism Disability Language Style Guide: Provides basic guidance on writing about disability and covers commonly used words and terms.
- A11Y Project Content Style Guide: The A11Y Project is a community-driven effort to make digital accessibility easier. Their Content Style Guide aims to make their content more unified and comprehensible and addresses accessibility, grammar, style, and more.
- Microsoft Style Guide: A comprehensive resource for Microsoft communicators, this guide addresses Accessibility Guidelines and Requirements alongside style, voice, and other considerations. Accessibility guidelines speak to writing for all abilities, colors and patterns, and graphics, design, and media.
- Google Developer Documentation Style Guide: This guide for developers working with Google technology provides editorial guidelines for writing documentation. The Accessibility section aims to help developers write inclusively and ensure their documentation is accessible to the widest possible audience.
Our November "Be a Digital Ally" session, Styles and Style Guides, will address the benefits of and share tips for building a style guide for your organization. Register through Humanitix.
What are Styles?
After determining your organization's style – in particular, the font formats and colors you wish to use – you can use features in the tools you use to create digital content to save those formatting options and apply them to text in new and existing content. Built-in styles are combinations of formatting characteristics you can apply to text to quickly change its appearance. For example, you might apply the Heading 1 style to make text purple, bold, Calibri, and 18 point, and the Heading 2 style to make text black, italicized, Calibri, and 14 point. Built-in styles enhance accessibility and enable authors to quickly apply a set of formatting choices throughout their content. Including heading styles in the body of a document makes it easier to navigate for all users and is a vital step necessary for creating tagged and more accessible PDFs.
Applying Styles in Your Content Creation Tools
In many of the tools we use to create digital content – whether that be documents, presentations, spreadsheets, emails, or content for the web – we can use built-in styles to enhance accessibility and quickly apply a set of formatting choices throughout that content.
Styles in Microsoft Office
In Microsoft Office, there are built-in title, subtitle, and heading styles. In Microsoft Word, these styles are located in the Styles gallery, a visual menu located on the Home tab. In addition to enhancing accessibility and making it easier to apply formatting throughout a document, using the headings styles in Microsoft Word makes it possible to go directly to a section of a Word document using the Navigation Pane. Using headings also enables you to move parts of the document around and automatically generate a dynamically updating table of contents for your document using its headings.
- Make your Word documents accessible to people with disabilities
- Check document accessibility in Word
- Microsoft Word – Apply styles
- Microsoft Word – Customize or create new styles
- Microsoft Word – Add and remove styles from the Quick Styles gallery
Styles in Google Apps
Google Apps, such as Google Docs, Sheets, and Slides, also offer the ability to use text styles to enhance accessibility and quickly apply a set of formatting choices throughout that content.
As with Word and other Office apps, Google Docs users can organize a document with text styles like titles and headings. You can customize the font and size of the text styles and set your styles as defaults.
Also as with Word, adding headings to a document also allows you to create an automatically updating table of contents for that document. Google Docs also offers a document outline feature that detects and lists headings from your text to help organize your content, similar to Word's Navigation Pane.
- Google Docs – Make your document or presentation more accessible
- Google Docs – Add a title, heading, or table of contents in a document
- Google Docs – Use document outlines, summaries, & rulers
Styles in Adobe InDesign
Adobe InDesign is a popular program for creating digital and print layouts. Just like Microsoft Office and Google apps built-in styles, using InDesign paragraph styles enhances accessibility and allows you to quickly apply a set of formatting choices throughout your content.
Consistent use of InDesign paragraph styles throughout a document is also critical for exporting the content to a tagged PDF. And, if you use both Microsoft Word and InDesign, you can map Word Styles to InDesign Styles and use them in your InDesign files.
- Adobe InDesign Accessibility
- Adobe InDesign – Creating accessible PDFs
- Adobe InDesign – Basics of paragraph and character styles
- Adobe InDesign – Map, manage, and export text styles
Styles in WordPress Visual Editor
Many of us use content management systems to administer, organize, and control digital content. Most content management systems feature pre-made website templates and visual interfaces that allow users to customize their website's design and manage its content without coding. For example, when editing a page or post on a website, WordPress content management system users can access a style drop-down menu to apply the various headings and other predefined styles built into the site's theme. It's very similar to how you apply text styles in Word, Docs, and InDesign.
A website theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a website. The theme you choose for your site defines many aspects of your site's design: colors, text size, spacing, and more. Your ability to customize these elements varies by platform and role. For example, WordPress offers Full Site editing capability for users to customize their theme's typography, colors, and layouts. However, even if your organization uses WordPress, you may not be able to change theme or template files if you are not the site manager.
Styles in HTML and CSS
You do not have to use WordPress or a content management system to define styles for web content or apply those styles. If you're working directly with HTML, you can add heading elements and other markup to define the semantic structure of the page.
What determines how these elements are displayed? In other words, how does the web browser "know" to present text marked as an <h1> in a slightly larger and bolder font than text marked as a paragraph? To present the text marked as <h2> with less emphasis than the text marked as <h2>? To present the third-level heading in smaller font than the second-level? Web browsers have built-in style sheets that define the default styling for web page content. The size, color, position, and other characteristics for the heading and other tags are defined in the style sheet. A web page author can define their own styles, overriding the built-in style sheet and telling the browser to display elements in a different way.
End users can also override the browser's default styles. WebAIM's article on Accessible CSS provides some great examples:
"A user with low vision may define a much larger text size. A user with color deficiency or low vision might override page colors to enforce certain colors or high contrast. A user with cognitive or learning disabilities might override positioning or disable images to ensure a more basic presentation. A user with dyslexia might change fonts and text spacing for better readability."
For this and other reasons, it's recommended that authors of web content separate content from presentation by using CSS, or cascading style sheets, to define how content is displayed. Providing content in HTML and defining presentation in CSS helps ensure the content and semantics are still fully accessible even if someone disables or overrides CSS. Using an external style sheet with a .css extension is recommended over using inline styles.
Working with Color
Guides for visual style typically address color. Whether you're using Office software to create documents and presentations, a content management system to create web content, or working with HTML, color is an important factor.
Colors are displayed combining red, green, and blue light. On the web, colors can be specified in different ways. For example, by color names (such as red, yellow, cyan, blue, magenta and so on) or as RGB or hexadecimal values defining how intense the red, green, and blue colors should be displayed. The tools we use to create other kinds of digital content also use RGB and hexadecimal values. For example, the hexadecimal value for this blue color is #0000ff and the RGB value is 0, 0, 255. Knowbility frequently uses this shade of purple specified with the hexadecimal value #6e2f75 and the RGB value of 110, 47, 117. The W3Schools Colors Tutorial provides additional information about and resources for working with color, including the HTML Color Picker used for the blue and purple examples in this paragraph.
You may find yourself needing to determine the RGB or hexadecimal values for a color you are using or wish to use. There are many approaches to this, but I like using TPGi's Colour Contrast Analyser and its eyedrop tool. I select the foreground color picker button, move the color picker box over the color of interest, and select Enter. Colour Contrast Analyser identifies the hexadecimal color code for my selection. If I need another value for the color, such as RGB, I can select it from the dropdown. Once I have the code, I can use it to specify colors in a document or on the web. For example, when formatting text in Microsoft Word and other Office applications, I can select the text I wish to style then use the Colors dialog box to enter the color's RGB values or hexadecimal codes.
There are some great tools that can help you create combinations of colors that are visually appealing and meet accessibility guidelines for color contrast. These are a few favorites:
- A11y Color Palette: Visualize a palette of color combinations with accessibility in mind.
- Adobe Color: Generate color palettes, check contrast, and more.
- TPGi Colour Contrast Analyser (CCA): Easily determine the contrast ratio of two colors using an eyedrop tool. Also a resource for color identification and color value conversion (HEX to RGB, RGB to HEX, etc.).
- WebAIM Contrast Checker: Analyze contrast ratios by entering a foreground and background color in hexadecimal format.
December Be a Digital Ally
Save the date for our next Be a Digital Ally session, "What's New in WCAG 2.2", Thursday, December 15, 2022 at 5 PM Central Time (US and Canada).