Archive index

A11y Slackers Gitter Channel Archive 25th of January 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jan 25 00:03
    [caesar] @herin maybe that's the wrong question. Maybe the table should be implemented using grid role? http://w3c.github.io/aria-practices/#grid
  2. [herin] Retrofitting one of the old application where everything is tables.Rather than making major changes, trying to achieve A11y with little modifications
  3. [herin] Seems Grid will be the best fit
  4. [herin] Thanks @caesar . But, will it fail when the Data tables have interactive elements?
  5. zakim-robot
    @zakim-robot
    Jan 25 00:10
    [caesar] I'm not sure I understand the question. Grid allows for interactive elements?
  6. zakim-robot
    @zakim-robot
    Jan 25 00:15

    [herin] As per Aria practices : In a grid that presents tabular data, every cell contains a focusable element or is itself focusable, regardless of whether the cell content is editable or interactive. There is one exception: if column or row header cells do not provide functions, such as sort or filter, they do not need to be focusable.

    But, the keyboard interaction in Grid is quite hard to learn if the user is not power keyboard user. When there are multiple text boxes in a row, the up/down arrow navigates between the rows. Tab moves from the Grid to the next focussable element. F2 enables edit mode. I am working on an application for Primary school students. Do

  7. [herin] Hence don't want to complicate the keyboard interaction.
  8. [herin] Trying to acheive this with normal data tables
  9. [herin] The table contains a column with checkboxes. This is used to select the row and then delete it.
  10. [herin] I am thinking should I put select in the TH or leave it blank
  11. zakim-robot
    @zakim-robot
    Jan 25 00:40
    [quidkid] caesar: thank you! but then what would you recommend as an accessible way to read the terms and conditions and acknowledge that?
  12. [caesar] Designers hate it, but usually it requires that the link is presented separately prior to the checkbox.
  13. Srinivas Yedhuri
    @sri429
    Jan 25 11:18
    With Jaws 18 links with onclick return false stopped working for enter key press
  14. fiddle.jshell.net/5axLn26e/5/show enter key works fine with jaws 17 and fails with jaws 18
  15. zakim-robot
    @zakim-robot
    Jan 25 11:58
    [caesar] I'd suggest logging a bug with FS, but recent experience didn't go too well. All that happened was after a bunch of "proof" videos that I sent them (regarding a bug with the way JAWS handles "aria-expanded" which has been in JAWS since at least v16 that I'm aware of), they wrote back saying "could not reproduce" and asked me to blow away my JAWS install completely and start over. Uh huh.
  16. Mallory
    @StommePoes
    Jan 25 14:27
    How do people feel about this solution to a problem: a content creator has some very complex math that MathJax cannot completely correctly render. While they are proposing posting an image of the equation instead and having a hidden MathML object as "alt math" (yeah no, no nazi math here), I wonder if SVG plus hidden MathMl (and/or plus LaTeX) would be doable? Visually, the math from the link I got from @pkra
  17. ...looks great and scales when I zoom, even in ZoomText
  18. It's not copyable, but if the hidden MathML was accessible via a visible link/button (like some of us do with longdescs, as in #longDescForEveryone) where that, even if it renders funky, IS copyable/editable.
  19. Not sure how to make an SVG update to edits though, I think that would need a dedicated equation editor :/
  20. zakim-robot
    @zakim-robot
    Jan 25 14:37
    [quidkid] ah okeydokey thank you! yeah it looks weird design wise, are there any creative solutions to not make it look awkward?
  21. Mallory
    @StommePoes
    Jan 25 14:43
    I've seen websites with a small line of text "Here are our [link] Terms and Conditions [/link] then [checkbox] I agree to the T&C on a new line
  22. Esp sites that actually have a couple of things you need to agree to, T&C, plus privacy policy, plus extra's like codes of conduct or whatever
  23. zakim-robot
    @zakim-robot
    Jan 25 15:20
    [quidkid] thank you! the designer is now making the accept part a button that changes from white to blue once you accept. is this accessible? for me, I’m raising the concern that even though a color change is happening, it’s not enough to still signal that they indeed accepted. what are your thoughts?
  24. Mallory
    @StommePoes
    Jan 25 16:43
    If you can't see the colour change, are you still aware of the new state? If so, it's ok. If colour alone is giving this information, then no. If the button colour is just reflecting the new state of "someone clicked a checkbox and accepted the terms" then you've already got info reflected as something other than just colour and you're cool.
  25. zakim-robot
    @zakim-robot
    Jan 25 16:43
    [melsumner] @quidkid if it’s a button, AT will tell them it’s a button. You could add some sort of confirmation if you really wanted to, or extra instructions “by clicking this button, you are accepting our Terms and Conditions” or “click this button to accept these terms and conditions"
  26. Mallory
    @StommePoes
    Jan 25 16:44
    I've also, if I can't do it any other way, added hidden (pulled offscreen) text to reflect state changes that are otherwise only conveyed by colour... but I prefer something additionally visual like visual text isntead of hidden.
  27. Yeah the button needs a label and that accept our terms thing would be its label
  28. zakim-robot
    @zakim-robot
    Jan 25 17:14
    [quidkid] wow thank you guys!
  29. zakim-robot
    @zakim-robot
    Jan 25 17:22
    [beth] Hey everyone, quick question. How do properly code buttons that contain only an image? For example a little button that would launch a camera on an app?
  30. [tink] Beth, is the image in the foreground or background?
  31. [beth] It’s not in existence yet… is one better than the other?
  32. [beth] We can do it however we want. I just want to do it the best way possible.
  33. [tink] Yes. It's better if the image is in the foreground: <button><img alt="Description" src="icon.png"></button>
  34. [beth] I was thinking of hiding the image from screen readers by giving it a null image alt, then having visually hidden text for the button label.
  35. [beth] Ok, great! That’s easier.
  36. [tink] The reason to have the image in the foreground is because background/CSS images disappear in IE when in Windows high contrast mode, and also disappear when someone is using their own style sheet.
  37. [beth] Interesting, I didn’t know that. Great to know!
  38. [tink] You also have to provide a workaround for screen readers because there is nothing to attach an image text description to. You have to use either the title attribute or aria-label attribute on the button instead.
  39. [beth] I don’t have much experience with high contrast mode.
  40. [tink] So it's generally easier to use a foreground image with an alt attribute. HTH :)
  41. [beth] Awesome. Thank you so much!
  42. [tink] Microsoft has fixed the problem in Edge - but of course a lot of people still use IE.
  43. [tink] The disappearig background image problem I mean.
  44. [beth] I haven’t opened IE in years! Hahaha
  45. [tink] Me either unless I'm testing :)
  46. zakim-robot
    @zakim-robot
    Jan 25 17:27
    [beth] So would that be similar/the same if the button were actually a link?
  47. [beth] Styled to look like a button?
  48. [tink] Yes, it's better to have the image in the foreground for much the same reasons.
  49. [beth] Cool.
  50. [tink] Though if something *looks like a button, it's a good idea to make it a proper button.
  51. [tink] The expected keyboard interaction for a link and button are different.
  52. [tink] A link can be activated with enter, but a button with either enter or space keys.
  53. [beth] This is for an app. Does that make it any different?
  54. [tink] So if you pretend a link is a button, you need to use JavaScript to provide the extra keyboard interaction. Then you should really let screen readers know it's a button not a link, so you need some ARIA,.
  55. [tink] So it's really a lot easier to use the <button> element.
  56. [beth] We have a field where the user can enter a very long number, and after that there’s this “button” with a illustration of a camera on it, so the user can take a picture of the tag instead of having to enter the number.
  57. [tink] That should be a button by the sound of it. A button invokes an action on the current page, whereas a link fetches a new resource like another page.
  58. [beth] Yes, but technically it’s bringing up a new page
  59. [tink] So I'd use the <button> element.
  60. [beth] Ok
  61. [tink] Hmm. That makes it a bit more complicated :)
  62. [tink] If it fetches another page it should really be a link (and look like one).
  63. [beth] Yes, we’re in a bit of a pickle
  64. [tink] It's a very common pickle on the web.
  65. [tink] Without getting into the weeds of what links/buttons should/shouldn't do, the best bet is to make it one thing - in terms of how it looks and how it behaves, and therefore what it's built with.
  66. zakim-robot
    @zakim-robot
    Jan 25 17:33
    [tink] So if it looks like a button, it should function like a button, so use <button> The fact it fetches a page instead of invokes an action is a lesser worry IMO.
  67. [beth] Ok, it’s also a lesser worry of our design dept. ;)
  68. [tink] Though I will now be hit by lightening for saying as much I expect :)
  69. [beth] LOL
  70. zakim-robot
    @zakim-robot
    Jan 25 17:51
    [karlgroves] Lightning here.
  71. [karlgroves] ;)
  72. [karlgroves] I think another factor in the link vs. button thing can come down to the context. If context switches - and only that - then it is definitely a link. If context is modified as part of what else happens, it is a button.
  73. [garcialo] Wondering if people know of auto progressing carousels in the wild that have pause/play buttons. Don’t need to be accessible; just need pause/play buttons.
  74. zakim-robot
    @zakim-robot
    Jan 25 18:12
    [jeankaplansky] It has been all of 2.2 months since this was last discussed here… Does anyone know of any improvements to the state of planned or existing screen reader support for aria-describedby for images per the EPUB a11y recommendations here: https://idpf.github.io/a11y-guidelines/content/xhtml/images.html?
  75. [michiel] kisses garcialo
  76. [jeankaplansky] More importantly, does anyone know what the state is of planned or existing screen reader support for aria-describedby when the actual content referenced is brought in through a HTML file?
  77. [michiel] garcialo: do you need a link? Or do you just want to know they exist?
  78. powrsurg
    @powrsurg
    Jan 25 18:16
    Besides apple, how well supported is the prefers-reduced-motion media query?
  79. Is that part of any standard?
  80. zakim-robot
    @zakim-robot
    Jan 25 18:16
    [michiel] Isn’t that in CSS?
  81. [michiel] w3c/csswg-drafts#442
  82. powrsurg
    @powrsurg
    Jan 25 18:17
    Well, I'm wondering if that is a proprietary extension apple made up, or if it was legit
  83. zakim-robot
    @zakim-robot
    Jan 25 18:18
    [michiel] Not seeing it in: https://drafts.csswg.org/mediaqueries/
  84. [michiel] According to issue 442 it was accepted in 2014, but I’m not actively tracking it
  85. powrsurg
    @powrsurg
    Jan 25 18:22
    In general I'm curious what other a11y related media queries there are
  86. zakim-robot
    @zakim-robot
    Jan 25 18:33
    [garcialo] Links would be great.
  87. zakim-robot
    @zakim-robot
    Jan 25 18:57
    [beth] @karlgroves Thanks. I don’t think the context is changing. It’s taking the user from a page that says enter a really long number in this field, to a page that says take a picture of the really long number with this here camera and you won’t have to enter it manually.
  88. [karlgroves] excellent
  89. [beth] So button isn’t semantically wrong, right?
  90. zakim-robot
    @zakim-robot
    Jan 25 19:11
    [karlgroves] correct
  91. Martin Držka
    @martindrzka_twitter
    Jan 25 19:38
    Hi, what is a proper semantic element for search examples (not placeholders)? In my case when no results are present, I would like to output some quick tips how search works and provide searched text examples…
  92. Job van Achterberg
    @jkva
    Jan 25 19:39
    @martindrzka_twitter I'd say that would strongly depend on what users would search for, and how your search engine performs.
  93. I'm not sure what you mean by "semantic element for search examples"
  94. If you have a heading Search examples followed by <ul> with example terms, that sounds sensible
  95. But your question is hard to answer specifically
  96. Martin Držka
    @martindrzka_twitter
    Jan 25 20:00
    @jkva Sorry, my English has definitely room for improvements… Not necessary a list of examples. It is a paragraph of text with some examples within a text. For example sentence like that "If you are searching for 'Doors', the engine will find it as 'door', but will not as 'doo'". My question is if semantic element exist for string 'Doors', 'door', doo'. Maybe there is not neccessary special markup…
  97. Job van Achterberg
    @jkva
    Jan 25 20:02
    @martindrzka_twitter: Not that I can think of. You can give them emphasis via <em> but that does not get reflected by all AT as far as I can recall. You could then also style that emphasis visually.
  98. zakim-robot
    @zakim-robot
    Jan 25 20:04
    [car] You might want to wrap all of your search-related elements, including the additional example paragraph, in a role="search" landmark.
  99. Job van Achterberg
    @jkva
    Jan 25 20:08
    Wouldn't that be confusing? Would users not expect a search affordance there, not an explanation of how search works?
  100. Martin Držka
    @martindrzka_twitter
    Jan 25 20:16
    @car I think this is not my case. My results are without form because search input has additional parametres and whole form is quite large. So my results page contain only searched parametres and back link to seach form "Edit search"
  101. zakim-robot
    @zakim-robot
    Jan 25 20:21
    [deconspray] Howdy all. Anyone have any experience with the video player PLYR ( https://plyr.io/ ). Said to be accessible, but all I see is captions. Controls are somewhat keyboard accessible, but not fully. Testing now, but looking for other thoughts and experiences.
  102. [car] Sorry, I meant wrap ALL of the search related elements in a search landmark. The input, the additional parameters, and the examples.
  103. [deconspray] Ideally, it would be WCAG 2.0 AA compliant.
  104. [car] @deconspray They're on github. Open an issue describing your keyboard expectations vs. experience.
    https://github.com/Selz/plyr/issues
  105. zakim-robot
    @zakim-robot
    Jan 25 20:29
    [car] Their doc says:
    Accessible - full support for VTT captions and screen readers
    Shortcuts - supports keyboard shortcuts
    and the shortcuts doc is here: https://github.com/Selz/plyr#shortcuts
  106. zakim-robot
    @zakim-robot
    Jan 25 21:46
    [deconspray] @car Thanks, digging further.
  107. zakim-robot
    @zakim-robot
    Jan 25 22:22
    [deconspray] Opinion/sharing: I find one of the biggest challenges to being an accessibility specialist is understanding, not what the specs for WCAG or assistive technology or the browsers, but how people with varying abilities use assistive technology and what their expectations are. Case in point. When inline links are read within a paragraph, how an actual user reads, then follows those links differs from my perception. Is this common in our segment of the web industry?
  108. zakim-robot
    @zakim-robot
    Jan 25 22:39
    [deconspray] @karlgroves @beth So, question. The action item is taking the user from one page to another page. Would that dictate a link as opposed to a button?
  109. [deconspray] @tink You hit upon a growing concern of mine. A popular pattern is to style a link as a button. While this might be ok for screen readers, for visual/cognitive, this may create confusion if using keyboard. I am increasingly guiding to style a link a link, a button a button.
  110. [marcysutton] :point:
  111. [marcysutton] ^^
  112. zakim-robot
    @zakim-robot
    Jan 25 22:44
    [beth] @deconspray It’s technically taking the user to another page, but the UX is that the user basically feels that it’s just opening something on the page. In this case, a camera feature.
  113. [deconspray] @beth Interesting. So on mobile, it doesn't feel like navigation but feature activation?
  114. [deconspray] Insight: I sit feet away from @beth at work, yet learn about what's happening via Slack channel. LOL!
  115. zakim-robot
    @zakim-robot
    Jan 25 23:06
    [beth] @deconspray My fave is when I answer your text message with a Slack post. :upside_down_face:
  116. [deconspray] @beth yep multichannel conversations are my fav 8)