Archive index

A11y Slackers Gitter Channel Archive 30th of March 2016

What fresh hell is THIS now? - Patrick Lauke
  1. yohoho
    Mar 30 00:09
    thanks jnurthen, just about to try it on FF+NVDA will report back :)
  2. yohoho
    Mar 30 00:23
    yep, a lot more functional
  3. JimBobSquarePants
    Mar 30 13:07

    Hi all... Could I have your thought on these custom radios/checkboxes please. Are there any obvious flaws in my attempt to keep them accessible?

    https://jsfiddle.net/jamessouth/btv113dw/

  4. powrsurg
    Mar 30 13:19
    Are there certain browser/screen reader combinations that are more common than others?
  5. garcialo
    Mar 30 13:22
    IE and JAWS, Firefox and NVDA, Safari and VoiceOver
  6. garcialo
    Mar 30 13:23
    Those work well together at least. Not sure which is more common
  7. powrsurg
    Mar 30 13:24
    what about Chrome? NVDA?
  8. powrsurg
    Mar 30 13:24
    Does anyone actually use ChromeVox besides Chrome OS users?
  9. powrsurg
    Mar 30 13:26
    oop, just saw this was covered in the last webaim survery. Should have thought to look there first
  10. garcialo
    Mar 30 13:26
    Chrome works best with ChromeVox last I heard. I don't know anyone that actually uses ChromeVox
  11. powrsurg
    Mar 30 13:28
    I tested with it on my Chromebook a few months back. It was having the hardest time detecting certain changes in one of our wizards
  12. garcialo
    Mar 30 13:29
    Ah
  13. powrsurg
    Mar 30 13:32
    It had trouble with an unordered list that had checkboxes that were stylized to hide the checkbox and instead the label had images (via css generated content, rather than background images, to work in windows high contrast mode) attached to the labels where the image changed based on the checked state. It was just reading "list item" and nothing further. I believe we broke it into just divs instead and that helped some.
  14. powrsurg
    Mar 30 13:33
    Annoyingly our simplified test case for debugging always seemed to work fine =/
  15. powrsurg
    Mar 30 13:34
    Okay, webaim says zoomtext is used the most with chrome ... though I thought there was some talk about potential ballot stuffing that got zoomtext votes higher than normal
  16. garcialo
    Mar 30 13:35
    Well, there are also way more folk that are low vision than blind.
  17. powrsurg
    Mar 30 13:37
    right, but the number of people filling out the survey went up by 5x between surveys
  18. garcialo
    Mar 30 13:37
    Yes
  19. LjWatson
    Mar 30 13:46
    Does anyone around use speech recognition tools?
  20. powrsurg
    Mar 30 14:06
    I've used it in JavaScript (currently only supported in Chrome and supposedly Firefox OS, but I haven't bothered to update my FxOS phone in over a year)
  21. ryoia
    Mar 30 14:54
    so i have two input fields with autocomplete, they are the same code-wise, but i increment id every time it populates so they don't repeat. however, the second one always speaks the same list as the first one when i move up and down, even though i made sure the aria-activedescendant is set to the correct id. anybody ever experienced that before? i'm using combo btw.
  22. MichielBijl
    Mar 30 15:02
    do you have a code example?
  23. MichielBijl
    Mar 30 15:04
    As I'm having a hard time visualising the problem =)
  24. ryoia
    Mar 30 15:05
    yes, do you think an outline would do?
  25. ryoia
    Mar 30 15:05
    because both places use the same code
  26. ryoia
    Mar 30 15:05
    not sure how to make that happen in jsbin
  27. MichielBijl
    Mar 30 15:05
    An outline?
  28. MichielBijl
    Mar 30 15:06
    As in outline: 2px solid royalblue; or something?
  29. ryoia
    Mar 30 15:06
    haha
  30. ryoia
    Mar 30 15:06
    no
  31. ryoia
    Mar 30 15:06
    let me paste it here
  32. MichielBijl @MichielBijl thinks in code too much =P
  33. ryoia
    Mar 30 15:07
    <div id="{{dropdown-id}}" class="user-search-item" role="option" role="listitem" data-value="{{value}}" data-id="{{index}}"> <img src="{{avatar}}" class="ui avatar image"/> <div class="content"> <div class="title">{{name}}</div> </div> </div>
  34. ryoia
    Mar 30 15:08
    oh shoot
  35. ryoia
    Mar 30 15:08
    it doesn't format
  36. MichielBijl
    Mar 30 15:08
    You have a double role; that's a problem.
  37. ryoia
    Mar 30 15:08
    oh wait!
  38. ryoia
    Mar 30 15:08
    yeah let me take that out and try again
  39. MichielBijl
    Mar 30 15:08
    In any case, a live code example would be preferred =)
  40. ryoia
    Mar 30 15:10
    yeah
  41. ryoia
    Mar 30 15:11
    the reason i thought live code example would be hard in this case is because of duplicate code. it works fine on the first page, but using the same combobox on the second page JAWS still says the items from the first page. if that makes sense..
  42. zakim-robot
    Mar 30 15:14
    [karlgroves] That sounds like a textbook case of ID confusion. Either the ID is re-used or the first one is still being referenced by the 2nd one.
  43. ryoia
    Mar 30 15:15
    yeah that was the problem earlier. i changed to so the id increments every time the list is getting populated.
  44. zakim-robot
    Mar 30 15:16
    [karlgroves] sure. but what about the reference?
  45. ryoia
    Mar 30 15:16
    hmm
  46. zakim-robot
    Mar 30 15:16
    [karlgroves] Is there anything that still references the 1st one?
  47. ryoia
    Mar 30 15:18
    so the 2nd list ids replaces the 1st one
  48. ryoia
    Mar 30 15:19
    and the parent element's aria-activedescendant is pointing to the second list's active element's id.
  49. zakim-robot
    Mar 30 15:19
    [karlgroves] And to be clear: both of these items are present and visible in the DOM at the same time?
  50. ryoia
    Mar 30 15:19
    no
  51. ryoia
    Mar 30 15:19
    they are the same item
  52. ryoia
    Mar 30 15:20
    so only one in the DOM
  53. ryoia
    Mar 30 15:20
    the only thing that's changed for the 2nd one is the id
  54. zakim-robot
    Mar 30 15:21
    [karlgroves] (thinking face emoji) WAT. Definitely seeing the final rendered version would help.
  55. ryoia
    Mar 30 15:23
    yeah. i'll keep messing with it, if i can't figure out soon i'll throw together a sample
  56. zakim-robot
    Mar 30 15:31
    [karlgroves] Definitely do a sanity check by validating the markup, too. Whenever I get tripped up by stuff like that I usually throw it into the HTML5 validator and see if I’ve just been missing something
  57. ryoia
    Mar 30 15:31
    good idea, thanks karlgroves!
  58. zakim-robot
    Mar 30 16:52
    [nwilliams] I'm trying to put together an accessible re-orderable list
  59. zakim-robot
    Mar 30 16:53
    [nwilliams] Right now I've got an ordered list and in each li element there is a movie itemx up button and a move itemx down button
  60. zakim-robot
    Mar 30 16:53
    [nwilliams] when the user clicks move itemx up, it moves down one spot on the ordered list
  61. zakim-robot
    Mar 30 16:54
    [nwilliams] how do I alert the screenreader that the move actually happened?
  62. jnurthen
    Mar 30 16:58
    @nwilliams What are you doing with your focus when you move the item?
  63. zakim-robot
    Mar 30 16:59
    [nwilliams] When I move the item, I have a directive that refocuses on the button that was last pushed
  64. zakim-robot
    Mar 30 16:59
    [nwilliams] $(elem).focus() kind of thing
  65. zakim-robot
    Mar 30 17:07

    [karlgroves] @nwilliams: Depends on what you need announced, but this might help
    https://github.com/karlgroves/jquery-live-regions

    I often create a “listener” that just sits dormant waiting for new messages to be piped in

  66. zakim-robot
    Mar 30 19:26
    [techthomas] @karlgroves: cool plugin!
  67. zakim-robot
    Mar 30 20:21
    [karlgroves] thanks