Archive index

A11y Slackers Gitter Channel Archive 17th of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Mar 17 15:10
    [bbuechel] Does anyone know of an example site that you would say “now that site is done right when it comes to a11y! That one should be the gold standard!!”. Is there any kind of “top 10” list out there?
  2. zakim-robot
    @zakim-robot
    Mar 17 15:16
    [jdan] @bbuechel I always look at gov.uk for inspiration
  3. [jdan] including taking screenshots of things like focus indicators for our design team
  4. zakim-robot
    @zakim-robot
    Mar 17 15:40
    [marcysutton] You could check out my blog http://a11ywins.tumblr.com, not exactly a top 10 but I try to catalog good things (also open to submissions)
  5. [marcysutton] I still love Simply Accessible's website http://simplyaccessible.com
  6. [marcysutton] I still love Simply Accessible's website http://simplyaccessible.com
  7. zakim-robot
    @zakim-robot
    Mar 17 15:46
    [canfie1d] This is a neat package and potential replacement/upgrade for react-onclickoutside https://github.com/aweary/react-perimeter
  8. [canfie1d] In the example they are using it to prefetch data as soon as your pointer enters an area. So smart
  9. zakim-robot
    @zakim-robot
    Mar 17 15:56
    [car] @feather ^ :)
  10. zakim-robot
    @zakim-robot
    Mar 17 17:27
    [karlgroves] Any higher ed a11y folks here? If so, can you DM me?
  11. zakim-robot
    @zakim-robot
    Mar 17 17:42
    [ira] This may be a silly question but I'm trying to think of how to word it to the QA members of my team: In VoiceOver when navigating a web page, I noticed that you can press down/up arrows without a modifier (this may be a error in my settings?) and it goes through the elements in their order. This is causing "New line" to be announced as well as some elements I've added a visually hidden class to. Is this an incorrect way to navigate the page? What are the up and down arrows doing in this case?
  12. zakim-robot
    @zakim-robot
    Mar 17 17:47
    [marcysutton] I've heard that "newline" announcement before, it's really odd when it appears. Caused by extra line breaks, extra tabindex on elements that don't need it (like INPUT) or even CSS pseudo content at times.
    In my experience the arrow keys navigate through content depending on the specificity level you've zoomed into, i.e. overall content vs. individual words or letters. Interactive content requires modifiers to navigate usually. Here's a video I did on navigating Voiceover: https://egghead.io/lessons/tools-using-the-voiceover-screen-reader-to-test-for-accessibility
  13. zakim-robot
    @zakim-robot
    Mar 17 18:34
    [backwardok] is it still considered best practice to use F6 to get out of a non modal dialog? and/or something that’s broadly known?
  14. [backwardok] we have a lot of these menu looking items that aren’t quite menus that i would classify as non modal dialogs
  15. zakim-robot
    @zakim-robot
    Mar 17 18:39
    [backwardok] and it seems like trapping focus and only using F6 to get out isn't super obvious
  16. [cmegown] i feel like the escape key would make more sense there
  17. [backwardok] but wouldn’t the escape key just close it?
  18. [backwardok] the idea would be that it wouldn’t necessarily close if you were to move somewhere else on the page because it’s non modal
  19. [cmegown] hmm not sure, i assumed you meant to close it when you said "to get out of a non modal dialog"
  20. zakim-robot
    @zakim-robot
    Mar 17 18:44
    [backwardok] essentially to access content beyond it
  21. [backwardok] say the non modal is open and i want to leave it open but access other parts of the page
  22. [backwardok] perhaps the non modal is providing information that’s still useful and i don’t want to close it yet
  23. [conley] I would say that's an anti-pattern unless the modal's markup resides in the reading order of the page
  24. [backwardok] i think part of the complication is it’s not really a dialog in the traditional sense
  25. [backwardok] it’s more like an interactive menu
  26. [conley] my assumption is this is something like a tooltip?
  27. [backwardok] yep
  28. [backwardok] kinda
  29. [backwardok] except that you can interact inside it
  30. [conley] http://accessibility.athena-ict.com/aria/examples/tooltip.shtml
  31. [backwardok] >The tooltip never receives focus. Focus stays on the textbox
  32. zakim-robot
    @zakim-robot
    Mar 17 18:49
    [backwardok] as the UI piece we’re making is more of an interactive menu, that’s not something that a tooltip would be sufficient for
  33. [backwardok] tooltips, if i understand correctly, are for information only
  34. [conley] does the menu change the content on the page?
  35. [backwardok] in general i can
  36. [backwardok] or it can be part of a form
  37. [backwardok] Pasted image at 2017-03-17, 11:50 AM
  38. [backwardok] alt text on image: menu(ish) with a dropdown “dialog” that’s interactive, that allows you to set more information
  39. [backwardok] confirming within that menu/dialog sets the overall field
  40. zakim-robot
    @zakim-robot
    Mar 17 18:59
    [conley] you might want to check out the flyout example here
  41. [conley] http://ianmcburnie.github.io/mindpatterns/disclosure/flyout/index.html
  42. zakim-robot
    @zakim-robot
    Mar 17 19:51
    [backwardok] oooh thanks @conley !
  43. [conley] thumbsup emoji
  44. zakim-robot
    @zakim-robot
    Mar 17 20:30
    [car] @backwardok Just fyi, F6 is an ancient way of navigating larger areas ("panels", say) of some desktop apps. Kind of like a "meta tab key". It is still used by some Windows desktop apps. If you happen to have Windows 7 handy (I don't know if it's the same in Windows 10) you can see this by opening a File Explorer and selecting a random file in a random folder in the file system. Then F6 will navigate from the file system tree on the left, to the contents of the selected folder in the center table, to the table header filter, to the preview pane on the right, to the address bar, to the ribbon, and back around again. I seem to recall that F6 also would navigate to/from non-modal dialogs (like a find/replace, perhaps) but I can't find an example at the moment.
  45. [car] Actually, I spoke too soon. I did find a place where F6 navigates out of a non-modal dialog-ish "panel": MS Word. Open a doc in Word, and type Ctrl+F to open the "Navigation" panel on the left. Then start typing F6 and see that it takes you through a "focus ring" that includes the panel, the doc contents, the ribbon, and the status bar at the bottom. The tab key navigates within these areas. So it is still there in desktop apps.
  46. zakim-robot
    @zakim-robot
    Mar 17 20:46
    [car] On the web, F6 does a similar thing (in Windows browsers - not sure about Mac). It navigates to the address bar, the bookmarks bar or side panel, and the document body, possibly other things depending on browser and whether history/bookmarks panel is open. It would not be entirely crazy to also have it navigate through a non-modal panel/dialog on the page as well. Question is, how many users know about it? I know of at least one blind user who knows about it... he is the one who mentioned it to me, a while back. Anyhow, just giving you info. :) That flyout example looks good, but it doesn't quite do what you wanted because the flyout closes when you tab out of it. (Of course, you can change that <g>).
  47. [car] ^ @backwardok
  48. zakim-robot
    @zakim-robot
    Mar 17 20:51
    [sitaggart] Part of knowing it, is documenting it well. Microsoft uses a modified F6 in it's new product Teams, and provides excellent docs for it. https://support.office.com/en-us/article/Keyboard-shortcuts-for-Microsoft-Teams-2e8e2a70-e8d8-4a19-949b-4c36dd5292d2?ui=en-US&rs=en-US&ad=US#PickTab=Mac
  49. [backwardok] thanks for all the info! :)
  50. zakim-robot
    @zakim-robot
    Mar 17 21:48
    [marcysutton] And that is why I love this group <3 y'all are so helpful.
  51. James Nurthen
    @jnurthen
    Mar 17 22:01
    @alice are you around? I have a question about aria-owns and the accessible name calculation. I've found that chrome includes aria-owns in the accessible name calculation whereas FF does not. Reading the spec I don't think it should include it . I'll file a bug against chrome - but wondered if this was a deliberate decision - in which case I'll file a bug against the aria spec so they can clarify.
  52. James Nurthen
    @jnurthen
    Mar 17 22:19
    @alice logged https://bugs.chromium.org/p/chromium/issues/detail?id=702811