dw_accessibility | Manage circle overhaul, take 2

(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:
- ???

Flat | Top-Level Comments Only

I think this is an improvement (although my memory of the previous iteration is a bit sketchy, admittedly.)

I think it's going to be ridiculously wide if you include the names along with the accounts. (It is not unusual in my circle for a name to be something like, "An Uruk-Hai, I feast on the Hope of the West and bathe in the tears of their women." or "with a clockwork walk and a backward smile" or "the NPC who tells you the bridges are open")

The half-circle to mark not being subscribed to does not fit into the visual language created by the green check or, really, any visual language I can think of. What about a full black circle, hopefully 'beveled' or whatever to match the dimensionality of the green check?

I like the anchors in the opening paragraph. That will be very helpful when you start looking at hundreds of entries.

I wonder if it's possible to split the people list? Separating out the people you have added to your circle from the people who have you in theirs but you don't reciprocate?

P.s. The view of the isabeau.livejournal.com manager sent me to your home page to login, instead of the manage circle page?

Previous iteration: http://bugs.dwscoalition.org/attachment.cgi?id=1789 (screenshot of two browsers)

Re the half-circle thing: People (in other contexts) had mentioned not liking the green-check-red-x dichotomy (especially the red x = BAD connotations) and oh bother I am an idiot. *headdesk* it just occurred to me that I could colorshift the icons. Which takes care of that problem.

Re splitting the people list: Yes, probably, and IMO that'd be awesome, but that's better done as a separate issue (it's not a coding problem, so much as a difference-in-essential-behaviour thing). Throw it in suggestions?

Re openID view: oops. I didn't realize it would do that, sorry *sheepish look*

+1 to Zvi's point about usernames PLUS account name.

As a large print user, the one line form is much easier to navigate.

Thanks for your work on this!

The blue crosses you have now are cool :)

I suggest you put "N/A" in the box for granting access to self, rather than leaving it blank.

Also I know you're hacking on this but in case you didn't notice the second table header column is currently labeled "Account" instead of "Circle Status" like it was before.

I like the centered tables, they work well.

Still haven't solved the "X" column problem, but as a start it could be coded as the second or third column rather than the first? That would also solve the problem of the X looking like it was for deleting the row, I suspect.

r

Without your names -- and I totally see your point (mine's not exactly a short display name *snicker*) -- where/how would be a good place to indicate user-defined colors? (See the ?as=system version for example -- test has obvious colors, the comms are less obvious until you highlight -- which is how it works on the current manage circle page) At one point I'd had it as a separate column with just an x in it (with properly defined bg/fg colors), but I'd imagine that would be confusing as hell to screenreaders, just having a random x at the beginning of every line.

mm, you can use css to tell the screen reader to not read something. I think your big x or "colors" or something is probably the best move.

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.

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.

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.

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.

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.

I noticed in IRC that you had changed these, so I went back to look at them.

However, the new "X" for colours seems confusing - it looks like you should be able to click on the "X" to delete the row, which of course you can't do.

Hey, I think the * instead of X for the colour display is cool! It's less confusingly looking like it should do something.

I think colour display column definitely needs a heading, it's very opaque to anybody who doesn't already know what it means. Especially, I suspect, to new users who won't have any colours set so they'll just have a row of asterisks.

Suggested heading: "Display Colors" which can then be run over 2 lines which will make it quite compact horizontally. Then when you get to doing the lower table you can label those columns "Foreground display color" and "Background display color" (probably also 2 lines high) and it will be a lot less confusing I think!

Consensus on the accessibility front is don't hide the column, use the aria-label attribute to report the colours on the X. This probably won't actually work because assistive tech hasn't caught up with using aria-label for this purpose but it will soon. And not many screen reader users will use it anyway, so it's no big deal.

If you want me to research aria-label usage, syntax, etc., lemme know :)

r
PS
You rock very much!

Manage circle overhaul, take 2

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject