Accessibility

Derek Bridge

Department of Computer Science,
University College Cork

Design for All

Aims:

to understand accessibility/ universal design/ design for all
to appreciate some of the techniques that make web pages more accessible

Who is everyone?

People with visual, auditory, physical, speech, cognitive, and neurological disabilities
People with temporary 'disabilities'
People of different ages
People with different first languages
People using different software (different Web browsers, different versions of browsers, different OS)
People using different screens (resolution, size, colour)
People running on platforms with different I/O modalities (keyboard/ mouse/ stylus/ touchpad/ touchscreen/ speech for input; screen/ print/ speech/ etc. for output)
People working in different environmental conditions (stationary/ on the move; bright/dark, quiet/ noisy)
Things other than people (e.g. search engine crawlers)
…

Web accessibility: reasons to care

The legal argument: There is national and international law
The business argument: Directly and indirectly, it may bring more customers
The moral argument: Simply, it's the right thing to do

The Web Accessibility Initiative (WAI)

In 1997, the W3C launched the WAI to help make the Web accessible to people with disabilities
The WAI publishes the Web Content Accessibility Guidelines (WCAG)
- WCAG 1.0 was approved in May 1999
- WCAG 2.0 was finalised in 2008
It has defined extra HTML attributes (WAI-ARIA attributes) which assistive technologies are sensitive to
Sometimes this whole area is referred to as Section 508 compliance —a reference to the relevant US law
You can even automatically validate for WAI compliance: e.g. http://www.cynthiasays.com/ —but this is no substitute for testing with real users

Logos from the WAI

The most important things you can do are also the easiest

Spell-check
Check grammar
Check punctuation
Give the content a logical order
Use the right HTML markup —see later slides
Validate

Question: Who or what benefits?

Use the right kind of markup

Do not use presentational markup in place of structural markup
E.g.
- good: use <h1>-<h6> (correctly!) for a header
- bad: use <p> in HTML and make it big and bold in CSS for a header
Do not use structural markup in the hope of a certain presentational effect
E.g.
- good: using tables for tables of data
- bad: using tables for layout
- good: using ol, ul, li for lists
- bad: using ol, ul, li just because (by default) they indent the text
Question: Who or what benefits?

Use more explanatory table markup

Tables are for tabular data
We already know some tags (table, caption, tr, th & td) and attributes (colspan & rowspan)
The th tag has one more attribute to improve accessibility: the scope attribute (with values col and row) Question: Who does this help?
Also if your table is large, consider a hover effect on rows or zebra striping

Example of good table markup

Results for October
Team	Played	Won	Lost	Drawn
Rovers	10	5	2	3
Wanderers	7	1	0	6

<table>
    <caption>
        Results for October
    </caption>
    <tr>
        <th scope="col">Team</th>
        <th scope="col">Played</th>
        <th scope="col">Won</th>
        <th scope="col">Lost</th>
        <th scope="col">Drawn</th>
    </tr>
    <tr>
        <th scope="row">Rovers</th>
        <td>10</td>
        <td>5</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <th scope="row">Wanderers</th>
        <td>7</td>
        <td>1</td>
        <td>0</td>
        <td>6</td>
    </tr>        
</table>

Check the reading level

Readability check, e.g. the Gunning Fog Index for which there is a calculator
If understanding your text requires more than a lower secondary level education, either rewrite it or provide a simpler alternative
Question: Who benefits?

Be consistent

Use external stylesheets
Use a consistent navigation scheme
- permanent navigation on each page
- same way of presenting local navigation on each page
Question: Who benefits?

Use descriptive link text

Good link text:
- should indicate the nature of the target
- should be consistent if repeated on the same page

E.g. bad and good:

<a href="http://www.wombat.com/">Click here!</a>

<a href="http://www.wombat.com/">More information about wombats</a>

Question: Who benefits?

Use colour intelligently

Ensure proper contrast between foreground and background colours
Avoid certain combinations
Ensure information is not conveyed through colour alone
Question: Who benefits?

Users who are blind

Extra things you can do:

Maybe include a skip-link —see next slide
Give text alternatives for all visual content
- Use the alt attribute for img elements, and make sure the alt-text is descriptive, not just a title
- Produce a text transcript that can be read out to users who are blind (and subtitles for users who are deaf)
Avoid pop-ups and links that open in new windows
Maybe link to a speech stylesheet

Skip-links

Suppose every page in your site begins with a header containing a nav. Question: Why might this be irritating to a user who is blind?

Before this header, include an in-page link that allows users to skip over the header

<body>
    <a id="skiplink" href="#main">Skip to main content</a>
    <header>
        ...a lot of stuff, maybe including a <nav>
    </header>
    <div id="main>
        ...the real content of this page
    </div>
</body>

You can decide whether this link should be
- either visible to everyone
- or not visible but still readable by screen readers, e.g. use this CSS:
```
#skiplink 
{
    position: absolute; 
    left: -999em;
}
```
Some screen-readers are smart enough to automatically offer a skip to the element that has WAI-ARIA attribute-value role="main"

Be nice to people who want to print

We can provide a special print stylesheet:

<link rel="stylesheet" media="screen" href="styles.css" />
<link rel="stylesheet" media="print"  href="printstyles.css" />

Quick quiz: What might be different in the print stylesheet?

Different software; different screens; different platforms

Different browsers and different versions of browsers —see next lecture
Different screens — Responsive Web Design
Different platforms —don't rely on hover!