kaigou: this is what I do, darling (writing with snoopy)
锴 angry fishtrap 狗 ([personal profile] kaigou) wrote in [site community profile] dw_accessibility2009-11-15 11:12 am

screen-reader layout question

I've been working on a layout (you can see it on my journal, currently). The design's purpose is to separate out the meta of a post and set it to the side, for quicker scrolling/viewing. The working version has this meta-column on the left, with the post's body on the right.

After arguing with various browsers about how to get this to display consistently cross-browser, I ended up going into the base layout and rearranging so the meta comes first in the HTML. That gets me around the issue of floats and so on, but it means now if you're on a screen-reader (from my understanding of how they work, at least) that the reader will give you title, date, and then all the meta and *then* give you the post's body -- after which the reader won't jump back to the top to give you the options again. That second part is easier to address (but not in place yet), by duplicating the post's basic options (comment, edit, tag, etc) as the post's footer. The first part could be resolved by a hidden in-page link, and here's where I'm seeking suggestions (and also information for setting up guidelines for any similar styles down the road).

Here's what seems like the options, to me, but feel free to suggest others if you can see a better path. (I'm working under the impression none of these exist in a current style, since I can't see any sign of them in the code.)

1. Insert the hidden link at the immediate end of the title-text.
2. Insert the hidden link at the end of the title-section, that is, include the date/time line prior to the link.
3. Put the anchor at the start of the entry's body -- that is, include user-name, icon-text, and then read the post.
4. Put the anchor at the start of the actual entry-content.
5. Do both.

Doing the link(s) and anchor(s) are straightforward. It's just a matter of where to put them to make it easier for screen-readers to logically jump from one point to the next, and whether there's likely to be enough variation in what users want to justify hiding multiple links in there.

Additionally, it seems like there's two different types of links in here, one that skips-to-content (#4, anchor at the start of the actual entry-content) and one that simply skips the meta/menu (#3, anchor at user-name). I can see instances where a user might want the first (such as the user's own journal) versus the other (the user's reading page), but I can also see instances where someone who wants to move quickly from post to post would want to use the first (title to content) even on a reading page. In that latter case, as long as I'm linking all over the place, would it also be helpful to have a hidden link at the end of the title that says "skip this post & move to next"?

Thanks in advance for help & input!
branchandroot: oak against sky (Default)

[personal profile] branchandroot 2009-11-15 06:10 pm (UTC)(link)
*considers* Actually, could this be solved with absolute positioning? I'm thinking that if you stuff all the meta in a new div, at the foot (just not in the footer...) and absolutely position it to top left of #contents (or possibly a new div for this purpose if #contents is taken up with border or background coloring) that would let you keep the meta at the bottom, codewise.
branchandroot: oak against sky (Default)

[personal profile] branchandroot 2009-11-15 11:01 pm (UTC)(link)
I thought it was preferred that the metainfo (tags, links, etc.) come last, after the content? I was thinking that, if they only appear once, last, and were absolutely positioned to the side, that would save having to do them twice.
not_a_sniglet: A fox and a deer touching noses. (Default)

[personal profile] not_a_sniglet 2009-11-15 10:44 pm (UTC)(link)
I'd stick it at the end of the title text, IE include date, time and icon text
not_a_sniglet: A fox and a deer touching noses. (Default)

[personal profile] not_a_sniglet 2009-11-15 10:56 pm (UTC)(link)
Oh you're welcome!

Also, that's a great idea for a layout!