futuretrack5: Accessibility - A Brief Overview http://www.futuretrack5.com/articles/2006/07/08/accessibility-a-brief-overview en-us 40 "Accessibility - A Brief Overview" by Mike Skinner <p>Thanks for the tip masukomi &#8211; font scalability forms part of my testing on any work that I complete.</p> <p>I have tried a few times to convert my father, but some people are just &#8216;stuck in their ways&#8217;. For someone who is 59 his computer literacy is impressive (his gadgets are more impressive than mine) &#8211; I just need to be patient&#8230;</p> <p>For Mozilla users who don&#8217;t know, pressing Ctrl + increases the font size, Control &#8211; decreases the size and Control 0 returns to normal. (Apple users replace Control with the Apple key).</p> Sun, 09 Jul 2006 22:59:15 +0000 urn:uuid:ffd87752-a8da-48f7-9549-696f1932e6cc http://www.futuretrack5.com/articles/2006/07/08/accessibility-a-brief-overview#comment-238 "Accessibility - A Brief Overview" by masukomi <p>regarding your dad and font sizes. Tell him to switch to Firefox. While it honors settings like 14px on the initial load it <span class='caps'>WILL</span> size them up along with everything else when you increase font size. Which is what you would expect a browser to do when you tell it to increase the font size.</p> Sun, 09 Jul 2006 14:25:38 +0000 urn:uuid:57e50fad-f4b5-40cd-8e86-9294665f54de http://www.futuretrack5.com/articles/2006/07/08/accessibility-a-brief-overview#comment-237 Accessibility - A Brief Overview <p>A primary motive for creating accessible sites is to avoid being sued for discriminating against people with different abilities. In general, sites that offer goods, services and information should be accessible &#8211; and in several countries, accessible websites are a legal requirement:</p> <ul> <li><span class="caps">USA</span> &#8211; <a href="http://www.section508.gov/" target="_blank" title="Section508.gov">Section 508</a>,</li> <li>UK &#8211; <a href="http://www.opsi.gov.uk/acts/acts1995/1995050.htm" target="_blank" title="DDA">Disability Discrimination Act</a>,</li> <li>Australia&#8217;s Disability Discrimination Act 1992 applies to web sites,</li> <li>The European Union is currently working on legislation pertaining to accessible websites.</li> </ul> <p>The <a href="http://www.w3.org/" target="_blank" title="W3C">World Wide Web Consortium</a>&#8217;s <a href="http://www.w3.org/WAI/" target="_blank" title="WAI">Web Accessibility Initiative</a> published their <a href="http://www.w3.org/TR/WAI-WEBCONTENT/" target="_blank" title="WCAG">Web Content Accessibility Guidelines</a> just over seven years ago. In my opinion, some of the guidelines are less applicable (or even irrelevant) than when they were published. The guidelines were not keeping up with technology and the way that is utilised on the internet. At a quick glance, the new <a href="http://www.w3.org/WAI/WCAG20/quickref/" target="_blank" title="WCAG 2 Quick Reference"><span class="caps">WCAG 2</span>.0</a> is an improvement.</p> <p>Below are some tips on how to improve the accessibility of your site. If you are seeking an exhaustive checklist, please use the links above. <p><b>Quick-start tips</b></p> <ol style="list-style:decimal;margin-left:20px;"> <li>Use title attributes on links, buttons, labels, images, input fields, radio buttons, checkboxes, select lists, etc. Browsers that read web pages (also known as screen readers) will read these out. The attribute value should be concise, informative and not too repetitious when coupled with adjacent title attributes.<br />&nbsp;</li> <li>Font sizes should not be absolute. Avoid using <i>font-size:11px;</i> &nbsp;instead use %, em, xx-small, x-small, small, medium, large, x-large, xx-large, etc. My father reduces his eye strain by setting <span class="caps">MSIE</span> to browse with the text one size larger. It must be frustrating to visit a site with the text set to 9px and <span class="caps">MSIE</span> doesn&#8217;t resize the text.<br />&nbsp;</li> <li>Labels and form elements &#8211; link them using the label&#8217;s <i>for</i> attribute. For example: <br />&lt;label title=&#8221;Please enter your email address&#8221; for=&#8221;txtEmailAddress&#8221;&gt;Email Address&lt;/label&gt; &lt;input id=&#8221;txtEmailAddress&#8221; type=&#8221;text&#8221; /&gt;<br />&nbsp;</li> <li>Avoid using tables for general content layout &#8211; instead use DIVs (this will also make your site easier to maintain). Try to use tables for tabular information only, and when you do, ensure that you use &lt;th&gt; tags in the first row. Screen readers use the table head to present the content better aurally. Some screen readers also announce when they are entering a new table cell &#8211; which could get annoying if the user isn&#8217;t looking at tabular information.<br />&nbsp;</li> <li>Use valid markup. Regardless of whether your site is <a href="http://www.xhtmlized.com" target="_blank" title="XHTML"><span class="caps">XHTML</span></a> or more dated <span class="caps">HTML</span> &#8211; some markup validators will alert you to missing attributes.<br />&nbsp;</li> <li>Warn users if links open in a popup window. Unannounced popup windows can be disorientating if the user can&#8217;t see windows opening. <br />This can be as easy as inserting an icon with a title attribute (mouseover the image to see it): <img src="http://www.mikeskinner.net/images/popup_icon_16x16.gif" width="16" height="16" alt="The following link will open in a new window." title="The following link will open in a new window." style="border:0px;float:none;clear:none;margin:0px;padding:0px;" /> <u>Link</u><br />&nbsp; </li> <li>Skip links &#8211; if you place a link immediately inside your body tag, that links to an anchor at the start of your page content &#8211; it can be used to avoid reading out the header and navigation every time a disabled user loads a new page on your site (it can get too repetitive). You can do this with a link placed (absolutely) 500px to the left of the visible page so that abled users can&#8217;t see it. Set the title attribute on the link to explain what the link does.<br />&nbsp;</li> <li>Does your site work without JavaScript? <span class="caps">AJAX</span> and <span class="caps">DHTML</span> are popular &#8211; but make sure your visitors have an alternative method to accomplish their goals on your site.<br />&nbsp;</li> <li>Use an accessibility validator on your site. I use the <a href="http://users.skynet.be/mgueury/mozilla/" target="_blank" title="HTML Validator for Firefox and Mozilla"><span class="caps">HTML</span> Validator for Firefox and Mozilla</a>. This extension is primarily for validating [X]HTML, but it also an option to show accessibility messages too (note: this feature is turned off by default).<br />&nbsp;</li> <li>Finally, download a text based browser like <a href="http://lynx.browser.org/" target="_blank" title="Lynx">Lynx</a>. View your site without images, <span class="caps">CSS</span> and JavaScript. Pay particular attention to how well your navigation works.</li> </ol> <p>Being disability friendly is not always easy or quick to accomplish. Auditing and development time impose commercial costs. Some of these guidelines are just good site design, whilst others are just courteous usability. All users can appreciate these &#8211; regardless of their level of ability.</p> Sat, 08 Jul 2006 00:26:00 +0000 urn:uuid:36098252-7ea1-4e8e-8e1c-92c975d68654 Mike Skinner http://www.futuretrack5.com/articles/2006/07/08/accessibility-a-brief-overview http://www.futuretrack5.com/articles/trackback/236