10 Things You Can Do to Make Your Website More Accessible

1. Add alternative text to all images.  Provide text alternatives for all non-text content such as images, audio or videos so that it can be changed into other forms people need, such as speech, Braille or text.

  • The alt attribute should be used for every image.  Use text to describe the image, to write out any text present on the image or leave it blank by using alt=”” if the image is eye candy.
  • Provide a text transcript for any audio content.
  • Provide captions for all video content.
  • More information on text alternatives…

2.     Use Headings. Headings are used to navigate through a site, identify key elements of a site and skip over repetitive navigation.  More information on headings…

3.     Ensure contrast is sufficient. Make sure the contrast of text on a page is sufficient for color blind or low vision users.  The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1, except for large print and images of large print, which must have a contrast ratio of 3:1. Decorative images and logotypes are exempt from this requirement.  More information on contrast…

4.     Don’t depend on color to convey meaning. Make sure color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.  Don’t use red text as the only indicator or important or required information. More information on color…

5.     Make links meaningful.  Links should make sense out of context.  Don’t use “click here” or “more info”.  Links should refer to their destination.  More information on link text…

6.     Enhance Focus indicator.  To ensure sighted users can find and navigate through all links and form fields add a focus indicator in your CSS.

a:focus {
outline: 1px solid blue;
background: green;
}

More information on focus indicators…

7.     Make sure your site is keyboard accessible. All functionality of the content is operable through a keyboard interface.  Test your site by tabbing through the site.  Can you access menus, form controls, image displays (carousels, lightboxes, etc,)?  More information on keyboard accessibility…

8.     Make sure forms are accessible. All form inputs are identifiable using assistive technology.  Label all form controls.  More information on making forms accessible…

9. Identify Table Headers. Data tables can be made much more accessible by marking up the row and column headers which are usually the first row and column in the table.  More information on making tables accessible…

10.     Add Basic Landmarks. ARIA landmarks identify significant page areas, giving them meaning and making them more keyboard navigable. There are several available landmark types, but simply adding 3 of them – main, navigation, and search – can greatly enhance the accessibility of your page.  More information on ARIA landmarks…