When I’m talking about web site accessibility, I often find myself qualifying at times, “accessibility, especially for those with disabilities.” At first, I’d catch it and ponder if that was a redundant statement.

It isn’t at all redundant. Making a web site “accessible” doesn’t strictly mean making it easier to navigate for those with disabilities. By structuring a website with clean, correct and orderly code, images and text with sufficient color contrast, supplying meaningful alt tags, logical tabbing order, etcetera, you’re creating an experience that’s all around better for all visitors.

Clean, concise site navigation benefits everybody. Descriptive links that actually identify where they are taking you benefits everybody. Forms that are properly labeled and orderly benefit everybody.

There are also people visiting your site with slower Internet connections. There are those who prefer browsers other than just Internet Explorer or Firefox.

There are also visitors to your sites who particularly prefer semantic, clean code. They’re called search engines. Poor or nonexistent titles and header tags hurt search relevant, in addition to giving screen readers a hard time identifying pages and elements.

Accessibility covers a whole lot of ground beyond just disabilities.

Tags: accessibility, header tags, search engine optimization, seo

This week, thanks to a friend and colleague at Hello Goat Designs, I had the opportunity to do some accessibility testing on a web site he is building. I’ll share more about my findings and the final result when the site launches.

There were a few basic accessibility tweaks that I suggested, one of them relating to header tags. That gave me the inspiration for another post in my Web Accessibility 101 series.

There are a few things worth noting about properly and effectively using H1, H2, etc. These basics not only help provide an easier navigating experience for the disabled, but also get wins in search engine optimization.

Screen readers like JAWS have key commands to read off header elements, in order. For example, JAWS has a command INSERT + F6 that reads the entire list of headers, and H cycles the user through each header. The browser Opera allows you to highlight across header elements via its single-key shortcuts.

H1 should be the top level heading of a document. Often times this would be the page title. It gets huge consideration from search engines. There should only be one H1 per page.

You can use any number of H2 tags, H3 tags, and so on. And while there are six header tags, you don’t need to use all of them. There may be cases that only H1 and H2 are needed, for example. If H1 is your page title, H2′s are major headings, followed by H3 sub-headings, and so on.

Avoid skipping header tags. If there are H3′s on your page, there better be H2′s and an H1 as well. Skipping causes confusion for screen readers.

Header tags should be wrapped around actual headers or titles, not blocks of code or content. This came to mind because I recently saw a site (that was built using SharePoint Designer), that had actual tables within a header tag. That’s all kinds of wrong.

Header tags, in short, are more than just stylistic additions. For screen reader users, they are vital in giving a sense of the main topics of the page, and enabling easier navigation through your content. Additionally, effective header tag usage will get you superior search engine treatment — making your site more accessible to everybody, not just the disabled.

Tags: h1, h2, h3, header tags, jaws, opera, screen readers, search engine optimization