A11y Slacker archive 2015-11-03

zakim-robot

Nov 03 00:47

[rickb] @alice I'm typing up an accessibility issue on the chromium project issue tracker
zakim-robot

Nov 03 00:49

[alice] @rickb: Excellent, send me a link once you're done :simple_smile:
zakim-robot

Nov 03 00:49

[rickb] ok will do
zakim-robot

Nov 03 01:01

[rickb] @alice here it is: https://code.google.com/p/chromium/issues/detail?can=2&q=fieldset%20legend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&id=550663&thanks=550663&ts=1446512395
zakim-robot

Nov 03 01:02

[rickb] long story short, chrome is not exposing fieldset legends
zakim-robot

Nov 03 01:04

[rickb] i'm reporting another chrome bug too but not accessibility related
zakim-robot

Nov 03 01:12

[alice] @rickb: Thanks for that! I see there's no note of fieldset in http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#accessible-name-and-description-calculation which [@stevefaulkner] may be an oversight
zakim-robot

Nov 03 01:12

[alice] @stevefaulkner The above goes back to my frustration at not having a reliable single source for native accessible name sources
zakim-robot

Nov 03 02:01

[rickb] oh yeah
zakim-robot

Nov 03 02:01

[rickb] wow didn't realize that!
zakim-robot

02:04

[rickb] the upshot is that without the legend being read we end up with situations like, for example, a "yes/no" radio button group with absolutely no context (yes what? no what?)
StommePoes

07:54

@rickb if it's a long question though it's generally not part of the legend
StommePoes

07:56

You could get away with it for a single question I suppose, but generally if it's a long question I stuff them in a p and try aria-describedby or similar.
StommePoes

08:01

<legend>cookie preferences</legend>

<p id="c00ki3">Please choose, between 1 and 9, with 1 being 'never' and 9 being 'very much', your rating on how much you enjoyed our delicious marketing-driven-description whole-grain gluten-free fair-trade low-fat oatmeal chocolate-chip cookies.</p>

<input type="radio" id="hateses" aria-describedby="c00ki3"><label for="hateses">1</label>

<input type="radio" id="luvs" aria-describedby="c00ki3"><label for="luvs">9</label>
StommePoes

08:02

