Making the Manage Message Settings page a bit more accessible

[sophie]

I was musing on Bug 4425 (Make "click on subscription line to toggle the checkbox state" work in more cases) just now. Basically, the issue here is that when you have a page that allows you to choose tracking notifications pertaining to another account, such as the tracking page for dw_accessibility, some of the text of the notifications, such as "Someone comments in dw_accessibility, on any entry" are only clickable on the part before the user tag, and not after. This is because the <label> tag gets cut off before the user tag so that clicking the link doesn't toggle the checkbox. As another result of this, screen readers are unlikely to read the notification text pertaining to the focused checkbox correctly.

This is obviously a problem, and it needs to be fixed. I want to file it as a separate bug, but before I do, I wanted dw_accessibility's opinion!

There are a couple of solutions I thought of:

1. One solution is to make both parts clickable separately, which would involve assigning two <label> tags instead of just one. While this would fix things for visual users, it wouldn't solve the existing issue that screen readers are unlikely to read the notification correctly when tabbing to the checkbox.


2. Another solution could be to remove the user links entirely, and just have the username as bolded text. This will fix the original problem, and it also has two immediate advantages that I can see: firstly, we would now be able to have just one <label> tag spanning the whole thing (at least in those cases; unfortunately it still wouldn't work for notifications that involve dropdowns), allowing screen readers to read it properly. Secondly, It gets us one step closer to having a consistent number of tabs between each listed notification, which makes it a bit more efficient.

I prefer the second solution, as this would seem to be more accessible, but I wanted to find out if this is even a problem for anybody first. I suspect it is, but not being a screen reader user, I don't know.

If you have any better ideas, please let me know! I'd also be interested to know what you think of the situation where dropdowns are involved; the same problem applies to them (the <label> tag is cut off), except we obviously can't reduce them to pure text in this case. What do you think?