Archive index

A11y Slackers Gitter Channel Archive 4th of January 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jan 04 01:42
    [cameron] Hey friends, anyone have a good browser extension for showing alt text visually?
  2. zakim-robot
    @zakim-robot
    Jan 04 02:24
    [alice] hah! I have a busted one, which I am meant to fix
  3. [alice] Would be interested to hear if you find a good one, and what you plan to do with it
  4. Srinivas Yedhuri
    @sri429
    Jan 04 03:53
    Hey. Does role application make screen readers read hidden content? Role application to a parent div and Jaws+IE reads all the content which is hidden inside that div
  5. is this expected?
  6. Srinivas Yedhuri
    @sri429
    Jan 04 06:10
    <div role="application" tabindex="0"> <div> This is a control </div> <div style="display:none;visibility:hidden; width:0; height:0;" aria-hidden="true" aria-disabled="true" hidden> this is hidden. </div> </div>
  7. ` `` <div role="application" tabindex="0">
    <div>
    This is a control
    </div>
    <div style="display:none;visibility:hidden; width:0; height:0;" aria-hidden="true" aria-disabled="true" hidden>
    this is hidden.
    </div>
    </div>
    ```
  8. Ooops sorry for spamming
  9. Srinivas Yedhuri
    @sri429
    Jan 04 06:18
    tried display non visibility everything but nothing helps..
  10. James Nurthen
    @jnurthen
    Jan 04 06:21
    Role application requires aria-label or aria-labelledby
  11. Mallory
    @StommePoes
    Jan 04 10:11
    In the meantime you'd need to check with some other browsers and SRs to see if the hidden stuff being read is a JAWS thing or an IE thing. I can't see how it would be an app role thing but maybe the lack of a label is causing the AT to sniff?
  12. zakim-robot
    @zakim-robot
    Jan 04 10:31
    [tink] @StommePoes can I help with the Jaws/IE problem? Only caught your last msg, no don't know who posted the original query/what it was.
  13. Mallory
    @StommePoes
    Jan 04 11:10
    @tink sri429 posted the original message, he has an application role and a bunch of display:none, aria-hidden, everything with sugar on top on part of that element and he's hearing it read out
  14. zakim-robot
    @zakim-robot
    Jan 04 11:12
    [tink] Thanks StommePoes. @sri429 do you have code or an example anywhere?
  15. Mallory
    @StommePoes
    Jan 04 11:13
    @tink some was posted but not sure how well it makes it through irc
  16. my pidgin broke, doesn't show messages from gitter anymore :(
  17. <div role="application" tabindex="0">
    <div>
    This is a control
    </div>
    <div style="display:none;visibility:hidden; width:0; height:0;" aria-hidden="true" aria-disabled="true" hidden>
    this is hidden.
    </div>
    </div>
  18. jnurthen mentioned it needs a label/name, might be why the text "this is hidden" is being read out, maybe some DOM sniffing happening because the code's not quite right.
  19. Srinivas Yedhuri
    @sri429
    Jan 04 11:21
    Hi did little bit more investigation and as Mallory pointed out it has nothing to do with role="application"
  20. <div id="outer" tabindex="0"> <div tabindex="0"> This is a control </div> <div style="display:none;visibility:hidden; width:0; height:0;" aria-hidden="true" aria-disabled="true" hidden> this is hidden. </div> </div>
  21. any div which has a tabindex="0" and not having a aria-label the accessible name is calculated to the entire content inside it and it include even nodes with display none
  22. mikaelR
    @cr2a-graphique
    Jan 04 12:35
    hello there
  23. zakim-robot
    @zakim-robot
    Jan 04 12:35
    [tink] Hello @cr2a-graphique
  24. zakim-robot
    @zakim-robot
    Jan 04 12:46
    [tink] @sri429 I can't replicate that behaviour with Jaws 18 in any browser (have tried FF, Chrome, IE and Vivaldi).
  25. [tink] Test code: <div tabindex="0"><p>This</p> <p style="display:none;">and that</p></div>
  26. zakim-robot
    @zakim-robot
    Jan 04 12:55
    [tink] The nested tabindex="0" is causing a tabbing issue with Jaws (in all browsers) though.
  27. zakim-robot
    @zakim-robot
    Jan 04 13:52
    [mgifford] Have other projects tried this https://drupal.psu.edu/blog/post/increasing-accessibility-empathy-through-simulation
  28. zakim-robot
    @zakim-robot
    Jan 04 17:22
    [melsumner] if you have display: none it removes it from the DOM and aria-hidden isn't required, I thought?
  29. zakim-robot
    @zakim-robot
    Jan 04 18:03
    [michiel] melsumner: correct
  30. zakim-robot
    @zakim-robot
    Jan 04 18:58
    [marcysutton] This seems to come up quite often in here with regards to tabindex="0" not being paired with an interactive role like button. Without the interactive role you're effectively making it possible to land on a grouping role (in the case of the DIV), it is surprising the display: none isn't being taken into account but I'd argue nesting tabindex="0" is bad for users anyway
  31. [marcysutton] You can't nest buttons, so it doesn't make much sense to nest tabindex="0" either. Maybe that outer element should use tabindex="-1" if it needs to take focus programmatically for some reason?
  32. [conley] agreed, messing with tabIndex isn't ideal
  33. [marcysutton] Note that will still read the content of the DIV since it doesn't have the interactive role to make accessible name calculation work
  34. Mallory
    @StommePoes
    Jan 04 19:50
    I'm still confused how it works with details/summary with focusables inside (or, as our QA guy in his new README, nested details/summaries). Orca+FF seemed pretty ok with it, but it seems the same paradigm as <div role=button tabindex=0>stuff... <a href=foo>more stuff</a> stuff...</div>
  35. zakim-robot
    @zakim-robot
    Jan 04 21:14
    [marcysutton] ooh that is a good point about details/summary. I remember that coming up recently. Maybe @stevef has some advice for nested focusable support?