Archive index

A11y Slackers Gitter Channel Archive 14th of December 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Dec 14 01:26
    [marcysutton] It's tough to say without seeing more detail, but I'd probably skip menu/tab roles for the first go-around and use an unordered list with links and focus management, since those roles are pretty restrictive in terms of content. The menu button could use aria-haspopup to indicate it opened something. It might be better to keep it simple and do some user testing with people with disabilities to see if you need more than that
  2. [marcysutton] the closest example I can think of is the old responsive Target corporate site mega-menu https://twitter.com/marcysutton/status/777968578184122368
  3. zakim-robot
    @zakim-robot
    Dec 14 02:01
    [tylersticka] Thanks, @marcysutton !
  4. zakim-robot
    @zakim-robot
    Dec 14 04:49
    [chris__pearce] Hi guys, I’m looking into updating my hide visually CSS as it’s been a while. I came across this article: http://unobfuscated.blogspot.com.au/2015/01/updated-offscreen-techniques.html. Would this be the one to go with?
  5. zakim-robot
    @zakim-robot
    Dec 14 05:41
    [chris__pearce] I also noticed this: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.ixzj7idgo
  6. zakim-robot
    @zakim-robot
    Dec 14 06:39
    [melsumner] Can't sleep so reading w3c/aria open issues list on Github - one of the issues (eventually) led to a page that I've read so many times but I never noticed this part before
  7. [melsumner] "Authors devote a good deal of effort to the appearance of their web pages, and this is especially true in the case of scripted web applications."
  8. zakim-robot
    @zakim-robot
    Dec 14 06:48
    [melsumner] This particular section has been marked as outdated and needing review (it also mentions spacer img elements and tables for layout) but it struck me to note that this seems to now more prevalently be the opposite, especially in the case of "scripted web applications."
  9. zakim-robot
    @zakim-robot
    Dec 14 14:43
    [monastic.panic] :wave: hi there folks. quick question. I want to disable buttons after a user clicks them, to prevent double submits of forms. Id imagine tho that disabling a button that has focus isn't great, but readonly doesn't seem to be a thing for buttons
  10. [monastic.panic] what's the best to manage that?
  11. zakim-robot
    @zakim-robot
    Dec 14 14:51
    [sylvia] Hi! Definitely don't disable on focus. Someone using a keyboard will focus on the button, then submit
  12. [sylvia] There is a disabled attribute in HTML 5
  13. [sylvia] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
  14. [sylvia] I would use JavaScript to apply that attribute after the form submits.
  15. James Nurthen
    @jnurthen
    Dec 14 14:54
    Can't you just deal with this on the server side?
  16. zakim-robot
    @zakim-robot
    Dec 14 14:54
    [sylvia] You could pair it with your form validation script, so if the form does not validate, don't submit, show error messages. If the form does validate, submit form and disable button
  17. [sylvia] That could also work; have the server remove duplicate entries submitted within x number of seconds
  18. zakim-robot
    @zakim-robot
    Dec 14 17:31

    [dave_or_dead] Hey guys, just had a quick question. Been doing a fair bit of googling and reading the spec but haven't been able to find a good solution for this.

    Essentially I have to implement a <table> similar to the below where rows can be expanded to open by way of clicking on an arrow button.

  19. [dave_or_dead] Screen Shot 2016-12-14 at 5.30.01 PM.png
  20. [dave_or_dead] I can't figure out what the best way is of linking the parent <tr> with the two child <tr>s in an accessible way
  21. powrsurg
    @powrsurg
    Dec 14 18:52
    Does anyone here have a recommendation on how we may do a video conference with a deaf interviewee?
  22. zakim-robot
    @zakim-robot
    Dec 14 19:06
    [alice] I know Google Hangouts has support explicitly for sign language interpreters
  23. [alice] Others may well do too
  24. powrsurg
    @powrsurg
    Dec 14 19:11
    How would that work? No one here knows ASL (which I feel weird about given that I used to host Discovering Deaf Worlds / my then co-worker's brother was married to one of the co-founders and they were big for us then).
  25. zakim-robot
    @zakim-robot
    Dec 14 19:13
    [alice] Well yeah, you'd need to provide an interpreter, just as if the person was coming on-site

  26. [karlgroves] > I know Google Hangouts has support explicitly for sign language interpreters

    Which is effing awesome, BTW

  27. powrsurg
    @powrsurg
    Dec 14 19:21
    That's great to know
  28. zakim-robot
    @zakim-robot
    Dec 14 19:22
    [karlgroves] Is Ian Devlin a regular in here?
  29. powrsurg
    @powrsurg
    Dec 14 19:22
    That said, my boss just told me that said interviewee has their own interpreter. Is that weird?
  30. Or maybe not weird, but is that normal?
  31. zakim-robot
    @zakim-robot
    Dec 14 19:22
    [karlgroves] Thought I saw him here before.
  32. [karlgroves] No, not weird for someone to have an interpreter - or, more specifically, someone they use frequently
  33. [alice] Right, so if they have someone they work with, they can bring them in virtually via Hangouts (or other interpreter-supporting VC software) or just have them sitting beside them in person
  34. powrsurg
    @powrsurg
    Dec 14 19:49
    Good to know. Thank you.
  35. zakim-robot
    @zakim-robot
    Dec 14 19:53
    [iandevlin] Greetings from Slack rather than Gitter.
  36. [melsumner] @karlgroves: just leveled up your summon skills.
  37. [iandevlin] Actually we spoke on Twitter =D
  38. zakim-robot
    @zakim-robot
    Dec 14 20:49
    [cryberg] Hi there! I could use a second opinion on how to best code a <table> that has clickable rows.
    The design I'm working with (and unfortunately do not have the authority to change...) has a table of data, where clicking on any table row will launch a modal to show more details. My team is concerned that a screen reader user (we're primarily supporting JAWS with IE11) won't necessarily know that the rows are clickable, so we're trying to find the best way to convey that.
    I tried using an aria-describedby on the table to point to a hidden div with the instructions, but JAWS doesn't seem to pick up on it.
    In general, we already label these kinds of tables with a hidden <caption> so I was thinking of putting the information there, but it feels clunky. Any thoughts? I put together a rough mock up of what I mean on jsFiddle: https://jsfiddle.net/cryberg/hgzgsqpc/
  39. zakim-robot
    @zakim-robot
    Dec 14 21:27
    [dave_or_dead] @cryberg what if you had a visually hidden button that launched the modal as well?
  40. [cryberg] How would that work with tab order?
  41. zakim-robot
    @zakim-robot
    Dec 14 21:34
    [dave_or_dead] ah yeah, that's true.
  42. zakim-robot
    @zakim-robot
    Dec 14 21:47
    [sylvia] Could you give the table row a role of link or button?
  43. [sylvia] Semantically weird, but accurate
  44. zakim-robot
    @zakim-robot
    Dec 14 21:55
    [marcysutton] Wouldn't that mess up the semantics of the table?
  45. zakim-robot
    @zakim-robot
    Dec 14 22:13
    [karlgroves] That would def. mess up semantics of the table.
  46. zakim-robot
    @zakim-robot
    Dec 14 22:49
    [backwardok] is it not an option to have a column that has a button to open more details? and/or a button you can add after the user’s name to see more details?
  47. [backwardok] (and clicking on that would open the modal)
  48. [backwardok] because as a sighted user, it’s not clear to me that clicking on the rows would do anything
  49. [backwardok] seems like it would be beneficial for both screen reader users and non screen reader users to have an explicit button that denotes action
  50. [backwardok] also, in your fiddle, you have the shift key also being used to trigger the modal - this makes it so you can’t shift+tab to go to previous entries
  51. zakim-robot
    @zakim-robot
    Dec 14 23:27
    [herin] Hi, anyone got an accessible mutually exclusive form field example that you can share?
  52. zakim-robot
    @zakim-robot
    Dec 14 23:41
    [caesar] What does it mean "mutually exclusive"? Like a radio button?
  53. [caesar] I also have a question: does anybody know why NVDA reads the text inside a <div> instead of what's specified in aria-label? I thought according to the accessibility text calculation, the attribute should be read first?
  54. [caesar] Code snippet: <div class="v-p-normal" aria-label="Cannot add device to the compare list" tabindex="0">Compare</div>
  55. [caesar] It reads "Compare" instead of "Cannot add device to the compare list"
  56. [alexlande] someone here a few months ago taught me that aria-label is only intended for elements that are labellable (inputs and buttons, mostly)
  57. [alexlande] and that some screen readers will favor other text over the label in those cases
  58. [marcysutton] I think it depends on the role of the element–interactive controls have different behavior than non-interactive ones, and tabindex alone isn't enough to make a DIV into one
  59. [marcysutton] (as far as AT is concerned)
  60. [karlgroves] +1 aria-label only matters if the object is actually labellable
  61. zakim-robot
    @zakim-robot
    Dec 14 23:46
    [alexlande] (I just looked up the PR where my team discussed this, and yeah, @karlgroves is the person who told me about this. Thanks Karl! =D )
  62. [caesar] Only problem is, JAWS reads the label, as does VO, I think.
  63. [caesar] It's only NVDA.
  64. zakim-robot
    @zakim-robot
    Dec 14 23:55
    [karlgroves] So basically NVDA gets it right. ;)
  65. [caesar] They usually do, I find.
  66. [caesar] Open source thumbsup emoji
  67. [karlgroves] Give the <div> an appropriate role and it’ll work across them all
  68. [caesar] Thanks. Will try it.