Archive index

A11y Slackers Gitter Channel Archive 10th of November 2015

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    Nov 10 00:15
    [cordelia] I’ve seen a lot of devs use <div> just to avoid default browser styling for <button>.
  2. MichielBijl
    07:57
    @cordelia sad but true :(
  3. MichielBijl
    07:59
    People that use divs or anchors for buttons are just selfish and lazy.
  4. MichielBijl
    08:01
    Not that there is anything wrong with being lazy; as long as you don't combine it with selfishness.
  5. zakim-robot
    09:06
    [heydon] @cordelia Of course! Because reseting those styles bloats CSS and slows down the user experience or something (I’ve actually heard this argument)
  6. StommePoes
    09:21
    It's in Gmail that I found a span role="link">undo</span>, not sure if it still does that one.
  7. StommePoes
    09:21
    Larry Wall said Laziness is a virtue.
  8. StommePoes
    09:21
    http://c2.com/cgi/wiki?LazinessImpatienceHubris
  9. StommePoes
    09:51
    Hm, reading up on SVG, some of the advice is confuzling.
  10. MichielBijl
    13:45
    I haven't bothered reading the spec
  11. MichielBijl
    13:45
    Copy paste all the things!
  12. MichielBijl
    13:45
    I really should read the spec though…
  13. StommePoes
    14:01
    I'm trying to read it now. Also going through every blog post I can find, which reminds me just how much I hate people who write up blogitties with no obvious dates. Esp with stuff that changes quickly like Flexbox : /
  14. garcialo
    14:01
    Knowledge is timeless!
  15. MichielBijl
    14:02
    Read stuff by Sara Soueiden, she seems to get positive reviews :)
  16. MichielBijl
    14:02
    This message was deleted
  17. StommePoes
    14:03
    But I was reading a not-too-old post by @ljWatson on sitepoint and there was a part where "let's add an anchor so it's keyboardable" but later she still had to add a tabindex="0" (and a role of link but I can see how, because inside an SVG, AT call it some J Random Clickable maybe)
  18. StommePoes
    14:03
    Oh yeah, I missed her Fronteers talk last year, I should go look it up.
  19. StommePoes
    15:44
    Hey does anyone here have the new JAWS? 17?
  20. LjWatson
    15:44
    I do
  21. StommePoes
    15:44
    I'm wondering if the fancy new table navigation I heard about was something people can toggle on, or if it's replacing "normal" table navigation. I've only even heard about it in blog posts
  22. LjWatson
    15:45
    It's turned off by default. YOu can enable it for tables, controls, or both.
  23. StommePoes
    15:45
    Oh great.
  24. StommePoes
    15:45
    I'll get the 2-upgrades-included plan then. Thank you!
  25. LjWatson
    15:45
    But IMO it makes table navigation easier because it only requires one hand... so I can keep my cup of tea in the other :)
  26. StommePoes
    15:45
    Also, since you're here: do you remember why you had to add a tabindex="0" to an anchor inside an SVG when writing the SitePoint article last year?
  27. LjWatson
    15:46
    Because keyboard handling for native SVG is rubbish in some browsers, even for natively focusable elements.
  28. StommePoes
    15:46
    Oh I want the new navigation too, but I figure I'd better test like our majority users who often don't have latest and greatest... students who get upgrades often get them later than when a new version is out.
  29. StommePoes
    15:46
    Ah okay. An extra push.
  30. LjWatson @LjWatson nods. Good point about testing.
  31. StommePoes
    15:47
    Like at my old job, we tested back to IE7 not because of our clients, but our clients' clients were still on 7 until Microsoft forced XP to die.
  32. StommePoes
    15:48
    Meanwhile, pretty much zero corporate clients of ours were running bleeding-edge anything. For students, if they're not IT students, I expect the same. Also with the restrictions some institutions have for what software can be installed or not. And libraries.
  33. StommePoes
    17:14
    Bleh, SVG requires more fingers and toes than I have... Bezier curves, gawd
  34. MichielBijl
    17:18
    Hand coding that stuff is crap.
  35. MichielBijl
    17:18
    It's like the clip-path thing
  36. MichielBijl
    17:18
    You should be able to do clip-path: figure-in-my-head; and call it a day.
  37. zakim-robot
    18:49
    [marcysutton] @jdan: I’ve had to add tabindex=0 and role=button to DIVs due to technical debt. I could see that happening in something like Gmail, sadly.
  38. zakim-robot
    18:49
    [lliskovoi] @MichielBijl ha! that would be amazing. Right up there with the image ‘enhance’ feature
  39. MichielBijl
    19:07
    @marcysutton what exactly is technical debt?
  40. garcialo
    19:08
    @MichielBijl buzzword for cruft
  41. MichielBijl
    19:08
    “a recent metaphor referring to the eventual consequences of any system design”
  42. MichielBijl
    19:08
    That's a fancy way of saying crap.
  43. zakim-robot
    19:08
    [marcysutton] It’s a crappy place to be. Code generated by old systems that can’t be replaced easily, despite DIV > BUTTON being low-hanging fruit in HTML.
  44. zakim-robot
    19:09
    [marcysutton] The app I was working on generates web code in a very sophisticated way, but it needs semantics to be architected into it. It will be done eventually, but “fixing” buttons with attributes was a temporary solution until that happens.
  45. zakim-robot
    19:10
    [car] Question about aria-label vs. aria-labelledby.
    Say I have an element A that contains some nice label text, and an element B that I want to label with the text from element A.
    Of course, they're both being generated in javascript, so the text is actually stored in a var elementAText that I can put anywhere I want. :)
    Is there any reason to use aria-labelledby over aria-label in this case?
    Sometimes, aria-labelledby can be more work to use, because you have to create an id for element A, make sure it is unique, and then find a way through the crazy framework to set the id for element A onto element B.
    When I could just say: elementB.setAttribute("aria-label", elementAText);.
  46. MichielBijl
    19:10
    One could argue the sophisticated part if it can't produce a <button>
  47. MichielBijl
    19:12
    @car What is element A and what is element B?
  48. MichielBijl
    19:13
    @marcysutton but better to have someone care enough to at least build in some fall back stuff :)
  49. zakim-robot
    19:13
    [marcysutton] Oh yes. Don’t get me started… :simple_smile: I definitely underestimated how much that app is doing, though, hence the “sophisticated” label.
  50. zakim-robot
    19:17
    [car] element B is a <section> and element A was waaaay up in the framework, and it's (surprise!) a <div>. This is a "sophisticated" architecture also... ;)
  51. MichielBijl
    19:18
    A label should do fine if you ask me.
  52. MichielBijl
    19:18
    Not sure about so stuff, but for name calculation that should do.
  53. zakim-robot
    19:20
    [car] That's what I thought. I couldn't see the point of doing all the extra work of tying the two elements together when I had the text that I wanted right there in front of me.
  54. MichielBijl
    19:21
    You could argue it being cleaner to have them linked (as to not duplicate content), but that is sort of moot I guess.
  55. zakim-robot
    19:23
    [jamesn] @marcysutton: I understand adding roles and tabindex. Sometimes the choice is between doing nothing to fix the accessibility and adding tabindex and role. We all understand it is not optimal but at the stage of the release cycle sometimes it is the only choice.
  56. zakim-robot
    19:24
    [marcysutton] Exactly. To put it another way: there is some accessibility in that build now, and it will get better when they pick up the Trello cards I spec’d for them :simple_smile:
  57. zakim-robot
    19:24
    [car] @michiel: Yes, I thought that if it was a particularly long label, one might worry about bytes being transmitted more than once.
  58. MichielBijl
    19:25
    Is jQuery in your project?
  59. MichielBijl
    19:25
    Or any other JavaScript library?
  60. MichielBijl
    19:26
    In anycase I wouldn't worry too much about those couple of extra bits if you load 93KB of JS to start with ;)
  61. zakim-robot
    19:30
    [jamesn] @car: this is why we need selectors in aria for elements which use idrefs.
  62. MichielBijl
    19:31
    Hmm, you mean like css selectors?
  63. zakim-robot
    19:31
    [car] @michiel: Nope, no jQuery, no Dojo, but we do have some stuff, like requirejs and eslint...
  64. MichielBijl
    19:31
    I can see problems with that.
  65. zakim-robot
    19:31
    [car] @michiel
  66. MichielBijl
    19:32
    As much as I despise adding ID's to everything, how else would make it unique?
  67. zakim-robot
    19:33
    [car] oops - trigger-happy. Actually, aria-labelledby migh make sense for static pages, but come to think of it, for dynamic pages, the string really was only downloaded once.
  68. MichielBijl
    19:33
    @car I meant it more like it doesn't matter to add a couple of bits to make it more usable if you load other big stuff.
  69. MichielBijl
    19:33
    Then it is especially moot :p
  70. zakim-robot
    19:33
    [car] Yep.
  71. StommePoes
    19:39
    I turned a div into a button for a jQuery plugin because I wanted to be able to update it when it needed updating without needing to change ALL The Things.
  72. StommePoes
    19:39
    But I talked to the plugin writer about it and he was all super cool about it and rewrite his plugin and tested it with VO so now the button is really a button-button :)
  73. MichielBijl
    19:40
    :D
  74. StommePoes
    19:41
    I read those front-ender questions, i'd have trouble with a lot of them
  75. MichielBijl
    19:44
    Yeah there are some though questions in there.
  76. MichielBijl
    19:44
    Especially the networking stuff
  77. MichielBijl
    19:44
    Talking about: http://www.michielbijl.nl/2015/11/10/front-end-job-interview-questions/
  78. MichielBijl
    19:47
    Does anyone have issues with scrolling on this page: http://fantasai.inkedblade.net/style/design/w3c-restyle/2016/sample
  79. MichielBijl
    19:48
    In Safari 9, if I scroll the left pane to the bottom, and then the right pane to anywhere but the top, and then try to scroll the left pane again, it gets stuck.
  80. zakim-robot
    19:50
    [car] @jamesn
  81. StommePoes
    19:51
    Internet Explorer scrolls both fine, though I wish there were keyboard shortcuts to each side
  82. MichielBijl
    19:51
    Yeah, not arrow keys scrolling either.
  83. zakim-robot
    19:52
    [car] @jamesn I wasn't sure what you meant by "we need selectors in aria for elements which use idrefs" - do you mean along the lines of the discussion here: https://lists.w3.org/Archives/Public/public-pfwg/2014Mar/0079.html
  84. StommePoes
    19:53
    @michiel I can scroll both with keys once I've focussed on something in the pane. I suppose that wouldn't work if there were a pane without a focusable.
  85. StommePoes
    19:54
    And it should work all the time in Firefox, they make scrolly boxes focusable
  86. StommePoes
    19:54
    But in IE to get to the sidebar pane, it's last in source so I have to go through the main pane first
  87. MichielBijl
    19:54
    If anyone else is interested: there is a discussion on the list here: https://lists.w3.org/Archives/Public/public-pfwg/2015Nov/0081.html
  88. MichielBijl
    19:56
    I'm not sure how to focus the scroll box in firefox?
  89. StommePoes
    19:57
    It just gets added to usual tab order so you'd still have to tab away in the main pane until you get to the sidebar pane
  90. MichielBijl
    19:57
    Okay, that would still suck if you're halfway through
  91. StommePoes
    19:58
    Huh I'm wrong, the side pane seems to be after the beginning of the main pane
  92. StommePoes
    19:58
    lemme check IE again
  93. StommePoes
    19:59
    Oh, neat. You tab the main pane until right before the "Introduction" heading
  94. StommePoes
    20:00
    the next tab brings focus over to the sidebar pane. Once I'm focussed in there my arrows scroll that too, but if I tab through it I end up back at Introduction... if I didn't click something in the sidebar pane
  95. StommePoes
    20:01
    but because IE is IE, clickikng a sidebar pane link doens't move my focus-focus to the correct area in the main pane.
  96. StommePoes
    20:01
    They either need to Javascript that in or add tabindex="-1" to those destinations
  97. StommePoes
    20:01
    Same for Blink browsers, they done br0ke
  98. StommePoes
    20:02
    If they fixed the focus issues for the b 0rk browsers, I'd like this setup
  99. StommePoes
    20:02
    for desktop anyway
  100. MichielBijl
    20:02
    Hmm, that is certainly true
  101. MichielBijl
    20:02
    It looks nice, but needs some fixes :)
  102. StommePoes
    20:03
    Yeah so if fantasai doesn't want to tabindex the hell out of everything, then she's gotta JS it : (
  103. MichielBijl
    20:03
    Ah, the focus stuff works in Safari too
  104. StommePoes
    20:03
    I like the tabindex one because browsers don't have to run code for it
  105. MichielBijl
    20:03
    Yep
  106. StommePoes
    20:03
    Safari is kinda broke if they only fixed the "in-page skip links focus on a focusable" since these headings aren't focusables... did they fix that?
  107. MichielBijl
    20:03
    You mind if I post your findings to the list?
  108. StommePoes
    20:04
    does the next Tab go from visual focus after clicking a linik?
  109. StommePoes
    20:04
    link?
  110. MichielBijl
    20:04
    No, I meant you can focus the left pane thing and scroll with arrows
  111. StommePoes
    20:04
    Yeah but these are known bugs btw, lemme troll my twitter, I had just posted the bugs to someone else
  112. StommePoes
    20:04
    I can in IE and FF on Windows. It's possible that's not a thing on OSX?
  113. StommePoes
    20:05
    I don't have the Stinkpad on now so no linux but in general I can do the same kind of scrolling on all my linux browsers
  114. StommePoes
    20:06
    Here's the blink bug https://code.google.com/p/chromium/issues/detail?id=262171
  115. StommePoes
    20:06
    it's a KHTML bug inherited by Webkit inherited by Blink
  116. MichielBijl
    20:06
    They didn't fix that
  117. StommePoes
    20:06
    I never found the IE bugs, but both are mentioned here http://accessibleculture.org/articles/2010/05/in-page-links/
  118. StommePoes
    20:06
    the first bug is the old haslayout bug skip links have had since forever
  119. StommePoes
    20:06
    but I'm using IE 11
  120. StommePoes
    20:06
    a separate bug is still hitting it
  121. MichielBijl
    20:06
    I simply meant that you can scroll the thingy with arrow keys
  122. StommePoes
    20:07
    and adding tabindex="-1" to the destination element still works (if the destination is natively focusable IE has no issues I don't think)
  123. StommePoes
    20:07
    Well that's some property of focus in browsers, maybe not all browsers
  124. StommePoes
    20:07
    I notice here on Windows I can't have the mouse over an application and be able to mouse-wheel scroll like I can on Linux, it's a bit annoying
  125. MichielBijl
    20:08
    That drives me nuts whenever I need to use windows.
  126. StommePoes
    20:08
    And in applications on Windows, I can arrow to move focus on focusable things, but that's not the same as what IE and FF are doing here (scrolling without moving focus)
  127. StommePoes
    20:09
    Don't you have something non-OSXy at home?
  128. StommePoes
    20:09
    get some dead computer and throw linux on it, run firefox and orca
  129. MichielBijl
    20:10
    I have VirtualBox with some different installs
  130. MichielBijl
    20:10
    Archie, Fedora, Ubuntu, IE11 on Win7-10, and Edge on 10.
  131. StommePoes
    20:10
    But doesn't the host have some controls over what keys etc do?
  132. StommePoes
    20:11
    I'm running Debian in a VM here on WIndows and it's just horrid : P
  133. MichielBijl
    20:11
    Had a problem with NVDA where I cannot assign a modifier key and that caps lock doesn't work.
  134. MichielBijl
    20:11
    But other than that, not that I noticed anyway.
  135. StommePoes
    20:12
    Yeah though having a windows machine for testing is harder than having a linux machine, price wise
  136. StommePoes
    20:12
    The Debian here has choppy-unreadable text because it can't use cleartext or whatever they replaced cleartext with
  137. StommePoes
    20:12
    linux on linux has very nice letters
  138. MichielBijl
    20:12
    I still prefer OS X font rendering :)
  139. MichielBijl
    20:12
    Sooooo smooth
  140. StommePoes
    20:13
    I haven't seen it since the fatty-mcblur stuff Safari had (I had Safari on Windows for a while, saffy 3 had the mac rendering)
  141. StommePoes
    20:13
    My old job had a designer who always complained about how the text looked on "real" computers compared to his designs. I had to constantly show him that it's a Mac thing and if he didn't like it he should start a crusade to make the world use macs
  142. StommePoes
    20:14
    So he always had me making everything bold
  143. StommePoes
    20:14
    which looked like crap everywhere
  144. StommePoes
    20:14
    Ooh, when I get ZoomText on this machine I'm going to have to turn off the font-smoothing or cleartext whatever too
  145. StommePoes
    20:15
    Made firefox almost impossible to read
  146. MichielBijl
    20:16
    It's just what I prefer, it should work with whatever rendering you like, right? So that designer shouldn't have bothered complaining :p
  147. StommePoes
    20:16
    He was new to the ideas of the web
  148. MichielBijl
    20:17
    Ah, print?
  149. StommePoes
    20:18
    He wanted lots of fancy stuff, current website is 2360 KB compressed.
  150. StommePoes
    20:18
    I guess. He's pretty good at design, but just doesn't know the web
  151. StommePoes
    20:18
    He's actually a marketer rather than a print designer, he just has a good eye for design
  152. StommePoes
    20:18
    but yeah, photoshop all the things.
  153. StommePoes
    20:19
    that website size is homepage only.
  154. StommePoes
    20:19
    random inner page: 4715 KB
  155. StommePoes
    20:20
    (that's 4kb of content, and a lot of that "content" is lots of sandbag HTML elements for font-awesomes and bootstrap structures)
  156. MichielBijl
    20:21
    Our homepage is 3.5MB, and has fast moving video…
  157. StommePoes
    20:21
    This homepage has a video too
  158. MichielBijl
    20:21
    Warning, contains fast moving video: https://www.lukkien.com/nl/
  159. StommePoes
    20:21
    Bram has said that company has had a11y issues for a long time
  160. StommePoes
    20:22
    I'm getting 1309 KB compressed.
  161. StommePoes
    20:23
    That's what FF is telling me.
  162. MichielBijl
    20:24
    Hmm, weird, 3.5 is what it said in the inspector network tab after a clean load.
  163. StommePoes
    20:24
    I'm using Pederick's FF toolbar with View Document Size
  164. StommePoes
    20:25
    If it's giving lower numbers for yours, ask it what it says this page weighs: cloudsuite.com
  165. MichielBijl
    20:26
    0kb, let me try again :P
  166. StommePoes
    20:27
    Oh, check the dutch one if it's not the defualt. Dutch one is 2905 KB, in my dutch browsers it loads Dutch, my Firefox is english so loads English... two different sizes
  167. MichielBijl
    20:28
    530-740KB
  168. MichielBijl
    20:28
    :/
  169. MichielBijl
    20:28
    I don't trust this Firefox thing.
  170. MichielBijl
    20:29
    Safari says 2.3MB
  171. StommePoes
    20:29
    In the toolbar (web developer toolbar addon by chris pederick), under Information is a bunch of stuff you can choose, near the bottom is View Document Size
  172. StommePoes
    20:30
    Yeah saffy fits what I see, 2360KB on the english homepage
  173. StommePoes
    20:30
    In View Document Size it lists content, scripts, stylesheets, objects, and then compressed and uncompressed numbers
  174. StommePoes
    20:30
    and images
  175. StommePoes
    20:30
    so you can see who's the biggest hog if it's mostly one thing
  176. StommePoes
    20:31
    So the random inner page I checked of cloudsuite is mostly huge because the site's huge + lots of large images.
  177. MichielBijl
    20:31
    I should download that toolbar thing.
  178. StommePoes
    20:32
    I use it for easy turn-off stuff: styles, images, etc. For quick eyeball testing. I used to use it more before there were dev tools
  179. StommePoes
    20:32
    I wish it had live headers built-in, it's another ff plugin I use if charsets seem weird
  180. StommePoes
    20:32
    I haven't figured out how to get most browsers to tell me the server headers, I'm sure they all can just do it
  181. MichielBijl
    20:33
    I mainly use Safari to develop
  182. MichielBijl
    20:34
    And test in all others.
  183. StommePoes
    20:34
    I wonder if I can load an image directly to here
  184. StommePoes
    20:34
    meh, I'll twot
  185. MichielBijl
    20:35
    Neat
  186. StommePoes
    20:36
    https://pbs.twimg.com/media/CTejyD1WEAIRe4K.png
  187. StommePoes
    20:36
    heh, if I were on linux I could have just scp'd that to stommepoes.nl
  188. StommePoes
    20:36
    I need to get that mini gnu thing working
  189. MichielBijl
    20:44
    I have to get some rest, bye :)
  190. MichielBijl
    20:44
    Stupid smileys…