CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

Design-for-all

Can everyone access your web content?

Web sites should work…

 

"The future is already here — it's just not evenly distributed."

William Gibson

Simple advice

Don't assume anything!

Assistive technologies

Assistive technologies: any piece of equipment or software that increases or maintains the capabilities of people with disabilities, e.g.

Web accessibility: reasons to care

The Web Accessibility Initiative

The most important things you can do are also the easiest

Question: Who or what benefits?

Use the right kind of markup

Question: Who or what benefits?

Include ARIA roles

Use more explanatory table markup

Question: Who or what benefits?
Question: Why are hover effects to be used with care?

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>

Hover effect

tr:hover {
    background-color: #CCCCCC;
}
World populations
RankCountryPopulation
1China1,378,180,000
2India1,296,710,000
3United States324,232,000
4Indonesia258,705,000
5Brazil206,505,000
6Pakistan194,581,363
7Nigeria186,988,000
8Bangladesh160,906,000
9Russia146,599,183
10Japan126,990,000
11Mexico122,273,473
12Philippines102,857,000
13Vietnam92,700,000
14Ethiopia92,206,005
15Egypt91,503,800
16Democratic Republic of the Congo85,026,000
17Germany81,770,900
18Iran79,458,200
19Turkey78,741,053
20France66,736,000

Zebra striping

tr:nth-child(odd) {
   background-color: #CCCCCC;
}
World populations
RankCountryPopulation
1China1,378,180,000
2India1,296,710,000
3United States324,232,000
4Indonesia258,705,000
5Brazil206,505,000
6Pakistan194,581,363
7Nigeria186,988,000
8Bangladesh160,906,000
9Russia146,599,183
10Japan126,990,000
11Mexico122,273,473
12Philippines102,857,000
13Vietnam92,700,000
14Ethiopia92,206,005
15Egypt91,503,800
16Democratic Republic of the Congo85,026,000
17Germany81,770,900
18Iran79,458,200
19Turkey78,741,053
20France66,736,000

Check the reading level

Question: Who or what benefits?

Be consistent

Question: Who or what benefits?

Use descriptive link text

Question: Who or what benefits?

Use colour intelligently

Question: Who or what benefits?

Give text alternatives for all visual content

Question: Who or what benefits?