Guides: D4D Accessibility Guide: Consistent Visual Branding

Milestone Overview: Visual Branding

Text should be properly formatted and consistent with your organization's Visual Branding (size, color, font).

Attention to text formatting and visual branding gives users a consistent experience across your various online platforms (library websites, online catalogs, FAQs, etc.).
Your system may have a custom style in place that's optimized for accessibility. Including other formatting may override accessible design making your content less usable.

Accessibility Best Practices

Use the Rich Text Editor Tool to Format Your Content

If you're formatting your content make sure to use the editor because it will add the proper HTML code to the page which helps assistive technology work best. You should use the editor to create the following:

Headings
Lists
Tables
Italics
Bold

Avoid Custom Fonts and Size

Tiny fonts
- font smaller than pt. 10 should be avoided, it's too small for most people to read comfortably
Using fonts other than your system default
- Some fonts, like Comic Sans, are harder to read, especially for people with dyslexia. What you select may override the more accessible font chosen by your system administrators.

Tip: If you have a different font or font style displaying on your page but the "Remove Format" tool isn't fixing it, check the source view, if there’s HTML code with style and font size before the text remove it.

Example of code with style and color: This is an example of some font with custom style and size:

Don't Customize Text Colors, or Use Color to Indicate Meaning

It's easy to accidentally chose a font and background color that might not have enough contrast, or makes your the text too busy or hard focus on.
- Your organization's visual branding may already be optimized for accessible
- If your organizations styles change, your custom colors might not meet contrast requirements anymore

Color shouldn't be used to convey meaning because color isn't announced to screen readers, and many users may have color blindness so the meaning of your color choices won't be available to all your users
Example: You have an online food menu with a note that says "foods listed in red have nuts." If someone with a nut allergy is using a screen reader, or isn't able to perceive color they don't know which foods have nuts.

Avoid Copy/Pasting Text

Text that’s been copy/pasted sometimes adds extra HTML formatting. Copy/pasted formatting can cause strange behavior for assistive technology. It can also cause pages to deviate from the they system's visual branding.
Use the “paste as plain text” feature when copy/pasting

LibGuide Help Center Resources:

Using the Rich Text Editor
The Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that works much like a word processor. When editing a Rich Text/HTML content item, it will allow you to easily add and format text, images, and tables. To make advanced customizations, you can even switch to the Source mode to view the underlying HTML code.
Adding and editing Rich Text / HTML content items
The Rich Text/HTML content item is your catch all for pretty much anything. It allows you to add text, images, tables, and even code. Anything you can do in HTML, you can also do in a rich text box. Rich Text /HTML content items are not included in your assets library (Content > Assets), so they can only be reused by reusing the entire box.
Cut, copy, and paste text in a Rich Text / HTML content item
Tips for how to best cut, copy, and paste within the rich text editor! Following the directions on this page will save you time in remediating inaccessible content!

Additional Resources

WebAIM: Color and Contrast Accessibility
Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. There is a great deal of fine print and complexity within the Web Content Accessibility Guidelines (WCAG) 2 that can easily confuse web content creators and web accessibility evaluators. This article pulls together the terms and principles needed to understand WCAG 2 requirements for contrast and color.
WebAIM Contrast Checker
Tool to check the contrast of your colors.
Accessible U: Color & Contrast
Summary: Ensure a strong color contrast between foreground and background on every document, slide and web page. Always use color plus another visual indicator (for example, color plus boldface type or color plus size to communicate important information.

Project Management Suggestions

Work with your LibGuides admins and visual branding teams to develop/update custom CSS and templates to support accessibility and deploy those before starting the remediation project.

Communicate with all our authors about any look/feel changes well in advance and provide mockups and rationale for any changes that are going to be applied.

Reduces rogue design
Makes off-brand and copy/pasted text easier to spot
Reduces the amount of formatting work authors/editors have to do