<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Design Gala &#187; Web Accessibility</title>
	<atom:link href="http://designgala.com/tag/web-accessibility/feed/" rel="self" type="application/rss+xml" />
	<link>http://designgala.com</link>
	<description>Web Usability, Web Technology, User Experience</description>
	<lastBuildDate>Thu, 26 Aug 2010 11:13:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>8 Tips to make Webpage Accessible</title>
		<link>http://designgala.com/8-tips-to-make-webpage-accessible/</link>
		<comments>http://designgala.com/8-tips-to-make-webpage-accessible/#comments</comments>
		<pubDate>Tue, 18 Mar 2008 19:08:36 +0000</pubDate>
		<dc:creator>Design Gala</dc:creator>
				<category><![CDATA[Web Standards]]></category>
		<category><![CDATA[Web Accessibility]]></category>

		<guid isPermaLink="false">http://www.designgala.com/8-tips-to-make-webpage-accessible/</guid>
		<description><![CDATA[Simple things are most often unnoted by web developers during web development process. So, here is a list of the things web developers should take care of during the development. Most developers pay attention to the graphical presentation and often neglect the structure of document. An HTML document marked up structurally can adapt to different environments. ]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;float: right;margin:-30px 0 5px 2px; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fdesigngala.com%252F8-tips-to-make-webpage-accessible%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fis.gd%2F7pg7b%22%2C%20%22style%22%3A%20%22small%22%2C%20%22title%22%3A%20%228%20Tips%20to%20make%20Webpage%20Accessible%22%20%7D);"></div>
<p><img src="http://www.designgala.com/wp-content/uploads/2008/03/web_accessibility_dg.jpg" alt="Web Accessibility" class="alignleft" />Simple things are most often unnoted by web developers during web development process. So, here is a list of the things web developers should take care of during the development.</p>
<blockquote><p>Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.<br />
Excerpts taken from <a title="Web Accessibility" href="http://en.wikipedia.org/wiki/Web_accessibility">Wikipedia</a></p></blockquote>
<h3><strong>1. Structural HTML</strong></h3>
<p>Most developers pay attention to the graphical presentation and often neglect the structure of document. An HTML document marked up structurally can adapt to different environments.  Hence, an HTML document must be structured in such a way that it can be read without stylesheet.</p>
<h3><strong>2. Anchors and Links</strong></h3>
<p>Links are what made the web The Web.  One should provide meaningful links and should make sure that links are accessible in text based browsers as well.</p>
<p class="quote_1">e.g</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;My Page&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;mypage.html&quot;</span>&gt;</span>My Page<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<h3><strong>3. Alternative text for non-textual data</strong></h3>
<p>To provide text alternative for non-text data like images you can use ALT attribute for briefly describing meaning. You can also make use of LONGDESC attribute for long descriptions.</p>
<p class="quote_1">e.g</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">longdesc</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;long desc&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;banner.gif&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Alt Text&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span></pre></div></div>

<p>Similarly, one should be careful using Image links.  Without text equivalent, screen readers will not be able to display the link. Son Use of ALT attribute can allow screen readers to access link text.</p>
<h3><strong>4. Tables</strong></h3>
<p>Following tips should be kept in mind when using tables for layout:</p>
<ol>
<li>The WIDTH attribute on TABLE, TD, or TH elements is usually unnecessary and can hinder a document&#8217;s accessibility.  So, one should control all attributes using CSS.</li>
<li>Row and column headers should be distinctly visible. For column headers, TH is preferred  rather than TD. Providing CAPTION or TITLE to describe the contents of table makes more meaningful.</li>
</ol>
<h3><strong>5. Client Side Scripting</strong></h3>
<p>Client Side Scripting like JavaScript  is not supported by all browsers and sometimes users can disable it. Hence one should make sure that web page is usable even scripts are not supported or turned off.<br />
One should not rely on Client side scripting to navigate or view content. When JavaScript is used, it should not be relied upon.</p>
<h3><strong>6. Colors</strong></h3>
<p>Some old browsers do not support color names. Colors should always be specified with a hexadecimal triplet in the form #rrggbb or #RRGGBB. We should make sure that information presented through the use of color is available without it.</p>
<p class="quote_1">e.g</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&lt;!--
 body<span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#000000</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ffffff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
--<span style="color: #00AA00;">&gt;</span></pre></div></div>

<h3><strong>7. Text-based browsers</strong></h3>
<p>Simulate the web page on text-based browser such as <a title="Lynx" href="http://www.delorie.com/web/lynxview.html">Lynx</a> to see how document would look like in absence of graphics.</p>
<h3><strong>8. Validation</strong></h3>
<p>Validation of HTML documents is  most important part. A validator checks the document&#8217;s HTML against a document type definition to ensure that the syntax of the HTML is correct. Validate your document to check for errors.</p>
<ol>
<li><a href="http://validator.w3.org">Webpage Validation Service by W3C</a></li>
<li><a href="http://www.cynthiasays.com/">Section 508 Web Accessibilty</a></li>
</ol>

<img src="http://designgala.com/?ak_action=api_record_view&id=119&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://designgala.com/8-tips-to-make-webpage-accessible/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
