Archive index

A11y Slackers Gitter Channel Archive 12th of July 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jul 12 01:15
    [kaelig] Are there recommendations on providing alternative content for abbreviated units (e.g. lbs, in, cm)? e.g. 25 <abbr title="centimeters">cm</abbr>. I was wondering if the fact that those units, being so ubiquitous, don’t require an alternative text… or if the should definitely have one (which has a development cost…).
  2. zakim-robot
    @zakim-robot
    Jul 12 02:45

    [karlgroves] @chrisgeary92 @quidkid I would argue strongly that without actual research proving a “good” reason for target="_blank", there simply isn’t one.

    My first job that had anything to do with accessibility was for a usability company. We did massive amounts of usability studies . Although my job at the time did not involve usability work, I often went into the lab’s observation room to watch and learn. I found it incredibly fascinating to watch certain patterns emerge.

    One of the things that you could bet money on was that a vast majority of participants would get completely confused by links that opened new windows. Here is a case where we often hear from website owners that “OMG WE DON’T WANT USERS TO LOSE OUR SITE!!!11" and yet here’s what often happens:

    The user clicks a link that opens a new window/ tab. In either case, the new page appears. The user either begins interacting with the new content or finds that what they’re looking for isn’t there. Either way, the user decides “OK I’m done with whatever that was, I want to go back”

    The user clicks the back button to go back to where they came from. Ultimately, that Back button stops working because the history for that page/ tab only started when it was open.

    Now here’s where things get ironic: If we’re lucky, they close the tab. But what they often did was close the entire window!!! So this practice of opening the new window/ tab actually does exactly what the site owner was trying to accomplish, because the whole friggin browser window is closed and they are very definitely no longer on the site.

    The everyday user is just not as savvy as those of us in this Slack. Even in the case of modern browsers that open tabs by default people generally don’t get it. It was amazing.

  3. zakim-robot
    @zakim-robot
    Jul 12 02:58
    [nschonni] @chrisgeary92 thanks for the link, i just posted it on a issue where they wanted that as the default for "external" links
  4. zakim-robot
    @zakim-robot
    Jul 12 06:49
    [michiel] For what it’s worth Safari enables the back button even if a new window was opened via target=_blank :)
  5. [michiel] s/window/window or tab/
  6. zakim-robot
    @zakim-robot
    Jul 12 12:52
    [donnabungard] Just a few hours away!
  7. zakim-robot
    @zakim-robot
    Jul 12 13:01
    [virtualalex] Hello!
  8. [tink] Hello :)
  9. [virtualalex] I am having trouble understanding how to develop a good “submissions failed” process for screen readers
  10. [virtualalex] if a user inputs a form with a missing field and submitting returns the user to the same page
  11. [tink] You mean a form that returns errors?
  12. [virtualalex] how do we make sure the screen reader knows “you are back on the same page because of an error?
  13. [virtualalex] lets say the user forgot to input City
  14. [virtualalex] so now that field says “City is required” below it
  15. [virtualalex] but the reader wouldn’t know that until the user tabbed all the way back to that field… What is the optimal solution?
  16. [tink] If the form contains multiple fields, the pattern I prefer is to display an error summary above the form.
  17. [tink] Take keyboard focus to the container of the summary, so that keyboard, magnifier, and screen reader users are all aware of it.
  18. [tink] Put a heading before the error summary to explain what it is, then use a list to display the errors in the field.
  19. [tink] Make each item in the list a link that points to the field with the corresponding error, making it easy for keyboard users to move to the first/any of the errors they want to deal with.
  20. zakim-robot
    @zakim-robot
    Jul 12 13:08
    [virtualalex] hmm I don’t suppose to have an example of this so I can deliver it to the dev team?
  21. [tink] Hmm. Not off the to of my head, but the pattern is pretty simple...
  22. [tink] <div tabindex="-1" id="summary"><h1>Error summary</h1> <ul><li><a href="...">Error msg1</a></li>...</ul></div>
  23. [tink] Display that above the form, then use .focus() to take keyboard focus to the container (which can be done because of the tabindex="-1" attribute.
  24. zakim-robot
    @zakim-robot
    Jul 12 13:14
    [ghanek] the MIND patterns of the ebay team offers guidance, code, working examples.
    https://ebay.gitbooks.io/mindpatterns/content/messaging/formvalidation.html
  25. [tink] Cool :)
  26. [virtualalex] thanks!
  27. zakim-robot
    @zakim-robot
    Jul 12 13:22
    [virtualalex] can screen readers “hover” over a link?
  28. [virtualalex] how do you access hover content?
  29. [tink] Some screen readers have the capability to access hover content, but sighted keyboard users (who don't use an AT) can't - so you need to make the same functionality keyboard accessible.
  30. [virtualalex] What is AT?
  31. [tink] Sorry, my fault for using acronyms without explanation. It's an Assistive Technology - a term that includes screen readers, screen magnifiers, speech recognition tools and other tech that people use to interact with computers/devices.
  32. [virtualalex] Oh sure
  33. [virtualalex] I am using apple voiceover to audit my website
  34. [virtualalex] and running into some issues I have questions about. Thanks for helping
  35. zakim-robot
    @zakim-robot
    Jul 12 13:27
    [tink] NP.
  36. [tink] This is what this channel is for :)
  37. [virtualalex] ha yeah I am very happy there is such a channel
  38. [virtualalex] How do I use a screen reader better? I feel like i have to use Ctrl+opt+right arrow
  39. [virtualalex] all the time to tap through everythign
  40. [virtualalex] I how do I tab through like titles only? or H1s only?
  41. [tink] I put together this post on basic screen reader commands for testing https://www.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/
  42. [virtualalex] AH thank you
  43. [virtualalex] you work for Paciellogroup?
  44. [tink] It includes VO (VoiceOver)
  45. [tink] Screen readers have a lot of shortcuts for navigating through content, so you'll find screen reader users depend on the tab key much less than sighted people who use the keyboard only.
  46. [virtualalex] Oh sure looks like you do
  47. zakim-robot
    @zakim-robot
    Jul 12 13:32
    [virtualalex] We had TPG estimate doing some work with us
  48. [virtualalex] with out website rebuild
  49. [tink] I do work for TPG, yes.
  50. [virtualalex] Well it’s great to have you helping out here!
  51. [tink] Thanks :)
  52. zakim-robot
    @zakim-robot
    Jul 12 14:47
    [kaelig] Sorry for re-asking, looks like the conversation about links eclipsed my question :) https://web-a11y.slack.com/archives/C042TSFGN/p1499822124687671
  53. zakim-robot
    @zakim-robot
    Jul 12 14:56
    [donnabungard] A11y Talks JULY >> https://hangouts.google.com/hangouts/_/ex6shlrodvbobdijfztugm2xeme
    It's starting in a few minutes. Just sayin'
  54. zakim-robot
    @zakim-robot
    Jul 12 16:36
    [michiel] virtualalex: this official getting started guide from Apple for VoiceOver might come in handy too if you want to dig a little deeper: https://help.apple.com/voiceover/info/guide/10.8/English.lproj/index.html
  55. [virtualalex] Thank you
  56. zakim-robot
    @zakim-robot
    Jul 12 17:42
    [car] MS finally released Seeing AI: https://www.theverge.com/2017/7/12/15958174/microsoft-ai-seeing-app-blind-ios
    I'd love to try it out on iOS, but I am in Canada, and unfortunately it's only downloadable in the US. :( Would enjoy hearing if it's as cool as they say... ;)
  57. zakim-robot
    @zakim-robot
    Jul 12 18:17
    [seankeegan] Thought this was referenced previously, but can’t find topic - testing aria-label on a hyperlink with JAWS 18 and it is not reading aria-label attribute, only the hyperlink URL. Is this a known behavior?
  58. zakim-robot
    @zakim-robot
    Jul 12 18:33
    [seankeegan] Should mention the aria-label is within a div that is a child of the anchor. So, something like <a> <div...aria-label="text string"></div> </a> Thought there was something necessary for JAWS, but cannot remember.
  59. zakim-robot
    @zakim-robot
    Jul 12 18:42
    [geekf] @seankeegan I don't think many screen readers read the aria-label set on div. I had tried that in my code and had to eventually remove it because it didn't work in the necessary set of screen readers we had to support
  60. zakim-robot
    @zakim-robot
    Jul 12 18:50
    [car] They will read the aria-label on div if the div has a role.
  61. zakim-robot
    @zakim-robot
    Jul 12 18:59
    [seankeegan] I just tested with NVDA+FF, VO+Safari, and ChromVox and all were reading the aria-label string. JAWS seems to be the holdout.
  62. [karlgroves] a label should not be read unless the control is considered labellable
  63. [seankeegan] the div is a child of the anchor.
  64. [karlgroves] Ah, so the dom subtree of the link should contribute to the accessible name
  65. [karlgroves] BUT
  66. [karlgroves] <a href=""><div aria-label.. is no bueno
  67. [karlgroves] because the div doesn’t have a role
  68. zakim-robot
    @zakim-robot
    Jul 12 19:31
    [seankeegan] So, even though the aria-label is mapping to accName/Name as identified in the Accessibility Viewer, this is just a happy accident?
  69. zakim-robot
    @zakim-robot
    Jul 12 21:52
    [car] Can you put the aria-label on the anchor instead? Is there some reason that it needs to be on the div?
  70. [conley] title should suffice
  71. [conley] Sorry for the edits
  72. zakim-robot
    @zakim-robot
    Jul 12 22:01
    [conley] Actually, I take it all back, need coffee
  73. [seankeegan] Yes - solution I suggested is to move the aria-label to the a element instead. I don’t think it will be an issue, but it is a lot of Angular code all wrapped up within a portal environment in an attempt to make a carousel-type UI more accessible.
  74. [backwardok] if you absolutely can’t add the aria-label on the a tag, you could also theoretically create visually hidden text that has what you currently have in the aria-label and add aria-hidden to the text that has what you want to not get read
  75. [backwardok] but the aria-label on the a is the better way to go
  76. [seankeegan] Devs did initial testing with VO and NVDA and no issue was found, so they went with the <a href=""><div aria-label> approach. Who would have thought JAWS followed the accessible name computation exactly?
  77. zakim-robot
    @zakim-robot
    Jul 12 22:06
    [seankeegan] @backwardok Thanks. Good idea.
  78. [seankeegan] The a already has unique attributes, so I don’t think it will require major work to add in the aria-label. Their suffering has more to do with me reopening tickets they closed.
  79. [backwardok] question about VO that perhaps i’m missing out on - does VO allow for dynamic switching of languages within a page for inline language differences? i’m looking at @tink ‘s article (https://www.paciellogroup.com/blog/2016/06/using-the-html-lang-attribute/) and the related video that show wonderfully the language automatically adjusting on the screen reader when coming across a different lang value, but it doesn’t seem to do the same thing on VO, even if i have a supported language installed
  80. [backwardok] wasn’t sure if it was just something i’m missing with VO or if it’s something that VO just doesn’t support
  81. [seankeegan] VO does not support this type of language change right now.
  82. zakim-robot
    @zakim-robot
    Jul 12 22:18
    [backwardok] ah ok good to know thanks!
  83. [shawn.henning] @backwardok Are you talking about VO on iOS or macOS; I think iOS successfully switches, but macOS does not at least not until High Sierra which I believe is slated to fix this.
  84. [shawn.henning] Or at least iOS does in certain situations.
  85. [backwardok] i was checking on my mac, but let me check it out on my iphone
  86. zakim-robot
    @zakim-robot
    Jul 12 22:26
    [backwardok] ah ok looks like it sorta works on the iphone
  87. [backwardok] seems like some words it still doesn’t pronounce in the right language but ok for the most part
  88. [backwardok] (testing a language picker)
  89. [shawn.henning] I had an issue where the default VO voice would switch but Alex would not; it resolved when I reset my phone from OS default;
  90. [shawn.henning] A friend works in Japanese and English and I recall sending her a story that High Sierra would allow multiple languages.
  91. [backwardok] thanks for the info! :)
  92. zakim-robot
    @zakim-robot
    Jul 12 22:32
    [cyns] Anyone tried to apply WCAG 1.4.4 to Android native? What font-size and display-size settings are 200%?
  93. [cyns] @pauljadam WCAG 1.4.4 resize text on Android native???
  94. zakim-robot
    @zakim-robot
    Jul 12 23:46
    [caesar] This is just an opinion, but with high DPI mobile screens, I've spoken to several people with vision impairment who believe 1.4.4 is a waste of time because you can simply "zoom" by holding the phone closer to your face. The high DPI means there is very little loss of fidelity (pixellation)
  95. [caesar] Therefore the ability to zoom is less critical than, say, in a desktop environment
  96. [caesar] Of course take this with the requisite pinch of salt
  97. zakim-robot
    @zakim-robot
    Jul 12 23:58
    [caesar] Question: if a design includes a non-default radio widget, which is very pale, which SC does it fail? 1.4.3 only applies to text