Navigation lists and accessibility issues

[Dylan Parry]

I've been wondering lately about navigation and accessibility. There are
two places that the navigation can "live":

1) Before the content;
2) After the content

But which is best from an accessibility point of view? I used to think
that it was best to put the content first and the navigation following
it, but started to think about it - what's more annoying: having to
select a "skip navigation" link/listening to the same navigation on
every page; or realising you're on the wrong page but having to listen
to 20 paragraphs of content before getting to the navigation?

For that reason, I'm inclined to think that perhaps the best place for
the navigation is indeed before the content with a link to skip it. I
know I'd rather select that link on each page that wade through the
content just to get to the next page!

What are your thoughts on this issue?

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

 

[Chaddy2222]

I've been wondering lately about navigation and accessibility. There are
two places that the navigation can "live":

1) Before the content;
2) After the content

But which is best from an accessibility point of view? I used to think
that it was best to put the content first and the navigation following
it, but started to think about it - what's more annoying: having to
select a "skip navigation" link/listening to the same navigation on
every page; or realising you're on the wrong page but having to listen
to 20 paragraphs of content before getting to the navigation?

For that reason, I'm inclined to think that perhaps the best place for
the navigation is indeed before the content with a link to skip it. I
know I'd rather select that link on each page that wade through the
content just to get to the next page!

What are your thoughts on this issue?

Ummm, neather?. I can use the control key to stop the speach from
reading stuff that I don't really want and to get to the main content
I can just use the nubers 1 through 6 to find section headings. In a
decent screanreader anyway. Which I think is all of them.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed Dylan Parry

I've been wondering lately about navigation and accessibility. There are
two places that the navigation can "live":

1) Before the content;
2) After the content

But which is best from an accessibility point of view? I used to think
that it was best to put the content first and the navigation following
it, but started to think about it - what's more annoying: having to
select a "skip navigation" link/listening to the same navigation on
every page; or realising you're on the wrong page but having to listen
to 20 paragraphs of content before getting to the navigation?

For that reason, I'm inclined to think that perhaps the best place for
the navigation is indeed before the content with a link to skip it. I
know I'd rather select that link on each page that wade through the
content just to get to the next page!

What are your thoughts on this issue?

I agree with you. If you look at a page using Opera in small screen
mode, or maybe on a phone or something, it's immediately clear that the
skip link and navigation is right at the top. Imagine this -- the
Internet, 2007 - you are on a small device and you've Googled for
something and find the index page, but really need a subpage. You get to
the page, and have to wade through all that content, just to get to the
navigation where the subpage is you want -- and you're doing this on your
phone where you get charged oodles per minute.

 

[David Mark]

I've been wondering lately about navigation and accessibility. There are
two places that the navigation can "live":

1) Before the content;
2) After the content

But which is best from an accessibility point of view? I used to think

After the content.

that it was best to put the content first and the navigation following
it, but started to think about it - what's more annoying: having to
select a "skip navigation" link/listening to the same navigation on
every page; or realising you're on the wrong page but having to listen
to 20 paragraphs of content before getting to the navigation?

Change your thinking. Put a "Skip to Navigation" link before the
content. You can optionally hide it for screen media and show it for
handheld. But realize that if you hide it, most screen readers will
not "see" it either as they just read what is on the screen (this is
why some authors position the link off the screen, instead of hiding
it.) Aural browsers will see it either way.

Also, links that reference the next, previous, parent and home pages
should have access keys, as well as link elements in the header. A
bookmark link that references the navigation anchor is a good idea as
well. Lynx (for example) displays these types of links in a row
across the top of the page.

View pages in Lynx, a mobile device or listen to them through a screen
reader (or aural browser) and it becomes apparent that navigation
first is backwards and often redundant.

Furthermore, look at search engine result snippets for upside-down
sites and you see the same "Back to Home", "Contact Us", "Feedback",
etc. text over and over. I have also heard that spiders prefer to see
top-level headings and relevant content at or near the top (the higher
the better.)

 

[Bergamot]

Change your thinking. Put a "Skip to Navigation" link before the
content.

Is that content really the first thing on the page, or is it after the
masthead? If there is a page header preceding the content, you've just
stuck the skip link in between them, and not necessarily so easy to find.

