Archive index

A11y Slackers Gitter Channel Archive 5th of July 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jul 05 01:26
    [jpdevries] I usually use <dd> and <dt> for things like questions answers, and FAQs
  2. zakim-robot
    @zakim-robot
    Jul 05 10:39
    [michiel] Alternatively: an accordion widget.
  3. [michiel] Or plain paragraphs as long as you clearly indicate which is the question and which is the answer.
  4. [michiel] The visual representation on formula1.com interview transcripts is quite clear.
  5. [michiel] For example: https://www.formula1.com/en/latest/interviews/2017/6/chasing-lady-luck---exclusive-felipe-massa-q-a.html
  6. zakim-robot
    @zakim-robot
    Jul 05 10:48
    [michiel] If the questions each represent a different topic or subject you could go with headings. But keep in mind that no one wants 50 headings on a page.
  7. [michiel] Or rather than an actual number: an overload of headings doesn’t do anyone any good.
  8. zakim-robot
    @zakim-robot
    Jul 05 10:57
    [michiel] Although that’s purely based on my own experience so forget the thing about too many headings.
  9. zakim-robot
    @zakim-robot
    Jul 05 12:18
    [thatemil] Q: If there are multiple links with the same link text on the same page (e.g. “show”), will aria-labelledby generally override the link text completely in screen readers, or will it be read concatenate like “The label: the link text”?
  10. LauraOU
    @LauraOU
    Jul 05 12:38
    @zakim-robot The NVDA screen reader only reads "blank" on all of the entries on that calendar example
  11. zakim-robot
    @zakim-robot
    Jul 05 12:54
    [tink] @thatemil aria-labelledby (and aria-label) will replace the original link text completely.
  12. [thatemil] @tink Thanks! Also: that’s what I was afraid of. :(
  13. [thatemil] Hidden text it is, then.
  14. [tink] Why?
  15. [thatemil] Would have been the easy way out for the design I’m trying to implement.
  16. [tink] Suggest using aria-label instead of hidden text.
  17. [thatemil] What would you say are the benefits of aria-label vs hidden text? (the reason I normally use hidden text is because I’ve heard before that aria-label is less well-supported)
  18. LauraOU
    @LauraOU
    Jul 05 13:57
    @zakim-robot aria-label tests.. some may be out of date https://dequeuniversity.com/testsuite/aria/aria-label-aria-labelledby/results/
  19. @zakim-robot test of click-here links with aria-label https://www.powermapper.com/tests/screen-readers/labelling/a-aria-label/
  20. zakim-robot
    @zakim-robot
    Jul 05 15:33
    [tink] Sorry, was distracted a while.
  21. [tink] I've just tested <a href="/" aria-label="foo">Some link text</a>...
  22. [tink] The aria-label is announced by NVDA in Chrome, FF, Edge and IE, by Jaws in Chrome, FF, and IE, and by VO in Safari on both iOS and MacOS. Don't have an Android device to hand to check
  23. [tink] But it looks as though support is pretty comprehensive at this time.
  24. [conley] @cielt I'll check out the PR you have in for Slick
  25. LauraOU
    @LauraOU
    Jul 05 15:38
    @zakim-robot yea, it looked like NVDA was a holdout but is working now.
  26. zakim-robot
    @zakim-robot
    Jul 05 15:38
    [tink] \o/
  27. [conley] my dev team tried making it a bit more accessible last year but not one paid attention, specifically the use of aria-live, it was conflicting with parent live regions (angular web app)
  28. [tink] @thatemil aria-label is the more elegant solution I think. It's well supported, targets the group of users who need to explicit link text, and requires less spurious code.
  29. [thatemil] @tink Yes, thanks - the links posted earlier seems to hint that support and interoperability has gotten better in the last few years. Might use it for this project. Cheers!
  30. zakim-robot
    @zakim-robot
    Jul 05 15:53
    [cielt] @conley: glad to hear about your efforts. i believe the interest is there but so far some attempts to layer on a11y have been well-meaning but not solidly tested. hoping a number of folks can reach consensus on what would make for some kind of unequivocal (however small) improvements but if carousels just are at odds with a11y, that’d be a help to know, too
  31. [conley] Yeah, I personally push back on design/UX when they proposed carousels for projects
  32. [conley] but the modifications you've made already make Slick more useable from a screen reader perspective
  33. [tink] +1 on pushing back on carousels in general http://shouldiuseacarousel.com/
  34. zakim-robot
    @zakim-robot
    Jul 05 16:30
    [cielt] :arrow_up: agreed that’s probably the way to go. just so much buy-in from folks not yet thinking in a11y terms. we will hopefully revamp it out of the next version of our product (thinking face emoji) :thought_balloon:
  35. zakim-robot
    @zakim-robot
    Jul 05 17:02
    [ugi] Do you think it is ok to use aria-expanded on a native radio button, or any <input> element in general). I’m designing a form similar to gov.uk’s “Conditionally revealing content” example here: http://govuk-elements.herokuapp.com/form-elements/#form-toggle-content . Once a radio is selected it reveals a new text area beneath it. W3C spec doesn’t seem to allow aria-expanded on an input unless it has a role=“combobox” or similar.
  36. zakim-robot
    @zakim-robot
    Jul 05 17:45
    [stevenlambert] i have a menu button role=menu that on mobile spawns a [modal bottom sheet](https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-persistent-bottom-sheets) and on desktop just is a normal dropdown? would you wrap the role=menu inside a true dialog on mobile (role=dialog) and not when on desktop?
  37. zakim-robot
    @zakim-robot
    Jul 05 20:34
    [car] @thatemil: In case it's helpful, you can concatenate aria-labelledby text by giving it a space-separated list of ids. For example, to get “The label: the link text” use aria-labelledby="id-of-label id-of-link". See: https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html
  38. zakim-robot
    @zakim-robot
    Jul 05 23:58
    [indrekpaas] Hi folks! Quick ARIA question regarding tables in emails: If a table has role="presentation", does that mean the nested tbody, tr and td elements remain their semantics?
  39. [indrekpaas] Do all of the table structural elements need to have role="presentation" applied upon?
  40. [indrekpaas] Cheers!