Skip to Main Content

Research Guides

Master Boxes & Guidelines

This LibGuide contains all the frequently used boxes that will be mapped to other guides, as well as guidelines for LibGuide creation and maintenance.

Font/Text Accessibility

  • Use real text rather than text within graphics.
    • If you have an infographic that you think would be really beneficial to include in your guide, consider adding it to your guide using a tabbed box. The first tab will hold the infographic and the second tab will have a text-only version.
  • Select basic, simple, easily-readable sans-serif fonts.
    • My recommendation is to just use the default font type and size that is automatically selected! 
  • Use a limited number of fonts.
  • Ensure sufficient contrast between the text and the background.
    • There needs to be a contrast ratio of 4.5:1 for normal text (up to 22 pt) and 3:1 for large text (over 22pt)
  • Use headings for page layout, not for styling.
    • Headings allow the site to be set up in a hierarchical structure. Screen readers use them as navigation landmarks.
    • Heading 1 is reserved for the Guide title and should never be used elsewhere.
    • Heading 2 is used for box titles.
    • Therefore, only use Heading 3 and beyond within Rich Text boxes.
      • Be sure to always nest headers based on their hierarchy!
  • Avoid small font sizes
    • Again, stick to the default font size!
  • Be careful when copying and pasting text.
    • It often includes hidden code that can cause accessibility issues. 
    • To keep things from breaking, try the following:
      • Use the "Clear Formatting" button in the Rich Text Editor to remove all styling from the highlighted text.
      • Right-click and select "Paste and Match Style" or "Paste Without Formatting" depending on your browser to paste content without any styling.
      • On Windows systems, press Shift + Ctrl + V to paste without formatting.
      • On Mac systems, press Shift + Command + V to paste without formatting.
  • Limit the use of font variations 
    • Bold, italics, and ALL CAPS
      • Remember, ALL CAPS is generally perceived as shouting! PLEASE DON'T YELL AT OUR USERS!
  • Don’t rely on the appearance of fonts (color, shape, font variation, placement, etc.) to convey meaning.
  • Always have link or database descriptions display beneath the item title.
    • Using a pop-up isn't accessible.
  • Do not use blinking or moving text.
  • Best way to make tables accessible is to not use tables.
    • Don’t use tables for layout because they are difficult for screen reader users to understand.
    • Only use a table if it is necessary to display tabular data that fits well into rows and columns.
    • Tables created in rich text boxes have special styling to make them work well with responsive design principles. They automatically resize depending upon the size of the user's screen.
      • Therefore, there is no way to manually adjust the size of columns, rows, or individual cells. 
        • Please do not try to override this by using spaces!

Image & Media Accessibility

  • When adding images to your guide, ensure that you include alternative text (also called "alt text") that adequately describes the image.
    • If a person with a vision impairment relies on a screen reader to know what's on a webpage, the alt text you assign to an image is read to them.
    • Make sure that your alt text is thorough enough that they are not missing out on anything by not being able to view the image!
    • Please visit the links in this box about alt text to learn when to use it and how to use it properly.
  • When embedding multimedia in your guide, such as a video or podcast, ensure that closed captions or a transcript are available.
    • Luckily, YouTube videos usually have autogenerated captions and TedTalks include full transcripts in addition to closed captions!
  • Never set Gallery Boxes to automatically play.
    • This can be disorienting for users if they’re in the middle of reading what’s on the screen, only for it to change to the next page on its own.

Accessibility Links

Questions? Need Help? Email reference@drew.edu

Drew University Library, http://www.drew.edu/library