A11y Slacker archive 2015-09-17

zakim-robot

Sep 17 00:16

[sarbbottam, a11y] button-aria-label.mov
zakim-robot

Sep 17 00:19

[sarbbottam, a11y] Screen Shot 2015-09-16 at 5.18.43 PM.png
zakim-robot

01:14

[Brian Kardell, a11y] sarbbottam: which pen are you referring to? I see a png and a mov - neither appears to me to obviously answer my need... can you share a codepen link?
zakim-robot

01:15

[sarbbottam, a11y] @bkardell: http://codepen.io/sarbbottam/full/bVppbL/. Do you see the link now?
zakim-robot

01:15

[Brian Kardell, a11y] sarbbottam: yes
zakim-robot

01:15

[Brian Kardell, a11y] looks
zakim-robot

01:16

[sarbbottam, a11y] Strange, I don’t know why it didn’t display earlier.
zakim-robot

01:17

[Brian Kardell, a11y] yeah, so, that's not what I'm talking about... let me see if I can describe better
zakim-robot

01:17

[Brian Kardell, a11y] http://heydonworks.com/practical_aria_examples/#input-tooltip
zakim-robot

01:18

[Brian Kardell, a11y] you see there, you get an accessible/visual tooltip whenever/however the user sets focus on an input field
zakim-robot

01:18

[Brian Kardell, a11y] doesn't matter if you are keyboard or mouse or touch or what, the visual experience is the same and it is accessible
zakim-robot

01:18

[sarbbottam, a11y] I see, you mean a pseudo tooltip not the native one.
zakim-robot

01:18

[Brian Kardell, a11y] think this + button
zakim-robot

01:19

[Brian Kardell, a11y] on things like input fields, clicking them simply sets the focus
zakim-robot

01:19

[Brian Kardell, a11y] but on a button, clicking it (which is all you can do on some touch interfaces) is not what we're looking for
zakim-robot

01:19

[sarbbottam, a11y] OK button does not get focus in iOS safari
zakim-robot

01:20

[Brian Kardell, a11y] it might get focus or it might not (it should), either way that's too late if you catch my drift
zakim-robot

01:20

[Brian Kardell, a11y] if I am looking at it, the hover/focus tooltip lets me know whether I want to click this button or what it might do, etc
zakim-robot

01:20

[Brian Kardell, a11y] but on mobile with only touch... ouch
zakim-robot

01:20

[sarbbottam, a11y] Not really, if it would have received focus, you could do the same thing, similar to input.
zakim-robot

01:21

[sarbbottam, a11y] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
zakim-robot

01:21

[Brian Kardell, a11y] no, you can't... clicking it not only sets the focus, but then activates it
zakim-robot

01:22

[Brian Kardell, a11y] you can think about click kind of like tabbing in and pressing enter
zakim-robot

01:22

[Brian Kardell, a11y] (or space)
zakim-robot

01:22

[Brian Kardell, a11y] s/click/click or touch
zakim-robot

01:23

[sarbbottam, a11y] I dont think, even clicking a button will set the focus in iOS., yea you could listen to the click/touch but that would be too late.
zakim-robot

01:23

[sarbbottam, a11y] However ….
zakim-robot

01:23

[Brian Kardell, a11y] I'm pretty sure it will set the focus, that's just part of the lifecycle
zakim-robot

01:24

[sarbbottam, a11y] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus does not say so. Any how I will leave it to you.
zakim-robot

01:25

[sarbbottam, a11y] the MDN doc does not say so, I will leave it to you. But you could ...
zakim-robot

01:25

[sarbbottam, a11y] listen to touchstart to display the custom tooltip
zakim-robot

01:26

[sarbbottam, a11y] and on touchend perform the desired click action
zakim-robot

01:26

[Brian Kardell, a11y] it's still not the same thing, once you've touched it, youve committed
zakim-robot

01:27

[sarbbottam, a11y] Nope, you can prevent the behavior
zakim-robot

01:27

[Brian Kardell, a11y] how can you both prevent and not prevent
zakim-robot

01:27

[Brian Kardell, a11y] you have to ultimately be able to both click the button and get the tooltip
zakim-robot

01:27

