Web Content Accessibility Guidelines (WCAG)

Make your Images Accessible

Digital content typically contains images that serve a variety of purposes. Ensuring your content is accessible doesn't mean that the content and layout needs to be ugly to all users. One of the most effective practices is to properly label images with alternative text, or an alt attribute in your image tag. Screen readers will use the alternative text to display the information in the image to a blind computer user.

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

Color Contrast - Choose Color 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.

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG), Web Validation Tools and Techniques

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 will be well-organized and easily interpreted by screen readers.

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

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.

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

All content is accessible with keyboard alone

Assuming that a mouse will be used to navigate your site may impact users 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. Make sure your site is fully usable with the only a keyboard.

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

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:

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

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:

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

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:

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

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:

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

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:

Site Topics:

Website Accessibility, Mobile, Web Content Accessibility Guidelines (WCAG)

Search form

Web Content Accessibility Guidelines (WCAG)

Give your links unique and descriptive names