It's not a Friday, but it is way too hot (about 30C in our office) and I need a break, so here's a blog post.
This time it's about accessibility. I had a think (and discussed with one of our in-house experts) what to do about screenreader accessibility for forums. Turns out nobody really knows.
Here's my best shot at it - this is a screenshot of a ForumNG discussion with 'View / Page Style / No Style' in Firefox, which is a convenient way to approximate what screenreader users 'see'. (Yes, there are extensions etc. that do it more accurately - or you could actually use a screen reader, but last time I installed JAWS it did horrid things to my computer, so not going there again. Anyhow.)
Here are the accessibility points in the above screenshot:
- Each post has a level-2 heading (which is not visible to sighted users). This means that screenreader users can skip through posts by pressing the H key. [If the post has a subject, that'll be a level 3 heading.]
- The level-2 heading gives each post a number (not visible to sighted users). Numbers are in date order of posting.
- The heading tells you which post (by number) the current one is a reply to. (That's also a link, should it be necessary to skip back up to the parent post.) This is important because screenreader users likely don't have access to the visual information that indicates it - indents to indicate which post replies to which.
- Also in the heading is information about the category of the post that is otherwise only available visually - whether it is 'summarised' (showing only the first few words) or not, whether it is 'unread' or not.
- All the links that are copied for each post (Reply, Edit, Expand, etc) contain the post number so that the links are unique. [Having lots of links with identical titles is an accessibility problem.] Again, the post numbers do not display to sighted users, there it just says 'Reply'.
- There is some use of appropriate XHTML: in addition to headings (as mentioned), the per-reply commands have been formatted as an unordered list.
I'm sure we can do better but I think this is a good start and it illustrates a few tricks and issues so I thought it might be useful for other people.
If anyone has easy-to-implement suggestions about improving accessibility further over this layout, please add them here. Difficult-to-implement suggestions will probably be ignored.