A11y Slacker archive 2016-12-15

zakim-robot

@zakim-robot

Dec 15 00:16

[chris__pearce] @dave_or_dead did you get anywhere with your table interaction? Seems a tricky thing to do.

I had a quick play writing some markup (emphasis “quick”) and came up with this:

    <tr>         <td>             <button                  aria-expanded="false"                 aria-controls="1 2"                 type="button"             >                 Expand nested rows             </button>             <span id="0">                 Some text             </span>         </td>         <td>             Some data         </td>         <td>             Some data         </td>         <td>             Some data         </td>     </tr>     <tr          aria-hidden="true"         id="1"     >         <td>             <span aria-labelledby="0">                 Some data             </span>         </td>         <td>             Some data         </td>         <td>             Some data         </td>         <td>             Some data         </td>     </tr>     <tr          aria-hidden="true"         id="1"     >         <td>             <span aria-labelledby="0">                 Some data             </span>         </td>         <td>             Some data         </td>         <td>             Some data         </td>         <td>             Some data         </td>     </tr> </table>

Not sure about aria-labelledby usage? Perhaps hidden visually text within the first <td> of the nested rows that covers the relationship? And setting focus to a natively focusable element in the first <td> of the first nested row (or whatever makes sense or the <td> itself), when the rows are expanded (visible)?

Not tested at all and not sure if that’s the right way to go about it? I am curious as to what is the right way though, as it is something that crops up a lot in application UI’s whether or not it's good UX.

zakim-robot

@zakim-robot
Dec 15 00:21

[marcysutton] one note: ID's cannot start with a number
zakim-robot

@zakim-robot
Dec 15 00:27

[herin] @caesar : It's a search form where you search by either this or that. All of the search combinations are text fields.
[chris__pearce] thanks @marcysutton, just quick code ;), be great to get feedback on how to go about this pattern in an accessible way.
[caesar] @herin sounds like more of a usability issue than an accessibility one :)
zakim-robot

@zakim-robot
Dec 15 00:33

[backwardok] seems like aria-labelledby isn’t the right one to use here since (if it were to work) it would be read instead of whatever was inside
[backwardok] perhaps aria-describedby is better for this https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
[karlgroves] >it would be read instead of whatever was inside

Kudos. That’s a big concern whenever using aria-label/ aria-labelledby. Visible text is preferred, when possible, for usability by the broadest user spectrum
[melsumner] I usually like a toggle button (using aria-pressed) for expand/collapse
zakim-robot

@zakim-robot
Dec 15 00:39

[herin] @caesar : It is an usability issue. As the design has been agreed, I could put a form validation I guess.
[chris__pearce] Thanks @backwardok on suggesting aria-describedby and good to know @karlgroves.
[herin] @chris__pearce When you are using Aria-describedby on links with keyboard focus on links, it announces the describedby data. But, when using element list in screen readers it will not. This is a known issue. Please check your implementation.
zakim-robot

@zakim-robot
Dec 15 00:47

[chris__pearce] Thanks @herin, what do you mean by “element list”?
[herin] @chris__pearce : NVDA + F7 opens up the elements list. This lists all headings, links and landmarks
[herin] Same short cut in Jaws as well
zakim-robot

@zakim-robot
Dec 15 00:52

[marcysutton] I cover the elements list in this video: https://egghead.io/lessons/tools-testing-for-accessibility-with-the-nvda-screen-reader-on-windows
[chris__pearce] Ah ok, thanks. Bookmarked: https://egghead.io/courses/start-building-accessible-web-applications-today +1
[herin] Apparently, there are more people using element list for navigating websites than the shortcut keys. Was interesting to hear from Andrew Downey in his little stats
[herin] So, I concentrate on element list now
[herin] Thanks @marcysutton for the link
[marcysutton] Less to remember! There are so many shortcuts
[marcysutton] Thanks for watching! If there's anything you'd like to see in a lesson, let me know
zakim-robot

@zakim-robot
Dec 15 01:36

[herin] Using : in the ids will this cause issues in different browsers?
[herin] Fro example, fadataentry:txt1 where fadataentry is the id for the form as wel
zakim-robot

@zakim-robot
Dec 15 01:45

[melsumner] it shouldn’t be- spaces are the only non-valid ID character I thought
[melsumner] looking at HTML spec, here: https://www.w3.org/TR/html/dom.html#the-id-attribute (unless something has changed?)
zakim-robot

@zakim-robot
Dec 15 02:57

[backwardok] @herin that id might not work in older browsers (see note in https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)
[backwardok] html5 allows anything that’s not a space, but html4 only allows certain characters
zakim-robot

@zakim-robot
Dec 15 03:17

[herin] @backwardok : Yes, I see that it's not backward compatible. Even text only browsers are not supporting this
[herin] Thanks for the link
zakim-robot

@zakim-robot
Dec 15 06:37
[muan] Hi! I understand that sometimes people navigate from a list of links, so link purpose being understandable by itself it’s very important, so I’m wondering in the case of issue list:

