Web Accessibility

Create a Short but Descriptive Page Title

It's very important that a webpage's title is as descriptive as possible because this is the first thing most screen reader users hear. As an added benefit, most search engines display the title of a page in their search results. If a user types the same words (in a Google search box, for instance) as you put in the title, your webpage will float to the top of the search results. Drupal automatically makes the words you type in the title field the page title. 

Use Descriptive Alternative Text

Alternative text (some Drupal sites call this feature 'Image Description') is read out loud to people that use screen readers, including users that are blind. Bonus: The alternative text (image description) also helps search engines like Google Images display relevant results to users. Add alternative text (image description) to all images. Alternative text should be descriptive but brief. Don't use images with text in them, unless it is a logo or wordmark. If there are words in your logo, type those exact words in the alternative text/image description field.

Use Heading Elements Properly

A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading. Use headings in the proper hierarchy, like an outline. Heading 1 is most important, heading 6 is least important. There should only be one heading 1 so screen readers and search engines can find it first. Most Drupal sites at UNI reserve heading 1 for the title, so you won't see it in the text-formatting menu. Don't use headings just to make text BIG and/or bold. Search engines use the headings (and other content) of your web page to index and display relevant results. Heading levels should not be skipped (that is, you shouldn't have a series of headings in the order Heading 2, Heading 3, Heading 5- which skips Heading 4 entirely).

Use Lists

Using lists (bulleted or numbered) is very useful for screen reader users, as many screen readers announce the number of items in each list before reading out the list items. This helps these users know what to expect when hearing a list of items (such as site navigation).

Ensure Links Make Sense out of Context

Link descriptive words instead of URLs (web addresses). Also, don't link phrases such as "click here" or "read more". All users will benefit from knowing what is going to happen when they select a link. For instance, if you link to a large document file, users with a slow internet connection might like to know what is going to happen when they select that link. If you are linking to a file or document, put the document type in parentheses after the linked words, ie: Meeting agenda (PDF). Screen reader users often browse Websites by tabbing from one link to the next. By listening to just the link description (linked words) on a page, screen reader users can browse through pages and choose the link in which they're most interested. 'Click here' is NOT descriptive link text- it makes no sense out of context and should be avoided. Using descriptive text for links that makes sense out of context is also good for search engine results lists- if your linked text matches what someone types in a search engine, your page will come to the top of the search results.

Provide Headers for Data Tables

Tables that are used to organize tabular data should have appropriate table headers (the element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table. Generally, a table caption should be used as well. Drupal, under Table Properties, offers a choice of column headers, row headers, or both. Also under Table Properties, Drupal offers a way to create a caption for your table.

Make Video and Audio Content Accessible

Video needs to be close captioned for many reasons. People with hearing impairments need the captions to make sense out of the video. Other users that benefit from closed captions are:

• People who are learning English
• People who are in a noisy place and can't hear the audio
• People who are in a quiet place (like your office!) and don't want to disturb others

YouTube provides automatically generated closed captions that can be edited manually for clarification. Panopto also has an automatic closed caption feature that can be edited. You should NOT rely on YouTube's nor Panopto's automatically generated captions-edit them or have a captioning service create a new caption file.  UNI NOW HAS A CAPTIONING SERVICE for YouTube, Google Drive and Panopto videos. Fill out a Service Hub ticket and choose "Closed Captioning".

To make video and audio accessible to people who are Deaf/blind, create a transcript. 

Make Non-HTML Content Accessible

Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents and PowerPoint presentations. PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider creating a Web page for your information instead or, at the very least, provide an accessible alternative. Microsoft Word has tools to make Word documents more accessible, as does Microsoft PowerPoint. The best way to make PDFs accessible is to implement accessibility features in the authoring tool (Microsoft Word, InDesign, etc.). That accessibility usually transfers to the PDF when you convert the document. PDF documents can be made more accessible by including a series of tags using Adobe Acrobat Pro. WebAIM has accessibility instructions for older versions of Microsoft Word and Adobe Acrobat Pro.

Flash content is not accessible.

Use Color With Care

If you use ONLY color to impart meaning on your website, you are holding back information from many vision impaired users-including the estimated 6-9 percent of men in the U.S. who are color deficient or color blind. The most common broad category of color-blindness is often called red-green color-blindness. For someone who is color-blind, a website that uses a green button to signify "Go" and a red button to signify "Stop" could be very confusing.

Color contrast is also important to sighted users and users with low vision: the eye must work harder (and therefore becomes tired more easily) if low-contrast background colors are used, for example, to separate columns in a page. Red text on a green background is low contrast, as is purple text on a black background. Black text on a white background is high contrast. There are online tools available to help you determine good color contrast. To check color contrast on the Web, you can sample colors using Colorzilla, then check the contrast with the WebAIM color contrast checker.  Adobe Photoshop has a color blindness filter under View> Proof Setup> Color Blindness.

Use Logical Linearization

Important information should always be placed towards the top of the page, so screen reader users hear this information first. Doing this actually benefits everyone, as the important information is now in the place where sighted users look first - the top of the page. Many search engines search the top of the page first also.

Use Short, Front-loaded Paragraphs

Front-loading means placing the summary of the paragraph first, followed by a more detailed explanation. This benefits everyone, as users no longer have to search around for the main idea of each paragraph.

Provide a Way for Users to Skip Repetitive Content

One way to help users to skip repetitive content is to use heading elements in the proper hierarchy: see "Use heading elements properly".

Ensure Users can Complete and Submit all Forms

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

Thanks to WebAIM for much of the above content.