(obviously an accessibility problem caused by sh*tty copywriting but I'm no Khaled Hosseini)
MichielBijl

09:31

Good morning slackers!
MichielBijl

10:47

For those who haven't seen—or rather just read—@LjWatson's excellent “Design like we give a damn” talk, you can now also read it here: http://dir.agosto.nl/accessibility/design-like-we-give-damn.html
MichielBijl

10:48

Corresponds to https://vimeo.com/110965713
MichielBijl

11:54

Does anyone see any a11y issues in this widget type thing: http://s.codepen.io/Michiel/debug/RWBQKy
MichielBijl

11:54

There is a button that expands more text.
MichielBijl

11:54

Not sure how to mark that up really…
StommePoes

13:03

I thought it was finally agreed that the expanded attribute goes on the expander rather than the expandee
StommePoes

13:03

or at least, I found that both in my work's guidelines and some recent copy I was checking
MichielBijl

13:04

Hmm
MichielBijl

13:04

Yeah, had some difficulty deciding how to mark this up as I don't really know the concept behind it.
StommePoes

13:04

it's a special case though that this is a one-time button, rather than something pushed or toggled
MichielBijl

13:05

Exactly.
StommePoes

13:05

Well the specs I remember were kinda wishy washy waffle-buckets at the time
StommePoes

13:05

and you couldn't tell who got what attribute
MichielBijl

13:05

But I could set expanded on the hidden thingy.
StommePoes

13:05

apparently finally someone bitched loud enough that this was about as clear as Bill Clinton's testimony
MichielBijl

13:05

If we follow tab pattern it should go on the tab (thing you click on)
StommePoes

13:05

I'm also wondering if -owns is useful here if, once clicked, there's no button anymore to have any relationship
StommePoes

13:06

right, the expander (tab) rather than expandee
StommePoes

13:06

but here...
StommePoes

13:06

I think it should prolly be analogous to when you click a button and, without a page refresh, end up in another scenario
MichielBijl

13:06

No wait, what I said is false
StommePoes

13:07

oh?
MichielBijl

13:07

http://www.w3.org/TR/wai-aria-1.1/#tab
MichielBijl

13:07

“authors should ensure each visible tabpanel has its aria-expanded attribute set to true”
StommePoes

13:07

"The aria-expanded attribute is not attached to the content that has been expanded itself. " is what I just ran into with some copy I was reviewing
StommePoes

13:08

hm, I'm going to send these both to my boss
MichielBijl

13:08

Let's make it interesting…
MichielBijl

13:09

https://rawgit.com/w3c/aria/master/practices/aria-practices.html#accordion
MichielBijl

13:09
Tab - When focus is on an accordion header, pressing the Tab key moves focus in the following manner:

When the corresponding panel is expanded (its aria-expanded state is 'true'), then focus moves to the first focusable element in the panel.
MichielBijl

13:09

So, it should be on the panel according to both ARIA 1.1 and the APG.
MichielBijl

13:10

Different patterns too (tab and accordion).
MichielBijl

13:10

So my example is invalid whatever you make of it in terms of pattern.
MichielBijl

13:10

No wait
MichielBijl

13:10

Aaaargh
MichielBijl

13:11

My codepen thingy is actually according to those patterns :P
MichielBijl @MichielBijl needs more coffee!
StommePoes

13:11

"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed."
StommePoes

13:12

I'm sorry but that right there is so damn ambiguous, everyone should just expect developers to get it wrong
StommePoes

13:12

and the moving the focus to the tab panel is a PAIN in any user's butt
StommePoes

13:12

if all they are really doing is trying to move from tab to tab
StommePoes

13:13

as far as I'm concerned, if they arrow to another tab and if focus is the trigger (which I do like), I feel we should still wait for the next Tab to bring the user to the panel because we cannot know where they are trying to go.
MichielBijl

13:13

Moving between tabs is done via arrow keys (as per spec anyway).
StommePoes

13:13

If they consistently have to keep freaking shift-tabbing back to the tabs to move from tab to tab, that
StommePoes

13:13

's just bad UX and makes people want to throw their computers off a cliff
StommePoes

13:14

think about it
MichielBijl

13:14

Where did you get that text?
StommePoes

13:14

you moved to a tab panel, sitting on the open tab. You arrow to the next one, which moved the focus to that next one
StommePoes

13:14

because the focus, and not Enter, is triggering showing the new panel, if you move the focus to the tab panel, you've been prevented from continuing on to the next tab with arrow
StommePoes

13:15

because now your focus is in the tab panel and your arrows don't hit anyone's knee
StommePoes

13:15

"our arrows... will BLOT out the sun"
StommePoes

13:15

I got the text from the general aria-expanded spec part
StommePoes

13:15

http://www.w3.org/TR/wai-aria-1.1/#aria-expanded
StommePoes

13:17

"If the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author SHOULD reference the container by using the aria-controls attribute."
MichielBijl

13:18

That would be if a tab panel would expand something else?
StommePoes

13:18

maybe it's my cognative defecits but when it comes to text like this, I need an example code to see what the hell it actually means. If she floats, it means she's made of wood and weighs as much as a duck
StommePoes

13:18

should a tab panel expand something else?
MichielBijl

13:18

Not that I know, but that is what it reads like.
StommePoes

13:18

(what if a tab panel has a magical read-more button inside it that is teh g0ne when clicked and shows content)
StommePoes

13:19

Maybe they're thinking broader than tab panels, since they're assuming all sorts of kinky things could be expanding other kinky things
MichielBijl

13:19

A single button that expands all the things!
StommePoes

13:19

SHE'S A WITCH
MichielBijl

13:20

I have added this conversation to my list of things to discuss in the aria wg :P
StommePoes

13:20

step 1: request a web page
step 2: send a boatload of JS instead
step 3: have <html><body><button>click for web page!</button></body></html>
step 4: profit
MichielBijl

13:21

Seems legit
StommePoes

13:21

Just remember if I'm this stupid, I probably have a lot of web-devving inbred cousins wondering the same
MichielBijl

13:21

Nah, it's not just you; that text is not clear at all.
MichielBijl

13:22

Problem is that it's hard to write good copy for stuff like this.
StommePoes

13:22

I will mention that the stuff from work that says expanded goes on the expander used a toggle button as an example there and not tab-panel
MichielBijl

13:22

When you're writing it and it isn't clear, the person who wrote it explains and all is well.
MichielBijl

13:22

Until someone else reads it and has the same issue.
StommePoes

13:22

Unless they're using witch-logic
MichielBijl

13:22

Ain't we all?
StommePoes

13:23

if she weighs less than a duck... wood... floats... witch
StommePoes

13:23

logic! Boole would be proud
MichielBijl

13:23

If Harry Potter can read Stephan Hawking's “A Brief History of Time”; then I should be allowed to use magic!
StommePoes

13:23

"Would you like coffee or tea?" "Yes."
StommePoes

13:23

Wait, Harry Potter can read that?
StommePoes

13:23

Hermione, sure
StommePoes

13:23

Harry? I dunno
StommePoes

13:23

He's no superstar student I must say
StommePoes

13:23

always running around with that ginger boy
MichielBijl

13:24

http://i.imgur.com/wq607TJh.jpg
StommePoes

13:24

that's not potter
StommePoes

13:24

is it?
MichielBijl

13:24

I don't know what character that is, but it said underneath it was from HP.
StommePoes

13:24

I stopped with the series back years ago
StommePoes

13:25

A Brief History of Rhyme
MichielBijl

13:25

Alt = someone (apparently not Harry Potter) is reading Stephan Hawking's “A Brief History of Time”
StommePoes

13:25

alt="while sitting in a dungeony-looking pub with people way in the background apparently dressed ready to party like it's 1599"
MichielBijl

13:26

I didn't even notice those :x
StommePoes

13:27

I was watching Big Hero 6 (for like the 4th time, I usually never rewatch movies) and I was pointing out all the background characters to $husband
StommePoes

13:27

And the fact that everyone looks like the 2 females in Frozen because almost all females look like those
MichielBijl

13:27

Apparently that is Ian Brown, who plays a nameless wizard in Harry Potter :)
MichielBijl

