This repository has been archived by the owner on Mar 8, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
/
script2.html
86 lines (85 loc) · 4.37 KB
/
script2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Script 2: Colors with Good Contrast - Showcase Examples with Videos</title>
<link href="http://www.w3.org/WAI/wai-main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Script 2: Colors with Good Contrast</h1>
<p><a href="https://www.w3.org/WAI/EO/wiki/Showcase_Examples_with_Videos/Scripts">< Scripts for Showcase Examples with Videos</a></p>
<table border="1">
<thead>
<tr>
<th scope="col">Sequence</th>
<th scope="col">Narration</th>
<th scope="col">Visuals</th>
<th scope="col">Audio Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">0</th>
<td>[INTRO MUSIC]</td>
<td>[TITLE] Web Accessibility Perspectives - Colors with Good Contrast</td>
<td>[before narration:] Web accessibility perspectives</td>
</tr>
<tr>
<th scope="row">1</th>
<td>There’s something about great design that allows it to go practically unnoticed...</td>
<td>A woman is walking down a street, observing road signs. She is happy and confidently walking where she wants to go.</td>
<td>[after narration:] A woman is walking happily down the street. Signs with directions are shown.</td>
</tr>
<tr>
<th scope="row">2</th>
<td>But it doesn’t take much to make things confusing and frustrating. Choosing colors with poor contrast makes navigating, reading, and interacting a real pain.</td>
<td>Same scene, but with the road signs changed in post-production so there’s almost no contrast. This time the woman looks confused trying to figure them out.</td>
<td>[after "frustraing" and before "choosing":] The signs change to have poor contrast. [after narration:] The woman now looks confused.</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Good design means sufficient contrast between foreground and background colors.</td>
<td>We see the same woman in the street looking at their phone’s navigation app.</td>
<td>[after narration:] She looks at a navigation app on her phone.</td>
</tr>
<tr>
<th scope="row">4</th>
<td>That’s not just text and images but links, icons, and buttons – if it’s important enough to be seen then it needs to be clear!</td>
<td>The woman using the app looks at a poorly contrasted button that becomes clear as she looks at it.</td>
<td>[after narration:] The app has a button with low contrast that changes to become clear.</td>
</tr>
<tr>
<th scope="row">5</th>
<td>And this is essential for people with low contrast sensitivity, which becomes more common as we age.</td>
<td>We cut to an older man sitting on a sofa looking at a tablet.</td>
<td>[after narration:] An older man on a sofa is looking at a tablet.</td>
</tr>
<tr>
<th scope="row">6</th>
<td>With good colors websites and applications can be easier to use in more situations.</td>
<td>We see his phone light up with a notification. He puts the tablet down and goes to look at his phone.</td>
<td>[after narration:] He goes to read a message on his mobile phone.</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Like in different lighting conditions.</td>
<td>The lighting conditions change - Sun glares on to the phone screen – but it’s still clear as a bell.</td>
<td>[after narration:] Sun glares on the phone, but the text is still readable.</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Web accessibility: essential for some, useful for all.</td>
<td>We see the woman from earlier in the film walking the streets, navigating using their mobile phone. She arrives at her destination.</td>
<td>[after narration:] The woman from earlier arrives at her destination using the mobile app.</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Visit w3.org/WAI/perspectives for more information on colors with good contrast.</td>
<td>[WEB ADDRESS (w3.org/WAI/perspectives); W3C AND WAI LOGOS; COPYRIGHT NOTICE]</td>
<td>W3C Web Accessibility Initiative, copyright 2016</td>
</tr>
</tbody>
</table>
</body>
</html>