Archive index

A11y Slackers Gitter Channel Archive 18th of April 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Apr 18 11:34
    [gwhittaker] Hi everyone! What are the most common browser and assistive technology combinations? Is Chrome a popular web browser amongst assistive technology users? I am wanting to know the best approach when testing. Thanks!
  2. zakim-robot
    @zakim-robot
    Apr 18 11:54
    [scottohara] here’s a good listing @gwhittaker - http://hollier.info/browserpairing/
  3. [caesar] @gwhittaker here are the two main sources of data we have, for want of anything better:
    1. http://webaim.org/projects/screenreadersurvey6/#browsercombos
    2. https://accessibility.blog.gov.uk/2016/11/01/results-of-the-2016-gov-uk-assistive-technology-survey/
  4. zakim-robot
    @zakim-robot
    Apr 18 13:44
    [mikey] @gwhittaker: To my understanding and in my experience, Chrome is not popular at all. Most folks tend to use JAWS paired with IE or NVDA paired with Firefox or IE
  5. [mikey] Mobile, mostly VoiceOver for iOS users.
  6. [tink] Jaws with Firefox is increasingly popular.
  7. powrsurg
    @powrsurg
    Apr 18 13:54
    ChromeVox for Chrome for Chrome OS users :p
  8. zakim-robot
    @zakim-robot
    Apr 18 15:32
    [michiel] That list on hollier.info is pretty spot on when it comes to my testing.
  9. [michiel] I test most things on macOS/iOS with smoke testing on Windows/Android.
  10. zakim-robot
    @zakim-robot
    Apr 18 16:27
    [melsumner] When supporting "zoom to 200%", what screen resolution is typical?
  11. powrsurg
    @powrsurg
    Apr 18 18:23
    that would be based on your users. But I believe that requirement is actually talking about using the browser zoom feature to scale up to 200%. Not say "most people use 320x480 so we made sure our site looked good at 640x960"
  12. zakim-robot
    @zakim-robot
    Apr 18 20:10
    [karlgroves] @melsumner WCAG itself does not consider resolution.
  13. James Nurthen
    @jnurthen
    Apr 18 20:11
    .... which IMO is a mistake
  14. zakim-robot
    @zakim-robot
    Apr 18 20:11
    [karlgroves] Agree
  15. [karlgroves] But… its also quicksand
  16. James Nurthen
    @jnurthen
    Apr 18 20:12
    I'm trying to make sure the new WCAG 2.1 SCs dont make the same mistake again
  17. zakim-robot
    @zakim-robot
    Apr 18 20:13
    [quidkid] hey guys so i got a report back from another website I remediated and here is one of the issues, I’d really appreciate some insight on:
  18. [quidkid] Issue 4: Accessible notification that flyout menu has loaded is missing
    Location: Navigation menu flyout
    Details: An actionable element on a web page triggers an update or adds new content with no change in URL, but there is no method to alert Assistive Technology users of the update. The menu button triggers the navigation flyout to appear but AT users is not notified of this new content.
    Devices: FireFox + NVDA
    Recommendation: Additional research is needed before making a recommendation on this issue.
    Provisions: 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
  19. [quidkid] so should i just add an aria-live=“assertive”>
  20. [quidkid] this is for a hamburger flyout menu on the desktop version
  21. James Nurthen
    @jnurthen
    Apr 18 20:15
    i'd move focus into the menu when you launch it. That would be the notification
  22. I would NOT add a live region
  23. zakim-robot
    @zakim-robot
    Apr 18 20:16
    [quidkid] thank you so much for your quick response!! so i would focus the menu in general or the first button or what?
  24. James Nurthen
    @jnurthen
    Apr 18 20:16
    I'd focus into the first menu entry.
  25. zakim-robot
    @zakim-robot
    Apr 18 20:17
    [quidkid] the first thing in the menu is the close button when you tab
  26. James Nurthen
    @jnurthen
    Apr 18 20:17
    That is the only way you will get a screen reader to switch to "forms" mode at that point anyway. If you leave focus on the menu button your arrow keys to move into the menu wouldn't work correctly
  27. zakim-robot
    @zakim-robot
    Apr 18 20:17
    [quidkid] but i’m assuming you mean the actual section link?
  28. James Nurthen
    @jnurthen
    Apr 18 20:17
    why would a menu have a close button :)
  29. so is it not an actual menu then
  30. zakim-robot
    @zakim-robot
    Apr 18 20:17
    [quidkid] it’s a hamburger menu
  31. James Nurthen
    @jnurthen
    Apr 18 20:18
    what roles are the items in it?
  32. does it support arrow keyboard navigation or is it tab keyboard navigation?
  33. how does a keybaord user close it?
  34. zakim-robot
    @zakim-robot
    Apr 18 20:18
    [quidkid] it supports both
  35. [quidkid] there are no roles
  36. James Nurthen
    @jnurthen
    Apr 18 20:19
    I was thinking you were talking a menubutton which launches a menu
  37. nonetheless I would still move focus into the new region as if someone presses a button to launch it they want to interact with it
  38. zakim-robot
    @zakim-robot
    Apr 18 20:19
    [quidkid] yeah i have a hamburger menu button that launches this modal-esque flyout from the side
  39. [quidkid] and then it’s a list with the close button at the top
  40. James Nurthen
    @jnurthen
    Apr 18 20:20
    if it really is modal then consider whether to put role=dialog on it and trap focus within
  41. zakim-robot
    @zakim-robot
    Apr 18 20:20
    [quidkid] yeah focus is trapped when you use the arrow keys
  42. James Nurthen
    @jnurthen
    Apr 18 20:21
    but my general rule is if a user launches something explicitly - moving focus to the thing they have launched is normally the correct thing to do (obviously there are always exceptions to every rule)
  43. zakim-robot
    @zakim-robot
    Apr 18 20:21
    [quidkid] DANG i don’t understand this.. actually right now when you click on the menu button focus is already on the close button
  44. [quidkid] i’m not sure what the that issue refers to then..
  45. James Nurthen
    @jnurthen
    Apr 18 20:22
    well - maybe if you make the thing that launches a region of some sort the screen reader will read the region name when you move into it. To be honest it sounds like it could actually be a dialog
  46. zakim-robot
    @zakim-robot
    Apr 18 20:24
    [quidkid] so if i put role=“dialog” on it, would that solve that issue?
  47. [quidkid] i’m not sure i understand what the issue is
  48. James Nurthen
    @jnurthen
    Apr 18 20:24
    yeah - it is not entirely clear what the issue is
  49. but if you had some sort of named region (ie role=dialog aria-label=flyout menu )
  50. then i would expect the screen reader to read "dialog flyout menu - close button" when you moved focus to the close button
  51. IMO that is enough of a clue to what has happened
  52. zakim-robot
    @zakim-robot
    Apr 18 20:26
    [quidkid] so i guess i’ll just add role=dialog and aria-label=“flyout menu” and see if they come back with other issues in the final spot check.
  53. James Nurthen
    @jnurthen
    Apr 18 20:26
    be careful on dialog though.... only use it if it really is a dialog
  54. zakim-robot
    @zakim-robot
    Apr 18 20:26
    [quidkid] what exactly is a dialog?
  55. [quidkid] it’s a menu
  56. [quidkid] but it looks like a dialgo
  57. James Nurthen
    @jnurthen
    Apr 18 20:27
    if it isn't then just try role=region and aria-label maybe - as that should have a similar result
  58. zakim-robot
    @zakim-robot
    Apr 18 20:27
    [quidkid] i’m always confused about roles
  59. James Nurthen
    @jnurthen
    Apr 18 20:27
    well - unless it has role=menu and menuitem it is not a menu ;)
  60. zakim-robot
    @zakim-robot
    Apr 18 20:27
    [quidkid] is a menu the same as navigation
  61. James Nurthen
    @jnurthen
    Apr 18 20:28
    no
  62. zakim-robot
    @zakim-robot
    Apr 18 20:28
    [quidkid] also i had role menu item on everything before but i remember in the past, i was told to remove the roles in report
  63. [quidkid] i’m confused -\__-”
  64. James Nurthen
    @jnurthen
    Apr 18 20:29
    that is the problem with auditors - they all have different opinions :)
  65. me too
  66. zakim-robot
    @zakim-robot
    Apr 18 20:29
    [quidkid] lol
  67. [lli] I have a question about aria-labelledby attribute. I added to the accordion panel and gave it a value of the id on the corresponding header. But the VioceOver and NVDA doesn’t seem to announce the relationship b/w the two. Is this correct? If so, what’s the benefit of adding this attribute?
  68. James Nurthen
    @jnurthen
    Apr 18 20:31
    It makes the region a landmark
  69. zakim-robot
    @zakim-robot
    Apr 18 20:37
    [quidkid] jnurthen so if auditors have different opinions and i need to sign off a form that says a website is WCAG AA 2.0 compliant….how does this work? maybe i dont need to do anything?
  70. James Nurthen
    @jnurthen
    Apr 18 20:37
    LOL - good question. I've been known to argue with auditors :)
  71. zakim-robot
    @zakim-robot
    Apr 18 20:37
    [quidkid] I have too. I literally copied and pasted the contrast font size rule back to them after they linked me to their website claiming my font sizes were not right
  72. [quidkid] and then they apologized (because otherwise, the client would need to find a different brand color)
  73. James Nurthen
    @jnurthen
    Apr 18 20:39
    i'd probably ask them if any of the proposed approaches would make them happy - as addign a region and label would be really easy
  74. zakim-robot
    @zakim-robot
    Apr 18 20:42
    [quidkid] good idea! thank you so much!!
  75. zakim-robot
    @zakim-robot
    Apr 18 21:58
    [backwardok] @lli aria-labelledby doesn’t identify two items as related - it provides a label to the component with that attribute
  76. [backwardok] so if you have <section aria-labeledby='foo' /> and <h1 id='foo'>Section Heading</h1>, then when you hit the section, it will read as a section with the label of “Section Heading”
  77. [emplums] Hi! Would anyone be up for upvoting this issue I made for a more accessible dropzone tool? :) okonet/react-dropzone#408
  78. [emplums] Also feel free to give me any feedback on my description of the issue/proposed solution
  79. [emplums] Looks like it’s pretty heavily used 290k downloads just in the last month