Audio Tracks

It is best not to automatically play audio tracks and there should always be audio controls to stop, pause, and change the volume. The guidelines require this for items that automatically play for more than 3 seconds, but the controls are good practice regardless.

Triggering Events when a User Selects an Item or Inputs Information

Be sure not to include widgets that change context when tabbing to a hyperlink, entering text, or using a checkbox. Some examples of change of context would be submitting forms or launching a new window.

Providing Adequate Instructions

If you provide controls that users will change, such as textboxes, checkboxes, comboboxes/dropdowns, provide instructions on how to use them. If the user can enter something wrong, let the user know there is an error and describe why it is an error in text.

Providing Hyperlinks to the Software Users Need

Although this is not required per se, it is helpful to the user if you provide a hyperlink to the software that is needed to use "something" on your Web site unless it is common knowledge (e.g. PDF). Try to avoid videos that require Flash only if you can. If you can't, include a link to the flash player. If you include a YouTube video, it will try to play in HTML5, then it will try a few other players, so I point to the Webpage that tests browsers. Go to the browser test for YouTube.

Use Best Practices in Web Design

Web designers adhere to best practices that were developed for usability and browser compatibility. An excellent book containing best practices is Interact with Web standards: A holistic approach to Web design

Images for a Purpose

Don't use too many images or it can be distracting particularly to those with cognitive disabilities. It is fine to use some images for decoration, but most images should have a necessary function. Limit the number of important text in an image. Use HTML and CSS instead of screenshots wherever possible.

Is the Rich Text Editor the Root of All Evil?

Be very careful in how you use the rich text editor. It can add unintended tags that can cause these criteria to fail in almost every way.

Here are some tips.

• Never copy text from word then paste using the regular Rich Text Editor window. Use the paste from Word button.

  Why? It will put many unneeded tags in your code and probably use them improperly. This can make the page unusable to some groups of users.

• Only use basic text formatting, such as bold or italic.

  Why? Some users need their own style sheets because it is the only way they can see the content. The fonts, sizes, etc. could prevent them from using it.

• Be careful when you insert images. Make sure the cursor is where you want the images alt attribute read.

  Why? You don't want the screen reader to say. There once was an o graphic Betty White ld lady that lived in a shoe. Play or download the MP3, Image inserted in wrong place example. If the HTML 5 player launches, it will be in the same window.

• When you edit existing text, it will likely add non-breaking spaces ( ). I do a quick search of the HTML for   and replace it with a space.

  Why? It could cause the text to overflow the box.

*Image created by UnreifeKirsche

Tags must give Web Documents Structure – not a Certain Look

I can't stress enough how important this is. Assistive technology uses tags to determine what the content is. If you use a heading, a heading is expected. This is not true for Web content only. This is true for Microsoft Word files and PDFs too. In fact, PDFs are tagged for accessibility. Never use an untagged PDF. Never, ever, ever.

Back in the old days, Web developers used tables for display purposes. I remember nesting table after table. This practice can no longer be used. The div tag is used by Web developers to produce rows and columns of non-tabular data. On the other hand, use tags for structure whenever it applies. For example, don't use text numbers for an ordered list (ol tag).

Reading Order

Structure and reading order are BFFs. Structure can have a direct effect on reading order. Sometimes, you want an image in the top left corner, but you don't want the alt attribute read until after the first paragraph. You can't use tables. Either you would have to use HTML code or write the purpose of the image in HTML text.

Know the reading order of your HTML pages. At my institution, the reading order for our library subject guides is first column, second column, then third column. The screen reader will follow this order and the boxes will appear in this order when the browser is magnified for those with low vision. Regardless, those using a small mobile device will view the content in this order as well.