Accessible Web Design

The following are some strategies you should utilize to make your written web content more accessible:

Use headings and style

Using built-in styles and layouts can improve both the usability and accessibility of Word documents, PowerPoint presentations, and other files. As you create these files:

Use headings (e.g., Heading 1, Heading 2, Heading 3) to format and mark headings and indicate the organization of the content. Headings help everyone recognize ordinal and co-ordinal relationships between topics and enable those using screen readers to skim the page and find what they need. Use built-in bullet lists and numbered lists instead of trying to create them using tabs and spaces. The built-in lists provide a navigational structure for those using screen readers. Use built-in layouts in PowerPoint rather than building your own with text boxes. The built-in layouts include mark-ups, similar to the headings described above, which ensures that information is presented in the correct order for those using screen readers. Try not to skip from one heading level to the next this can confuse screen reader software, and make sure to utilize them consistently throughout the documents, pages, and website.

Write concise and meaningful link text

Screen readers sometimes stutter over links and stop on the first letter. If link text is meaningless or too long, students using screen readers have trouble figuring out where the link will take them. Keep link text concise and make sure that it makes sense out of context.

Avoid using "Click here" as the name of your links. Have a text description before the link to remind your students and then provide a unique name for the link (for example, you can state, please click the hyperlink follows to read more about the accessibility in online course design). Consider offering a visual cue (such as a PDF icon) by links to make it clear what and the link will deliver. Only use URLs as link text if the URL is very short and meaningful (such as Google.com). If an image serves as a link, the alternative text of the image serves as the link text, so make sure that it follows the guidelines for links.

Please click the following link and see WebAIM's page on links and hypertext (opens in a new tab) for more information.

Provide alt text on your images

Alternative text (also called "alt text") is invisible text attached to images. It is read aloud by a screen reader, enabling someone who can't see the image to access the meaning of the image. Programs such as Microsoft Word and PowerPoint enable you to add alternative text to images.

Alternative text is required for all images, the only exception is the decorative/redundant image, and writing it can be tricky, you can click the following link to access to WebAIM's How to Write Appropriate alt Text (opens in a new tab) tutorial which is very informative and highly recommended. (You can skip the parts about HTML.) To get you started, here are some basic guidelines for writing it, depending on whether the image is active, informational, redundant, or textual.

Avoid using tables for Layout

Screen readers can handle tables, but they start explaining how many columns and rows are present, which can be annoyingly distracting when the table is simply a layout technique. Keep tables for data presentation. The <div> tag defines a division or a section in an HTML document and is often used as a container for other HTML elements to style them with CSS. Make certain to use the HTML scope attribute to explain relationships between cells, and columns. You can click the following link to see WebAIM's instruction on Creating Accessible Table (opens in a new tab).

Choose colors carefully

Avoiding using color as a sole means in communicating information, using color in combination with style/headings. In addition, if possible, test your color schemes with some color-blind people. Color blindness is an incredibly common disability, and the wrong palette can make it difficult for a color-blind person to read your text. You also need to ensure that you provide high levels of contrast between text and background (generally speaking, we aim for pass the "WCAG AA" level). You can click on the following link to access to WebAIM's color contrast checker (opens in a new tab).

If you are interested in diving even deeper, the following are some guidelines/resources provided by Canvas on how to design accessible course content.

Additional Accessibility Guides

4 Final Project