Archive index

A11y Slackers Gitter Channel Archive 21st of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. Jonathan Neal
    @jonathantneal
    Mar 21 00:29
    I’ve often interpretted <nav> and role="navigation" to mean exclusively non-post navigation to fragments within the current document or to related documents.
  2. Is that how others have treated this? For instance, I would not describe a list of share buttons as navigation.
  3. zakim-robot
    @zakim-robot
    Mar 21 00:31
    [karlgroves] Jonathan: I would definitely agree with you.
  4. Jonathan Neal
    @jonathantneal
    Mar 21 00:41
    Hmm. Would share buttons be more a group or a menu?
  5. zakim-robot
    @zakim-robot
    Mar 21 00:42
    [caesar] Just curious: what's to be gained by giving them a semantic meaning together?
  6. Jonathan Neal
    @jonathantneal
    Mar 21 00:44
    I think it would be helpful to identify / label share links as a collection.
  7. That way one knows what that part of the page is about and can either engage or skip over the whole thing.
  8. Those are just my own motivations. I find the expectation of share buttons from content providers’ perspectives to be very colloquial. For instance, they presume visitors know what each of them mean, that they are relevant to visitors, and that visitors know what they’ll do. I never use them, myself, because I don’t know whether they are sharing the site, the page, something else, or just taking me to a social media page for the topic, site, or greater organization.
  9. Jonathan Neal
    @jonathantneal
    Mar 21 00:53
    @caesar, (how) do you group them?
  10. zakim-robot
    @zakim-robot
    Mar 21 01:14
    [caesar] Mostly using headings.
  11. James Nurthen
    @jnurthen
    Mar 21 01:37
    I'd often make the share buttons a toolbar so they are only a single tab stop (if I have control over them that is)
  12. zakim-robot
    @zakim-robot
    Mar 21 10:13
    [spell] Hey, gang! Some advice please! I have a design here that is an accordion interface on mobile and a tab interface on desktop. For tabs, I would use a ARIA specific role, like tablist, etc., but what then of mobile where it is no longer a tab UI? Should I be changing/removing ARIA roles and related attributes based on screen size or is there a middle ground I should be striving for here? ARIA that is acceptable no matter the type of interface. Thanks in advance! Love this place!
  13. zakim-robot
    @zakim-robot
    Mar 21 10:22
    [alastc] @spell Might be best to ask on the aria-patterns channel? I’m trying to think of what harm would come from using the tab-pattern on mobile. Probably not much, so long as someone wasn’t switching between them during the same session?
  14. [alastc] I guess the ordering could change between tabs & accordion? For tabs you (hopefully) expect to select, then continue past the tabs to get to the content. With an accordion, the content would be right underneath that ‘tab’.
  15. Jonathan Neal
    @jonathantneal
    Mar 21 13:01
    @jnurthen, that would be an advantage, but will tab skip over it, even if there are button elements inside?
  16. powrsurg
    @powrsurg
    Mar 21 13:32
    Is it bad that my co-worker asked me to review an interface and I responded with "You need to make it tabbable" to the tune of Bicycle Race from Queen?
  17. Stephanie Jagl-Posch
    @tiffy23
    Mar 21 13:45
    Is it bad that my co-worker asked me to review an interface and I responded with "You need to make it tabbable" to the tune of Bicycle Race from Queen?
    :grinning:
  18. zakim-robot
    @zakim-robot
    Mar 21 13:55
    [scottohara] more feedback should be given in the form of song. so no. you did the right thing
  19. Jonathan Neal
    @jonathantneal
    Mar 21 14:00
    @powrsurg, only if you tell us what the second line in the song ended up being.
  20. powrsurg
    @powrsurg
    Mar 21 15:13
    It kinda fell apart after that. I tried to say "You say text of black I say on white" but I fumbled it from there. My ad-lib-ibility is not the strongest
  21. zakim-robot
    @zakim-robot
    Mar 21 15:22
    [mikey] I know statistics on users are hard to come by for numerous reasons but does anyone have any generalized numbers for US or Worldwide on AT users?
  22. James Nurthen
    @jnurthen
    Mar 21 15:27
    @jonathantneal yes. Need to use one of the aria focus management techniques. See http://w3c.github.io/aria-practices/#kbd_general_within
  23. also look at the toolbar pattern - http://w3c.github.io/aria-practices/#toolbar
  24. zakim-robot
    @zakim-robot
    Mar 21 15:36
    [car] @mikey Here's some stats from AT surveys:
    http://webaim.org/projects/screenreadersurvey6/
    https://accessibility.blog.gov.uk/2016/11/01/results-of-the-2016-gov-uk-assistive-technology-survey/
    http://www.heydonworks.com/article/responses-to-the-screen-reader-strategy-survey
  25. zakim-robot
    @zakim-robot
    Mar 21 15:47
    [enwin] Hi everyone, I'm having a hard time deciding the dom structure for this checkbox. What should I put in the label ?
  26. [enwin] what to label
  27. [enwin] I'm pretty sure I'll have to make everything clickable to check the input, except the link, but wouldn't it be to much to read for ATs?
  28. [enwin] I also got a variant with a picture inside it, I'm planing on using alt="" and aria-hidden="true"
  29. zakim-robot
    @zakim-robot
    Mar 21 15:53
    [tink] @enwin Looks like that was an image? I use a screen reader, but if you can describe the scenario I'll try to help if I can.
  30. [enwin] Sorry about that. I have a styled checkbox with a multiline label which says "skincare - UV essential - spf 50" on the first line and then "Multi-protection daily defense sunscreen anti-pollution broad spectrum SPF 50"
  31. [enwin] and finaly a link to view details
  32. [enwin] I'm wondering if putting everything in the label is too much or not
  33. [tink] I'd probably make the first bit of text the label, hook the next bit to the checkbox using aria-describedby, and put the link outside and improve the link text to make it clear what details you'd be viewing.
  34. [conley] @tink +1
  35. [enwin] I'll probably have an aria-label on the link to add more context
  36. [enwin] both the label and the aria-describedby will be vocalized
  37. [conley] @enwin, yes add something like "view more details about this product (or product name)"
  38. zakim-robot
    @zakim-robot
    Mar 21 16:01
    [enwin] great thanks!
  39. [tink] The label and -describedby will both be announced, yes.
  40. [tink] But under the hood they'll be different things: the label is the checkbox's accessible name, and -describedby is the checkbox's accessible description.
  41. [tink] So for example in iOS i hints are enabled for VoiceOver, there will be a slight pause between the label being announced and the -describedby content.
  42. [tink] Also, bear in mind that aria-label on the link will override the native link text, not extend it.
  43. [enwin] I was aware of the behaviour for aria-label but forgot the label being the checkbox's accessible name
  44. [enwin] thanks for the update :)
  45. zakim-robot
    @zakim-robot
    Mar 21 16:06
    [tink] NP :)
  46. [enwin] I'll have to add some javascript magic to make the aria-describedby linked element toggle the checkbox for mouse/touch I guess
  47. zakim-robot
    @zakim-robot
    Mar 21 16:13
    [tink] Does it visually look like it's part of the label?
  48. James Nurthen
    @jnurthen
    Mar 21 16:19
    IMO no - I wouldn't expect the checkbox to toggle if I clicked the description
  49. zakim-robot
    @zakim-robot
    Mar 21 16:21
    [conley] Yeah @enwin, best not to mess too much with the semantics, user are accustomed to standard operability
  50. [conley] Good intentions but it may cause confusion
  51. [enwin] I'll do my best to convince the client and the project manager thats a bad idea then :)
  52. [conley] a missed hit on the view details link could trigger the checkbox
  53. [conley] ^^ theres ur excuse ;)
  54. [enwin] +1
  55. [conley] wrapping the input in the label/for="#"id" enhances the hit area anyway
  56. zakim-robot
    @zakim-robot
    Mar 21 16:28

    [karlgroves] > wrapping the input in the label/for="#"id" increases the hit area anyway

    Merely having a proper label does the same thing

  57. [karlgroves] http://output.jsbin.com/xutayez

    Click on the label text and not the checkbox itself

  58. zakim-robot
    @zakim-robot
    Mar 21 16:37
    [conley] @karlgroves yep, thus the mention /for="#id"
  59. [conley] or I should have said "or for="#id" "
  60. [karlgroves] wrapping the input in the label isn’t necessary, though
  61. Jonathan Neal
    @jonathantneal
    Mar 21 16:58
    Thanks @jnurthen, delayed, but thanks :)
  62. zakim-robot
    @zakim-robot
    Mar 21 17:44
    [sri429] @tink I always had a doubt. Is there a way for screen reader user to disable Screen reader from reading aria-described-by and titles?https://web-a11y.slack.com/archives/C042TSFGN/p1490112129472081
  63. [sri429] I vaguely remember that once the screen reader user is used to a page they disable aria-describe-by and avoid too much noise. Not sure where i read this but now i don't find that link. Tried searching a way to disable aria-described-by from jaws but never succeeded
  64. zakim-robot
    @zakim-robot
    Mar 21 17:56
    [sri429] https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/ Not sure how true this is in 2017, But label for is always robust
  65. James Nurthen
    @jnurthen
    Mar 21 18:21
    @sri429 I forget which verbosity level JAWS stops reading descriptions but certainly at advanced they are not read. IMO that is absolutely fine in this case though - the description is still available following the checkbox in the content.
  66. This is the main reason I fought to get aria-errormessage in the ARIA 1.1 spec. Error messages are not descriptions as they must always be read - whatever verbosity the user has set in their screen reader
  67. zakim-robot
    @zakim-robot
    Mar 21 18:36
    [sri429] thanks a lot @jamesn . I was looking for this information from long.
  68. zakim-robot
    @zakim-robot
    Mar 21 21:20
    [ted_drake] @heydon does a great job of explaining the switch button. I’ve seen so many good examples with radio buttons that I hadn’t considered the obvious button option. http://inclusive-components.club/toggle-button/