[sarbbottam, a11y] so you do something like this …
zakim-robot

01:28

[sarbbottam, a11y] on touchstart, prevent the default behavior and display the tooltip. // user is still touching the button
zakim-robot

01:28

[sarbbottam, a11y] on touchend perform your desired action
zakim-robot

01:29

[sarbbottam, a11y] But I doubt how useful would that be, depending on the tooltip’s position
zakim-robot

01:29

[Brian Kardell, a11y] you see how this is not the same, right?
zakim-robot

01:30

[Brian Kardell, a11y] if the user is tabbing or hovering, it's two independent stages... determining if you want to push the button vs pushing the button...
zakim-robot

01:31

[Brian Kardell, a11y] in your suggestion, as I said - you cannot both prevent and not prevent - there is no known/distinquishable intent to push or query for more information
zakim-robot

01:32

[Brian Kardell, a11y] I'm hoping someone has a labeling pattern or something that will work where we can do something like [button](?) and appropriately link the ? to the button so they can have independent actions that still make sense
zakim-robot

01:34

[sarbbottam, a11y] I will look forward to the solution, but I don’t think I have any for your use case.
zakim-robot

01:35

[Brian Kardell, a11y] sarbottam: thanks for trying though... think on it, I expect I'm not the first to bump into this
stevefaulkner

10:00

A11ySlackers chat log 16th September 2015 http://w3c.github.io/a11ySlackers/archives/2015/09/2015-09-16.html
stevefaulkner

10:20

@jonathantneal :point_up: September 16, 2015 3:42 PM

What is not provided via native semantis that you need?
MichielBijl

14:31

@schalkneethling any feedback from the creatives?
MichielBijl

14:32

@bkardell didn't read all, but I guess the obvious solution of a help text next to the button won't fly for some reason; interested in that reason.
MichielBijl

14:33

Brian Kardell (just for safe measure in this linked Slacky-Gittery situation).
zakim-robot

14:35

[Katy Moe, a11y] Hey all. What are your thoughts on links that are styled like buttons?
garcialo

14:36

I think they're visually misleading.
zakim-robot

14:36

[Katy Moe, a11y] We have a design with something that is semantically a link (i.e. the only thing it does is take you to another page) but the designers want it to look like a button
zakim-robot

14:36

[Katy Moe, a11y] in fact, you can see it at getkahoot.com - without clicking on it, what would you expect “How it works” to do?
jonathantneal

14:37

@stevefaulkner I asked because I could not find a site explicitely telling me how blockquote/pullquote markup patterns are interpretted by ATs.
zakim-robot

14:37

[Katy Moe, a11y] sorry if I interrupted a conversation
garcialo

14:37

Katy, looks like it would take me down to the "How it works" section of the main page.
zakim-robot

14:38

[Brian Kardell, a11y] katy: just out of curiosity, what would you expect it to do?
garcialo

14:38

You can have more than one conversation going at a time. =)
zakim-robot

14:38

[Katy Moe, a11y] @garcialo thanks, that’s interesting
garcialo

14:39

Katy, the persistent bouncing triangle probably also had something to do with it.
zakim-robot

14:39

[Katy Moe, a11y] @bkardell I’d probably expect the same as garcialo, but I already knew where this went (to another page, as it happens) so perhaps I’ve been influenced by that
zakim-robot

14:39

[Katy Moe, a11y] yeah, I’m not particularly happy with the unavoidable movement on the page
zakim-robot

14:39

[Brian Kardell, a11y] katy: a link would be fitting for both
garcialo

14:39

Oh geez. there is a lot of stuff on that page that moves forever.
zakim-robot

14:40

[Katy Moe, a11y] Regarding the movement, I’m wondering whether some sort of global pause button would be appropriate
zakim-robot

14:40

[Katy Moe, a11y] (I was asked to do an a11y review of this page fairly late in the process, as is quite evident!)
zakim-robot

14:41

[Brian Kardell, a11y] I think that many visually oriented users don't draw such distinctions, designers definitely don't... links are styled all sorts of ways in menus for example they are frequently made to look like tabs. More important that you use the right element because there are functional/semantic implications way beyond what it looks like... IMO anyway
zakim-robot

14:43

