Navigational header links

Aug 28, 2007

The last couple of months I’ve been pretty focused on accessibility and have found that links in the header can help. You know the link tag in the header from the way you embed stylesheets and RSS auto-discovery links. They can do a lot more than that.

The links can tell about the relations that exist between the current page and the rest of the website. Different browsers such as Mozilla and Opera can then display the links as part of the website’s navigation in a common way. Also screen readers can use this approach to ease the navigation and there are plug-ins for both Firefox and IE.

In the image you can see that this site supports Home, Content, Search, Previous, Next and Author as a navigational aid and that there are even more link types it doesn’t support. To support the Home link type, just write this in the <head> element of your web page:

The Contents type looks like this:

For more information about the various link types for the <head> element, then see here and here. You can also see a list of browsers that supports header links. This is also a feature in the upcoming version of BlogEngine.NET due in a few weeks.

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

Remove the X-AspNet-Version headerShows how to remove the X-AspNet-Version HTTP header by changing only the web.configFind semantic links in a web pageHow to parse an HTML page to retrieve FOAF, APML or SIOC document links.Use If-Modified-Since header in ASP.NETIf you are building a high traffic website, you are probably concerned about bandwidth. Many ...

Comments (8) -

Morten

8/29/2007 6:00:02 AM #

Hvis det ikke er en feature der findes native i IE, så er den rimelig værdiløs

Mads Kristensen

8/29/2007 2:05:48 PM #

Morten, accessibility is not about IE. Disabled people use screen readers and other applications to surf the web.

Dan Atkinson

8/29/2007 6:47:21 PM #

FYI: There is a Firefox accessibility extension available from addons.mozilla.org (addons.mozilla.org/en-US/firefox/addon/1891).

I use it from time to time, and it's got more or less the same sort of functionality as the oft-used Web Developer Toolbar.

Henrik Stenbæk

8/30/2007 10:38:23 PM #

Hi Mads

Just one little accessibility hint: never make a link (a href) with the text: “here”. People that use screen readers will have the reader to read all the links on the page and all they hear is “here” “here” “here”. The screen readers will not necessary read all the leading text. Your link “browsers that supports header links” is much more correct from an accessibility point of view

And by the way: thanks for the great blog software! Keep up the good work and congratulations with the new job.

Regards,
Henrik Stenbæk

Blogs For Money

9/1/2007 2:34:59 PM #

Great idea - I just went to put this stuff into my install of BlogEngine.net (http://blogsformoney.com/) and found you'd already done it. Good work!

Mads Kristensen

9/2/2007 8:44:01 PM #

Henrik, I know that it's bad to write 'here' in the link text. It just comes so naturally to me. I'll have to be more aware of it in the future. Thanks for the tip

Andrew Rimmer

11/26/2007 8:49:16 AM #

What status does Web Accessibility have on the BlogEngine.net roadmap? I have noticed that the search does not work without JavaScript, which means any blogengine driven blog is already severely limited in Accessibility terms.

Mads Kristensen

11/26/2007 3:29:53 PM #

@Andrew
Web accessibility is a high priority. If you do a Bobby validation test on this blog's accessibility, you'll find it to be very high. Only a few issues that cannot be resolved. Regarding the search box, then I'll try to get it working in non-javascript browsers for the next release. Thanks for pointing it out.

Comments are closed

Navigational header links

Related posts

Comments (8) -

About the author

Twitter

Month List

Disclaimer