Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Accessibility: Making Your Site Accessible to All Audiences

Accessibility is one of the most overlooked aspects of Web Design for beginning developers. Not because they don't care, they just don't understand what all it takes to make a page accessible. In this module, we will discuss some techniques that can greatly improve the accessibility of your site.

Defining a DOCTYPE

Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPE's are a key component of compliant web pages: your markup and CSS won’t validate without them. (A List Apart)

Dreamweaver automatically adds a DOCTYPE when you create a new page We use...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IT should be the first line in your code.

Identifying your Language

  1. In the code view of your HTML Document look for the HTML tag after the DOCTYPE. it should look like this...
<html xmlns="http://www.w3.org/1999/xhtml">
  1. Add the following language declaration to the end of the tag
<html xmlns="http://www.w3.org/1999/xhtml"
 lang="en" xml:lang="en">


Providing Skip Navigation and Content Links

  1. Directly after the <body> tag create a new div and give it an id of "skipto"
  2. In this div place a link to #content and #navigation. 
<div id="skipto">
Skip to <a href="#content">Content</a> | 
<a href="#navigation">Navigation</a>
</div>
  1. Create a new rule in your style sheet (screen.css) named #skipto
  2. In the Block Category set its display properties to none
#skipto {
 display: none;
 }


Adding Titles to Your Links

Adding titles to your links allows you to add additional description to a link. It will typically show up as a tool tip and will be read by screen readers. All links do not need to have titles but it is a good idea to use them on navigation links and any link that needs additional description. To add a title to a link add the following to the <a> tag for the link.

<a href="about.asp" title="About Me">About Me</a>


Adding ALT Text to Images

ALT text is the text that will be read to a visually impaired individual viewing an image using a screen reader. Dreamweaver will prompt you to add ALT text when you insert an image into an HTML document. You can also ad ALT text to an image by selecting it and adding text to the ALT input in the Properties Inspector

Proper Semantic Markup

As discussed in Module 8 marking up a document properly will increase its accessibility. Make sure that all content is marked up appropriately.

Access Keys

Additional Accessibility can be achieved by adding access keys or keyboard shortcuts to content within your site. For more information see: http://www.alistapart.com/articles/accesskeys/

Accessibility Check List - via yourtotalsite.com

  1. Do you have a DOCTYPE defined?
  2. Have you identified your language?
  3. Have you used meaningful page titles?
  4. Have you provided additional navigation aids?
  5. Is your main content presented first in your HTML source code?
  6. If you can't present your main content first, did you provide skip navigation links?
  7. Have you considered color blind users and used color accordingly?
  8. Have you used real links and accessible popup windows?
  9. Have you added titles to your links?
  10. Have you provided keyboard shortcuts?
  11. Have you avoided opening new windows?
  12. Have you defined acronyms?
  13. Have you used captions for your tables?
  14. Have you used real table headers?
  15. Have you provided a summary for your tables?
  16. Have you specified spacer image alt tags as empty?
  17. Have you used real lists where appropriate?
  18. Have you provided text equivalents for images?
  19. Have you provided text equivalents for image maps?
  20. Have you used real hr tags or an acceptable equivalent?
  21. Have you built your page to allow for font-resizing?
  22. Have you used real headers (h1, h2, etc.)?
  23. Have you properly labeled form elements?
  24. Have you provided search functionality? (I personally believe you need to be in the 100+ page range before needing a search.)
  25. Have you created an accessibility statement?