ADA Compliance and Accessibility: Websites and Online Courses

Many design practices that enhance website accessibility are also simply good website design practices.

• Minimize distracting page elements. Avoid blinking, flashing, or animated webpage content. If you must include such elements, have them flash fewer than 3 times per second and allow the user to pause or stop the animation.

• Make sure your text and background have sufficient contrast. People with color blindness or other vision problems frequently have issues reading text that doesn't have enough contrast.

• Use standard fonts, such as Ariel, Times New Roman, and Tahoma, and don't use more than two or three per page.

• Don't use all caps for emphasis. It is harder to read and can cause issues for screen readers.

• Ensure that the reading order of elements on your page matches the visual order, as that is how screen readers will interpret it.

• When creating webpage forms, make sure they are easy to understand and navigate, clearly labled, and keyboard accessible. Also use appropriate HTML markup to make them accessible to screen readers.

There are many different ways to keep web pages accessible. For more information on these tips, please visit the links in the Helpful Websites section below.

Getting around a webpage can present challenges to those who have difficulty using a mouse or who use a screen reader. The following tips can help make your pages accessible to those users. More detailed instructions are available at Common Accessibility Errors and How to Fix Them.

• The user must be able to navigate around the website with the use of the keyboard only. To test this function, while on the webpage hit the Tab button repeatedly to see if you can access all of the content on the site, including all drop down menus, search boxes, and links. Make sure the tab order is logical and doesn't jump around the page.

• Make sure you can see where the Tab focus is. It should appear as a box and/or underline highlighting where you are on the page.

• Zoom in on the page by pressing Ctrl and + until you are at 200% magnification, then make sure that no page information is missing. If a vision-impaired user increases the size of the page in order to read it, they must be able to access all of the content on the page. Also make sure that tabbing through the page still works.

• Include a "Skip to Content" button, so that those using screen readers have an option to skip content at the tops of pages, which is often repeated on multiple pages.

Heading tags are very important for people using screen readers, who can use headings to skim webpages for the content they want. You can find more detailed information about using headings on webpages through WebAIM: Semantic Structure. 

• To organize information on the page, use header tags or options like <h1>, <h2>, <h3>, and so on instead of style options such as font size and bold text. Only the header tags allow screen readers the ability to skim.

• Use heading tags logically, so that only one <h1> tag is used per page and the other headings appear in a consistent hierarchy. For instance, use <h2> to designate major section headings and <h3> for subheadings.

• Content Management Systems (CMS) often have designated uses for some of the heading tags. On this page, for example, <h1> designates the title of the page, and <h2> the title of each content box. As a result, only <h3> tags and below can be used within the content boxes on this page. You should check to see if your CMS, whether Moodle or something else, has designated heading tags.

• Do not use heading tags for purely visual reasons, such as emphasis. Instead, use style elements such as font size, bold text, and italics. In fact, screen readers recognize bold and italics as designating emphasis, so you can use those styles to convey importance.

Hyperlinks can sometimes present a problem for those who use screen readers or don't use a mouse. More details can be found at WebAIM: Links and Hyperlinks.

• All links must be accessible using only the computer keyboard to sel and Enter to activate the link.

• Use descriptive text when creating a link. Avoid using only words such as "click here" or "More" or URLs as link text. Instead, provide information about where the link actually goes.

• Include title text for every link, either in the html code or by using the linking function in your CMS.

• There is no need to use the word "link" before any link text. Screen readers identify every link before reading the link text.

• Keep link text descriptive but concise. Screen readers will read everything in the link text, so if you use an entire paragraph as link text, the user won't be able to skim through the text.

• On the other hand, don't make link text too small, as that can make it difficult for some people with mobility problems who use a mouse.

When used well, images can improve the accessibility of a webpage for everyone as well as those with learning or other cognitive disabilities. Here are tips for making pictures on your webpage accessible for users with vision problems. More in-depth coverage of this topic can be found at WebAIM: Accessible Images and  WebAIM: Alternative Text.

• Include alternative text for any image that you use. Make sure that a user will be able to understand the meaning of the images you choose to use.

• If you are using an image as a link, make sure your alt text includes any descriptive information about the link. When the link is for a picture, your alt text is the descriptive text.

• Don't use color as the only way to impart information in an image. Information that depends on color alone will be difficult for someone who is color blind.

• Be careful when using pictures that become pixelated when enlarged. Those who have to magnify pages to see them may lose the meaning of pixelated images.

Many webpages use tables to organize and present information. Tables can present particular challenges for users with disabilities and need to follow certain guidelines to be accessible. For more detailed information on creating accessible tables visit WebAIM: Creating Accessible Tables.

• There are two kinds of tables used on webpages: layout tables, which structure information on a webpage, and data tables, which present information in a grid.

• Screen readers present tables by reading them cell-by-cell from left to right before moving down to the next row.

• Layout tables are often discouraged because older screen readers (which many people may still use) have trouble reading tables, but newer ones typically do not, as long as the tables are designed to be accessible. Also, using CSS for layout is generally much more flexible than using tables.

• For data tables, it is best to create simple tables that use one header per column, one header per row, and avoid merged cells. Complex tables can be made accessible, but this can be time-consuming. A series of simple tables is often a better option.

• For data tables, use HTML markup to identify the important information for each table and each cell.  The important tags to know for accessibility are
  1. TH- used to designate column and row headings
  2. SCOPE- included with TH to designate a heading as being for a column or row.
  3. CAPTION- used to designate a caption or title for a table. Use formatting tags to control placement and formating.
  4. SUMMARY- an attribute included within the initial <TABLE> tag which is not visible but will be read by screen readers. Can be used to provide supplementary information to those using a screen reader.