A Quick Guide to Creating Accessible Web Pages

1. Do not put important information in images!

Users that rely on screen readers will not be able to access material presented in an image. Furthermore, text included in images is not easily magnified for low-vision users. Where images are necessary use the alt text attribute to describe the image content (see the next guideline for more info).

2. Use alt text for every image you have in your website.

Users using screen readers will read this text in place of an image. Drupal makes it very easy to add alt-text to your image, just fill in a brief description for your alt. Google provides some good advice on how to write alt text.

3. Caption your videos.

Youtube makes it easy to add subtitles to your video that users can easily change to a visual style of their preference. Subtitling your videos takes little extra effort but can make your content substantially more accessible. amara.org has easy to use online tools to add captions to your YouTube videos.

4. Use divs instead of tables

Tables used to be the major means of formatting webpages, however they confuse screen readers and are one of the major culprits of web inaccessibility. Only use tables for displaying tabular data, like contact lists, when necessary. Otherwise if you need help organizing your web content use the various div classes (accordions, tabs, or columns) that come with the WMS Drupal.

5. Use proper organization

The font selections you have in the Drupal editor are not just for aesthetic purposes, they help organize your web content into a logical and hierarchical structure. This structure can in turn be easily read by screen readers to aid the user in navigating your web page. Header 2 is the largest divisor in your web content and should denote different major sections (In case you are wondering, Header 1 is reserved for each individual web page, given that it is at the top of the organizational hierarchy). Properly organizing your webpage content can also help you develop more concise and logical ways of conveying information.
Use this as an example:

Page Title - Department Contacts

Header 2 - Faculty Contact

Header 3 - Faculty 1

Body - Contact Information

Header 3 - Faculty 2

Body - Contact Information

Header 3 - Faculty 3

Body - Contact Information

Header 2 - Staff Contacts

Header 3 - Staff 1

Body - Contact Information

Header 3 - Staff 2

Body - Contact Information

Header 3 - Staff 3

Body - Contact Information

6. Use clean HTML

Drupal's What You See Is What You Get (WYSIWYG) editor is quite good for letting site editors contribute content without any knowledge of HTML, however it does have a tendency to encourage inconsistent and messy formatting that will result in HTML that is not easily readable by screen readers. If you have a web manager with even basic HTML skills they should periodically check the website to clean up your HTML.

7. Use clear labels for your web form fields.

This may seem obvious, but using clear, concise yet descriptive labels for your web forms will be of help not only for users interacting with your web forms through a screen reader, but for all users who are using your forms.

Other resources

Making your web pages accessible

A simple overview by McGill Web Services Group on making your WMS web pages accessible.

10 Simple web accessibility tips you can do

A good overview of tips on helping make your website more accessible. Not every tip is applicable given the Drupal WMS environment we are using.

14 brilliant tools for evaluating your design's colours

This is a great list of tools for all of your departments communications. These tools let you simulate various forms of colour blinds to ensure that your documents are readable.

World Wide Web Consortium (W3C) web accessibility initiative

The official resource for all web accessibility. While much of the information contained here is of greater use for IT services, the W3C is an invaluable resource for more in-depth information on web accessibility, best practices, and evaluation.

Back to top