Archive index

A11y Slackers Gitter Channel Archive 12th of April 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Apr 12 00:25
    [caesar] Does anybody have a good resource for how to implement in-line glossary definitions?
  2. zakim-robot
    @zakim-robot
    Apr 12 00:43
    [cordelia] I’m still stuck on this table + flexbox stuff. I can’t seem to get an ARIA setup that works for VO + Chrome and NVDA + FF. Would anyone be willing to take a look at my example CodePen and let me know if I’m missing anything obvious? Particularly am interested in getting Example #4 to work across screen reader and browser combinations. http://codepen.io/cordelia/pen/bqKwVp
  3. zakim-robot
    @zakim-robot
    Apr 12 01:28
    [cordelia] so far my best bet seems to use a div instead of a table… (ohcrap emoji)
  4. zakim-robot
    @zakim-robot
    Apr 12 03:05

    [higley] @cordelia it’s not exactly per standards, but I still get read the correct table attriutes in VO + Safari if I nest a <div style="display: flex"> inside the <table> (sorry, I’m travelling and don’t have the setup to test other combos right now).

    I have no idea how flexbox reacts to being used on table dom structure though, and my guess based on ~1min of playing around is “not great.” Do you have more specifics on what layout (or responsive layout?) you’re trying to achieve?

  5. zakim-robot
    @zakim-robot
    Apr 12 03:54
    [caesar] Question about tooltips? How exactly are they supposed to work? Does the popup information get inserted into the DOM directly after the element that activates them? Are they focusable, or does the accessibility text just get appended to the activating element? Do they have to be focusable?
  6. [caesar] Do screen readers read them automatically, like an alert, or does the user have to "arrow" to it like a normal piece of text?
  7. zakim-robot
    @zakim-robot
    Apr 12 03:57
    [caesar] Thanks! Only problem is the client wants to use a clickable link for a glossary definition, rather than popup on focus
  8. [caesar] Hence the questions
  9. luis garcia
    @garcialo
    Apr 12 03:58
    so the user clicks a link and gets taken to a new page?
  10. zakim-robot
    @zakim-robot
    Apr 12 03:58
    [caesar] No, it activates the tooltip
  11. [caesar] i.e. tooltip requires explicit click
  12. luis garcia
    @garcialo
    Apr 12 03:59
    then that's not a tooltip
  13. zakim-robot
    @zakim-robot
    Apr 12 03:59
    [caesar] Yes, was just looking at that, thanks!
  14. luis garcia
    @garcialo
    Apr 12 04:00
    np
  15. zakim-robot
    @zakim-robot
    Apr 12 04:00
    [caesar] Love the site
  16. luis garcia
    @garcialo
    Apr 12 04:00
    I'll let Ian know. :)
  17. zakim-robot
    @zakim-robot
    Apr 12 04:00
    [caesar] Reminds me a bit of MDN but more user friendly :)
  18. luis garcia
    @garcialo
    Apr 12 04:00
    yeah, he's done great work on it
  19. Sean Elliott
    @seanus1138
    Apr 12 10:14
    Hi people, im looking for a little clarity with h1's and how to use them.
    • Is there only suppose to be a single h1 to a page?
    • Considering a homepage could you not have multiple h1's for each major section?
  20. zakim-robot
    @zakim-robot
    Apr 12 10:15
    [tink] @seanus1138 There is no rule that prevents multiple h1 headings, but from a usability point of view it's a good idea to have only one.
  21. [tink] Think of it like the title of a book - that's the h1, then each chapter is an h2, and so on.
  22. [tink] It helps screen reader users understand the architecture of the content.
  23. Sean Elliott
    @seanus1138
    Apr 12 10:18
    @tink okay so for a homepage which generally doesnt have massive amounts of content but interesting areas would it be best use to have a single h1 visually hidden that says "welcome to [site name] homepage" with each major section being a h2 then??
  24. zakim-robot
    @zakim-robot
    Apr 12 10:18
    [tink] Yup, that would work well.
  25. Sean Elliott
    @seanus1138
    Apr 12 10:25
    thanks for that
  26. zakim-robot
    @zakim-robot
    Apr 12 10:25
    [tink] NP :)
  27. zakim-robot
    @zakim-robot
    Apr 12 14:31
    [melsumner] How would you approach a widget where visual confirmation of an image against data in a record is compared for accuracy?
  28. [garcialo] @melsumner Example? Do you mean like “here is an image of your date of birth?”
  29. [melsumner] There's a photo with information (let's say I don't have any idea what the text in that image will be, as the developer)
  30. [melsumner] The workflow is that the data has been entered into a record
  31. [garcialo] well, for any images needing to be displayed, you, as the developer, should also be supplied with the alt for that iage
  32. [garcialo] image*
  33. [melsumner] I guess that's the point though
  34. [melsumner] The record (typed) has to be compared to the image
  35. [melsumner] To verify that there is no error in the data entry
  36. zakim-robot
    @zakim-robot
    Apr 12 14:36
    [garcialo] How does making it an image help with the data verification?
  37. [garcialo] Instead of just displaying plain text
  38. [garcialo] Oh, is it like a physical form they’ve submitted?
  39. [melsumner] Okay, think about something that you'd have to take a scan or image of
  40. [garcialo] Gotcha
  41. [melsumner] Like, a paper check.
  42. [garcialo] What kind of scanned thing are we talking about?
  43. [garcialo] Oh, I see..check as in payment check…not verification check :p
  44. [garcialo] Are there other methods of submitting payment that aren’t checks?
  45. [melsumner] Part of this specific workflow is visually comparing the scanned check image to the entered data, and verifying that they match OR rejecting it and editing it to be correct
  46. [garcialo] So payment MUST be by check?
  47. [melsumner] Should I put in the image alt area, "visual confirmation is required," or is there another method?
  48. [garcialo] well that wouldn’t be an equivalent of the image, so that wouldn’t be sufficient
  49. [melsumner] In this particular situation it is a scanned check image
  50. zakim-robot
    @zakim-robot
    Apr 12 14:41
    [melsumner] But I'm trying to think about this from a bigger view- how do you make it conformant when vision is actually required
  51. [melsumner] Am I not thinking something through all the way?
  52. [garcialo] Well, the alt of the image should be an equivalent of the image…if it’s an image where the text content is important then the alt text should provide that information
  53. [melsumner] I guess I should next think about how to do this in a secure way
  54. [melsumner] Thinking like a bad guy
  55. [melsumner] For a second
  56. [garcialo] Of course
  57. [melsumner] If it's an alt tag on an image
  58. [melsumner] I could edit that to fit my nefarious intent
  59. [melsumner] Make it match the record even if it didn't match the (physical/visual) image
  60. [garcialo] I mean, are you testing to see whether the user can see text or are you trying to validate their information? If you’re displaying it out to them anyway…how is that verifying anything other than that they can see and can read whatever is written?
  61. [garcialo] A bad guy/lady would be able to verify that same visual information.
  62. [garcialo] …assuming they could see
  63. zakim-robot
    @zakim-robot
    Apr 12 14:47
    [garcialo] If the bad person has intercepted the data between you and your users they can manipulate lots more than just the alt text :p
  64. [melsumner] The bad person is trying to submit a check with manipulated record data, hoping no one will notice that the amount on the check and the amount in the data record do not match
  65. [melsumner] Which is why the auditor/workflow has to visually confirm that the scan image matches the data in the record
  66. [garcialo] oh, it’s a different person validating? not the user?
  67. [melsumner] Yes
  68. [garcialo] oh, well then that’s something that requires sight
  69. [melsumner] Person A would scan the item and enter the data and it's sent to Person B
  70. [melsumner] Person B has to verify that the entered data matches the image
  71. [garcialo] going to scroll up to see what your actual question was now that I have a better idea of what’s going on
  72. [melsumner] Right, but how do I say "this requires sight" w/o being insensitive? Is there a conformant way to do this? I can't recall an approach for this in the WCAG guidelines but I'm hoping I am just not remembering all the way
  73. zakim-robot
    @zakim-robot
    Apr 12 14:53
    [garcialo] essential if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform
  74. [garcialo] Hmm…that might not necessarily be the best
  75. [garcialo] I think it’s fairly obvious from the task of “verifying visual data submitted by a user with programmatic data submitted by a user” that it requires sight
  76. [garcialo] you might even be able to use some rudimentary image to text to see if you can figure out that verification text and match it with computers and only send the conflicts to your auditors
  77. [garcialo] …of course bad folk might find a way to write letters so computers would assume they were the same :p
  78. [garcialo] letters or numbers
  79. [melsumner] Yup
  80. [garcialo] anyway, you’re trying to word the visual requirement
  81. [melsumner] Yes
  82. [garcialo] I think it’s obvious, but there’s no specific way you should say it.
  83. [garcialo] Probably just use common sense and avoid things like “no blind people”
  84. zakim-robot
    @zakim-robot
    Apr 12 14:58
    [garcialo] Were I a developer, I would reach out to a content or maybe legal person in this case to give me the wording to use :p
  85. [melsumner] Lol
  86. [melsumner] "Visual confirmation is required."
  87. [garcialo] looks good to me
  88. [garcialo] And thank you for your patience :p
  89. [melsumner] Thank you for thinking it out with me ^_^
  90. zakim-robot
    @zakim-robot
    Apr 12 16:23
    [spell] Howdy! Quick question. I was on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and came across this specific line regarding the href attribute: "This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere." I found that interesting because I thought we were not supposed to remove it. For example, where I would not normally require an href, a <button> might be more appropriate, etc. I can't think think of a situation where you would use an <a> without an href. Is this really okay?
  91. [scottohara] i read that as it’s ok, but that doesn’t necessarily mean one should do it
  92. [scottohara] <a> without an href isn’t focusable. so it’s not really treated as a link
  93. [spell] Then why recommend it at all. It seems like it would cause a lot of confusion (as in my case)
  94. [scottohara] from what i understood, the term placeholder is the key
  95. [marcysutton] I think it could "catch" focus in a focus management scenario, but not be in the tab order...i wouldn't recommend it, but it is valid
  96. [scottohara] it’s not really meant to ‘stay that way’
  97. [spell] I guess I'm just looking for an example of why you would even do that. Heh.
  98. zakim-robot
    @zakim-robot
    Apr 12 16:29
    [cmegown] i've found href-less anchor tags to be fairly common in js frameworks where it's easy for devs to do something or take you somewhere based on a click event binding. it's probably not the best solution but i've usually just slapped a tabindex="0" on them.
  99. [tink] FWIW I find it confusing when my focus lands on a thing that does nothing when I try to interact with it.
  100. [marcysutton] I've seen it wrapped around text content inside a heading to catch focus with JavaScript or internal page fragments, but tabindex="-1" would do the same thing.
  101. [marcysutton] Leonie makes a good point that an inoperable focus management target could be confusing to both keyboard and screen reader users.
  102. [cmegown] i've been considering creating a button class that emulates a link for instances like this. you'd get a focus state and keyboard users could still select the faux-link like they would expect, correct?
  103. zakim-robot
    @zakim-robot
    Apr 12 16:37

    [scottohara] personally, i take the ‘placeholder’ to be the operative word there.

    like, you’re writing an article and you know you need to link out a portion to somewhere, but you don’t have the url yet. a placeholder link could be used as a sort of debugging style hook when reviewing the article to point out “hey, this doesn’t go anywhere internally or externally”.

    but, i feel like i’m being very generous in that use case, as there could be other css selectors one could write to achieve the same sort of debugging technique…

  104. [garcialo] @tink What are your thoughts on this pattern we use? For “previous” and “next” links surrounding something like pagination or a carousel, we leave them in the tab index even when they’re disabled so they can serve as bookends for the component.
  105. [tink] @garcialo I'm not a fan of that myself.
  106. powrsurg
    @powrsurg
    Apr 12 16:38
    I feel like it's more supposed to be the target. I've seen a lot over the years where <a id="foo"></a> (or sometimes <a name="foo"></a>) to be the target for an internal link. This works with a lot of existing WYSIWYG editors
  107. zakim-robot
    @zakim-robot
    Apr 12 16:39
    [garcialo] @tink so then you strongly prefer only things that are currently interactive to be in the tab index
  108. [tink] I do tend to, yes.
  109. [tink] But then it's worth mentioning that I rarely use the tab key to navigate places.
  110. [tink] But it's worth mentioning that I don't often use the tab key to navigate.
  111. [tink] Oops. Sorry for the duplication.
  112. powrsurg
    @powrsurg
    Apr 12 16:42
    It's be a long time since I've done it, but I think some value for execCommand in JS actually creates things that way. I could be mistaken as that was a number of years ago since I did that
  113. zakim-robot
    @zakim-robot
    Apr 12 16:44
    [garcialo] That makes sense
  114. [garcialo] @ting You’re forgiven. Don’t let it happen again =)
  115. [garcialo] oops..meant to ping @tink
  116. [spell] Thanks for your thoughts here so far, gang. I feel better already. Personally, I think I'll just try to stick with links going to other pages or fragments and buttons to do things, as best I can. It's a lot easier! :-)
  117. [tink] @garcialo I won't :)
  118. zakim-robot
    @zakim-robot
    Apr 12 17:40

    [sri429] Q:axe-webdriver says JavascriptError: javascript error: axe is not defined. Installed both selenium webdriver, axe-core. Am i missing something very basic here. Below is the example code
    `var AxeBuilder = require(‘axe-webdriverjs’);
    var WebDriver = require(‘selenium-webdriver’);

    var driver = new WebDriver.Builder()
    .forBrowser(‘chrome’)
    .build();

    driver
    .get(’https://github.com/dequelabs/axe-webdriverjs')
    .then(function () {
    AxeBuilder(driver)
    .analyze(function (results) {
    console.log(results);
    });
    });`

  119. [sri429] `\var AxeBuilder = require('axe-webdriverjs');
    var WebDriver = require('selenium-webdriver');

    var driver = new WebDriver.Builder()
    .forBrowser('chrome')
    .build();

    driver
    .get('https://github.com/dequelabs/axe-webdriverjs')
    .then(function () {
    AxeBuilder(driver)
    .analyze(function (results) {
    console.log(results);
    });
    });`\

  120. zakim-robot
    @zakim-robot
    Apr 12 18:07
    [marcysutton] @sri429 did you install axe-core?
  121. zakim-robot
    @zakim-robot
    Apr 12 18:13
    [spell] Hey all! I just created #alt-text-suggestions channel. I always wonder if i'm describing images appropriately and figured it might good to have a dedicated channel. A picture is worth a thousand words, right? :)
  122. zakim-robot
    @zakim-robot
    Apr 12 18:23
    [sri429] @marcysutton yeah i did. :(
  123. [marcysutton] @sri429 ok, let's move this discussion over to either #automated-testing or our Gitter: https://gitter.im/dequelabs/axe-core
  124. zakim-robot
    @zakim-robot
    Apr 12 18:32
    [marcysutton] Note: the axe-webdriverjs issue above is caused by the Content Security Policy in place on Github.com.
  125. zakim-robot
    @zakim-robot
    Apr 12 21:24
    [lli] I'm using fieldset to group a list of checkboxes, and use legend as the name for the group. But I noticed that NVDA doesn't announce the legend. Does anyone run into the same issue? Any suggestions on how to fix it?
  126. zakim-robot
    @zakim-robot
    Apr 12 21:49
    [garcialo] I believe that’s just the behavior of NVDA