-
Notifications
You must be signed in to change notification settings - Fork 8
/
accessibility-in-singapore-websites.html
212 lines (118 loc) · 12.1 KB
/
accessibility-in-singapore-websites.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Accessibility in Singapore websites | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="Accessibility has been in the news lately - with Target’s accessiblity lawsuit being given the class-action status. Now, lets take a look at …">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/accessibility-in-singapore-websites.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/infamy.html" title=" Infamy">❬</a>
<a class="next" href="/word-it-look.html" title=" Word It: Look">❭</a>
</nav>
<header>
<time datetime="2007-10-11T00:00:00-07:00" pubdate><span class='month'>Oct</span> <span class='day'>11</span> <span class='year'>2007</span></time>
<h1 class="entry-title"><a href="/accessibility-in-singapore-websites.html"> Accessibility in Singapore websites</a></h1>
</header>
<div class="entry-content"><p>Accessibility has been in the news lately - with <a href="http://www.456bereastreet.com/archive/200710/update_on_the_target_accessibility_lawsuit/">Target’s accessiblity lawsuit being given the class-action status.</a> Now, lets take a look at what was missing in Target’s website that caused the complaint in the first place (summarized from the <a href="http://www.dralegal.org/downloads/cases/target/nfb_v_target_complaint.pdf">official <abbr title ="National Federation of the Blind">NFB</abbr> Vs Target legal docs</a>):</p>
<ul><li>lack of alt-text on graphics</li><li>inaccessible image maps</li><li>the lack of adequate prompting and labeling</li><li>the denial of keyboard access</li><li>the requirement that transactions be performed solely with a mouse</li><li>lack of navigational links</li></ul>
<p>In Singapore, accessibility services seems to be provided majorly by <a href="http://designafa.com/pages/clients.asp">Designafa</a> - especially for government websites. Lets see how well these are managed by their own website:</p>
<p> <dl>
<dt><em>lack of alt-text on graphics</em></dt>
<dd></p>
<p>The first thing that strikes you is that the navigation links are separated by images that have no alt text. Moreover, you have the fluffy rounded corners images with no alt text as well. The problem is not that there is no alt text, but the very existence of these images. If they are not required for screen reading why are they present - impeeding the screenreaders? They should be background images using css. Alas, as the site structure shows, they had not thought about using css and webstandards.</p>
<p></p>
<p>The next thing I notice is that the image says “Key to successful web (sic) Accessibility & Usability” while the alt text says “Accessibility for all, Making your website Accessible”. If the image does nothing but display text as an “image” then the least that should occur is that the text matches that on the image.</p>
<p></p>
<p>Another interesting alt text is this “Commemorating International Day of Disable Persons 2006” for the image that says “Forum on E-Accessibility in Singapore” and the date that is mentioned in the image is 22 June <em>2007</em>.</p>
<p></dd>
<dt><em>inaccessible image maps</em></dt></p>
<p>The site doesnt use any image maps thankfully. </p>
<p>
</dd>
<dt><em>the lack of adequate prompting and labeling</em></dt>
<dd></p>
<pre><code>This is definitely missing in the form on the <a href="http://www.designafa.com/pages/contactus.asp">contact page</a>. Labels are wrapped around the input elements without a "label". The fields are also filled but use javascript to erase it once clicked - I am not sure how that works well with screen readers, but I dont think it is that accessible.
</code></pre>
<p></dd>
<dt><em>the denial of keyboard access</em></dt>
<dd>They have provided excessive keyboard access. Given that they have ordered the tab indexes as well as providing access keys for navigation links as well as other links (including blank ones for labels). The very idea of changing tab index from the natural order itself is murky waters. The idea of access keys have got <a href="http://www.wats.ca/show.php?contentid=32">negative reactions</a> <a href="http://www.accessify.com/2005/11/trouble-with-accesskeys.php">from the accessibility community</a> (<a href="http://www.mezzoblue.com/archives/2003/12/29/i_do_not_use/">Dave Shea’s comment</a>) (<a href="http://www.456bereastreet.com/archive/200601/giving_the_user_control_over_accesskeys/">alternative suggestions</a>).
</dd>
<dt><em>the requirement that transactions be performed solely with a mouse</em></dt>
<dd>This again is taken care of with “onkeypress” and other inline javascripts. But for usability, the submit button is not focussed when tabbed to or even when focussed with the mouse - so u never know when the “submit” button is active or not.</dd>
<dt><em>lack of navigational links</em></dt>
<dd>This is clearly present, but their “skip to content” link goes to the content below the announcement of the latest event.</dd>
</dl></p>
<p>The idea is not to criticize their work, but to showcase what has been missed in this race to get accessibility certifications. Having an overdose of access keys or incorrect alt texts is definitely not accessible but it does not get detected in any of the automatic tests (which the website seems to clear).</p>
<p>Given that they consult the government on accessibility - I think they should have some of these things resolved. If you go to the <a href="http://www.pmo.gov.sg/">Prime Minister’s Office website</a>, the headings are actually encapsulated in <font> tags - so the screen reader wont know it is a heading - which if you were able to see the website you would be able to. You might notice the unusual number of <br/ >s are well.</p>
<p>The Ministry of Community Development, Youth and Sports has a “increase text size” widget slapped on the top as well. Here is what <a href="http://www.456bereastreet.com/archive/200709/scrap_text_resize_widgets_and_teach_people_how_to_resize_text/">Roger Johansson has to say about these text resize widgets</a>:</p>
<blockquote>
<p>
Something that always bugs me is when somebody slaps a text resize widget on their site and calls it “accessible”. Job done. Maybe that is a bit unfair since there are many sites that actually are accessible that have a text resize widget, but my non-scientific guess is that a majority of sites that have a feature like that are a long way from being accessible and use a text resizing widget as a band-aid instead of addressing the underlying problem.
</p>
</blockquote>
<p>It is great that we have a committed organization for providing accessibility to singaporeans but the current usage of accessibility techniques in their client websites as well as their own seems like they haven’t caught up with the latest accessibility techniques as well as discarding those that are deprecated. While the websites pass the automatic tests, they still are not accessible as well as they could be to a disabled person.</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2007-10-11T00:00:00-07:00" pubdate><span class='month'>Oct</span> <span class='day'>11</span> <span class='year'>2007</span></time> in
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2007-10-11-accessibility-in-singapore-websites.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/accessibility-in-singapore-websites.html';
var disqus_identifier = 'http://nimbupani.com/accessibility-in-singapore-websites.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>