Archive index

A11y Slackers Gitter Channel Archive 18th of September 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Sep 18 03:05
    [caesar] Can somebody tell me if iOS VoiceOver ignoring aria-label for telephone number links is a feature or a bug? Pen: https://codepen.io/cyberseraphic/pen/JrYewV
  2. [caesar] iPhone 6S, iOS 10.2
  3. [svinkle] @caesar Not sure, but I’d guess a bug. I tried it and works as expected with Chrome + TalkBack.
  4. zakim-robot
    @zakim-robot
    Sep 18 03:16
    [caesar] Just upgrading to 10.3.3 and seeing if it still does it, otherwise will file a bug. Thanks for checking!
  5. zakim-robot
    @zakim-robot
    Sep 18 03:42
    [caesar] OK it's been fixed
  6. zakim-robot
    @zakim-robot
    Sep 18 15:01
    [ted_drake] @clairebones There’s a react channel that is worth joining.
  7. [clairebones] ah cool, thanks :)
  8. [rselzer] check out FEDs on Slack http://fedsonslack.com/ they have a ton of channels including a react one
  9. zakim-robot
    @zakim-robot
    Sep 18 15:08
    [clairebones] hah nice, I had no idea that existed! thank you!
  10. powrsurg
    @powrsurg
    Sep 18 15:29
    So we have an editor where people can drag and drop output and everything is saved using absolute positions. People rarely will drag and drop things in a linear fashion. Do we need to have it re-write the HTML so that it will always have the lowest top and then the lowest left (assuming US style) are at the highest point in the DOM and moves down accordingly?
  11. Or is there some ARIA setting I'm not aware of that may help with this.
  12. zakim-robot
    @zakim-robot
    Sep 18 15:30
    [tink] If you mean will the content produced in the editor need to be rewritten so the DOM order matches the visual layout, then I think the answer is yes.
  13. powrsurg
    @powrsurg
    Sep 18 15:32
    yeah, I expected that to be the case, but I wasn't sure if there was a way to clean that up.
  14. zakim-robot
    @zakim-robot
    Sep 18 15:47
    [car] @powrsurg There's aria-flowto: http://w3c.github.io/aria/aria/aria.html#aria-flowto
    But if I had my guess, I would think that it's likely not that well supported. Even if it was, I am thinking that you are probably better off just making the DOM order match the visual order. I can't even imagine the spaghetti that would get created if you aria-flowto'd all over the place. ;)
  15. [scottohara] i've only seen aria-flowto in a live app once, and I truly didn't know why it was there, as it merely matched the inherent tab order anyway
  16. powrsurg
    @powrsurg
    Sep 18 15:51
    Yeah, I figured as much
  17. zakim-robot
    @zakim-robot
    Sep 18 16:30
    [cmegown] question for y'all. what would you consider to be key development efforts for accessibility? i
  18. [cmegown] i've been telling my coworkers that writing semantic HTML and ensuring everything is usable with a keyboard is our primary concern for now, but i'm curious what everyone here thinks.
  19. [rselzer] 90% of it is definitely good logical semantic HTML. Definitely have your team thinking about the right way to use landmark tags like header, footer, main, aside, section. nav
  20. zakim-robot
    @zakim-robot
    Sep 18 16:35
    [blind3y3design] ^ This. Using the proper elements with landmark properties can save so much extra effort down the road.
  21. [blind3y3design] https://www.youtube.com/watch?v=CZGqnp06DnI
  22. [rselzer] aria-label and off screen text for context where necessary and proper action words on interactive items should also be kept in mind and eventually they'll become second nature
  23. [cmegown] @rselzer yes, and i've been trying to let everyone know that certain things aren't possible without some help from css and js
  24. [rselzer] also ya, they should watch all the allycasts vids. They're super helpful and not just for a11y stuff, lots of awesome Chrome / Dev Tools tips too!
  25. [cmegown] but it seems like a ton of easy/free #a11y wins come from semantic html
  26. [rselzer] definitely
  27. [rselzer] especially when you're using a lot of the new html5 tags
  28. [cmegown] thanks for the feedback! i'm scheduled to talk about accessibility during a lunch-n-learn coming up and i wanted to make sure i wasn't way off the mark or missing something crucial
  29. [blind3y3design] Just keep in mind, some of the HTML5 tags don't have full browser support (thanks IE/Edge).
  30. [blind3y3design] So you may have to polyfill them.
  31. [cmegown] @blind3y3design that's something we've run into as well. my approach was to explain why but let them know they did nothing wrong. believe it or not getting some developers to write semantic markup is like pulling teeth.
  32. [blind3y3design] @cmegown it's also worth having your teams (dev, design, ux) actually use the product with the assistive tech. Being forced to use a screenreader and/or only a keyboard will open a lot of peoples minds on how important it is.
  33. zakim-robot
    @zakim-robot
    Sep 18 16:41
    [cmegown] @blind3y3design that's definitely something i'm hoping to do as well. i need to find more time to do that myself, so it's going to be hard to do that for additional people :(
  34. [eric] I would also add that you can use semantic attributes as styling hooks, and use that to reinforce good markup habits
  35. [eric] especially if working from a living styleguide
  36. [cmegown] @eric excellent point
  37. [cmegown] "why is this component's styling broken?" well...you didn't follow the standardized markup from the styleguide
  38. [eric] bingo
  39. [cmegown] this is easier to control with things like angular/react/vue/etc but it's still useful to have it documented
  40. zakim-robot
    @zakim-robot
    Sep 18 17:06
    [quidkid] does anyone know on hand a <6minute vid that makes a compelling and engaging case for web accessibility? or maybe the first 6 minutes of something that leaves you inspired and wanting to learn more about web accessibility? thinking ted talk-esque but shorter
  41. [ghanek] WebAIM has some videos of users of AT trying to use web pages. They may be longer than your desired time slot, but you can always hit stop.
  42. zakim-robot
    @zakim-robot
    Sep 18 17:13
    [rselzer] try adding "empathy" / "empathetic" to your searches https://www.youtube.com/results?search_query=Empathy+and+Accessibility
  43. [rselzer] I like this one https://www.youtube.com/watch?v=oaHlifDrlG0 just over 2.5 mins
  44. zakim-robot
    @zakim-robot
    Sep 18 17:35
    [quidkid] ok now for a technical question.. so I’m trying to do an accessible website in react for the first time and am using react-aria-tabpanel which right now automatically shows the first tab. I want it to not show the first tab until focus is placed on the first tab but i also want the tab panel to disappear after focus leaves the tabpanel for a different element. is this appropriate for keyboard accessibility?
  45. [quidkid] the issue is that a tabpanel doesn’t exactly cover the behavior of the widget in the design but i’m trying to fit it in the tabpanel design pattern as close as I can because I’m not sure how else to call the accessibility shots on it. What should happen when there is a widget that the WAI aria design pattern doesn’t cover?
  46. zakim-robot
    @zakim-robot
    Sep 18 17:42
    [vyku] Android talkback shortcut says in edit field " move the focus to any characters and Lift your finger to type the focused key" this doesnt work for me all the time I have to double tap the character to type it. all my settings and keyboard are default Android native. Do I need to change any settings?
  47. zakim-robot
    @zakim-robot
    Sep 18 17:48
    [car] @quidkid Not sure if it's helpful, but there's a #react channel in this Slack.

  48. [svinkle] @quidkid To be quite honest, at this point it’s time to have a discussion with the designer. If a design calls for something so unique that there’s no coverage for it as a common widget, how are people expected to use it successfully? What you’re describing sound like it will lead to major usability issues, not just accessibility.

    If you’re able to, could you share some visuals in order to help illustrate what you’re trying to create?

  49. zakim-robot
    @zakim-robot
    Sep 18 18:01
    [quidkid] how do i make this accessible?
  50. [quidkid] exhibita.jpg
  51. [quidkid] @svinkle so sorry that was out of order! so i can’t show the real design but hope this works.
  52. [quidkid] so exhibita.jpg is what it looks like to start. but then the button row, when you click on it, it opens what looks like a modal but it’s not because the navlinks are supposed to be clickable.
  53. [ugi] @quidkid that kind of looks like a non-modal dialog to me..
  54. [svinkle] Agreed with @ugi; there’s a close control, and the new content appears overtop existing page content; treat as a modal.
  55. [svinkle] @quidkid Thanks for the quick whiteboard illustrations! Very helpful. :)
  56. [quidkid] see we tried doing a modal at first, but with a modal, you can’t click on the stuff outside of that unless you hit close. you’re supposed to also be able to click on any of the bottom buttons and the navlinks too
  57. zakim-robot
    @zakim-robot
    Sep 18 18:06
    [quidkid] @ugi i’ll look into a non-modal dialog.. maybe that what this is
  58. [ugi] https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#dialog_nonmodal
  59. [svinkle] @quidkid Does the new content actually appear overtop, or does it replace the current content completely? In the case of the latter, perhaps you could treat this as a tab widget, shifting focus to the top of the content container. However, the close control could be a bit confusing.
  60. [quidkid] i figured a tabpanel would’ve been better because the bottom buttons act as tabs in a way
  61. [quidkid] right now it appears on top
  62. [quidkid] because the idea is if you hit close, you will get back to the original page which doesn’t belong to any tab
  63. [quidkid] i was thinking of having a tab panel overlay on that first view to maintain being able to leave and focus on say the nav links without having to close the panel
  64. [quidkid] and the other thing with the modal is that i wouldn’t be able to navigate using the bottom row of buttons until I closed it right?
  65. zakim-robot
    @zakim-robot
    Sep 18 18:12
    [quidkid] thanks @ugi i think it is a dialog non modal but then if so, would i need to make all the bottom row as buttons not tabs?
  66. [quidkid] right now with the tab panel in place, it’s nice that when you tab to the first tab, you can arrow key through the rest.
  67. [quidkid] @svinkle and @ugi and thank you guys so much for your responses!! greatly appreciated
  68. zakim-robot
    @zakim-robot
    Sep 18 18:25
    [quidkid] OR what if those buttons at the button link to a new ‘page’ - like another route. and that new page has the tab panel and instead of a close button, we have a return button that would bring it back to the main page?
  69. [quidkid] lol this is confusing since do we technically have pages in React? but i feel like treating this as a separate page would be easier. plus we could still have that arrow key tab functionality.
  70. zakim-robot
    @zakim-robot
    Sep 18 19:00
    [svinkle] This is pretty cool!
    https://twitter.com/github/status/909852766360657920
  71. [svinkle] Though I don’t know of any projects that use boards to test this out.
  72. [eric] fires up a dummy repo
  73. zakim-robot
    @zakim-robot
    Sep 18 19:05
    [eric] https://github.com/ericwbailey/project-board-a11y-test/projects/1
  74. [eric] seems like it doesn’t work in Fullscreen mode
  75. [svinkle] It works pretty good, though the announcements could be improved. I’m going to suggest they check out Dragon-Drop; that project has killer screen reader announcements. https://github.com/schne324/dragon-drop
  76. zakim-robot
    @zakim-robot
    Sep 18 19:12
    [svinkle] @eric Is it just me or does your project board not have keyboard support? It’s working on mine over at https://github.com/svinkle/my-test-app/projects/1
  77. [eric] I was able to keyboard through mine, wonder if the update is still propagating
  78. [svinkle] Could be.
  79. [svinkle] Actually, it’s probably a permission thing; why would some rando be able to mess with your project board? =D
  80. [ghanek] "open source" ? :smiley_cat:
  81. [eric] oh, good point!
  82. [eric] @svinkle gave you access if you want to try it out
  83. [svinkle] @eric Yup, works now.