<li><a href=”{issue_url}”>Submit button not clickable in settings form</a><a href=”{label_url}” class=”label”>bug</a></li>

Would it be recommended to label the “bug” link? either with title or aria-label?
zakim-robot

@zakim-robot
Dec 15 07:05

[muan] Unsure if this is a case of "ambiguous to users in general”..
zakim-robot

@zakim-robot
Dec 15 10:31

[caesar] I think the question is whether the class="label" contains any sensory characteristics that makes it necessary to provide an accessible alternative. E.g. the label looks like label
[caesar] Or rather, bug
[caesar] I'd also be concerned that you've got two inline elements adjacent to each other, so the screen reader would read "Submit button not clickable in settings form bug".
[caesar] But then again, it would be broken out by "link"
zakim-robot

@zakim-robot
Dec 15 10:39

[caesar] Anyway, to actually answer the question, yes, I personally would add an aria-labelledby referring to an element saying "Labels:" or similar.
Peter Krautzberger

@pkra
Dec 15 11:14

Morning slackers.
Quick sanity check: an empty div or span with aria-label will be consistently ignored by AT, right?
zakim-robot

@zakim-robot
Dec 15 12:19

[emplums] oooh curious about that one too ^^
[emplums] Curious if anyone has any thoughts on best practices for date pickers? The date picker plugin we’re currently using doesn’t allow users to tab through each date, but if you can use the arrow keys to navigate through dates - I’m wondering if that’s something that would be obvious to a user on a screen reader or not
zakim-robot

@zakim-robot
Dec 15 12:51

[iandevlin] Tabbing through each date is not the correct pattern for a date picker when using the keyboard. The arrow keys are. This is my understanding, but of course others who are more experienced than I can offer better advice,
zakim-robot

@zakim-robot
Dec 15 14:47

[mhsu] @jacquidow and I are also very interested in how date pickers are actually used with keyboard navigation! Eagerly awaiting an expert answer...
[muan] @caesar thank you so much!
zakim-robot

@zakim-robot
Dec 15 16:45

[melsumner] @emplums: arrow keys for dates in a date picker- def not tabs on that.
zakim-robot

@zakim-robot
Dec 15 18:22

[marcysutton] A date picker with every day being tabbable would be very difficult to navigate. So many tab stops–depending on the calendar design you might never get to the end of it.
[marcysutton] About the empty div or span with aria-label–we just had this conversation yesterday if you scroll up a bit. Without the element being interactive the aria-label will not be exposed as an accessible name. tabindex alone is not enough to make it interactive, it also has to be paired with an interactive role like button
[marcysutton] Here are some date pickers you can look at thanks to Dennis Lembree: http://www.webaxe.org/accessible-date-pickers/
Mallory

@StommePoes
Dec 15 19:05

@muan aaaah! please don't use aria-label on the bug part!!
We already have heaps of things that aren't getting read out because they're getting hammered by aria-label!
describedby or maybe even labelledy, but the link text you already have is important "Submit button not clickable in settings form" and you don't want to lose that!
It's already an issue on a lot of github buttons :(
zakim-robot

@zakim-robot
Dec 15 19:06

[marcysutton] can you give some examples? you would definitely have to put the entire thing into aria-label to have it read out: aria-label="Label: bug"
Mallory

@StommePoes
Dec 15 19:06

I mean, on the link with "Submit button not clickable in settings form" I would not do aria-label="bug"
Which is what my friends are complaining about today with links all with aria-labels
zakim-robot

@zakim-robot
Dec 15 19:07

[marcysutton] those are two separate links. one is for the issue title, one is for the label (a bug)
Mallory

@StommePoes
Dec 15 19:08

Oh I see it now. Whew!
Kaleb Hornsby

@kaleb
Dec 15 20:29

Would anybody care to critique a listbox for me? http://codepen.io/kaleb/pen/xRyewY?editors=1000
James Nurthen

@jnurthen
Dec 15 20:34

JAWS reads "Coconut Checkmark checked selected". I would add aria-hidden on the <i class="XListbox-check">✓</i>
zakim-robot

@zakim-robot
Dec 15 20:35

[beth] Anyone know if there’s a known bug for autocomplete fields with Talkback on Android devices? I’ve tested quite a few different versions and none seem to work on Android with Talkback… even Paul J Adam’s example?!?
James Nurthen

@jnurthen
Dec 15 20:36

@kaleb it also doesn't seem to run on safari on iOS
Kaleb Hornsby

@kaleb
Dec 15 20:41

@jnurthen thanks alot!
Kaleb Hornsby

@kaleb
Dec 15 21:13

It should work in safari now... I was using es6 features.
zakim-robot

@zakim-robot
Dec 15 23:50

[gerardorodriguez] Hello! I was invited to join @tylersticka! :) :wave::skin-tone-4:

Gitter Channel Archive 15th of December 2016