Accessibility best practices

Related videos

A website is considered to be accessible if all people, including disabled and elderly people, can use it. Building your website around the Web Content Accessibility Guidelines (WCAG) can often make your website more usable to users in general. iMIS is W3C WCAG Level 2.1 compliant. WCAG is the most globally recognized accessibility standard, and is used in Australia, Canada, United Kingdom, and United States.

Accessibility best practices with iMIS

  • Use alt-text tags for images. If a visual cue conveys meaning, use text to describe the image, table or graph.
    • Be descriptive with infographics or any image used with an event. This helps low-vision users experience the page you worked hard to develop in the same detail you provide.
  • Provide a transcript or captions for any video or audio-based content. Youtube has some very helpful free tools to help with this.
  • Do not use HTML tables for layout.
  • Do not rely solely on color or a visual presentation to convey meaning.
    • For hyperlinks, for example, use underlines to convey that the text is clickable.
    • For status icons such as success, error, or warning, make sure the icon conveys the status using a symbol such as a check, x, or caution symbol.
  • Use heading levels. For more information, refer to the Style Guide:
    • In the Member Responsive Quick Start Site: Go to Manage > Style Guide.
    • In the Donor Quick Start Site: Go to Manage > Style Guide.
    • In the Staff site: Go to RiSE > Style Guide > Base Elements.
  • Do not rely solely on sensory characteristics of components to describe or emphasize something. For example, shape, size, or orientation.
  • When you embed videos, only begin to play upon request rather than automatically when a page is opened, and be sure the controls are always available.
  • Layout your pages in such a way that the most important information is presented first.
  • When you provide a link, make sure to provide the context, whether in the link text itself, or in the context.
  • Every content adjustment needs to be checked. Make sure to always validate, and then update based on the results.
  • When creating tables, be sure to include a caption or summary so users can find, navigate, and understand said tables. You can also choose to hide the summary so it is only seen by screen readers.

Dynamic content item best practices

Some of our dynamic content items might cause accessibility issues if configured in certain ways. Here are some best practices to be aware of when configuring these items.

  • Slideshow:
    • It is a good idea to disable the Advance automatically option to allow the user to read and advance the slides in their own time.
  • Video Player:
    • Be sure you disable the Hide video player controls option to allow users to start and stop, control the volume, and turn captions on or off.
  • Common Search:
    • To allow the best experience for screen reader and tab-only users set the Pager Location to the top or bottom only, not for both.
  • Query Menu and Summary Display:
    • Entering HideHeader -- as the alias for a display column in the source IQA query renders the header as text for screen readers in the Summary Display and Query Menu content items. Any text after the endash (--) will render for screen readers.

Additional Resources

  • Screen reader tester: ChromeVOX
  • Screen reader tester: VoiceOver
  • FANGS (ff plug-in) gives visual representation of the output for JAWS (the standard screen reader)

For more information about WCAG guidelines, see the Web Content Accessibility Guidelines (WCAG) Overview.