Maybe a better idea is to have 2 links at the very top of the page,
before *anything* else:
- go to the content
- go to the navigation

The worst anyone will have to do is scroll back to the top of the page,
but that may be easier than hunting down a link stuck between 2 sections
within the page. IMO

 

[David Mark]

Is that content really the first thing on the page, or is it after the
masthead? If there is a page header preceding the content, you've just
stuck the skip link in between them, and not necessarily so easy to find.

Right at the top. Then comes the H1. Logos and the like that often
appear at the very top are below the content in my scheme as well.
They are hidden from handheld devices and printers and positioned in
the top margin on monitors.

 

[Dylan Parry]

Right at the top. Then comes the H1. Logos and the like that often
appear at the very top are below the content in my scheme as well.

Do you have an example of a site you've built in this way? I'm
interested to see how you've laid out both the visual appearance of such
a site as well as the code behind the page.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

 

[David Mark]

Do you have an example of a site you've built in this way? I'm

Yes, but it isn't public yet.

interested to see how you've laid out both the visual appearance of such

The particular site I am testing now looks much like any other site in
a PC browser with CSS enabled. It has an elastic two column
(navigation and content) layout, a logo and login link at the top,
legalities at the bottom. On (most) handhelds it looks radically
different. There is only one column, the navigation is below the
content, the "Skip navigation" link appears at the top, the login link
is at the bottom, etc. The handheld rules simply override positioning
and display for certain elements, which covers devices that don't
respect the mutual exclusivity of media-specific style sheets (eg
interpret both screen and handheld types.)

As for sound, I did recently add an aural style sheet, but have found
that most screen readers pay little attention to it. Opera's voice
feature respected some of the simpler rules.

a site as well as the code behind the page.

Underneath the stylings are simple semantic documents, which are
friendly to text-only browsers, screen readers, search engines, etc.
The markup is very simple when compared to the average fixed-width,
tables-in-tables-with-spacers site. It's lighter too, which helps out
with handheld support as some services reject any page over 10K.

None of these techniques are new or particularly complex, but I too
had a hard time finding sites that used them. As I recall, Opera had
some good demonstrations on their site.

 

[Bernhard Sturm]

After the content.

interesting thinking, but what happens when you follow a search engine
result list and end up on a subpage? You would first see or hear only
the content without knowing if the site has actually the content you
were looking for. I tend to have favor a more structured approach: show
me the structure (hence navigation) of a site, and then what I will get
content wise. I always put an (invisible) metanavigation to the content
and menus on each page:

* skip to content
* skip to navigation

- About us
- Our Products
- Where to find us

Here is our content

This seems to me the most logical way as it follows a well known
structured approach (first thing in a book is the table of contents,
first thing on each elevator exit in a building are signs what can be
found on each level).
If you put it the other way round, you will force people to search
actively for the navigation, which seems to me a wrong approach.
(Although Nielsen would have another opinion on this, but he assumes
that users are first looking at the content and _then_ at the
navigation, so it all bases on this assumption

cheers
bernhard

 

[Karl Groves]

I've been wondering lately about navigation and accessibility. There
are two places that the navigation can "live":

1) Before the content;
2) After the content

But which is best from an accessibility point of view? I used to think
that it was best to put the content first and the navigation following
it, but started to think about it - what's more annoying: having to
select a "skip navigation" link/listening to the same navigation on
every page; or realising you're on the wrong page but having to listen
to 20 paragraphs of content before getting to the navigation?

For that reason, I'm inclined to think that perhaps the best place for
the navigation is indeed before the content with a link to skip it. I
know I'd rather select that link on each page that wade through the
content just to get to the next page!

What are your thoughts on this issue?

Having observed disabled people actually using sites, I can say that my
personal opinion is that it doesn't really matter (for blind users) so
long as: a) they can access content easily without being burdened with
repetitious tabbing past lists of links and, b) they can effectively
navigate when they need to. c) they know how to do "a" and "b"

So, if your nav is *before* the content, immediately give them a way to
skip it at the very top before any content is written out (IOW, right
aftter <body>)

