[Jesse Beach, a11y]@stevef, will you be in Sapporo next month for the W3C Plenary? I'll be there as an Observer. I see that the HTML Accessibility Task Force will be meeting.
[Jesse Beach, a11y] I'd like to participate if possible and meet the folks involved.
stevefaulkner
05:56
hey @jessebeach unfortunately I won't be in Sapporo, but seek out @LjWatson she is an TPAC old hand and where she is there will be interesting and important discussions on web standards and accessibility going on
stevefaulkner
06:02
@jessebeach, re messenger, sure and its great to hear that you and Matt are working on improvements
»Returns a NodeList of all the label elements that the form control is associated with.« how are the labels associated?
rodneyrehm
09:41
ah, that’s only adressing <label> elements, ok
Nettsentrisk
09:42
I'm wondering if that would also apply to elements labeling the form control via aria-label or aria-labelledby
Nettsentrisk
09:43
I was looking for a way to get the label(s) for a form control natively from the browser rather than write hackish JS to find the labels for it, but apparently only Chrome supports this HTML5 labels property
rodneyrehm
09:43
I’d assume not, considering control.label only applies to https://html.spec.whatwg.org/multipage/forms.html#category-label - and that’s explicitly talking about the <label> element. aria-* can be set on anything, so the limitation to “labelable elements” suggests they’re not included
rodneyrehm
09:44
not sure what you mean by hackish? There are only two ways to associate a <label> with a form control. using the label’s for attribute or nesting the control inside the label
Nettsentrisk
09:46
well in JS you'd have to query the DOM for elements with a for attribute that are equal to the ID of the form element; using this labels property would be a bit more straight forward
Nettsentrisk
09:48
label = formElement.labels[0].innerText vs. label = document.querySelector('[for='+formElement.id+']').innerText
rodneyrehm
09:50
a) you assume there is only one label, when there can be many
b) you do not account for nested label/input
c) that would go into a function getLabelsForControl() anyway and thus be less of an impact at invocation: getLabelsForControl(element) vs. element.labels
rodneyrehm
09:51
(yes, doesn’t make the lack of support any better, I know)
StommePoes
09:51
I'm a meanie I know, but someone coding HTML without explicit for-id matching deserves to later have trouble matching label-input pairs with JS later. Of course often the HTMLer is not the JSer
StommePoes
09:52
That and *[for^=foo_] style selectors are also soooo nice (despite needing to make separate IE-workable versions as well, htmlFor
rodneyrehm
09:52
I use nested <label><input> a lot, especially for checkboxes - what’s wrong with that?
StommePoes
09:52
screws over dragon users for one
rodneyrehm
09:53
because dragon scrapes the DOM for that? is that not exposed properly in the AT?
StommePoes
09:53
there is nothing technically wrong with implicit/nesting, as stevefaulkner will tell you. It is technically allowed. It is also one of two technically allowed ways to associate labels with inputs, the other one being the only one to never not work anywhere with anyone (that I know of)
Nettsentrisk
09:53
a getLabelsForControl() function isn't really needed when you have a labels property :)
StommePoes
09:53
I'm not sure what Dragon's problem is, actually. heard this from eric W
Nettsentrisk
09:54
I generally don't like nesting the input inside label because it removes flexibility in styling the label separately from the input (without lots of hacks)
StommePoes
09:54
Also, the multiple labels per input, the script could do a match for all fors that == some id
StommePoes
09:54
I also use input+label a lot for custom checkbox styles
StommePoes
09:54
but only because it's easy :P
StommePoes
09:54
Larry Wall did say Laziness was a virtue :)
rodneyrehm
09:55
<label><input><span></span></label> - usually my setup for custom styled checkboxes…
StommePoes
09:55
input[type=radio]+label, input[type=checkbox]+label gives me a lot of freedom to allow some graphics weenie to have his/her custom controls without actually messing with real controls, with the problem of images not scaling (and haven't used SVG yet)
rodneyrehm
09:55
I have my problems with IDs…
rodneyrehm
09:55
I hate IDs
StommePoes
09:56
I use id's quite a lot, but I understand the sentiment. There's something nice about using the DOM order and tokenless elements for styling, but since I vanilla my JS a lot that gets more tiresome
StommePoes
09:56
(again mostly because of those who don't support querySelector)
StommePoes
09:58
id's end up on my inputs either way-- they get them for the label-fors, and JS has a quicker hook to grab it as bonus-laziness.
rodneyrehm
10:01
I’m going to have the last word with: input.parentElement is way more convenient
rodneyrehm
10:01
(and now I’m shutting up, because I have no idea what I’m doing ;) )
StommePoes
10:02
input.parentNode.lastChild...?
StommePoes
10:02
oh nv
StommePoes
10:02
was thinking both wrapped in divs
StommePoes
10:02
input.parentNode would be your labels
rodneyrehm
10:02
yep
StommePoes
10:02
but only if input type=radio or check, so still extra work with mixed fields
StommePoes
10:03
or do you do this with ALL fields??
rodneyrehm
10:03
no, only checkbox/radio
rodneyrehm
10:03
nesting <select> in a <label>, for example, can yield undesired mouse behavior
rodneyrehm
10:04
(I don’t remember which browser in which situation leading to which undesired behavior, I only remember that it bit me once)
StommePoes
10:04
ug, some "designer" just told me to use this: "Arial,'Helvetica Neue',Helvetica,sans-serif". This guy thinks someone will see helvetica, lawlz
StommePoes
10:04
selects in general have bit me, when I try to turn someone's onChange into something I can use with keyboard
StommePoes
10:05
current solution looks ugly (I set all the options to show, which pushes everything down on the page), but mousers never see it, and it works.
StommePoes
10:05
I set the size onfocus to the number of options, I couldn't find any other way to show all options for keyboarders when onChange is listening.
I'm assuming Hans had tested the code he had without teh wrapper, the aria-hidden didn't work and he figured it was because of the psuedo-elements, but my copy of Orca doesn't read css generated content so I can only check this out at home
@StommePoes Yes I saw that comment as well. What he says definitely makes sense and is inline with the ::before spec, so I'll do some extra testing to see if I'm still getting the same results as I was when I tested this originally.
StommePoes
15:08
I'm the he :P
StommePoes
15:09
But I wondered if you had originally started with bootstrap-style <i aria-hidden=true class="favicon-thingies"><i> when testing
hanshillen
15:09
Oh was that you? hehe I didn't even check who wrote it :)
hanshillen @hanshillen checks his privilege
hanshillen
15:10
anyway, let me double check. It would be useful if this extra step wasn't necessary
StommePoes
15:13
lolz
StommePoes
15:14
I'll be anticipating the answer, I have one day left on current-job where I could change a bunch of faviconny elements before I go
aardrian
15:16
@StommePoes Or you could just steal everyone's mouse and force them to use a keyboard for day. Or turn the contrast way down on their screens. Or blow out all the speakers.
[monastic.panic, a11y] we are not sure what the right way to go is for a11y
zakim-robot
15:18
[monastic.panic, a11y] specifically wondering if mouse interactions should match the keyboard ones with regard to focusingthe first item of a menu when it's opened
aardrian
15:20
@monastic.panic I see the term "dropdown" used (which I take to mean <select>) and you mention <menu>. Is there an example page for this issue?
aardrian
15:23
@monastic Tracing back to original issue, I see it is neither, but a fly-out menu created from <li>s. This is important as all three (<select>, <menu>, HTML flyouts) can have different expectations and uses.
aardrian
15:31
@monastic Why is there role="presentation" on the <li>? That seems...odd.
stevefaulkner
15:35
@aardrian thats a standard method for building menu's <li> is a fallback
stevefaulkner
15:36
the menu structure comes from the role=menuitems etc
aardrian
15:37
@stevefaulkner Ah. Missed the role="menuitem" in the code. My brain turned off at non-HTML.
stevefaulkner
15:39
ja, i suspect you brain turned off a while before 😜
zakim-robot
15:40
[monastic.panic, a11y] hehe
zakim-robot
15:40
[monastic.panic, a11y] it isn't actually a select
zakim-robot
15:41
[monastic.panic, a11y] like you'd expect
zakim-robot
15:41
[monastic.panic, a11y] ie. there is no logic for setting a "selected" value
zakim-robot
15:41
[monastic.panic, a11y] flyout menu triggered by a button
You were right @StommePoes, I've updated my comment on the GH issue accordingly.
hanshillen
16:00
I've definitely run into situations where the screen reader was still announcing the icon character if aria-hidden was applied directly to the element, but that's about 3 years ago now and now they all seem to be behaving. Good job for pointing it out!
zakim-robot
16:17
[Chris DeMars, a11y] If my luck works out, I'll be working on accessibility at work for our site!
stevefaulkner
16:17
:clap:
zakim-robot
16:40
[monastic.panic, a11y] stevefaulkner bootstrap doesn't tend to provide much out of the box, so we add more a11y when we can.
zakim-robot
16:42
[monastic.panic, a11y] why can't I find the keyboard iteraction stuff for menus...
zakim-robot
16:43
[monastic.panic, a11y] whereever that is we were folling that for the focus behavior
zakim-robot
16:54
[rabidpuffin, a11y] hello all!
zakim-robot
17:03
[rabidpuffin, a11y] Question.
zakim-robot
17:04
[rabidpuffin, a11y] Does anyone have examples of screen readers on masked inputs vs. multi-field inputs? Or thoughts of pros or cons for either?
@rabidpuffin hi, sorry don't have time to answer at moment, will try to later
zakim-robot
17:13
[rabidpuffin, a11y] Cool. No worries. I’m prepping a UX video on date fields and wanted to make sure a11y is considered. A lot of people want to throw input masks at the date capture problem but everything I’ve looked at so far seems to point at that being a potential issue for a11y. Figured I ask a better qualified community—so I joined your lovely group!
Gitter Channel Archive 24th of September 2015