All Things Web

A well structured web site will offer access to all visitors, including the ability to easily access information throughout each page.  By offering quicklinks to sections of the page, visitors using alternative browsers such as a Screen Reader or a text based browser can easily get to the meat of your page.

We recommend a minimum of three key sections on each web page. They include:

• your main navigation
• your main content
• your secondary navigation

This navigation can be most easily achieved through the use of an unordered list and CSS.  Here is an excellent article on skip navigation by renowned accessibility expert Jim Thatcher.

Once you have the list in place at the top of the page, you’ll need to place anchors through the page and the final step is to choose how to style these links and then you’re done.  Make sure to read our Web Site Basics article with 25 items that create a solid foundation to your web site.

This is a fantastic video posted on Yahoo. It is an Introduction to Screen Readers by Victor Tsaran. If you are interested in learning the basics of web accessibility, this is a great resource to get a true understanding of the need for greater accessibility for all web sites and applications.

Introduction To Accessibility Screen Readers

While randomly browsing the web, I came across a great article from two years back discussing why it’s so tough to sell accessibility and why people just aren’t that interested. This is a great read for those learning about accessibility, or those promoting these services to a client base.

Here are Ten Reasons Clients Do Not Care About Accessibility

In our final lesson on web accessibility basics, we’ll discuss how to test your site, and what to do to ensure you continue on a path of accessibility as your web site grows and develops. This article will be a little shorter than the others as we’ll direct you towards resources you can use to ensure your compliance to the WCAG.

Once you’ve completed the design of your new site, or updated your current site, then it is time to test your site against the standards. By far, the most widely used solution is the WebXact solution by Watchfire. This is a free tool that allows you to check a single page, and I use this frequently to test a page as a design moves forward. For long term projects, utilizing the commercial version called Bobby is your best bet.

You should also test your page by going through some specific browser based tests as described through a preliminary accessibility review of your web site.

As you move forward, the key is to continue using these preliminary and software based tools for each and every new page created. As you get more experienced with accessibility, then you’ll find that a common workflow will take place and accessibility will become second nature to you and your team.

Making your web site an accessible one is really an easy thing to do with proper planning and effort. There are a few areas to focus on when drawing up a plan to convert your web site to a fully accessible web site.

Initially, you need to make sure that you have a plan for content, and the organization of that content in a clear and understandable way. The key to a successful and accessible web site is simple, easy to follow navigation and organization of your information.

Your site should be broken into perhaps a few main category areas with the rest of the information and content organized neatly within those. Always attempt to keep navigation simple by reducing the number of levels that contain information. Only use deepening levels of content where necessary. By simplifying your content levels you can simplify navigation and in turn increase the accessibility of your web site.

Once you’ve decided on your content categories, you should begin to think about page layout. We recommend following a simple layout structure that is “prettied up” by CSS. At the top of your page should be a “header” section that will include your logo and H1 tag. Next should be a “main navigation” area that will provide text based links to the main categories you defined earlier and your about and contact pages. Following your navigation area should be your section containing your “main content”. This is where the bulk of your information should be found.

Rounding out your page layout should be a “sub navigation” area that will contain text links to the information in your subcategories. This will obviously change based on the page that a visitor is on and the category they are in. Finally, your page should contain a footer that closes the page and offers text link access to some key points of information including Copyright, Sitemap, and Contact Links at a minimum, and more information can be placed here as needed.

These areas round out the on page layout and by using this structure you can ensure a well layed out page providing your visitors solid access to the information on your web site.

Now that we have decided on your content layout and structure it is time to begin thinking about producing the actual pages of your web site. Each page should have these items on them and each should be unique for each and every page.

1. Title Tag
2. Meta Description Tag
3. Meta Keywords Tag
4. Header Section with H1 Tag and Logo
5. Main Navigation Section with Text Links
6. Main Content Area with Additional H Tags as necessary to break up content.
7. Sub Navigation Section for Category Navigation
8. Footer Section with links to Copyright Information, Contact Information and Sitemap

While these are just the basics and there are more items needed to optimize accessibility of your page, by following this structure your web site will be well on the path to conforming to the WAI. You can test the accessibility of your web site here.  In our next article we’ll show you how to keep your web site accessible.