Accessibility equals usability. Meeting accessibility requirements will result in greater usability for all. Here are some things to consider as you create LibGuides content.
Content
- Less is more; less content overall
- Incorporate lots of white space
- Avoid pop-ups
- Heading followed by a paragraph, then a new heading and paragraph or headings followed by a bulleted list works well
- Do not use tables for layout purposes
- Use tables only for data
- Do not size anything by pixels; % or points are better for devices and accessibility
Guide Titles
- Titles should be distinct
- Avoid starting a title with the same wording/acronym
Color
- Simple color palate using the fewest number of different colors as possible - example: use two colors (one main color, one highlight color)
- Consistency - all guides will use the same color palate
- Contrast important - true black or dark gray on dull white
- Avoid gray
- Avoid gradients
- Avoid shadows
- Avoid red on black
- Avoid red with green
Fonts
- San serif fonts (Verdana, Tahoma, New Helvetica)
- Paragraph text: 12 pt (New Helvetica), 10 pt (Verdana, Tahoma)
- Line spacing 1.5
- No small cap headings
- Use % or pts for sizing; never use pixels
Navigation
- Left navigation is becoming the standard, tabs are out
- Left navigation in LGv2 is 2 columns; the navigation column and the main content column
- Nothing else other than the navigation should be in the left column
- One layer of sub-pages only is best
- Top or horizontal navigation works best with side navigation (not an option in LGv2)
- Horizontal drop down menus are okay as long as they are consistent (not an option in LGv2)
- Drop down menus need good contrast between text and background (not an option in LGv2)
- Use breadcrumbs; optimal location under the Guide title, but the top of the page is better than the bottom
Links & Search Field
- A search button should say "Search" on it, not "Go"
- Never use "Click Here"
- Make the search field larger so it stands out more on each page
- Hover effect is okay especially if hovering underscores a link; hover color needs to be dark
Tables
- Tables are only to display data
- Tables require a description similar to Alt Tags for images [Caption tag: 1-2 succinct sentences to describe content]
- Make primary headings darker
- Black text and dark grid-lines are best
- Make each row the same height and size as much as possible
- Alternate between 2 colors for each row in the table; white and gray [verify appropriate color]