13:27

http://harrypotter.wikia.com/wiki/Wizard_in_the_Leaky_Cauldron
StommePoes

13:27

The males have a wide range of facial features. The women all look like... one girl with different hair and clothes.
StommePoes

13:28

hm, not this guy then? https://en.wikipedia.org/wiki/Ian_Brown
StommePoes

13:28

kinda looks like him
StommePoes

13:28

oh wait
StommePoes

13:28

"Brown had a cameo role in the 2004 film Harry Potter and the Prisoner of Azkaban'.[33]"
StommePoes

13:29

I'm wearing my Internet Explorer T-shirt now. I should stroll into a front-end meetup and say hi loudly :P
MichielBijl

13:30

Haha
StommePoes

13:30

In other news, have you checked this out? http://chaals.github.io/accesskey/index.src.html ?
MichielBijl

13:30

Not yet, added to reading list
MichielBijl

13:31

I'm still working on feedback for the a11y API
MichielBijl

13:31

Well, I gave some and still need to reply to the reply :P
StommePoes

13:31

I honestly would rather cross-browser and maybe even cross-OS keyboard navs for major roles and HTML types but as noted, this will never happen and vendors have some kind of begin with accesskeys already
MichielBijl

13:34

It's difficult to do stuff cross OS
StommePoes

13:44

yeah
StommePoes

13:44

reading chris coyier's thing about clip
StommePoes

13:45

I'm sorry, but if vendors go out and say "x is deprecated" and then in the same breath "oh but nobody supports the replacement yet haha" I'm going to pretty much ignore the whole sentence and carry on like it's still 2001
MichielBijl

13:45

I still use clip.
MichielBijl

13:46

