On accessibility and search engine optimization |
   |
On accessibility and search engine optimization |
| |
|
 |  | |
Tips and techniques for making your site accessiblePandia Guest Writer Alex Horstmann takes a look at Web design and accessibility needs of the blind and other disadvantaged Internet surfers, while Pandia discusses the similarities between designing for the search engines and people with disabilities. By Pandia Guest Writer Alex Horstmann Web site design communities have long neglected the accessibility needs of disabled (be it visually, physically or otherwise) and older users. However, accessibility is coming more to the fore, not least because of the increased exposure of Section 508 of the US Rehabilitation Act Amendments of 1998 (cf. the penalty imposed on the 2000 Olympics website, based on the Australian forerunner to Section 508). However, much of the time accessibility is treated as an afterthought, rather than being approached in a proactive fashion from the onset of the design and development life cycle. I've outlined 14 tips and techniques here that I feel are a good place to start on making your site accessible. Why should I make my site accessible?It's basic good manners! You don't put white text on a white background, as people won't see it, so you should avoid using colours that are indistinguishable to people with colour deficiencies. About 8% of adult males suffer from one type of colour deficiency of some form - if your site uses a colour scheme that is not compatible with their colour deficiencies, they'll leave. We do our utmost to support browser versions used by 2 - 4% of people! So we should be catering for this significant user group. It's also becoming the law - while Section 508 is primarily for US governmental and state sites, I believe that soon enough we will see more formal moves that will mean all new sites should comply to some basic accessibility rules. There is a large group of people with disabilities surfing the web. They may be interested in the content of your site, they might like to buy the product that you are selling - however, if your site isn't accessible you're loosing users and you're loosing sales... it's as simple as that. So, what can I do? Here are the 14 Tips. 1. Specify the language used on your page.Very, very often overlooked! If you don't specify the language that the content of your page is written in, screen readers will make a stab at guessing it - and may well get it wrong. This is especially true of technical pages, or pages where the content is based on a topic that uses a lot of terminology or topic specific vernacular. You can also use lang= on the <div>, <span> and <p> tags (to name a few), meaning that a paragraph of German text can be identified to a screen reader by using: <p lang="de"> Tip: Using <html lang="en"> identifies the page as being in English. 2. Use descriptive page titlesMany screen readers have keyboard shortcuts that allows the user to toggle through the currently open windows by reading out the title of the window. Tip: After the <head> tag insert a <title> tag describing the page, like this: <title>My Site Name: Products and Services Page</title> 3. Additional NavigationMany people will know this from using it to call in external CSS files (i.e. cascading style sheets defining the formatting of a page). However, the link tag has a very important use in making your site accessible for people using screen readers, as these will be displayed (for want of a better word) at the top of the page. Try it! Put in some <link>'s and view the page in Lynx - it behaves similarly to a screen reader. Tip: Include a link tag in the <head> section of the web page: <link rel="Home" title="Home" href=http://www.mySite.com/index.html> 4. Content on topMany will know that using CSS to position your content at the top of the html code has may advantages in search engine optimization (SEO). However, this is also a very important technique in accessibility. This means that people using screen readers do not have to scroll through the entire navigation of the site before getting to the content. This does lead us into the next point. 5. Skip Navigation LinkIf the content on top option is not viable for you, then it is important to use a "Skip Navigation" link. Just add an anchor before your main navigation <a href="#mainContent" title="Skip Navigation">Skip Navigation</a>, and have a named anchor at the start of your content <a name="mainContent"></a>. This allows users to skip the navigation and start chewing through your copy. Obviously you don't want this on your visually rich page, so some simple CSS will sort this out: .skipNav {
display: none;
}
This will hide it from the visual browsers, but it will display perfectly in text and some speech browsers. For more CSS compliant browsers, using an alternative stylesheet for screen readers (media="aural") and setting display: inline;" Tip: Add a skip navigation link that brings the reader straight down to the main content of the page. 6. ColourAs mentioned above, cater for the ~8% of people with colour deficiencies. Flag your links clearly, for example green text and red links will be identical to deuteranopic (red/green colour deficiency) users. I always underline my links, but bolding and a good colour variation will do too! Tip: Use the VisCheck online page checker to see how your page looks to people with colour deficiencies. 7. JavaScript LinksAgain, SEO people will tell you not to do this as spiders can't/won't follow JavaScript links. Similarly, for accessibility reasons. Stats say that 11% of users browse without JavaScript, which includes disabled users whose browsers just don't support it. Tip: Put the link in as normal in the href and run your script onClick, overriding the default action with a return false; <a href="some/link.html" title="Link Title" onClick="runScript(); return false">The Link</a> 8. Link TitlesNeeds no explanation really - does it? Tip: Use the title function in links: <A HREF="seo.html" TITLE="On how to design accessible web pages">Web usability</A> 9. Access keysThese are basically keyboard shortcuts to various pages on your site. Fully supported in screen readers and somewhat supported in visual browsers, by using ALT+ a number, followed by Enter, users can navigate directly to the page. Here is the code: <a href="home.html" title="Home" accesskey="1">Home</a>. You can use it for your skip navigation too! There are some unwritten conventions for access key assignment: 1 is generally for the home page, 2 is generally for the Skip Navigation and 9 is generally for the Contact Page. Tip: Many sites have accessibility statements that outline the access key values and functions, and sometimes also define acronyms and abbreviations. It is important to make sure that your access keys are defined - thus, an Accessibility Statement. 10. Table ElementsUse table headers to specify the legend on data tables: <tr> One of most omitted accessibility element is the summary on tables. This acts as a summary of the contents of a table. This summary is never displayed in visual browsers, but a screen-reader user will get a summary of the table before being read it's contents. Think of it as an ALT tag for tables! Here is the code: <table summary="A summary of the table"> 11. ImagesThe alt attribute goes without saying, but don't forget the longdesc attribute. This is a link to a file (generally text, or text only html) that gives a more comprehensive description of the image that the alt text. So called "spacer" images should use a blank alt tag (alt="") to reduce page clutter to the screen reader. Tip: Image maps should always have an associated longdesc, to explain the contents and areas of the image map. Also, don't forget the title attribute on your <area> calls. 12. FontsHere I will emphatically say: Use Relative Font Units! This is an accessibility issue for users whose eyesight is impaired, but are not totally blind. IE will not increase the size of a fixed font unit (View > Text Size) Tip: I've found that 80% is a good size to use for your body text! A good formula for working our percentage or em values is outlined at Webmaster World. 13. FormsUse labels! This allows visually impaired users to know what each form input element is for! Tip: <label for="workPhone">Work Phone Number (Optional)</label> <input type="text" id="workPhone"> 14. Acronyms and AbbreviationsIf you use acronyms and abbreviations (this is especially true for technical sites), always use the <acronym> and <abbr> tags. This defines the meaning of the acronym/abbreviation and also makes the screen reader pronounce the letters correctly. Tip: <acronym title="Cascading Style Sheets">CSS</acronym> I hope that you have found this informative, and you may even have learned something new! The main point is that with little effort and make it part of your development life cycle, making your site accessible is very straight forward. Useful Links:
Alex Horstmann is a Web Designer with DDSI Ltd, a leading web development company, where his major area of focus is user interface engineering, with a special interest in usability and accessibility.
With clients such as Avon, MasterCard, Figis, and a number of large US insurance administration providers, DDSI Ltd has fast earned a reputation as Ireland's leading web development company. DDSI's rigorous standards compliance and quality development methodologies has led to its reputation for state of the art distributed software and enterprise solutions.
Alex can be contacted at ahorstmann@ddsi.ie Pandian postscript on accessibility and search engine optimizationWhen we read Alex Horstmann's Webmaster World intervention on accessibility, we immediately contacted him and asked him for a new extended version for Pandia. Now, Pandia is a site devoted to searching and search engine optimization, and not to web accessibility and usability. However, it struck us that his tips on accessibility are similar to our own advice on search engine optimization and marketing. Alex has mentioned some of these similarities in his article, and we can mention a few of them here as well:
The reason for this similarity is clear: The search engine robots are blind. They do not see your stylish lay out or your fancy QuickTime files. All they can do is to read the text, from the top to the bottom of the HTML file. This is why following the advice of Alex will not only gain you credibility among people with disabilities, it will also help you in your search engine optimization efforts. (Thanks to the participants in the Webmaster World discussion for valuable input!)
Free search engine newsletters from Pandia
You should also add the bimonthly Pandia Post newsletter to your list. It includes feature articles on search engines, searching and SE marketing. Enter your email address below and click on "Subscribe". For search engine marketers, we also highly recommend the Planet Ocean Search Engine News newsletter. Planet Ocean gives you an insiders view of SE development and search engine promotion techniques (cf. Pandia review).
| ||||
|
Pandia Search Central Search Engine News SE Blogs and Sites Free Newsletters RSS web feed Search tools: Powersearch All-in-One Plus Web Directory Metasearch Newsfinder Shopping Search Radio Search People Search Kids & Teens On Web Searching: Search Tutorial Search Trends On Search Ranking: SE Marketing Tutorial SE Optimization Gateway SE Submission Pay Per Click SE On Pandia: Search this Site Pandia FAQ Store Advertising
We will give you the latest news from the world of Internet exploring, useful tips on how to improve your searching skills or search engine ranking, as well as information on the development of the Pandia Search Central. We will never give your address to any other company or organization. |
| | |
|
All-in-one lists of tools: Search engine optimization | Search engines and tools | People and email addresses | News search Pandia is a registered service mark of P&S Koch, Oslo, Norway. All other company and product names are the trademarks or registered trademarks of their respective holders. © P&S Koch 1998-2008. Comments or questions? Go to our contact page. |