If your nav is *after* the content, immediately give them a way to get
to the navigation, again right after <body>


Most people unfortunately believe that this feature only benefits blind
users, and fail to understand that people with motor control problems
have to tab to navigate. Where you place navigation (before or after
content) is of no consequence to blind people as long as they can use it
without it being a huge pain in the ass. But people with motor control
disorders will *see* the navigation there at the top (or left) and begin
tabbing, expecting focus to switch to the navigation options early in
their tabbing. If the navigation is placed after content, this also
means they won't get focus on any of the navigation links after they've
already tabbed through everything else. In other words, you've just
removed frustration from one population and transferred it to another.

I say put the navigation before content and allow them to skip to
content rather than skip to navigation.

 

[Bergamot]

Right at the top. Then comes the H1. Logos and the like that often
appear at the very top are below the content in my scheme as well.

I have to wonder how fairs when CSS isn't applied. Is it still
structurally logical? I'd like to see a sample.

 

[dorayme]

Having observed disabled people actually using sites, I can say that my
personal opinion is that it doesn't really matter (for blind users) so
long as: a) they can access content easily without being burdened with
repetitious tabbing past lists of links and, b) they can effectively
navigate when they need to. c) they know how to do "a" and "b"

Well said and there were more useful remarks too by you...

I would like to see some examples of your advice being
implemented, have you any urls at hand that are in your opinion
fine enough examples please?

 

[David Mark]

I have to wonder how fairs when CSS isn't applied. Is it still
structurally logical? I'd like to see a sample.

It looks fine. I tested in Firefox with "no style" applied and in
Lynx. Other than the "to navigation" link, the main header is the
first thing you see. The logo is at the very bottom instead of the
very top and the login/sign up links appear in the footer above the
legalities. I am not in a position to post a public sample at the
moment. When the site I am working on is made public, I will try to
remember to post a follow-up here.

 

[David Mark]

Having observed disabled people actually using sites, I can say that my
personal opinion is that it doesn't really matter (for blind users) so
long as: a) they can access content easily without being burdened with
repetitious tabbing past lists of links and, b) they can effectively
navigate when they need to. c) they know how to do "a" and "b"

So, if your nav is *before* the content, immediately give them a way to
skip it at the very top before any content is written out (IOW, right
aftter <body>)

If your nav is *after* the content, immediately give them a way to get
to the navigation, again right after <body>

Most people unfortunately believe that this feature only benefits blind
users, and fail to understand that people with motor control problems
have to tab to navigate. Where you place navigation (before or after

It is also useful for users of text-only browsers and handhelds.

content) is of no consequence to blind people as long as they can use it
without it being a huge pain in the ass. But people with motor control
disorders will *see* the navigation there at the top (or left) and begin
tabbing, expecting focus to switch to the navigation options early in
their tabbing. If the navigation is placed after content, this also
means they won't get focus on any of the navigation links after they've
already tabbed through everything else. In other words, you've just
removed frustration from one population and transferred it to another.

You can create a logical tab order to make the navigation focus first,
or better still, use access keys for frequently used navigation
elements (eg home, up, next, etc.)

 

[David Mark]

interesting thinking, but what happens when you follow a search engine
result list and end up on a subpage? You would first

If you put content first then the search engine snippets are more
likely to lead users to the page with the content they are after.

see or hear only

the content without knowing if the site has actually the content you
were looking for. I tend to have favor a more structured

This will most often happen when navigation is at the top as every
search result says the same thing (eg Home, Site Map, etc.)

approach: show

me the structure (hence navigation) of a site, and then what I will get

I can't see how the navigation would logically precede the content on
a page.

content wise. I always put an (invisible) metanavigation to the content
and menus on each page:

* skip to content
* skip to navigation

- About us
- Our Products
- Where to find us

Here is our content

This seems to me the most logical way as it follows a well known
structured approach (first thing in a book is the table of contents,

But the table of contents does not appear at the top of every page.

first thing on each elevator exit in a building are signs what can be
found on each level).

I think Web sites are more like books than buildings and the maps off
the elevator don't get in the way of the "content" of the floor.

If you put it the other way round, you will force people to search
actively for the navigation, which seems to me a wrong approach.

