Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

D4D Accessibility Guide

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: <p><span style="color:#00ffff;"><span style="font-size:8px;"><span style="font-family:Times New Roman,Times,serif;">This is an example of some font with custom style and size:</p>

 

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:

Additional Resources

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