How to build good accessible websites

"Accessibility" doesn't just refer to people with disabilities. Highly accessible web sites are highly visible web sites: People find them useful and readable (and so they use them and link to them), Search engine robots discover them easily and rank them highly in search results.

Think of this: The person using your website is already annoyed and uncomfortable, as soon as they come to your site!

• First, just by looking at the monitor: It is physically hard on the eyes.
• Reading on screen is much harder than reading on paper.
• Usually we are sitting in a chair at a desk, not a relaxing place to be. Often at work, also maybe not so relaxing!
• Many of us are not comfortable with computers, or are even afraid of them.
• Every website is arranged differently, so each new website means something new to learn. Most of us don't like to have to learn new things all the time!

So it is up to us, the website designers, to make our website as relaxing and easy to use as possible.

The code

• Use good clean HTML and CSS
  • Use HTML for the structure of your page, and CSS for all formatting.
  • This is called "semantic HTML/XHTML". This means you use HTML tags for the structure of your web page: <h2> means "This is a level-2 header", not "This is some large bold words".
  • "Semantic HTML/XHTML" is more accessible to search engine robots, so your site is more visible.
  • "Semantic HTML/XHTML" will still work where CSS doesn't, such as on PDAs and cell phones.
• Make sure that the HTML and CSS of every page validates.
  There are excellent, free validators, which will catch small errors that may make the page unreadable in some web browsers.
  • Check your web page HTML code at http://validator.w3.org/
  • Check your web page CSS code at http://jigsaw.w3.org/css-validator/
  • See how your website looks in other web browsers at http://browsershots.org/

Site structure

• Provide useful navigation
  • All your pages should have a menu of links to the main sections of your eebsite.
  • It can also be useful to have links to the different subsections within a section of the site, especially when the person is within that section.
  • Also useful are links to previous/next photo, bread crumbs to lead the person back up the "folder tree", etc.
• Use "hackable URLs"
  A reader may delete trailing terms from any URL — that is, they may delete the stuff to the right of each slash — and the result should always be a meaningful URL.
• Use all lowercase in folder and file names that is, don't use UPPER_CASE or Mixed_Case
  • For you: When you make a link or an image in your web page, you don't have to remember which letters might be uppercase.
  • For your website user: Sometimes they may type in the URL by hand — much easier if all lowercase.
• Don't open new browser windows
  It's never actually necessary, and it confuses the user. People are used to the Back button. They know they can click it to get back to your site.
  • Users often have their web browser display full-screen. The new window opens in front of your site window and hides it. Users may not realise this, and so instead of helping to keep the user on your website, it takes them away from it!
  • Many users set their browsers to "open a new window as a new tab", in the background. So the person may not even see the new window!

Page design

• Use high contrast for body text
  High contrast improves readability, especially on the high resolution monitors many have these days. If you just can't stand to set the main text in black on white, use the highest contrast you can stand. And, of course, accommodate color-blind users.
• Leave the default font and size for text you intend the user to read
  • Let the user control the size of body text.
    Don't make the page text so small that only 20-year-old web designers sucking Jolt Cola can read it.
  • If people can't read your site easily, they will leave.
  • It's fine to use fixed sizes in CSS for navigation and decorative elements, but not for content that you want people to read.
• Use JavaScript with thought
  We can do some fun things with javascript. But:
  • Search engines can't follow javascript. So if your site navigation menus use javascript, you are hiding your site's pages from the world.
  • Screen readers for the blind, mobile phone browsers, and more, all do not use javascript. If your site has something that only will show with javascript, you are blocking out those users.
  So use javascript for fun, for "extras", but not for important content on your site.

Further ideas

• Don't expose the implementation.
  That means, don't create pages with URLs that end in .html or .php or whatever. That just creates a maintenance headache when you want to change platforms later.
  Image URLs that end in .jpg or .png are okay, because these aren't pages, and the "implementation" is inherent to the object — JPEGs need to say "I am a JPEG."
• Don't break the Back button.
  (This is done sometimes with JavaSCript.) Users expect it to work. When things don't work the way we expect, we feel uncomfortable. You don't want people to feel uncomfortable on your website!
• URLs are forever.
  If URLs must change, provide specific, meaningful redirects. Don't just redirect people to the home page: Send them to exactly the same information at its new URL. Apache does a great job of helping you to do this.

Know more

General info:

www.tibetangeeks.com

Tech info for Tibetans

how_to_build_good_accessible_websites.html
Written 30 March 2009
Revised 30 March 2009

All content not copyright by anyone else is copyright © 2003–2009 James Walker.
License for use is the GNU Free Documentation License. Find it:
here in the License directory
or at the Free Software Foundation, www.fsf.org