Archive index

A11y Slackers Gitter Channel Archive 14th of March 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Mar 14 02:01
    [caesar] Question about buttons: in NVDA's read mode, two consecutive buttons labelled First and Second will read "button First button Second". Focus remains on the first button even though both have been read out. Is there a way to make these two elements read separately with a keypress required in between (short of boxing each one up in a <div>)? Is this even necessary?
  2. [caesar] Here's a pen: http://codepen.io/cyberseraphic/pen/WpOWEr
  3. zakim-robot
    @zakim-robot
    Mar 14 03:19
    [herin] Hi @caesar : when you say read more, is it the Insert + Space (browse mode toggle)
  4. [herin] It's working fine as only one button gets focus
  5. [herin] Try with the focus highlight on...
  6. [caesar] Yes, only one button gets focus, but both buttons get read in browse/read mode
  7. [herin] With down arrow after the heading?
  8. [caesar] Yes
  9. [caesar] I think what I'm saying is that I expect to have to press down arrow once per button. Is that a correct expectation?
  10. [herin] yes
  11. [herin] Which browser?
  12. [caesar] I'm using Firefox with NVDA
  13. [herin] me too
  14. [herin] Are you using a Focus highlighter to see the focus with NVDA
  15. [herin] ?
  16. [caesar] I can see the default focus
  17. zakim-robot
    @zakim-robot
    Mar 14 03:24
    [caesar] I guess what I'm trying to say is that I expect in read mode, for it to announce in the following sequence: [down arrow] button, First. [down arrow] button, Second.
  18. [caesar] And the focus to move accordingly.
  19. [caesar] Right now, the sequence is: [down arrow] button First button Second, and the focus is on the first button.

  20. [herin] mm... It works as per your expectation on my NVDA + Firefox.
    If you see the Codepen footer, how does your NVDA behave?

    <button class="button button-dark mini-button console-toggle-button">
    Console
    </button> 

    <button class="button button-dark mini-button" id="assets-link">   Assets </button>    <button class="button button-dark mini-button" id="view-details-button">     Comments   </button>   <button class="button button-dark mini-button keyboard-commands-button">   <span>Keyboard</span> </button>
  21. [herin] Could be a configuration issue then
  22. zakim-robot
    @zakim-robot
    Mar 14 03:33
    [herin] Are the buttons inside tables <td>>
  23. [herin] They behave differently then
  24. zakim-robot
    @zakim-robot
    Mar 14 03:46
    [caesar] Odd...
  25. zakim-robot
    @zakim-robot
    Mar 14 03:54
    [caesar] Codepen's own buttons behave as per expectations. But other than the CSS class definitions (of which I don't know what makes the difference, but it's not display: inline-block;) there's seemingly no difference
  26. zakim-robot
    @zakim-robot
    Mar 14 04:28
    [herin] Adding the buttons in Div and separate Spans could help
  27. [herin] <p> being a block level element, there is no inline separators
  28. zakim-robot
    @zakim-robot
    Mar 14 04:43
    [caesar] Yeah, that will have to be. It's just so strange...
  29. Srinivas Yedhuri
    @sri429
    Mar 14 08:14
    Q:what should be the keyboard interaction for a horizontally oriented tree?
  30. stevefaulkner
    @stevefaulkner
    Mar 14 09:34

    @sri429
    Refer to Note 5

    If the nodes in a tree are arranged horizontally:
    Down Arrow performs as Right Arrow is described above, and vice versa.
    Up Arrow performs as Left Arrow is described above, and vice versa.
    http://w3c.github.io/aria-practices/#TreeView

  31. Srinivas Yedhuri
    @sri429
    Mar 14 09:36
    Thanks @stevefaulkner. Some how missed that note
  32. stevefaulkner
    @stevefaulkner
    Mar 14 09:38
    no worries, its easy to miss
  33. stevefaulkner
    @stevefaulkner
    Mar 14 09:45

    @caeser

    Is this even necessary?

    No

  34. zakim-robot
    @zakim-robot
    Mar 14 12:53
    [tommyfeldt] Is anyone aware of a working method to format currency and numbers visually using CSS?
    In particular, we want to add separating spaces for thousands (1020 displayed as 1 020)?
  35. [tommyfeldt] The client is a bank, and they’re currently providing all currency amounts using spaces in the HTML code. This is causing major issues with screen readers
  36. zakim-robot
    @zakim-robot
    Mar 14 13:51

    [tommyfeldt] An alternative approach that we are considering, is hiding the visual numbers with aria-hidden, and adding a hidden version for screen readers:

    '<span aria-hidden=true>1 020,20</span>
    <span class=“offscreen”>1020,20</span>’

    Not very elegant, but if it works...

  37. [jdan] perhaps an aria-label on that first span instead of aria-hidden + offscreen text? (or does aria-label have worse support)
  38. stevefaulkner
    @stevefaulkner
    Mar 14 14:18
    aria-label is only announced (usually) by AT on interactive elements and subset of elements with explicit role, span has no meaning it is ignored
  39. stevefaulkner
    @stevefaulkner
    Mar 14 14:31

    Not very elegant, but if it works...

    go with it then :-)

  40. stevefaulkner
    @stevefaulkner
    Mar 14 14:45
    @jdan FYI I played around a bit with other methods and could not find a method that worked with iOS, i suspect that the physical rendering of the space between the numbers is exposed to VO in acc tree regardless
  41. unless the whole text node is hidden as in your method
  42. zakim-robot
    @zakim-robot
    Mar 14 15:07
    [jdan] interesting!
  43. stevefaulkner
    @stevefaulkner
    Mar 14 15:17
    @jdan also see http://w3c.github.io/aria-in-html/#practical-support about aria-labelledby/describedby
  44. zakim-robot
    @zakim-robot
    Mar 14 15:25
    [spell] Hey all! Simple question (maybe). I have a banner image with text in it that could be seen as the primary heading of the page. Is following acceptable? <h1><img src="..." alt="Primary Heading Text"></h1>
  45. [tink] Is the baner repeated on every page?
  46. [tink] *banner
  47. [kevmarmo] @spell @tink if the text in the image needs to be accessible it's worth considering if there's any way of removing it from the image
  48. [kevmarmo] e.g. by using a custom font
  49. [kevmarmo] if not then you should consider if it is accessible due to colour contrast rules
  50. [tink] Agreed that text in an image is a bad idea.
  51. [kevmarmo] if it is and still needs to be an image i'd consider either a background image with visually_hidden text
  52. [kevmarmo] or a similar technique
  53. [tink] Would also advise against making it the h1 if the same banner is repeated on every page - since it won't be unique to the page content.
  54. zakim-robot
    @zakim-robot
    Mar 14 15:30
    [kevmarmo] though generally the primary heading of the page should never be an image if at all avoidable
  55. [kevmarmo] not only for accessibility but also for translation services, seo etc.
  56. [kevmarmo] and if you're using a CMS it's bad practice as you'd need asset creation each time you needed to change content
  57. [tink] @kevmarmo a background image still will not be good for magnification users.
  58. [kevmarmo] @tink exactly
  59. [tink] So a backgrond image with hidden text does not solve the problem.
  60. [kevmarmo] plus potentially add to page weight as you'd need to render different sized images
  61. zakim-robot
    @zakim-robot
    Mar 14 17:21
    [backwardok] you also should likely run into issues when viewing from a phone if the text is part of the image, as it likely won't scale well
  62. zakim-robot
    @zakim-robot
    Mar 14 18:02
    [cordelia] I’ve got an a11y + SEO question. Does anyone know if search engines ignore elements that are aria-hidden?
  63. zakim-robot
    @zakim-robot
    Mar 14 18:15
    [dna] @cordelia not your exact question, but related re: search engines https://productforums.google.com/forum/#!msg/webmasters/YJcZUhtMIE4/XkOEzVakBAAJ
  64. [dna] it doesn’t answer your question, but it might point you in some direction. my suspicion is that there isn’t a definitive answer anywhere
  65. zakim-robot
    @zakim-robot
    Mar 14 18:31
    [felicia] hi folks! anybody know of a color contrast tool that can analyze image docs, like .png? i am looking for an option like Accessibility Scanner in Android or even WAVE for web pages which give you the actually hex values and ratios. (originally posted in random because i was juggling multiple Slack pages and ooops.)
  66. zakim-robot
    @zakim-robot
    Mar 14 18:42

    [schoeyfield] So, here I am at an intersection at a stoplight and browsing through my Feedly account. There's an article there I'm super interested in and don't want to wait. It occurs to me to enable voice over and just have it read to me as I drive.

    It's really obvious, but using the assistive tech for something other than testing but actual personal entertainment did something to my brain.

  67. [cordelia] @dna thanks for the link! yeah, i did some research but wasn’t able to find a definitive answer. i might just do a test and find out.
  68. [dna] @cordelia please share the results :)
  69. [cordelia] will do :)
  70. zakim-robot
    @zakim-robot
    Mar 14 18:59
    [backwardok] @felicia maybe try using https://www.paciellogroup.com/resources/contrastanalyser/
  71. [backwardok] it's not automatic, though, so you'd need to manually test out your images
  72. zakim-robot
    @zakim-robot
    Mar 14 20:32

    [canfie1d] My coworker at Helpful Human just published an article to Medium on how he, as a software developer, copes with dyslexia. I hope that you all will find his perspective as interesting as I did.

    https://medium.com/helpful-human/embracing-dyslexia-as-a-software-engineer-86419a94bd94

  73. zakim-robot
    @zakim-robot
    Mar 14 22:26
    [bbuechel] W3c sufficient example - but is there better?
  74. [caesar] Reminds me of a <fieldset> configuration, but I'm not sure what the "link" equivalent of that would be
  75. zakim-robot
    @zakim-robot
    Mar 14 22:32
    [caesar] Spitballing here, but ARIA "group" role along with aria-describedby on the list items?
  76. [caesar] https://www.w3.org/TR/wai-aria/roles#group
  77. zakim-robot
    @zakim-robot
    Mar 14 22:38

    [karlgroves] Bob, the technique you’re showing is for Links in context. The H2 element provides the additional context for the links.

    As Caesar said, the group role with aria-describedby would be a good approach to “forcing” a more programmatic context.

  78. zakim-robot
    @zakim-robot
    Mar 14 22:50
    [herin] @bbuechel : https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/ARIA7 Example 2 shows a similar scenario. I prefer Aria-Labelledby as this is shown in element list as well. When NVDA element list is open, Aria-describedby is not shown. So, users seeing the list as maps, Photos, Directions will be confused
  79. [caesar] @herin wouldn't aria-labelledby end up "overwriting" the actual link label though? So you'd end up with a list of elements all named "<hotel name>"
  80. [herin] <p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
    <a aria-labelledby="report-title pdf" href="\#" id="pdf">PDF</a> |
    <a aria-labelledby="report-title doc" href="\#" id="doc">Word</a> |
    <a aria-labelledby="report-title ppt" href="\#" id="ppt">Powerpoint</a></p>
  81. [herin] Can concatenate ids
  82. [caesar] Ah, right.
  83. zakim-robot
    @zakim-robot
    Mar 14 22:56
    [caesar] Just need to be wary of the following though:
    "IE 11 does not support aria-labelledby or aria-describedby with single or multiple id references unless the referenced element is what Microsft classes as an accessible element. IE non accessible elements can be made into accessible elements by the addition of tabindex="-1" as documented or via the addition of an ARIA role (when appropriate)."
  84. [caesar] https://www.paciellogroup.com/blog/2014/06/aria-labelledby-aria-describedby-support-popular-windows-browsers/