[Katy Moe, a11y] Thanks @bkardell - so what you’re saying is that the most important thing is that it’s marked up correctly (which it is), rather than that it ‘looks like a link’?
zakim-robot

14:43

[Brian Kardell, a11y] katy: if you look around this page, it's full of links - none of them are underlined text if you see what I'm saying
zakim-robot

14:43

[Katy Moe, a11y] yeah, I see what you’re saying, and it would be unrealistic to expect designers to adhere to that
zakim-robot

14:43

[Katy Moe, a11y] I’m sure even gov.uk doesn't
zakim-robot

14:44

[Brian Kardell, a11y] others may disagree, I'm not entirely sure - but yes that's what I'm saying... though from a UX perspective it's also kinda important to let visual users know that they can interact with something and a lot of the content on this page (the twitter section for example) doesn't
garcialo

14:45

It's definitely clear that "How it works" is an interactive element and that it will take you somewhere that isn't "here"
garcialo

14:46

I would expect a button to do something on the same page, or submit a form for me...and possibly take me to a new page.
zakim-robot

14:46

[Brian Kardell, a11y] critically important to use the right element, less critical to draw the same visual distinctions in every case is my thought... the non-visual stuff goes beyond a11y even, it's a real good idea to use the right elements
garcialo

14:46

Agreed
zakim-robot

14:50

[Brian Kardell, a11y] now, here's a challenge for everyone - look at the slack logs from yesterday and see my question because it could apply equally well to katy's question
jonathantneal

14:50

Do one of those pointy things where you link to it? :)
garcialo

14:51

+1
zakim-robot

14:51

[Brian Kardell, a11y] how could she create some kind of tooltip-like "what does this button do" which would work equally well on touch-only devices
garcialo

14:51

:point_up: September 16, 2015 5:47 PM This one?
zakim-robot

14:52

[Brian Kardell, a11y] on desktop you can do hover/focus - but touch only afaik there is no equivalent when it comes to links or buttons because touching them would activate it
zakim-robot

14:52

[Brian Kardell, a11y] garcialo: that's the one
zakim-robot

14:52

[Katy Moe, a11y] ah, interesting - thanks
jonathantneal

14:53

Brian Kardell, how would you expect tooltips to work on a touch device?
zakim-robot

14:54

[Brian Kardell, a11y] jonathantneal: I have literally no idea. designers experimented with a [button](?) kind of construct which at least technically could work, but unclear how to make that really intuitive from an a11y standpoint
zakim-robot

14:55

[Brian Kardell, a11y] jonathantneal: you can imagine/visualize that right? or do you need a pic
garcialo

14:56

I would really only expect tooltips to work with touch when you're in a form field.
zakim-robot

14:56

[Brian Kardell, a11y] oooh
zakim-robot

14:56

[Brian Kardell, a11y] at least on android if you long-press one of the twitter buttons you get a tooltip but it doesnt activate the button... hmm
jonathantneal

14:57

On iOS, a long press brings up alternative actions for a button. Not sure if you can stick any metadata in there.
garcialo

14:57

yeah, I don't think people know to long-press
garcialo

14:57

...yet?
garcialo

14:57

either way, then you're getting into the territory of "Can everyone long press?"
MichielBijl

14:58

@kmoe that persistent arrow @garcialo talked about needs a display: block; or display: inline-block; to work in Safari.
MichielBijl

14:58

No animations for inline elements.
zakim-robot

14:59

[Brian Kardell, a11y] garcialo: yeah that's a native app observation anyway, not the web... but I'm just looking for data on what's been done/tried
garcialo

14:59

Ah, gotcha.
MichielBijl

15:00

@bkardell did you see my question?
MichielBijl

15:00

Besides that one :p
zakim-robot

15:01

[Brian Kardell, a11y] @michiel: I still dont see it?
zakim-robot

15:01

[Brian Kardell, a11y] oh
zakim-robot

15:02

[Brian Kardell, a11y] Help text next to a button, like all the time have help text there?
MichielBijl

15:02

Yes
MichielBijl

15:03

Or if the button really needs extra text to explain what it does, maybe the button text itself isn't clear enough.
MichielBijl

15:05

