Accessibility

The mshsvt.org site is designed to be inclusive and usable for all, including those with special needs.

The site currently conforms to Web Content Accessibility Guidelines (WCAG) 2.2. In some areas, such as color contrast, it even meets the projected WCAG 3.0 guidelines. Visit the Web Accessibility Initiative Website if you’d like to learn more.

Accessibility matters. Real life issues can make website use difficult for many people. Some struggle with vision and hearing problems, some with fine motor control and mouse handling. For some dyslexia is the issue, for others it’s distractibility. The list is long and complicated. Accessible sites are designed to accommodate as many users as possible. With best practices sought throughout, this site offers:

• Intuitive overall navigation, with added nav tools throughout
• A soft background color that heightens readability, especially for dyslexics 
• Color contrasts discernible by those with low vision and color blindness. 
• Fonts of a size and configuration judged to be legible for all
• Menus, links and buttons that conform to best practices and are large and easy to hit, whether the user has a shaky hand or is paralyzed and navigating by a mouth held device
• Design simplicity throughout, making it easier to work with for those with older technology and/or lower bandwidth connections

Things like font size, color contrast and links and buttons that are clearly labelled become very important. Also, remember that many with disabilities use assistive technologies such as screen readers, which allow users to navigate and access content using speech or braille displays.

Consider it this way: Accessibility aids are essential to some people—and useful to all.

Quick Accessibility Checklist for Admins & Editors

Use clear, simple language and provide alternative text for images to make content easier to understand.

• Use headings and subheadings to organize content and to provide ways to navigate the website using only the keyboard. On the Pages tutorial we go into the Headline hierarchy
  • Every page has a Header level 1 (one per page)
  • Header level 2 is the most common page subhead
  • Header level 3 is used in some cases
  • Keep these in order. You can have many level 2 headings in a row, but you cannot jump from level 1 to level 3
• Keep color contrast sufficient, so that text can be read easily by people with visual impairments.
  • If you have a Chrome or Firefox browser, you can install a nifty tool: the Wave Accessibility Checker
  • To check if color combinations you’d like to use meets contrast requirements, use this tool: The WCAG Color Contrast Checker.
• Include alternative text for images.
  • Alt text is a short description (under 100 characters) that describes what’s actually seen in the image.
    • Keep descriptions specific: Circa 1870 sepia, visitors gather at ornate spring house pavilion.
  • The Title is a short description that will pop up when a mouse hovers over an image
    • These are useful for SEO: Spring house 1870.
• You’ll notice that mshsvt.org has no automatic slide shows or moving elements. Flashing or blinking content can trigger seizures in people with photosensitive epilepsy.
• Provide clear and consistent labels for all form fields, and ensure that forms can be completed using assistive technologies.
  • Use hyperlinks to take people to another page or another website
  • Use buttons for things that require action or input, such as a web form

Above all, remember Alt Text! Over the course of this project, we reviewed many historical society, museum, and other informative websites. Many well-designed sites scored poorly on accessibility tests because their teams stopped adding alternative text. Work on this—cultivate an Alt Text Habit!

The Accessibility Plugin (admin only)

The WP Accessibility plug-in helps address accessibility challenges in WordPress by offering various features that improve website accessibility. WP Accessibility provides us with some help “under the hood” fixing some WordPress core issues.

If you look at the settings, you’ll see some of the things it addresses. The most visible thing is the toolbar on the side that allows users to change to high contrast mode and (in Safari, but not in Chrome, Firefox or Edge) grayscale mode.

You’ll notice that Skiplinks is unchecked. That’s because we handle Skiplinks manually with our Secondary Menu, Conditional Menus, and Page Anchors.