Making data tables accessible

Only use tables for displaying data and not for layout purposes. Use CSS and other techniques for page presentation. Using tables for layout purposes can make navigation difficult for screen reader users. The following techniques should be considered for your tables:

Use ARIA Properties and Roles

ARIA (Accessible Rich Internet Applications) is an easy and powerful technical specification for ensuring your site structure is accessible. By assigning ARIA roles and landmarks to web elements, you enhance the ability of screen reader users to navigate and interact with your content. ARIA roles and landmarks can be easily added to your HTML, in the same way that you add classes to HTML in order to load attributes from CSS. Consider the following:

Taming the Wild West of Dynamic Content

Most modern screen readers today handle dynamic content quite well on the web. This used to not be the case but as of early 2015 all shipping screen readers are now much better at handling dynamic content. However, there are some things to consider when designing your sites for accessibility that present dynamic content (especially content that changes without user interaction). Consider the following:

Use Accessible Content Management System

Wordpress and Drupal are two of the best content management systems available that have very good accessibility features. The issue with using a content management system is not the core CMS but rather the data that is put into CMS. Careful considerations should be considered when developing your content to make sure that is inclusive for everyone who visits your site. Consider the following resources for content management systems:

Make your Images Accessible

MS Office

Adding an image description to images in your documents is easy and instantly increases the accessibility of your documents for all users. Also, if you are creating PDF documents from your files, the PDF documents carry the same image descriptions. WebAIM explains the process for adding alternate text in the various versions of the MS Office Suite:

Color Contrast - Color Your Site with Care

Color your site with care The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY colors such as these (especially to indicate required fields in a form) will make it more difficult for some visitors to your site to understand the meaning and messaging of your site. Depending on the sites construct it could create roadblocks in performing certain activities on your pages.

Heading the right direction in your content

Most screen reader users tend to navigate a page that they are unfamiliar with by looking for headings on the page. Screen readers have the ability to navigate using quick navigation hotkeys so they can get to heading level 1 through 6 types quickly and efficiently. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website and documents will be well-organized and easily interpreted by screen readers.

Hyperlink Text

Give your links unique and descriptive names

Screen reader users often use a feature called a "Link List" to quickly pull up a listing of all links on a page. This dialog allows them to quickly get to a link that they are looking for on the page. For this reason you should try to provide unique and meaningful text to each of your links. Text like "Click Here" on a link should be avoided. Use language for your links that fully describes where the link is taking the user.

All content is accessible with keyboard alone

Make sure your site is fully usable with the keyboard. Flip your mouse upside-down and make sure that your site is usable just typing, using the tab key, making menu selections and more. Assuming that users will use a mouse to navigate your site may impact users who use your site in negative ways. This is most commonly seen with menus that appear when hovering over a section of the page, widgets that do not have keyboard hooks, multimedia content that doesn't use an accessible player, etc.

Design your forms for accessibility

A more comprehensive tutorial on creating accessible web forms will be posted soon on the IT Accessibility site. A common mistake made on web forms is not properly labeling your form fields. The following guidelines should be considered when designing your forms: