Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

212 lines (125 sloc) 8.87 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Notes on Beyond ALT Text | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="The Nielsen Norman Group has made one of their reports Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities free for download. It &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/redesigned-nlb-website-review.html" title="Redesigned NLB website review">&#x276C;</a>
<a class="next" href="/notes-on-observing-users-who-work-with-screen-readers.html" title="Notes on Observing Users Who Work With Screen Readers">&#x276D;</a>
<time datetime="2008-04-20T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>20</span> <span class='year'>2008</span></time>
<h1 class="entry-title"><a href="/notes-on-beyond-alt-text.html">Notes on Beyond ALT Text</a></h1>
<div class="entry-content"><p>The Nielsen Norman Group has made one of their reports <a href="">Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities</a> free for download. It is a great reasoned report on how and what the obstacles the handicapped encounter while using the web. I recommend you to download and read the report fully.</p>
<p> I took some notes and here are a few extracts I found really useful as a web designer.</p>
<p>The blind use the web for:
<li>Researching stock trading</li>
<li>Find recipes</li>
<li>HAM radio signals</li>
<li>Phone book</li>
<li>Directions to own house</li>
<li>Listen to radio</li>
<li>Search for jobs</li>
<li>Download music</li>
<li>Participate in fan site discussions</li>
<li>Download books on tape</li>
<p>Also interesting to note is, more sighted users use &#8220;help&#8221; than non-sighted users</p>
<p>There are 75 best practices for designing for the handicapped users. But I found the following tips most useful for designing accessible websites:
<li>Follow basic rules of good design.</li>
<li>Minimize the use of graphics.</li>
<li>Use ALT text to briefly describe images, and the LONGDESC attribute to thoroughly describe them. </li>
<li>Never blur pictures to indicate unavailability. Remove the picture from view (e.g. button graphics).</li>
<li>Make it easy for users to skip any multimedia and Flash demos.</li>
<li>Do not automatically create a text-only version of your site.</li>
<li>Avoid using pop-up windows. If you do use pop-up dialog boxes, make sure the default action is the most forgiving. </li>
<li>Avoid opening new browser windows. If you do open new browser windows, always provide a simple way to get back to the site’s main homepage. </li>
<li>Avoid using cascading menus.</li>
<li>Limit the number of links on a page (not more than 20).</li>
<li>Avoid very small buttons and tiny text for links. </li>
<li>Minimize the need for scrolling. </li>
<li>Limit the amount of information that forms require; collect only the minimum needed. </li>
<li>Make sure tab order is logical. Match the tab order to the visual layout when possible. </li>
<li>In forms, put any instructions pertaining to a particular field before the field, not after it. </li>
<li>Test your sites text fonts and colors with screen magnifiers.</li>
<li>Avoid using tables for aesthetic page design. </li>
<li>Especially in tables, do not use graphics to indicate a state, such as yes/no or on/off.</li>
<li>Summarize all tables (using SUMMARY attribute). </li>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2008-04-20T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>20</span> <span class='year'>2008</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="" height=48> <a href="">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><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 class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
Jump to Line
Something went wrong with that request. Please try again.