Archive index

A11y Slackers Gitter Channel Archive 9th of December 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Dec 09 14:23
    [jv] how does designer/developer decide whether an image (not icon, loading spinners etc) is a part of content and when not
  2. [jv] I see many pictures being used as CSS background in many websites, mainly as big hero image (a name of it)
  3. [jv] developer use css because background-size:cover make the image responsive very easily
  4. zakim-robot
    @zakim-robot
    Dec 09 14:28
    [jv] Is it ok to treat those real pictures as decorative picture and use CSS background to add them?
  5. [nilsel] as far as I know the basic rule is; if the image conveys any information the user needs to use/understand the site, it should be a <img with alt="something"
    (If you need it to be a CSS background there's probably other (more complicated) ways to get around it (adding a screenreader-only element with a description, aria-labeled/describedby, etc))
  6. zakim-robot
    @zakim-robot
    Dec 09 14:34
    [jv] > if the image conveys any information the user needs to use/understand the site
  7. [jv] this is where things get compilcated
  8. [nilsel] yeah :) that can be hard to determine sometimes
  9. [jv] It depends whether designer is interested in conveying the content of the image to the screen reader user or not
  10. zakim-robot
    @zakim-robot
    Dec 09 14:41
    [jv] https://twitter.com/NorthofRapture/status/807228096634093568
  11. Mallory
    @StommePoes
    Dec 09 15:06
    I turn off background images and can I still use the site and do I get all the information I'm expecting?
  12. So hero images are 99% of the time completely f*cking worthless data-eaters, but sometimes tehy have text in them (that you would want to let the user get).
  13. Also the images accompanying a news story as a blurb on a page of news stories... it's often really advertising for the story. The images within the news story however usually are content and should be foreground <img> tags and need alts (or some other trick if the CMS wants tehm as background images)
  14. @karlgroves NVDA seems to support aria-busy, we use it on all our crappy react/angular pages for while it's switching routes
  15. And it does actually say "busy"
  16. Does anyone here know a way to record or send (like in a webinar or something similar to Google Hangouts) magnified screens? Absolutely nothing I've tried is working
  17. and I would like to give my talk I gave to my (remote) colleagues. The live presentation worked with HDMI->VGA but did not work via Chrome cast.
  18. I also tried screen recording software (ATOMI, bandicam) and they also don't pick up the magnified screen (though they did get system audio which allowed the video to at least hear it)
  19. zakim-robot
    @zakim-robot
    Dec 09 15:12
    [pluma] @StommePoes, someone in #assistive-tech mentioned you're on Linux. Can you recommend a good screenreader I can use during development on Linux? So far the only recommendation seems to be to install a Windows VM and use NVDA.
  20. Mallory
    @StommePoes
    Dec 09 15:28
    pluma you only have 1 for GUI: Orca.
  21. Although there is emacspeak and espeak for the terminal
  22. But Orca is more like VO than like the Windows screen readers. It doesn't have a virtual buffer for instance.
  23. The keystrokes aren't too horribly different though.
  24. And, you'll want to join the orca mailing list
  25. it's active and has people answering lots of questions (however, check the archives for a particular question first, like if Orca doesn't start up right away when you thought it should)
  26. Sorry it's mailman page but https://mail.gnome.org/mailman/listinfo/orca-list
  27. Also: there's some new stuff going on in Linux-land... X11 is old but works. It's getting replaced with something called Wayland https://en.wikipedia.org/wiki/Wayland_(display_server_protocol)
  28. There are things coming across in the mailing list where something works on X but not while Wayland is running. So watch out.
  29. You can run many of the popular distros, but if you want a talking install, use Vinux. Vinux is a little behind but actively follows Ubuntu.
  30. If you're required to run particular software that doesn't run on Linux or is written in something that's not necesasrily accessible like written in qt5, wx, etc then indeed a VM with NVDA might work better.
  31. Mallory
    @StommePoes
    Dec 09 15:39
    @pluma ^
  32. zakim-robot
    @zakim-robot
    Dec 09 15:41
    [pluma] I'm sighted so I don't need a screen reader myself but I would love to be able to have a screenreader to debug accessibility issues while developing.
  33. [pluma] Does Orca work with browsers intelligently? I tried some screenreaders in the past and they would just run the content throught TTS with no consideration for the markup.
  34. Mallory
    @StommePoes
    Dec 09 15:44
    It works pretty ok with Firefox or other gecko browsers. It's supposed to work with webkit browsers (empathy) because webkit support was added as more and more things were webkit based (like yelp and some other programs)
  35. It's as markup-oriented as NVDA or JAWS.
  36. But it works a bit differently.
  37. Also the main developer would rather not have hacks, which traditionally orca has had a lot of hacks, so as they're trying to tone down/remove hacks, they are increasingly trying to rely on whatever the browser gives them in the accessibility tree. This has good and bad points. Currently investigating if it's FF or not that's not passing on SVG names when they are inside buttons.
  38. Also, I'm using 3.18 and that's already a bit out of date, looks like 3.22 is the latest
  39. there's orca master, that's not necessarily stable but it's like the latest orca. Then there are stable releases that people should be able to get via apt-get or whatever.
  40. Orca's got the usual quick navigation by HTML type, it has a focus mode (and a sticky focus mode) you can turn on and off (it announces with the words rather than a sound). There's support for a lot of languages. You can add festival or whatever voices if you hate the default synth (which is pretty bad but if you're used to NVDA with default synth it's prolly fine)
  41. It won't work with inaccessible browsers like Chome/chromium.
  42. Mallory
    @StommePoes
    Dec 09 15:51
    test
  43. zakim-robot
    @zakim-robot
    Dec 09 16:58
    [ted_drake] @spell Laura Lippay investigated this and the connection between accessible content and SEO. Here’s her article: https://moz.com/blog/seo-accessibility-formatting-and-links
  44. [pluma] Thanks @StommePoes
  45. [pluma] Seems Orca is already installed on my system, I'll just have to read on using it with Firefox then. Bummer that Chrome is inaccessible because I really prefer Chrome for development.
  46. zakim-robot
    @zakim-robot
    Dec 09 17:06
    [quidkid] for proper semantic flow, if I have an accordion widget that is currently built with one ul tag and lots of li tags. if i want to denote the headings of the accordion widget as <h3> should I put it in between the li tag or outside the li tag. or does it not matter?
  47. zakim-robot
    @zakim-robot
    Dec 09 18:20
    [spell] Thanks, @ted_drake! Will give it a read!
  48. zakim-robot
    @zakim-robot
    Dec 09 19:01
    [marcysutton] Happy friday Slackers (coffee emoji)
  49. zakim-robot
    @zakim-robot
    Dec 09 19:52
    [beth] Hey Marcy, looks like we were given the same time slot for CSUN.
  50. [marcysutton] Dangit!! so many overlaps
  51. [beth] I know, I would like to be able to attend your session. I’ll just have to catch you some other time.
  52. [beth] Monday’s the big day… how you holding up?
  53. zakim-robot
    @zakim-robot
    Dec 09 19:58
    [marcysutton] Without going to look...which one overlaps? I have two slots
  54. [marcysutton] Should I know what's happening on Monday?
  55. [beth] Integrating Accessibility into your Development Workflow with Attest
  56. [beth] Dec. 12th
  57. [beth] ACAA deadline
  58. [beth] For some reason, I thought you were consulting for one of our competitors.
  59. [spell] @quidkid Not between the li's but within the li. Assuming li is your accordion, so <li> <h3> .. </h3> ... </li>...or, better, have you checked out details/summary elements yet?
  60. [marcysutton] Ah yes. I work at Deque but I'm on the product development team
  61. zakim-robot
    @zakim-robot
    Dec 09 20:04
    [beth] Ok… so I’ll let it slide that you don’t have the 12th marked on your calendar. ;)
  62. [marcysutton] ha!
  63. [marcysutton] That is a BIG day though! About time that airlines get their act together.
  64. [marcysutton] It has been great seeing the improvements thus far
  65. [beth] It’s only the tip of the iceberg, but it’s a start!
  66. [marcysutton] I have a new Egghead lesson by the way–partly motivated by our talks here about how to use HTML inert https://egghead.io/lessons/html-5-accessible-modal-dialogs
  67. [marcysutton] I think I need to follow up with one on non-modal dialogs like the Gmail compose window @sitaggart pointed out in #aria-patterns
  68. [beth] Perfect timing… working with a new agency that isn’t quite up to speed with a11y. I am currently creating a list of video for the Dev team to watch.
  69. zakim-robot
    @zakim-robot
    Dec 09 20:21
    [spell] Watched it this morning, @marcysutton. It was awesome! Great job!
  70. [marcysutton] Woo! Thanks!
  71. Mallory
    @StommePoes
    Dec 09 20:31
    :( we have too many Java people and not enough front-enders who know HTML let alone HTML and JS a11y. I'm getting assigned to all these teams and projects and I need to find a buttload of devs
  72. I'm not even that good, all the good people have left and now they're stuck with me
  73. any unemployed html/js/a11y people, point me to them
  74. James Nurthen
    @jnurthen
    Dec 09 20:47
    @StommePoes I think you might have the wrong gitter window ;)
  75. Mallory
    @StommePoes
    Dec 09 20:50
    I only have one
  76. this is the only group of people I know who know good devs who also know a11y
  77. James Nurthen
    @jnurthen
    Dec 09 20:50
    yeah - agree there
  78. Mallory
    @StommePoes
    Dec 09 20:50
    thing is, those people aren't wandering around unemployed, but... anyway.
  79. I'll throw it out into the void
  80. fstorr
    @fstorr
    Dec 09 20:51
    @marcysutton nice video on modals, inert, etc. I wasn't aware of those polyfils but they're going to come in really useful :)
  81. zakim-robot
    @zakim-robot
    Dec 09 20:52
    [marcysutton] yay! I'm hoping with adoption that we end up getting a real inert from UA's
  82. [marcysutton] And <dialog>
  83. fstorr
    @fstorr
    Dec 09 20:53
    Having <dialog> and inert in all browsers would be so useful. So many modals that need fixing. Also, some sort of native functionality for focus management in pop-ups would be incredibly useful. For example, not having to write custom javascript for navbar dropdowns or <menu> elements would be wonderful.
  84. James Nurthen
    @jnurthen
    Dec 09 20:55
    @marcysutton does the inert polyfill take into account access keys on inert content?
  85. zakim-robot
    @zakim-robot
    Dec 09 20:56
    [marcysutton] I'm not sure off the top of my head, that would be a good question for @robdodson or @alice. I assume so
  86. James Nurthen
    @jnurthen
    Dec 09 20:56
    I'll check it out - if not i'll log an issue
  87. Mallory
    @StommePoes
    Dec 09 20:56
    Looking at all Chaals is pushing on, I get the feeling everyone's ignoring accesskeys
  88. hopeing they'll go away or something
  89. James Nurthen
    @jnurthen
    Dec 09 20:56
    yeah but they exist in the wild
  90. I have never understood the hate for accesskey
  91. it certainly isn'
  92. Mallory
    @StommePoes
    Dec 09 20:57
    Chaals would like to have them better standardised in browsers and maybe work together to offer navigation by landmark
  93. James Nurthen
    @jnurthen
    Dec 09 20:57
    yeah - i would too.
  94. but until it happens accesskey is the only thing we have
  95. Mallory
    @StommePoes
    Dec 09 20:58
    it's support is iffy at best... somewhere we have a github
  96. https://github.com/chaals/accesskey
  97. James Nurthen
    @jnurthen
    Dec 09 21:01
    well - if you are looking at cyrillic characters yes
  98. Mallory
    @StommePoes
    Dec 09 21:01
    http://chaals.github.io/accesskey/tests/index.html
  99. he just has those i there because he has access because yandex
  100. but I also tested, it was pretty different per browser
  101. only the simplest implementation worked
  102. *worked most places
  103. there's also tests there for things that obviously should be errors
  104. James Nurthen
    @jnurthen
    Dec 09 21:02
    yeah - we all agree it is broken - but it isn't broken so the "let's throw it away" level which I sometimes hear
  105. it is broken to the "we need to fix it" level.
  106. unfortunately browser vendors don't seem to care
  107. fstorr
    @fstorr
    Dec 09 21:05
    Quick question: I remember hearing a phrase that describes the jolt/confusion a non-sighted person can have if focus is suddenly moved to a new element. I can't remember what that phrase is and it's driving me mad. Anyone know?
  108. Mallory
    @StommePoes
    Dec 09 21:05
    Yeah, that's the issue.
  109. hocus focus?
  110. no...
  111. focus jacking maybe
  112. zakim-robot
    @zakim-robot
    Dec 09 21:05
    [alice] nope: https://web-a11y.slack.com/archives/general/p1481316993000418
  113. Mallory
    @StommePoes
    Dec 09 21:05
    hocus focus is where it "vanishes" usually to the body or the top of the page, but you're not even sure
  114. I can't reach that, what's in that link?
  115. James Nurthen
    @jnurthen
    Dec 09 21:06
    yeah me neither
  116. @alice
  117. fstorr
    @fstorr
    Dec 09 21:07
    It was something like "focus shock" or something. I like hocus focus for the top-of-the-page thing
  118. Mallory
    @StommePoes
    Dec 09 21:07
    h-f is for like when you're focussed on a button who, when clicked, becomes disabled. Or you clicked "delete" on a table row and that whole row vanished and no focus management was done.
  119. It's worse when you're using magnification, focus being randomly thrown somewhere
  120. because your whole screen lurches to that element
  121. zakim-robot
    @zakim-robot
    Dec 09 21:09
    [alice] @jnurthen
  122. Mallory
    @StommePoes
    Dec 09 21:09
    We're wondering what that link points to @alice.
  123. We have to create logins
  124. zakim-robot
    @zakim-robot
    Dec 09 21:09
    [alice] oh lol, couldn't follow the thread
  125. [alice] that's crap, sorry
  126. [alice] 1 sec
  127. Mallory
    @StommePoes
    Dec 09 21:10
    hehe
  128. James Nurthen
    @jnurthen
    Dec 09 21:10
    even worse for me I am actively blocked by firewall
  129. Mallory
    @StommePoes
    Dec 09 21:10
    Oh, I'm just blocked by laziness and an allergy to Yet More Logins
  130. Alice
    @alice
    Dec 09 21:10
    :point_up: December 9, 2016 12:56 PM
  131. zakim-robot
    @zakim-robot
    Dec 09 21:10
    [alice] same thing in gitter
  132. Mallory
    @StommePoes
    Dec 09 21:11
    oh ah oh. That took me a moment
  133. I am a slow context-switcher.
  134. James Nurthen
    @jnurthen
    Dec 09 21:12
    ah - ok. I will log an issue
  135. zakim-robot
    @zakim-robot
    Dec 09 21:12
    [alice] will accesskey focus even unfocusable things?
  136. [alice] even aria-hidden things?
  137. [alice] what should the behaviour be?
  138. James Nurthen
    @jnurthen
    Dec 09 21:13
    I would want accesskey to be ignored if the key was on something that was inert
  139. zakim-robot
    @zakim-robot
    Dec 09 21:13
    [alice] [well IMO the behaviour should be that the accesskey does nothing, but I'd be interested in what happens in the polyfill as-is]
  140. James Nurthen
    @jnurthen
    Dec 09 21:14
    yeah - I need to test it... I'll clone it when I get a chance and add accesskey to the demo
  141. zakim-robot
    @zakim-robot
    Dec 09 21:25
    [alice] thanks :) :)
  142. [alice] should be straightforward enough to add
  143. [alice] save & remove accesskey info on inertify, add it back on un-inertify
  144. James Nurthen
    @jnurthen
    Dec 09 21:27
    yeah - that should do the trick. Unless of course people mess with accesskey while an area of the page is inert :worried:
  145. zakim-robot
    @zakim-robot
    Dec 09 21:28
    [alice] I mean if people wanna do that that's their business
  146. [alice] they can also hack the tabindex of inert content and break it
  147. [alice] it's a polyfill, not a cop :)
  148. James Nurthen
    @jnurthen
    Dec 09 21:29
    yeah - let the crazies be crazy
  149. zakim-robot
    @zakim-robot
    Dec 09 21:29
    [alice] eh I try to avoid ableist language in the a11y channel but I agree with the sentiment :)
  150. James Nurthen
    @jnurthen
    Dec 09 21:30
    yeah - apologies. I was thinking politically not ability wise
  151. but again i apologise
  152. zakim-robot
    @zakim-robot
    Dec 09 21:30
    [alice] no drama <3
  153. fstorr
    @fstorr
    Dec 09 22:08
    Anyone know anything about tab order and rtl pages? Putting dir="rtl" moves content from the left to the right but the tab order stays ltr. I assumed that the tab order would change as well, but clearly I'm wrong.
  154. zakim-robot
    @zakim-robot
    Dec 09 22:11
    [alice] whoa, what?
  155. fstorr
    @fstorr
    Dec 09 22:12

    @alice slap this in an editor and try it: <!DOCTYPE html>

    <html dir="rtl">
    <head>
    <style>
    section{
    background:hsl(0,0%,95%);
    width:60%;
    }
    </style>
    <body>

    <section>
    <a href="#">One</a>
    <a href="#">Two</a>
    </section>
    </body>

    </html>

  156. zakim-robot
    @zakim-robot
    Dec 09 22:12
    [alice] tab order should stay with DOM order; if stuff is moved around the tab order should follow it
  157. fstorr
    @fstorr
    Dec 09 22:13
    I thought that setting rtl would make the One link get focused on first. But that's obviously wrong.
  158. zakim-robot
    @zakim-robot
    Dec 09 22:19
    [alice] well "one" is still to the left of "two"
  159. [alice] @fstorr try this: http://output.jsbin.com/yiwufiqeqi
  160. fstorr
    @fstorr
    Dec 09 22:24
    @alice huh. that works. is it down to not just the dir attribute but the text on the page?
  161. James Nurthen
    @jnurthen
    Dec 09 22:24
    I guess the browsers are clever enough to know if the page only has western characters on it then rtl was likely a mistake and it kind of ignores it
  162. zakim-robot
    @zakim-robot
    Dec 09 22:26
    [alice] I think the page RTL affects the blocks but the text has to be in a RTL language to affect text flows handwave
  163. Mallory
    @StommePoes
    Dec 09 22:26
    yeah your cursor changes direction not by the dir attr but by the text direction
  164. James Nurthen
    @jnurthen
    Dec 09 22:26
    yeah... it seems that way from simple testing... I wish i knew more about all of this
  165. Mallory
    @StommePoes
    Dec 09 22:26
    and/or those invisible characters that state text direction
  166. fstorr
    @fstorr
    Dec 09 22:26
    Well then. That's both impressive and a little annoying as it makes my demo a little tricker :)
  167. zakim-robot
    @zakim-robot
    Dec 09 22:26
    [alice] something like that :)
  168. Mallory
    @StommePoes
    Dec 09 22:27
    I wonder if those characters were to wrap text in a p that has two anchors
  169. those might then tab the other way
  170. wft were they called... I'll have to find them
  171. bidi chars?
  172. https://www.w3.org/International/questions/qa-bidi-unicode-controls
  173. fstorr
    @fstorr
    Dec 09 22:28
    Vaguely related to this, I discovered recently that VoiceOver won't pronounce Russian characters as words unless you have the Russian voice installed.
  174. Mallory
    @StommePoes
    Dec 09 22:28
    I wonder if, even with Engrish, you did <p>(a bidi here) some text <a href="foo">linkie</a> more texty mctexttext <a href="bar">another linkie</a> texty text text (second bidi char)</p>
  175. fstorr I think Jitendra found that out on his phone as he couldn't find hindi on it
  176. fstorr
    @fstorr
    Dec 09 22:29
    interesting
  177. Mallory
    @StommePoes
    Dec 09 22:29
    and he had been testing VO I believe.
  178. Michiel on the other hand had all those languages installed
  179. but VO I don't think will auto-switch
  180. I have JAWS from an install that's Dutch but offers English. It won't switch voices when I'm on an English page, it uses the Dutch one speaking English for some reason
  181. but NVDA switches automatically for me. I haven't changed either of their settings on that.
  182. fstorr
    @fstorr
    Dec 09 22:32
    I can't get VoiceOver to automatically switch. I was going through this presentation to see the examples for myself: http://adrianroselli.com/2016/11/slides-from-accessibility-camp-toronto-2016-mind-your-lang.html
  183. Mallory
    @StommePoes
    Dec 09 22:32
    "You could also use character escapes to represent them, such as &#x2067;, but in bidirectional source text you may find that the characters in the escape don't stay together. (See Problems with bidirectional source text in markup for more on this.)" <-- I had this in Opera 12 when I used Arabic letters in my Twitter name that looked like a kitty face next to Dutch name. Opera either did it right or wrong and everyone else did it the other way, but one separated the letters to each side of the other language.
  184. For @jkva's talk I think he manually selected Swedish for teh Swedish Chef example
  185. fstorr
    @fstorr
    Dec 09 22:36
    Automatic changing would be useful as would automatic spell-checking dictionaries which, I think, Firefox does
  186. zakim-robot
    @zakim-robot
    Dec 09 22:46
    [marcysutton] Had lunch with a proponent of reusing the [hidden] attribute instead of [inert], I am still not convinced that would be better. But he is going to provide me with a test page to try and persuade my position..haha
  187. James Nurthen
    @jnurthen
    Dec 09 22:49
    but its not hidden... I think that would be misleading
  188. zakim-robot
    @zakim-robot
    Dec 09 22:50
    [melsumner] Looking at the browser/AT combinations discussed earlier today- I generally only officially support specific combinations - FF + NVDA, JAWS + IE, etc. What does everyone else do?
  189. James Nurthen
    @jnurthen
    Dec 09 22:52
    +1 you can't test everything - that is an impossible task.
  190. zakim-robot
    @zakim-robot
    Dec 09 23:05
    [marcysutton] YES I think it is misleading too. But this person believes the only difference is the style and the semantics are the same, so you could just change the underlying CSS. I don't agree personally. But I thought I'd run it by this group
  191. [marcysutton] We also limit our text matrix to widely used combinations.
  192. [quidkid] @spell Thank you so much for responding! no, i’m not sure what you mean by details/summary elements
  193. fstorr
    @fstorr
    Dec 09 23:11
    If inert basically does aria-hidden="true" and pointer-events:none then that's much more interesting and powerful than using hidden.
  194. zakim-robot
    @zakim-robot
    Dec 09 23:31
    [marcysutton] I think inert is useful on its own, without changing out the CSS style of hidden. Plus, what if those two attributes exist in the same stylesheet?
  195. [marcysutton] Talk about confusing
  196. fstorr
    @fstorr
    Dec 09 23:32
    Oh yeah, I very much like inert and hope it takes off
  197. James Nurthen
    @jnurthen
    Dec 09 23:34
    I could see having visibilility = 'obscured' or something
  198. (obviously with fewer li's in visibility :)
  199. zakim-robot
    @zakim-robot
    Dec 09 23:35
    [marcysutton] We may have to convince Stewart Bentley...