IRT Logo
Web & New Media Services

Web Accessibility

Ideally, all public parts of a site should be accessible to everyone. This can be a challenge, and there may be tradeoffs. It is best to take a balanced approach that prioritizes accessibility to upper-level resources and those intended for people with disabilities.

The easy stuff - Just do it

  1. Images

  • Make sure EVERY foreground graphic has an ALT tag, even shim or blank pixels, which should have alt=" " (space) for optimum text-only reading
  • Describe function over appearance; example: "Go to Home Page" for a linked image rather than "Image of House"
  • Provide longer descriptions (and transcripts, if applicable) of any animation, video or detailed graphic, such as a chart
  • If you use image maps, make sure the hotspots have ALT info, as well as the base graphic

  1. Color: Don't ever depend on color alone to convey information; colorblindness is a common disability

  2. Links: Preserve link context: Avoid "Click Here." It's much easier for people who use non-graphical browsers to use links where the link text makes clear what is linked to. Example:
    Bad: "We published a report on our research. Click here to see it."
    Good: "You can read the published research report."
    Also good: "Research Report - A publication about our research

  3. <H1> Headline

    <H2> Headline

    <H3> Headline

    <H4> Headline

    <P> Paragraph
    Text:
  • Best practice is to use format tags in combination with a style sheet; this allows users to apply their own style settings
  • Stratify content using appropriate H and P tags; helps text-only readers scan and process your text
  • Avoid using H tags for design effect
  • Avoid using absolute font sizes, i.e. size="3"; instead, use stylesheet or relative font sizes, i.e. size="+1"

  1. Scripts (JavaScript), applets and plug-ins: Not everyone has or can use them. If the scripts or embedded objects conatain important information or navigation, you should provide NOSCRIPT, NOEMBED alternate content.

    Wherever a <script></script> tag set is used (usually JavaScript) you can include HTML content between <noscript></noscript> tags. Wherever an <embed></embed> tag set is used (Flash or video objects for example), you can include HTML content between <noembed></nobembed> tags. If the browser has JavaScript and plug-ins for the embedded objects turned on, the browser ignores what's between the NOSCRIPT or NOEMBED tags. If they are disabled, the HTML is displayed. It's a good idea to test the function of your pages by using the "Preferences" or "Internet Options" commands for your browser to temporarily turn off scripts and plug-ins before loading the page.

  2. Frames: Not every browser uses frames. Just as with NOSCRIPT and NOEMBED, above, you can and should provide "NOFRAMES" access to content; typically this includes links to text-only versions or to individual navigation and main page files.

    To manage what's called the "noframes" content in Dreamweaver:
    • Open your page that defines the frame structure (usually the index.html)
    • Choose "Modify > Frameset > Edit NoFrames Content"

  1. Text-only: If you can't make a page accessible, provide a link to a "text-only" version near the top of the page; if not practical for every page, provide for primary site resources like Home and navigation links. Text-only means no graphics or tables, just simple HTML text.

  2. Flashing content: Avoid BLINK text and graphic animation resulting in flashing or blinking effects

  3. Redirects and pop-ups: Use them with caution; be careful about assuming how long it will take someone to read a page; pop-ups and links in new windows can cause confusion, so default to linking within the same window, or warn users that links are pop-ups

  4. Validate your pages using any number of online tools (a few are included below)

More challenging

  1. Tables:
  • Some text-only readers will convert pages using tables for structure line-by-line. The reader skips over table borders to read each line as it appears on the page, ignoring the intended text flow. I'm not ready to give up using tables for layout, and hopefully text-only readers will be improved soon. But you may want to keep it in mind.
  • Tables used to chart data or other information can be very difficult to follow in text-only readers. A new set of HEADER tags has been developed that helps these readers convey your information efficiently. However as I write this they must be hand-coded. Hopefully future versions of Dreamweaver and Homesite will make this easier. Until then, code by hand when practical.

  1. Multimedia: Provide synchronized captioning of audio if possible, transcripts if not, descriptions of video.

Further Reading

CNet/Builder.com - An excellent introduction to the topic

Web Accessibility Initiative - World Wide Web Consortium (W3C); the main source, in excruciating detail

Section 508 - Gov. site regarding standards

makoa.org - More Links & Resources

Web-Creators - Notes & slides from Web-Creators lecture

Validation

WAC3:

Try the WAC3 validator:

                                               
Options:

There are many other browser options on the WAC3 Alternative Web Browsing page.

Text-only browsers: You can see a simulated Lynx version of any public URL using Lynx-me (make sure to include http://) or download the free Lynx browser for PC or Mac:

URL:



I hope this page has been useful. Don't hesitate to email me if you have any comments, questions or suggestions for additions for this page -