Manage circle overhaul, take 2

[ysobel]

(see take 1 for more info)

Thanks for all the feedback (and squee ♥) on the first attempt at this. I haven't replied to comments (yet), but I did read them all. I've made some more changes, and would appreciate feedback.

Again, I am quite happy to give out invite codes for people who want to poke around. Otherwise, three pages, with variations:

http://www.isabeau.hack.dreamwidth.net/manage/circle/edit.bml?as=system
http://www.isabeau.hack.dreamwidth.net/manage/circle/edit.bml?as=test
http://www.isabeau.hack.dreamwidth.net/manage/circle/edit.bml?as=xXx_emobaby_xXx
ETA: The OpenID version didn't work. But feel free to create OpenID accounts to test with.

Known issues:
- (visual) there is no left border to the tables. nfi.
- (visual) it also might look better if the tables were centered? don't know the best way though
- (functional) it's a little redundant to have membership status for openID users
- (functional/accessibility) the bottom form still sucks (I haven't touched it at all)

Questions that I know I have:
- are the anchor links in the intro paragraph good or bad?
- someone brought up that having it in two-line format would get annoyingly long (which doesn't apply on the dreamhack, but would if you have 500 friends and 200 communities or whatever). does changing it to one-line make it too *wide*, especially for those of you with vision problems?
- if so, is that mainly for the people field, or is communities a problem too?
- are the tables and form elements still as accessible? (except for the add-user form. shh.)

Questions that I don't know I have:
- ???

Comments

[lightgetsin]

Feedback from a screenreader perspective:

They are all pretty indistinguishable to me. The anchor links are fine. My problems are all on the add people portion.

1. Because of the layout of the table and because a screenreader presents a page in a linear format, I get the enormous list of graphics for the colors before I get to the actual little box to type a username. I can skip ahead, but it's still annoying and confusing to a new user to page down multiple times through "graphic, blue," etc.

2. The checkboxes for subscribe and access on that form are not labeled like the ones above are. You probably knew that, though.

[ysobel]

Yay screenreader perspective! <3 And especially yay for, well, I'm assuming the lack of complaint about the top half (circle management rather than add peope) means that it works okay for you and is navigable and understandable?

...and yeah, the add-people table *sucks*, in so many ways. I haven't even *touched* it. When I do, the form fields will all be labeled, and I'm not sure what I'm going to do about the color previewer thing.

[lightgetsin]

Yes, the top tables are totally navigable and comprehensible. I can hop down one column, or jump by checkbox, or username, or etc. And now that the checkboxes are marked, I always know where I am. The issues of wideness/two lines don't impact me.

[ysobel]

Sorry for ambushing you offhand, but: do you know if there is some way, HTML or CSS, to tell screenreaders to ignore a particular table column? (It's information that is mainly useful for visual purposes, but uses text.) Or, otoh, would it be highly annoying to have an x at the beginning of each row?

It's *totally* not a problem if you don't know, but I've been having trouble finding out on my own. And I want to make this as user-friendly as possible.

[lightgetsin]

Hmm. I don't know about an "official" way to do that, and I have a feeling there isn't one. There are ways for me to ignore certain kinds of information (flash, inline frames, unlabeled graphics, unlabeled image map links) but that's a user setting. But to answer the other part of your question, when a screenreader ignores something, it's not like there's an x. It's like there's nothing at all -- I don't actually know it's ignoring anything, if you know what I mean.