Skip to Main Content
Hunter Library
Research Guides
Western Carolina University

LibGuides Accessibility and Best Practices for Accessibility: Home

Images

Images

Required

  • All Images need to have Alternate text (ALT tags) included. You can check this by double-clicking the image when in the rich text edit mode.

Best practice

  • Images that "do something" (link to a new page, link to a different resource) need a description of the action rather than the image itself.
  • Alt tags should be very brief and descriptive but not redundant. Don't repeat the same content from the image into the alt text. Recommended ALT text length is 100 characters.
  • Do not use "Image of..." since this is understood to be an image.
  • All images should be resized using a photo editor (Fireworks, Photoshop, etc.) to their final desired size before uploading to LibGuides.
  • Book covers that are used as decorative images only (e.g., those covers used in the "books" assets that come from Syndetics) should have alt text of:  Book cover. (that includes the closing punctuation, a period).  Book covers in other instances should be treated as regular images.

The WebAIM Alt Text page is a good reference for when and how to use alt text.

 

DUE DATES:  All required elements must be in place by 1 August 2021.  WAVE tools should indicate no errors in either error category on all publicly available pages by 1 August 2021. All best practices elements should be in place by 15 January 2022.

Text

Regular Text

Required

  • Avoid too little contrast between font colors and backgrounds.

Best practice

  • Don't use color as a way to convey meaning or importance. Colorblind users and screenreaders may not pick up on color changes.
  • Don't mix different font types. Stick to the default font.
  • Avoid changing the font size unless you have good reason. Use headings (below) for this purpose.
  • Underlining text that is not a hyperlink is best avoided as it causes confusion.
  • Use bold or italics in the rich text editor (or <strong> or <em> tags in HTML) to indicate emphasis. Use these tags sparingly.
  • When using HTML, avoid older-style bold <b> or italics <i> tags as they denote style rather than importance.
  • Avoid relying on non-HTML content that may not be accessible, like PDF or PowerPoint documents.
  • Take caution when copying & pasting content. Many times hidden style code will also be copied along that could break with best practices and introduce inaccessible content. Use the "Remove Format" button in the RTF box toolbar (looks like an underlined T with an x).

Headings

Required

  • Never use Heading 1 (<h1> tag in HTML) in your guide as this should only be used once for the entire page (and is already in use).
  • SpringShare uses Heading 2 for box titles so only use Heading 3 (<h3> tag in HTML) and below in rich text boxes.
  • Higher numbered Headings should be placed above lower numbered ones otherwise the hierarchy gets confused.

Best practice

  • 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.

Links

Best practice

  • Links should use descriptive text when inserted into RTF box.  Using "click here" as descriptive text is not sufficient.
  • Long URLs should not be used as the descriptive text for a link. 

Tables

Best practice

  • Only use tables for tabular data that fits well into rows and columns.
  • Don't use tables to format links or other information.
  • Use table headers to describe the contents of the table columns.
  • Avoid spanned rows as screen readers may not properly parse them.
  • Use grid containers in lieu of tables when possible. All navigation buttons in RTF boxes should use grid containers.

Book Asset Text

Best practice

  • Avoid importing book descriptions when using the "Books from the Catalog" function.
  • Default descriptions should be either removed entirely or edited/rewritten.
  • Book descriptions using the "Books from the Catalog" function should be no more than 250 characters.

DUE DATES:  All required elements must be in place by 1 August 2021.  WAVE tools should indicate no errors in either error category on all publicly available pages by 1 August 2021. All best practices elements should be in place by 15 January 2022.

Images used for naviation (Navigation Buttons)

Guidance is forthcoming.  Expect font size and contrast recommendations.

Alt text recommendations will be further clarified but for navigation images, it should indicate where the image will take you if clicked.  For example, "Go to X page."  Recommendations for other images that "do something" can be viewed under the first bullet in best practice for images (above box).

WAVE Tool Guidance for LibGuides Content Creators

For LibGuides, content creators should meet Web Content Accessibility Guidelines (WCAG) WCAG 2.1.  Within these 2.1 guidelines, there are three different levels:  A, AA, and AAA.  The expectation is that our LibGuides will adhere to WCAG 2.1 at the AA level at a minimum.  However, content creators should aim for AAA compliance when appropriate and achievable.  

Newly published or revised pages should undergo a WAVE tool check.  To meet AA levels, content creators must address any items that show up in the Errors or Contrast Errors categories (see green arrows below).  Alerts (green box) should also be reviewed; alerts may tag excessively long alt-text, small font sizes, redundant links, suspicious link text (link text that doesn't make sense out of context, e.g., Click here or Search here), underlined text that is not linked, etc.WAVE tool image showing category emphasis

Standardized Guidelines

Tools

Color Picking Tools

Other Guidance

Outstanding questions

Should PDFs that describe a Prezi or other images (see infographic as example) be avoided?  If so, what is best to use to replace? 

Do we need to tell people to either hide or display link or database descriptions.  Some indicate that "hover" for db/link description is not good.

Search boxes and forms

Search boxes and forms

  • Search boxes need labels that describe what should be typed into the search box.
    • Requirement
  • All form controls need an associated label that describes what the control does.
    • Requirement
  • ARIA labels are preferred for most form labels
    • Best practice

Imported content that doesn't meet accessibility standards

If you've imported content from another Hunter Library guide and it's flagged by the WAVE tool or you have ascertained that it does not meet accessibility best practices as put forward here, you should contact the content creator to inform them of the need for a fix.  Unresolved errors should be reported to the LibGuides administrator after two weeks. Guides that have Hunter Library as the responsible party should be reported directly to the LibGuides administrator.

If you are importing content from external sources, there may not be much you can do.  Contact the LibGuides administrator for guidance.

Contributors

This guide was built and revised by the following library faculty and staff:

Cara Barker - Research and Instruction Librarian

Scottie Kapel - Scholarly Communications Librarian

Grey Jenkins - Front End Web Developer

Joel Marchesoni - Front End Web Developer*

Adam Olsen -  Web Services Librarian*

Krista Schmidt - STEM Librarian

 

*No longer at WCU