Skip to Main Content

Best Practices and Accessibility

Standards, best practices, and accessibility tips for STLCC Libraries guide authors.

Placing Content

  • Place your most important content in the top box since this is guaranteed to always be the first box after navigation.
  • Break up content so there is a natural flow when the columns are rearranged.
  • Group similar or themed content closer together so they don't get separated.
  • View your guide on multiple screens (or resize your browser window to activate the responsive design scripts) before publishing.

Headings

Use rich text headings as indicators for sections and sub-sections in your guide. This not only provides hierarchical organization and formatting but also makes it easy for screen readers to scan and jump to different content areas.

  • SpringShare uses Heading 1 (<h1> tag in HTML) for the guide title and Heading 2 (<h2> tag in HTML) for box titles. Don't use them in other places. SpringShare has removed <h1> and <h2> tags in the box editor. 
  • Always use Heading 3 (<h3> tag in HTML) for sub-headings and Heading 4 (<h4> tag in HTML) for sub-sub-headings. In other words, keep the numbers in order of hierarchy. 
  • Make each heading unique. Remember that screen readers will use them for navigation.
  • Don't skip levels. Only use Heading 4 for sections under a Heading 3. 
  • Don't use headings just for formatting; make sure they are actually headings. 

Pages

Avoid subpages as much as possible. Before putting content in a subpage, think about whether it can be put in a separate box on the parent page without making that page too long.

The organization of pages should be consistent. Subjects and formats should not be mixed. For example, if one has an Education guide and one tab is “Educational Psychology” and another “Journal Articles” students may be confused how to find an article on educational psychology.

 

Responsive Design

Responsive design across a desktop, table and mobile device.

Websites with a responsive design make it easy to read content across a variety of devices.

It allows for interaction without needing to resize or scroll because the content is placed in a flexible grid that changes based on screen size.

Responsive design also removes the need to design separately for mobile devices since every device is served from a unified design.

Always check your content on different device types or window sizes before publishing.

On mobile devices, columns are arranged as follows: 

  • The side navigation buttons will be first.
  • The boxes appearing under those buttons will be second.
  • The boxes in the main column will appear in the same order.
  • The footer box will always be last.

St. Louis Community College Libraries

Florissant Valley Campus Library
3400 Pershall Rd.
Ferguson, MO 63135-1408
Phone: 314-513-4514

Forest Park Campus Library
5600 Oakland
St. Louis, MO 63110-1316
Phone: 314-644-9210

Meramec Campus Library
11333 Big Bend Road
St. Louis, MO 63122-5720
Phone: 314-984-7797

Wildwood Campus Library
2645 Generations Drive
Wildwood, MO 63040-1168
Phone: 636-422-2000