Archive index

A11y Slackers Gitter Channel Archive 25th of November 2015

What fresh hell is THIS now? - Patrick Lauke
  1. MichielBijl
    13:14
    Can a button that expands something be inside aria-expanded?
  2. MichielBijl
    13:17
    So something like: 
    <section aria-expanded="false">   <h2><button>Title for section</button></h2>   <div>     <p>Lot's o' text</p>   </div> </section>
  3. garcialo
    13:17
    Don't know, but I would expect it could. Like an expandable menu inside of another; for example inside of Firefox, expanding View and then expanding Toolbars.
  4. MichielBijl
    13:18
    This passes nu checker, but that doesn't say much in this case.
  5. MichielBijl
    13:18
    This would add information for AT and styling.
  6. MichielBijl
    13:19
    But feels kind of sketchy
  7. MichielBijl
    13:20
    Or not sketchy, but weird to have it like that. But it's the same as details/summary IIRC
  8. MichielBijl
    13:21
    Nope, I did not recall that correctly.
  9. MichielBijl
    13:21
    Back to the drawing board I guess.
  10. MichielBijl
    13:23

    I currently have: 

    <li>         <h2><button id="faq-button-01" aria-controls="faq-section-01" aria-expanded="false">Lorem ipsum.</button></h2>         <section id="faq-section-01" aria-expanded="false">           <p>Lorem ipsum dolor sit amet.</p>           <ul>             <li><a href="">Lorem ipsum dolor.</a></li>             <li><a href="">Tenetur, expedita enim!</a></li>             <li><a href="">Amet, tempora, provident?</a></li>             <li><a href="">Quisquam, obcaecati, voluptatem.</a></li>             <li><a href="">Ratione, tempora, consequatur!</a></li>           </ul>           <a href="">Lorem ipsum.</a>         </section>       </li>

    But that doesn't really work.

  11. MichielBijl
    13:24
    Because the section doesn't have a heading.
  12. MichielBijl
    13:24
    I can link them via aria-labelledby, but that feels like it would be verbose.
  13. MichielBijl
    13:25
    And aria-controls is only implemented in JAWS, but this is per spec anyway.
  14. MichielBijl
    13:27
    If the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author should reference the container by using the aria-controls attribute.
  15. stevefaulkner
    15:00
    "I mean that it shouldn't matter—information wise—whether it's on the button or on the thing that is expanded/collapsed" - @MichielBijl it does matter as the information about state is unlikely to be conveyed consistently when on a non focusable element
  16. powrsurg
    15:06
    I think confusion comes when you bring state into it. Is the state the button being pressed, or the expansion being true or false
  17. StommePoes
    15:14
    The vagueness of it all made me cut myself
  18. StommePoes
    15:15
    (literally: I was thinking too deeply about it while opening a can. : (
  19. MichielBijl
    15:17
    : (
  20. MichielBijl
    15:18
    @stevefaulkner yeah it would only have worked if controls was supported and didn't allow multiple values.
  21. powrsurg
    15:34
    how do you define "owned by" in the definition of aria-controls?
  22. MichielBijl
    16:36
    Either inside or via aria-owns would be my guess.
  23. LjWatson
    16:58
    Does anyone have any experience of the Windows 10 SDK?
  24. dylanb
    17:07
    @powrsurg aria-owns defines a relationship that should be hierarchical but is not hierarchical in the DOM in question
  25. dylanb
    17:08
    examples: sub-menus that are in a dis-connected DOM
  26. dylanb
    17:09
    tree structures that are disconnected etc.
  27. powrsurg
    17:09
    see, I would have said the element is the parent not inside of
  28. powrsurg
    17:09
    so conceptually what is the difference between owns and controls?
  29. LjWatson
    17:10
    @powrsurg this has some info on aria-owns http://tink.uk/using-the-aria-owns-attribute/
  30. MichielBijl
    17:10
    @powrsurg you are right, my bad
  31. LjWatson
    17:10
    The difference between -owns and -controls is that -owns creates a parent/child relationship where none exists, and -controls indicates that one thing controls the other.
  32. LjWatson
    17:11
    So A can control B, but A doesn't have to be a parent of B for that to be the case.
  33. powrsurg
    17:12
    Okay, that example helps
  34. powrsurg
    17:13
    thank you :)
  35. LjWatson
    17:14
    :)
  36. dylanb
    18:47
    @LjWatson you are so much more eloquent than I am
  37. LjWatson
    18:48
    Why thank you @dylanb - you dance better than I do though ;)
  38. dylanb
    18:51
    :blush:
  39. StommePoes
    18:57
    At 9pm UTC Molly Holzschag is going live to talk about Javascript accessibility stuff https://www.youtube.com/watch?v=EDVkc592v-o&feature=youtu.be