IDRC - Celebrating 25 Years

1993 - 2018

Continuing Our Work During COVID-19

Read the letter regarding COVID-19 by IDRC Director, Jutta Treviranus.

[Back to Design Exchange Presentation]

Accessibility and Usability

Colin Clark


Accessible Design is Usable Design

Design Principles

  • your site design affects everyone
  • the curb cut effect
  • help your users orient themselves in your site
  • help them avoid and correct mistakes

Separation of Structure and Presentation

  • Why separate them? Reusability!
  • makes it easier to:
    • add and modify content
    • use only portions of the content
    • change your look & feel
  • site will work with a variety of devices
  • works better with older technology

The Right Tools for the Job

PDF Accessibility

  • Are PDFs accessible? Yes (sometimes).
  • The real question - Are PDFs effective for my needs?
  • PDFs are good for print documents
  • require user to leave the browser sandbox
  • require special tools

How to Make Your Site Accessible

Some Basics:

  1. Use good structural markup
  2. Logical ordering and shortcuts
  3. Labeling: more than just ALT text

1. Structural Markup

  • Use HTML tags to identify your content
  • Use lists for all kinds of things, even navigation!
  • <div> and <span> tags show structural divisions and provide hooks for presentation
  • Use tables for tabular data
  • Use CSS for presentation
    Example: {color: #0033ff; font-weight:bold;}

2. Logical Ordering and Shortcuts

  • Prioritize your information
  • Identify tab orderings.
    Example: <a tabindex="1" xhref="mylink.html">
  • Provide keyboard shortcuts.
    Example: <a accesskey="1" xhref="mylink.html">

3. Labeling

More than Just ALT Text

  • Images and media need equivalents
  • Label your forms.
    Example: <label for="myForm">Enter your name:</label>
  • When you have to use pop-ups, inform the user.

    Example: <a target="_blank" xhref="myLink.html" title="My link. This link will open a new window.">

  • Provide meaningful link text
    • no "click here" links
    • use the title attribute where necessary


  • Accessibility makes your site better for all users
  • Strive for consistency and clarity in your designs
  • Separate structure from presentation
  • Prioritize, label, and describe your content