Archive index

A11y Slackers Gitter Channel Archive 30th of November 2016

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    @stevefaulkner
    Nov 30 09:45
    @hmig thats sounds fine, important this is to ensure that all content is contained within 'landmark' elements.
  2. Martin Držka
    @martindrzka_twitter
    Nov 30 13:02
    Hi is there any way how to markup date to be spoken as date (not a single digits) ... trying unsuccessfully <time datetime="2009-11-13">13. 11. 2009</time> (Chrome MacOS - VO)
  3. zakim-robot
    @zakim-robot
    Nov 30 15:21
    [mgifford] Just saw this & happy that #drupal was mentioned https://now.uiowa.edu/2016/11/ui-tops-in-university-website-accessibility
  4. zakim-robot
    @zakim-robot
    Nov 30 15:34
    [michiel] martindrzka: what is you want to achieve?
  5. [wesruv] noice
  6. [wesruv] mgifford++
  7. [mgifford] Thanks!
  8. Martin Držka
    @martindrzka_twitter
    Nov 30 15:41
    @zakim-robot pronounce date in SR in human redable form, actually it reads only digits "one three one one two zero zero nine " (inner markup 13. 11. 2009)
  9. zakim-robot
    @zakim-robot
    Nov 30 16:24
    [caitlyn] :wave: I'm in the WebAIM training day 2 and we've been talking about shared resources, so I looked to see if there was a slack a11y community and I'm stoked that I could join this! Looking forward to our chats.
  10. [karlgroves] Welcome!
  11. [caitlyn] thanks @karlgroves!
  12. zakim-robot
    @zakim-robot
    Nov 30 17:02
    [michiel] martindrzka_twitter: I don’t think you need to do that, SR users understand various date notations too.
  13. James Nurthen
    @jnurthen
    Nov 30 17:02
    I'm guessing that is a date format that the mac doesn't recognise for the locale that your page is in. Most screen readers (although I have little experience with VO on Mac) will read dates in a human readable form. What language is your page in?
  14. Mallory
    @StommePoes
    Nov 30 17:27
    To get back to the right-click on the web bit... https://twitter.com/camlorn38/status/804006170436505600
  15. None of my screen readers read dates particularly human-like, especially years are often read as something like one thousand nine hundred seventy nine.
  16. "aug 18 1999" just needs the user to spell it once to know what it is. And that's what a lot of people do. Once they grok that these are dates on the page, they move on.
  17. James Nurthen
    @jnurthen
    Nov 30 17:39
    My version of JAWS (with my current synthesizer) will read a year as "two thousand and sixteen" if the date seperator is a "/" but not if the date seperator is a "-". I didn't test with others.
  18. IMO if you present the date in a format that the user is used to having dates written in then it doesn't really matter if the screen reader reads it correctly as the user will be used to how their screen reader speaks dates
  19. Mallory
    @StommePoes
    Nov 30 17:58
    Yeah, my point exactly pretty much-- when in doubt, experienced users will spell stuff out and check what they just heard. Date formats are pretty generic
  20. stevefaulkner
    @stevefaulkner
    Nov 30 18:04

    IMO if you present the date in a format that the user is used to having dates written in then it doesn't really matter if the screen reader reads it correctly as the user will be used to how their screen reader speaks dates

    :+1: :+1:

  21. Job van Achterberg
    @jkva
    Nov 30 18:09
    o/
  22. zakim-robot
    @zakim-robot
    Nov 30 18:47
    [michiel] \o
  23. zakim-robot
    @zakim-robot
    Nov 30 19:01
    [jack_nicolai] I have a situation wherein I am adding tabindex=0 to an element using JavaScript. It seems that Safari is not honoring the new addition, but this works in other browsers. Anyone familiar with this issue and have suggestions?
  24. zakim-robot
    @zakim-robot
    Nov 30 19:22
    [cordelia] @jack_nicolai, is it that tabindex=“0” isn’t added, or that you can’t reach it with tab key?
  25. [jack_nicolai] @cordeliait get’s added and
  26. [cordelia] If the latter, check that you have “Press Tab to highlight each item on a webpage” checked in Safari’s Advanced Settings.
  27. [jack_nicolai] @cordelia it get’s added and doesn’t seem to get honored in Safari. It works fine in other browsers. There is potentially some other weirdness that may be contributing, but thought I’d see if there are known issues.
  28. [alexlande] @jack_nicolai what kind of element is it you’re adding tabindex to?
  29. [jack_nicolai] @alexlande it is added to a label tag that is around text and an input as a checkbox.
  30. zakim-robot
    @zakim-robot
    Nov 30 19:30
    [alexlande] that’s interesting. I made a table to check tabindex support for different elements a while back: http://output.jsbin.com/pucila
  31. [cordelia] Oh interesting! I can reproduce that, too, with the label tag specifically and not other tags. Since checkbox itself is already focusable, do you need to add tabindex=“0” to its label?
  32. [alexlande] I dropped label into a row on that and safari wouldn’t tab to it at all, with any tabindex value
  33. [cordelia] @alexlande that’s a great resource!
  34. [alexlande] thanks! :bow:
  35. zakim-robot
    @zakim-robot
    Nov 30 19:38
    [jack_nicolai] @cordelia, the checkbox input is being hidden and a custom checkbox is being displayed, this the focus on the label.
  36. [cordelia] You might want to consider hiding the checkbox off-screen so it’s still focusable, and then using pseudo content to create your custom checkbox display. I don’t have a good checkbox example handy, but here’s Heydon’s custom radio inputs using that technique: https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/
  37. zakim-robot
    @zakim-robot
    Nov 30 19:47
    [majornista] @cordelia I think something like that is being attempted. The concept is just a bit muddled. One should not really be adding tabindex to a label, which seems to be an opinion that Safari choses to enforce.
  38. James Nurthen
    @jnurthen
    Nov 30 22:16
    @cordeila my experience with hiding the real controls off-screen is that is causes problems with VO on iOS. The VO cursor jumps around and it can often be really hard to use . You can also get issues with explore by touch. For example on Heydon's example on that link you can't tap on the actual radio button itself - only on its label to read or select.
  39. I've had better luck sizing the radio button to be the same size as the visual button+label and then setting it to opacity 0. That way it can be tapped within iOS
  40. zakim-robot
    @zakim-robot
    Nov 30 22:18
    [caesar] Doesn't off-screen controls also interfere with keyboard-only access for sighted users? Because you will "lose" the cursor while it is focused on the off-screen element.
  41. James Nurthen
    @jnurthen
    Nov 30 22:18
    you draw the focus on the on-screen one when the off-screen is focused.
  42. zakim-robot
    @zakim-robot
    Nov 30 22:29
    [caesar] I see
  43. Mallory
    @StommePoes
    Nov 30 23:18
    I've done it with opacity-0 controls, label overlays it with padding to move the label text out of the way, and back in the day had a background sprite showing the custom control. Nowadays we're trying that with an svg instead of background image but then you need JS...