Web Accessibility Standards

All Next Steps NH web content will follow Priority Level 1 checkpoints of the Web Content Accessibility Guidelines 1.0 published by the Web Accessibility Initiative (WAI) and Section 508 standards for web-based Internet information/applications, which are based in part on the WAI Guidelines. The manual and automatic procedures used to evaluate the site will follow those recommended by the Web Accessibility Initiative and will be continually reviewed.

This page serves as a quick reference for writers and developers for this website. Contributors to the website should become familiar with this information.

A basic test for any webpage is to try it with a screen reader, or to imagine how information would be read by one. Also try using the page with just the keyboard, no mouse.

Some short videos that explain different elements of  web accessibility:

Web Accessibility 101: Web Headings for Screen Readers

Web Accessibility 101: Screen Magnification Design Challenges: Forms

Web Accessibility 101: Effective Color Contrast

Web Accessibility 101: Screen Magnification & Reflow in Acrobat Reader

Page title

When creating a new page, be sure that the title is descriptive of what is on that page. This will help search engines find the page as well.

Headings

Six size levels of headings can be used to establish a hierarchy of information on a page.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Always start with the page title and render it heading level H1. Do not use H1 for anything else. In most cases start page headings with H2, and progress down as necessary. Always drop down only one level at a time. For example, do not skip from an H2 to an H4 tag. If any level of header text is too large or too small, you can manually adjust it on that particular page in the WordPress editor, while still keeping the same heading level for a screen reader. 

 

Colors

Web pages often use colors to provide visual clues. There is nothing wrong with this, and in fact you don’t need to  diminish the aesthetic qualities of a page to be in compliance. Rather, be aware that anytime colors are used to convey either navigational or content information, you need to provide another means of conveying information that does not rely on color. Depending on the situation, this can be done by effective language in the title tags, or ensuring that the text adequately conveys the information and that the images are supplemental. In the case of colors presented as embedded images, the WordPress image editor provides a field for alt and title information.

Colors we use: headings green #2b812b, body text dark grey #333333

Images

What we’ve said about colors is also true of images. You can tag images  through the WordPress image editor so that a screen reader can describe what the image is trying to convey.

Mouse over the images below and see what gets read (text will appear as your mouse hovers over the image). The alt text for the lower images conveys far more information. Think about what you are conveying with the image when you write your alt text.

barn barn,links to information about careers in farming in New Hampshire
kitchen Restaurant workers in a kitchen, links to information about careers in the food service industry

The images here are relatively easy to translate. It becomes more complicated with graphs and charts.

Links

We are phasing out use of hover descriptions (mouse-overs) since they do not work on mouse-less devices.

PDFs

Like web pages, there are techniques for making PDFs easier to navigate for individuals with vision impairments. This primarily involves tagging PDFs, which means using  Adobe Acrobat. How to reflow a PDF to avoid horizontal scrolling. More information on accessible PDFs.

Abbreviations

The subject of abbreviations and acronyms relative to accessibility is complex. When used in text (as opposed to title or image attributes) you can use an element in the HTML. A simple example is referencing Next Steps NH – the title or image attribute for the page (not necessarily what is seen) should be spelled out as New Hampshire.

Example:
<p>Next Steps <abbr title="New Hampshire">NH<abbr></p>
will display as
Next Steps NH, but the abbreviation will be recognized as such by a reader, and the title read accordingly.

Check yourself

To check the accessibility of a website, go to WAVE (Web Accessibility Evaluation Tool), where you simply enter the URL of the page you want to review.

More information

Website accessibility toolkit, developed by Easter Seals

WebAIM’s WCAG 2.0 Checklist is WebAIM’s interpretation of WCAG guidelines with recommended techniques for following those guidelines. This is not an official checklist.

Tutorials from gsa.gov on making online electronic content accessible, including Word, Excel, Powerpoint,  and PDFs.

Compilation of tools to help review a site, find errors and correct them, from section508.gov