They can suck my clip until they support clip-path.
StommePoes

13:46

The other things is, with new-clip, svg, etc there's like lots and lots of hand-written geometry stuff there. As I've stated before, I do not have enough fingers and toes to figure even the simplest of shapes out. Yes, I failed Shapes in school. They still let me graduate to basis/elementary school.
StommePoes

13:47

Cause I was all like "when are we evar going to use this stuff in real life?" and they weren't all like "you'll need it to draw pictures in CSS hon"
StommePoes

13:47

srsly wtf
StommePoes

13:47

.clip-examples {

clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)

clip-path: inset-rectangle(from top, from right, from bottom, from left, rounded-x, rounded-y)
/ Looks like this is what rect() used to be like with clip /
/ Will replace inset(), I suppose /

clip-path: polygon(a, bunch, of, points)
clip-path: circle(radius at x, y)
clip-path: ellipse(radius-x, radius-y at x, y)

}
MichielBijl

13:48

This one time, at CSS camp, I tried to use clip-path, and drew a circle, but it came out a square.
StommePoes

13:48

One time I tried fingerpainting some mendelbrot bugs and it just turned into a brown puddle
StommePoes

13:48

That was the first time (of many) that I failed art class
StommePoes

13:49

.clip-polygon {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
StommePoes

13:49

wut
MichielBijl

13:49

There is no way to visualise that ins your head.
StommePoes

13:49

remember back in school when we had to draw a turtle in LOGO? yeah
MichielBijl

13:49

Maybe there is, but I havent figured it out.
zakim-robot

13:55

[mlockrey] Here's some innovative #captioning that I can only describe as "captions for hearing people"
http://youtu.be/qFI_-kJ95vc
zakim-robot

13:55

[mlockrey] Very interested in the various thoughts out there
zakim-robot

13:56

[mlockrey] As its not perfect accessibility (ie they don't caption the entire audio track - only the song etc)
zakim-robot

13:57

[mlockrey] But it seems to be an attempt to take an accessibility tool (ie captions) and manipulate them creatively to engage the hearing audience - whilst Deaf people like me are still beneficiaries (for part of the video at least)
zakim-robot

13:59

[cryberg] @michiel: I don't know if this helps or hinders, but I've been trying to follow Bootstrap for when or when not to use aria-expanded (it's a library already used in my project, so for the sake of consistency)
Their dropdowns put aria-expanded only on the button that triggers the dropdown
http://getbootstrap.com/javascript/#dropdowns

Their collapse component puts aria-expanded on both the button and the content that gets expanded and collapsed
http://getbootstrap.com/javascript/#collapse
MichielBijl

14:00

@cryberg, thank you for your contribution. Not sure if that helps or hinders either ;)
MichielBijl

14:01

There is no clear pattern for my use case, and the aria text is confusing.
StommePoes

14:02

I think it puts a bit more jam on the same waffles, (the expanded stuff)
zakim-robot

14:03

[cryberg] Yeah....I take it to mean that you use aria-expanded where it will offer the most helpful information. I've noticed that having aria-expanded on a collapse component will tell the user when they are navigating content that isn't always visibly, but putting it on dropdown menus doesn't give any new helpful info.....so....case by case judgement?
StommePoes

14:03

Honestly, the music industry could just make it a standard thing to have the lyrics as part of the music video. Lots of people like to sing along anyway and we're all like "why is Hendrix singing 'scuse me while I kiss this guy'?"
zakim-robot

14:03

[cryberg] *visible
StommePoes

14:03

the problem with judgement is... we suck as Judges.
StommePoes

14:03

"I am the Law!"
zakim-robot

14:03

[cryberg] hahaha too true
StommePoes

14:05

I mean, the spec should pick whatever one is "true", and write it clearly, and honestly I believe the spec is incomplete without code examples, no matter how ludicrous or contrived. They can be links to a separate document + fragment, but eithout "seeing" what they mean, I have too much trouble "understanding" what they mean, and when it comes to a lot of this aria stuff, screwing it up by putting the wrong stuff somewhere can take something that sucked pre-aria for visitors to turning it completely 100% b0rked
MichielBijl

14:05

Besides thinking “what the fuck did I just watch”, that captioning was actually nicely done. They should have included subs for the first part too.
StommePoes

14:06

And I've seen navigation menus with all the "menu" roles, and then on the wrong elements with the wrong nesting... and it was a mega menu and a total a11y disaster. And the devs totally meant well.
MichielBijl

14:06

Menu role is not for navigation! But you now this…
StommePoes

14:06

Michiel yeah it seems they only "captioned" the music, the girl in the beginning is an intro. And I could find no craptions (as auto-craptions probably wouldn't fail too badly as she speaks clearly with no background noise)
StommePoes

14:07

I know this about menus, but it was not in the spec.
StommePoes

14:07

The spec was like "okay this role is for menus"
StommePoes

14:07

that kind of stuff is practially dangerous
StommePoes

14:07

it needs to be clear, and lots of the spec I don't find clear
MichielBijl

14:07

I do agree we need more examples.
StommePoes

14:08

Honestly, it should be written a bit moron-proof. Like Ikea instructions. Building something like a tab-panel or a mega menu should be like unwrapping a fastfood hamburger and stuffing the straw in the straw-top-plastic-thing on drink-things
StommePoes

14:08

thing things
zakim-robot

14:08

[cryberg] Is there any particular reason the spec doesn't already have examples? I've found a lot of it confusing without clear example to work with too
zakim-robot

14:09

[cryberg] Or is it just "something that hasn't happened yet"
StommePoes

14:09

I could be the ultimate tester: if i can read the specs and build something that doesn't collapse a skyscraper onto untold millions of victims, it's good.
StommePoes

14:09

So far, examples in the wild are built by companies like TPG adn Dequeue, who themselves have people who are part of writing some of the specs
MichielBijl

14:10

@cryberg, possibly (wo)manpower
MichielBijl

15:07

What the hell, I can no longer favourite tweets but have to heart them :/
MichielBijl

15:07

Who comes up with this stuff?
MichielBijl

15:09

Probably Twitter saying “MUST CONFORM!”
StommePoes

15:17

wait you have to heart?
MichielBijl

15:17

Yep
StommePoes

15:17

oh didn't you used to have to star?
MichielBijl

15:18

Yep
StommePoes

15:18

hm that does seem to change the whole meaning
MichielBijl

15:18

It's no biggy, just weird
StommePoes

15:18

No it's like Facebook's Like button
StommePoes

15:19

that button is pretty much the unconscious signal that FB should only be happy BS
MichielBijl

15:19

I liked to star stuff, because it was emotionless.
StommePoes

15:19

I mean, you don't want to read an important, heart-renching tale of rape in the Congo and then... Like rape in the Congo
StommePoes

15:19

I used it to bookmark links I'd otherwise forget
MichielBijl

15:19

Yep
StommePoes

15:19

but some followers of mine use it to let me know they liked or maybe agreed with something I twotted
StommePoes

15:20

I mean, if I bookmark a tweet, I'm not lovin' it.
StommePoes

15:20

That's for McDonald's.
StommePoes

15:20

oh well, designers making UX choices is the way of the world
MichielBijl

15:21
MichielBijl

15:21

alt = screenshot of a notification that someone “liked” a tweet I was mentioned in.
MichielBijl

15:21

Tweet in question: https://twitter.com/stommepoes/status/661543148934602752
StommePoes

15:28

If they're gonna do that, they oughtta make two buttons: like and add to reading list
MichielBijl

15:29

They should've left it alone
MichielBijl

15:29

“Leave the favourite button alone! I'm serious! Leave it alone!”—Weird YouTube guy
StommePoes

15:40

he's crying out his eye makeup
stevefaulkner

18:57

@alice the fieldset/legend acc name calc is a bug on my part, need to add, if you file an issue would be much appreciated. Note if you look at the details for legend element in HTML mapping spec it provides requirements for relationship mapping for some Apis but not for AX I need to add that

Gitter Channel Archive 3rd of November 2015