Why would they have to search for it? If it doesn't appear in a
sidebar (eg on a handheld), you display a link at the top that jumps
right to it.

 

[Karl Groves]

Well said and there were more useful remarks too by you...

I would like to see some examples of your advice being
implemented, have you any urls at hand that are in your opinion
fine enough examples please?

I believe that the WebAIM site does a good job of leading by example:
http://webaim.org/

One thing that concerns me is "discoverability" of the skip link where it
is. The sad truth is that skip links are used so infrequently that only
technically proficient users are likely to use it. In disabled populations,
technical proficiency is far lower than in non-disabled ones. What may
happen is that the disabled users may not look for (and therefore may not
notice) the skip link or know what they should do with it. Once they do
discover & use it, however, they're likely to appreciate it very much.

 

[John Hosking]

I believe that the WebAIM site does a good job of leading by example:
http://webaim.org/

Maybe except for
body { font-size: 0.825em; }

;-)

 

[dorayme]

I believe that the WebAIM site does a good job of leading by example:
http://webaim.org/

Thanks for this.

As JH says, body {font-size: .85em} is not the best, but in this
case, from a quick look, it actually looks fine with body
{font-size: 100% so there is no particular reason for the
smaller.

One thing that concerns me is "discoverability" of the skip link where it
is. The sad truth is that skip links are used so infrequently that only
technically proficient users are likely to use it. In disabled populations,
technical proficiency is far lower than in non-disabled ones. What may
happen is that the disabled users may not look for (and therefore may not
notice) the skip link or know what they should do with it. Once they do
discover & use it, however, they're likely to appreciate it very much.

I expect authors would be reluctant to make it more prominent for
aesthetic reasons, they see it from the start as something
marginal, they would like to sort of hide it for the majority but
want also to include it for the minority.

There are at least two ways to go on this. Bite the bullet and
make it prominent and build it in to the design 'at the top' or
for first announcement. Unlike the url above where it simply
looks like a blemish, an afterthought.

The other way to go is this, make the skip to content the very
first item of a prominent 'navigation first' strategy.

In a way, I think there is not one good general answer to the OPs
question because so much depends on particular considerations.

 

[Dylan Parry]

Having observed disabled people actually using sites

[...]

That statement makes it all the more valid. IMHO, the only way you can
say for sure which is best is by observing /real-life/ users and how
they cope (or not) with each technique. Obviously, in your case you have
done! No amount of theorising can ever make up for proper observation in
something as practical as accessibility.

Cheers, Karl - you've been v. helpful in clearing my thoughts

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

 

[Karl Groves]

Having observed disabled people actually using sites

[...]

That statement makes it all the more valid. IMHO, the only way you can
say for sure which is best is by observing /real-life/ users and how
they cope (or not) with each technique. Obviously, in your case you
have done! No amount of theorising can ever make up for proper
observation in something as practical as accessibility.

Cheers, Karl - you've been v. helpful in clearing my thoughts

Thanks for the kind words.

Watching people interact with sites is a major eye opener for me. I
enjoy every opportunity to go into the lab and act as an observer during
usability studies.

Earlier this year, I had the opportunity to go into the Technology
Center at the NFB headquarters in Baltimore MD and watched blind users
interact with web sites. They have this incredible room, probably 25
feet wide and 100 feet long filled with an amazing array of different
assistive devices.

One of the things you hear a lot in discussions of usability is how
people will "scan" a page looking for important phrases and keywords
rather than reading it word for word. Amazingly, I noticed this
happening with blind users as well. They would land on a page and
immediately begin tabbing, listening for link text to take them where
they wanted to go. Trouble was, as the screenreader was in the middle
of reading one link, they'd be tabbing to another. It was not unlike
someone holding the remote control's "channel-up" button down and was
kind of unsettling (because I could see them repeatedly skipping past
the link they were seeking).

Most users of screen readers will be able to go into summary mode and
also be able to generate a list of links. It is vitally important (even
more than a skip link, IMO) to create pages with an effective use of
headings and also with intelligently labelled links. No two links
should be labelled the same unless they go to the same destination and
for &diety; sake don't use "click here" or "more" or things like that.