And if it doesn't have any text on it, maybe add text?
jonathantneal

15:06

I think there’s some logic to recognizing that the touch platform may not be a place to leverage tooltips and other similarly hover-specific things that are helpful in situations with a screen pointer.
MichielBijl

15:09

@media (touch) { tooltip { display: next-to-button } } :p
garcialo

15:12

That would be neat. You should suggest it.
zakim-robot

15:12

[Brian Kardell, a11y] @michiel: yeah, that's not going to fly. we have tooltips on buttons on desktop all the time, on form fields, on bits of text (definition popups) etc - all those are well established paradigms in wide use, clearly valuable -- but how to provide the same affordances on touch only devices is the challenge
zakim-robot

15:14

[Brian Kardell, a11y] @michiel: "that" was in refernce to your earlier question about constant text in the actual page next to the button
MichielBijl

15:14

Yeah I got that :)
zakim-robot

15:15

[Brian Kardell, a11y] perhaps a better/simpler challenge is: can you formulate an accessible markup solution to the [button](?) model
zakim-robot

15:16

[Brian Kardell, a11y] that works ok for touch devices but the sequential nav/described by gets broken and confusing
zakim-robot

15:17

[Brian Kardell, a11y] hmm, well... I guess maybe if (?) was only "touchable" but not focusable and the rest was a common described by on hover or focus... that could work maybe?
zakim-robot

15:17

[Brian Kardell, a11y] touchable or clickable*
jonathantneal

15:24

I don’t follow, but maybe you can make a codepen or a gist?
zakim-robot

15:49

[Brian Kardell, a11y] ok, well, this is klunky/ugly I could extract a pattern from it though if it is actually accomplishing the right bits http://codepen.io/bkardell/pen/KdzqXV
MichielBijl

15:50

That seems to work ok, no?
zakim-robot

15:50

[Katy Moe, a11y] @MichielBijl thanks for the tip-off about the animation - I’ll pass that on to the website team
MichielBijl

15:50

No problem :)
zakim-robot

15:52

[Brian Kardell, a11y] @michiel: was that comment to me? "seems to work ok, no?"
MichielBijl

15:53

Yes
zakim-robot

15:58

[Brian Kardell, a11y] sorry I got disconnected
zakim-robot

15:59

[Brian Kardell, a11y] Yes, it seems ok to me, but I've thought I'd figured this out a few times already, so I'm looking for more brains to confirm it :simple_smile:
zakim-robot

16:02

[Brian Kardell, a11y] hmm... strangely the ? gets the focus when you click it even still... I'm not sure if that matters
MichielBijl

16:14

Hmm, you wouldn't be able to activate something without focus I guess.
MichielBijl

16:14

Don't think it matters, but could use testing to prove.
cryberg

16:37

Is there any documentation out there for debugging focus issues in JAWS? I'm trying to refactor a modal so that JAWS can read it coherently, and every time I tab to the different buttons on the modal, even though the focus outline is on the correct button, JAWS reads the text in the footer on the main site behind the modal. I'm really at a loss on how to figure out what is wrong.
garcialo

16:39

maybe that's JAWS doing that thing where it tries to help the user
cryberg

16:40

Is that something you've encountered before?
garcialo

16:41

No, but I know that JAWS will try and figure out things like text labels if there isn't one programmatically associated with the form field
garcialo

16:41

I'd suggest listening to it in NVDA, but the point of what you're doing is getting it work with JAWS
cryberg

16:46

I'll check that out. If there is a similar problem, at least I'll know if it's an issue with the markup or not. Thanks!
cryberg

17:45

it appears that NVDA reads the buttons as I would expect. JAWS is still just reading the footer, though
zakim-robot

17:59

[Alice Boxhall, a11y] Hello @laura_palmaro !
zakim-robot

21:16

[Jesse Beach, a11y] @cryberg, do the tabbable elements have roles and names? either implicit, like button elements or if divs, then with role and aria-label attributes?
zakim-robot

21:16

[Jesse Beach, a11y] post some html here and we'll have a look

Gitter Channel Archive 17th of September 2015

A11ySlackers chat log 16th September 2015 http://w3c.github.io/a11ySlackers/archives/2015/09/2015-09-16.html