Reading & Viewing Order
Hi all,
We are a design company based in Nottingham, UK.
We are looking into making every site we do accessible.
I found one guide that said that, and I quote:
"The reading order should be the same as the visual order".
To me, this means that, when coded, the first thing should be the header/logo etc, navigation all the way to the content.
We currently code sites with the H1 first, so if you were to disable stylesheets it would read kind of like a book (H1, p, H2, p etc etc).
My question is (and I apologise if this has been covered already - really couldn't find it!); which is better? Should we code as we are and allow content to appear first on a page, or should we code the same as the visual order?
I hope this makes sense.
An example (our website) is here: http://www.adtrak.co.uk
As you can see, if you disable stylesheets, the H1 is first (please bear in mind this was created before we looked into the accessible side of websites).
Any feedback would be great!
Thanks.
Dan, Adtrak
Share: 
Dan, when I try to access your site, my filter blocks it as "suspcious". Any ideas why?James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share:
First thing I notice is the website doesn't fit in a screen that is 1024 pixels wide.
That's still the 'lowest common denominator' and is a very common size which has become quite embedded on the Web. Even on large screens, users tend to make their browser about that width because so many sites are optimised for screens that size.
iPad and iPad 2 are 1024x768, incidentally. iPhone Retina display is 960 across, which just about fits the very neat 960 Grid System.
Other smartphones are often ~800 pixels across. Many more pixels on a sub-4-inch screen makes detail hard to see, unless everything is scaled. (iPhone Retina displays tend to scale text or everything to larger than normal web sizes.)
Share:
| Ben Millard wrote: |
| First thing I notice is the website doesn't fit in a screen that is 1024 pixels wide. |
Share:
Hi all,
Thanks for the replies.
All our actual sites that we produce for our clients are a maximum of 960px width to fit in said resolution. We wanted to go wider with ours as a design company; our Graphic Designer insisted
Not sure about the "suspicious" thing, James; something I will need to look into! I can assure you it's not.
Any other comments on my original question or reading order & viewing order?
I would have replied sooner but didn't get an email about it (which I thought I'd turned on). Whoops!
Share:
Just a few comments.
1. If you're tabbing around a screen, it's going to follow the markup order, so it might jump around unexpectedly (end of content, jump to top of page to header, and then down to the footer) for someone who can see the screen, but doiesn't use a mouse. To get directly to the header/nav, you'd also have to tab thru all the content, unless you added a skip to header/nav link at the top of the page, which might look a bit odd being right above the header.
So it might be cool for a screen reader user, but for someone tabbing, it might be awkward to use.
2. My screen reader user friend says she assumes the h1 is at the beginning of the content, and just jumps straight to it over everything else if thats where she wants to go. So I doubt having h1 first in markup would materially alter her experience, at least. Also, you could add a skip to content link at the top of the page.
Share:
Thanks for that, Rachael.
Nice food for thought.
Anyone else got any input?
Thanks.
Share:
| Adtrak wrote: |
|
All our actual sites that we produce for our clients are a maximum of 960px width to fit in said resolution. We wanted to go wider with ours as a design company; our Graphic Designer insisted
|
Take it - s/he doesn't have an ipad then
As regards order, I think you should follow what most other sites do, which is follow visual order. The only reason I suggest this is because, users then get what they are used to. However I would add in a means of skipping to content very early on in the code. Make sure it's accessible to keyboard users too. Also, currently I can't see any indication of link focus as I tab through.
Heading structure seems fine.
Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool
Share: