Archive index

A11y Slackers Gitter Channel Archive 5th of January 2016

What fresh hell is THIS now? - Patrick Lauke
  1. jnurthen
    Jan 05 00:04
    i think both is fine IMO but I don't really care that much
  2. MichielBijl
    Jan 05 00:06
    Did you get an invite to the aria room?
  3. jnurthen
    Jan 05 00:12
    it suddenly appeared for me
  4. jnurthen
    Jan 05 00:13
    not sure more rooms is the answer :) it will probably be exactly the same people in them
  5. MichielBijl
    Jan 05 00:14
    Haha
  6. MichielBijl
    Jan 05 00:15
    When I created it I had a magic panel where I could add all people linked to the W3C >=)
  7. jnurthen
    Jan 05 00:18
    i'm surprised there wern't more then
  8. MichielBijl
    Jan 05 00:18
    I switched to this room and when I went back it was gone =(
  9. jonathantneal
    Jan 05 00:49
    @jnurthen, @MichielBijl, I have written some vanilla JavaScript to handle the keyboard interaction you mentioned to me earlier. https://github.com/jonathantneal/posthtml-aria-tabs/blob/master/client.js
  10. jkva @jkva tests
  11. LjWatson
    14:41
    @jkva you're coming through :)
  12. jkva
    14:41
    Cheers @LjWatson :)
  13. MichielBijl
    14:52
    @LjWatson congrats on the CSSDay talk!
  14. MichielBijl
    14:52
    I'll try to come :)
  15. MichielBijl
    14:52
    @jonathantneal cool! I'll have a look tonight.
  16. MichielBijl @MichielBijl waves at @jkva
  17. MichielBijl
    14:56
    Good to see you here :)
  18. jkva
    15:00
    @MichielBijl Thanks :) I've bull^H^H^H convinced my team that we need to step from angular1 SPA to server-generated progressive enhanced webapp, so I figured that hanging around here would be good for me :) I've been asked to make a proof of concept given a single page, fun fun.
  19. MichielBijl
    15:01
    Good news to start the year!
  20. jkva
    15:02
    Yeah. Been reading @Heydon's book and bugging @StommePoes a lot, I hope I can pull this off. The main complaint from the team is "this will be very costly with regards to the time it takes", so I hope I can prove otherwise.
  21. MichielBijl
    15:03
    I think I can write a html document faster than they can write code to generate one :P
  22. MichielBijl
    15:03
    Heydon's book is good!
  23. MichielBijl
    15:04
    And you're lucky to have @StommePoes nearby.
  24. MichielBijl
    15:04
    Big bonus is that it'll be lightning fast too.
  25. garcialo
    15:04
    Okay @MichielBijl, now build, update, and maintain 100 pages. =p
  26. MichielBijl
    15:04
    Hah
  27. MichielBijl
    15:04
    I was talking about one page :P
  28. zakim-robot
    15:05
    [karlgroves] Anytime you have to do something more than once you’re doing it too many times, IMO
  29. garcialo
    15:05
    Well, you could always build the page first, and then use it as a guide for automating the building of it. ;)
  30. MichielBijl @MichielBijl immediatley stops breathing
  31. jkva
    15:05
    Yeah I loved Heydon's book. But team is coming from full client-side generated app consuming a json api, so I understand that this seems like "extra work" even though the current stuff is a somewhat working JS monolith that's not accessible whatsoever.
  32. MichielBijl
    15:06
    Oh, @karlgroves, thanks again for letting me use that title! Everyone loved the talk =)
  33. zakim-robot
    15:06
    [karlgroves] Awesome! That means if they can fix the a11y bugs from whatever generates the site, then they’re fixed everywhere
  34. garcialo
    15:07
    =)
  35. zakim-robot
    15:07
    [karlgroves] NP. I think if we get all devs asking the question “What is this thing and what does it do?” they’ll be making better coding decisions.
  36. MichielBijl
    15:07
    I agree!
  37. MichielBijl
    15:08
    Question all the things instead of mindlessly copying everything.
  38. zakim-robot
    15:13
    [karlgroves] My biggest pet peeve lately has been sites that have their own custom <select> elements. You encounter these things all the time and it makes me wonder if the developers even tested their own work. I’m not disabled, but as a laptop user, I don’t click around on forms, I tab through them and I’m sure most developers do too. And yet when I get to their custom <select> elements they’re not at all keyboard accessible.
  39. MichielBijl
    15:24
    I see what you mean.
  40. zakim-robot
    15:49
    [bmeunier] Any specs/micro-formats or best practices for accessible search results? My first hypothesis are to put them in an ordered list, let the user navigate with arrow key and use as much as microformat http://microformats.org/wiki/google-search … anything great ressources?
  41. zakim-robot
    15:51
    [karlgroves] @bmeunier: structuring the results themselves is pretty straight forward. I wouldn’t overthink that. Using an ordered list and proper links is fine. A bigger challenge will be dealing with stuff like result filtering. If you do stuff like filter results, you’ll have to deal with managing focus and notifying the user of changes
  42. zakim-robot
    15:54
    [bmeunier] @karlgroves: True.
  43. MichielBijl
    16:11
    @bmeunier, like an autocomplete? Or a static list?
  44. zakim-robot
    16:11
    [bmeunier] Static list.
  45. zakim-robot
    16:11
    [bmeunier] I’m searching for the best of the best example of a accessible search result.
  46. MichielBijl
    16:12
    There is this for autocompelte: http://www.w3.org/TR/wai-aria-practices-1.1/#autocomplete
  47. MichielBijl
    16:12
    Ah
  48. MichielBijl
    16:12
    Then what Karl said =)
  49. zakim-robot
    16:12
    [bmeunier] + http://schema.org/ … :wink:
  50. MichielBijl
    16:13
    Is schema.org stuff actually supported by any AT?
  51. MichielBijl
    16:13
    AFAIK that isn't the case, would make all our efforts on ARIA pretty useless =P
  52. zakim-robot
    16:24
    [bmeunier] What would be your suggestion for me to give to the front-end developers so they don’t have to reinvent the wheel by building a code structure from nothing?
  53. MichielBijl
    16:26 
    <ul class="results">     <li><a href="#link-to-result-1">Result 1: Lorem ipsum dolor sit.</a></li>     <li><a href="#link-to-result-2">Result 2: Numquam voluptates, esse consectetur.</a></li>     <li><a href="#link-to-result-3">Result 3: Consequuntur iste modi nobis.</a></li>     <li><a href="#link-to-result-4">Result 4: Nisi iste, vitae cumque!</a></li>     <li><a href="#link-to-result-5">Result 5: Veniam reiciendis, iure labore!</a></li> </ul>
  54. MichielBijl
    16:29
    Or: 
    <main>     <h1>Search results for: Jibber Crabst</h1>     <ul>         <li><a href="#link-to-result-1">Amazing stories about Jibber Crabst</a></li>         <li><a href="#link-to-result-2">Jibber Crabst our lord and saviour</a></li>         <li><a href="#link-to-result-3">Where is Jibber Crabst now?</a></li>         <li><a href="#link-to-result-4">Will Jibber Crabst return to earth?</a></li>         <li><a href="#link-to-result-5">10 things they don't want you to know about Jibber Crabst</a></li>     </ul> </main>
  55. MichielBijl
    16:29
    Do you have a specific design in mind?
  56. zakim-robot
    16:33
    [bmeunier] Yes. I search results for scientific articles. Something like, Google Scholar: https://scholar.google.ca/scholar?hl=en&q=cancer
  57. zakim-robot
    16:35
    [bmeunier] Google Scholar does a pretty bad job for disable people. I tested it severals times.
  58. zakim-robot
    16:40
    [bmeunier] I’m working on something like this:
    '<main>
    <h1>Search Results</h1>
    <ol>
    <li>
    <div itemscope itemtype="http://schema.org/ScholarlyArticle">
    <h2><strong>Title:</strong> <span itemprop="name">Be Careful What You Wish For: FRBR, Some Lacunae, A Review</span></h2>
    <p><strong>Author:</strong> <span itemprop="author">Smiraglia, Richard P.</span></p>
    <p>Subjects:</strong> <span itemprop="about">Catalog</span> ; <span itemprop="about">Works</span></p>
    <p><strong>Is Part Of:</strong>
    <div itemprop="isPartOf" itemscope itemtype="http://schema.org/PublicationIssue" itemid="\#issue">
    <span itemscope itemtype="http://schema.org/Periodical" itemid="\#periodical">
    <span itemprop="name">Cataloging & Classification Quarterly</span>,
    </span>
    <span itemprop="datePublished">2012</span>, Vol.
    <span itemprop="isPartOf" itemscope itemtype="http://schema.org/PublicationVolume"><link itemprop="isPartOf" href="\#periodical" /><span itemprop="volumeNumber">50</span></span>(<span itemprop="issueNumber">5</span>),
    </div>
    <div>
    p.<span itemprop="pageStart">360</span>-<span itemprop="pageEnd">368</span> [Peer Reviewed Journal]
    </p>
    <p><strong>Description:</strong>
    <span itemprop="description">The library catalog as a catalog of works was an infectious idea, which together with research led to reconceptualization in the form of the FRBR conceptual model. Two categories of lacunae emerge—the expression entity, and gaps in the model such as aggregates and dynamic documents. Evidence needed to extend the FRBR model is available in contemporary research on instantiation. The challenge for the bibliographic community is to begin to think of FRBR as a form of knowledge organization system, adding a final dimension to classification. The articles in the present special issue offer a compendium of the promise of the FRBR
    model.</span></p>
    </div>
    <span itemscope itemtype="http://schema.org/Periodical" itemid="\#periodical">
    <strong>Source:</strong> <a href="http://dx.doi.org/10.1080/01639374.2012.682254">Download</a></a>
    </span>
    </div>
    </li>
    </ul>
    </main>'
  59. deborahgu
    16:42
    FRBR++ :)
  60. zakim-robot
    16:43
    [bmeunier] Oh. @deborahgu … oh! oh. OH! I did I forgot about it?
  61. deborahgu
    16:44
    I just love FRBR so I love the example paste.
  62. MichielBijl
    16:44
    lgtm
  63. MichielBijl
    16:45
    Wondering if a group of articles would be a better fit.
  64. MichielBijl
    16:45
    As there is quite some information in that list item.
  65. zakim-robot
    16:46
    [bmeunier] Hmmm. Group of articles. Hmmm. :thinking_face:
  66. zakim-robot
    16:48
    [bmeunier] Can you give me an example? @MichielBijl?
  67. MichielBijl
    16:49
    1. Remove ul
    2. cmd+shift+f li> replace with article>
  68. MichielBijl
    16:49
    =P
  69. MichielBijl
    16:51

    The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

    http://www.w3.org/TR/html5/sections.html#the-article-element

  70. zakim-robot
    16:53
    [bmeunier] Oh, yes. You mean … yes, yes.
  71. MichielBijl
    16:56
    So, something like: 
    <main>   <h1>Search results for: Jibber Crabst</h1>   <article>     <h2>Amazing stories about Jibber Crabst</h2>     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestias itaque eius inventore, tempore delectus. Odio, saepe dolor aut libero.</p>   </article>   <article>     <h2>Jibber Crabst our lord and saviour</h2>     <p>Libero ab incidunt, unde, quisquam fuga sint ipsam ratione, error blanditiis voluptatem veniam illum veritatis nisi quis nam alias minus!</p>   </article>   <article>     <h2>Where is Jibber Crabst now?</h2>     <p>Excepturi quaerat tempora velit, numquam qui, veritatis aliquid sequi illum cum mollitia sunt aliquam voluptatibus incidunt culpa sint deleniti fugiat.</p>   </article>   <article>     <h2>Will Jibber Crabst return to earth?</h2>     <p>Atque sint possimus dolores, eum dolor aliquid suscipit deserunt inventore repudiandae, eligendi voluptates ad quis vero nulla, eius iusto odio.</p>   </article>   <article>     <h2>10 things they don't want you to know about Jibber Crabst</h2>     <p>Impedit, sit eos labore omnis esse, error, corporis cumque ex, porro iste tenetur nulla? Sunt unde fuga iusto fugit repellendus.</p>   </article> </main>
  72. MichielBijl
    16:58
    And for those now wondering who Jibber Crabst is (no subs :(): https://www.youtube.com/watch?v=ZZ_BtZ-5O60
  73. zakim-robot
    17:01
    [bmeunier] <main> <h1>Search Results</h1> <article> <div itemscope itemtype="http://schema.org/ScholarlyArticle"> <header> <h2 itemprop="headline"><strong>Title:</strong> <span itemprop="name">Be Careful What You Wish For: FRBR, Some Lacunae, A Review</span></h2> <p> <time itemprop="datePublished" datetime="2009">2009</time> </p> <link itemprop="url" href="!#"> <p><strong>Author:</strong> <span itemprop="author">Smiraglia, Richard P.</span></p> <p>Subjects:</strong> <span itemprop="about">Catalog</span> ; <span itemprop="about">Works</span></p> <p><strong>Is Part Of:</strong> <div itemprop="isPartOf" itemscope itemtype="http://schema.org/PublicationIssue" itemid="#issue"> <span itemscope itemtype="http://schema.org/Periodical" itemid="#periodical"><span itemprop="name">Cataloging &amp; Classification Quarterly</span>,</span> <span itemprop="datePublished">2012</span>, Vol. <span itemprop="isPartOf" itemscope itemtype="http://schema.org/PublicationVolume"><link itemprop="isPartOf" href="#periodical" /><span itemprop="volumeNumber">50</span></span>(<span itemprop="issueNumber">5</span>), </div> <div> p.<span itemprop="pageStart">360</span>-<span itemprop="pageEnd">368</span> [Peer Reviewed Journal] </p> </header> <p><strong>Description:</strong> <span itemprop="description">The library catalog as a catalog of works was an infectious idea, which together with research led to reconceptualization in the form of the FRBR conceptual model. Two categories of lacunae emerge—the expression entity, and gaps in the model such as aggregates and dynamic documents. Evidence needed to extend the FRBR model is available in contemporary research on instantiation. The challenge for the bibliographic community is to begin to think of FRBR as a form of knowledge organization system, adding a final dimension to classification. The articles in the present special issue offer a compendium of the promise of the FRBR model.</span></p> </div> <footer> <span itemscope itemtype="http://schema.org/Periodical" itemid="#periodical"> <a href="http://dx.doi.org/10.1080/01639374.2012.682254">Download</a> <a href="!#">Export</a> <a href="!#">Report</a> </span> </footer> </div> </article> </main>
  74. zakim-robot
    17:02
    [bmeunier] Some cleaning, but I’m on the right track.
  75. MichielBijl
    17:04
    If you put code between and it'll be formatted =)
  76. MichielBijl
    17:04
    Triple -> `
  77. MichielBijl
    17:04
    On both sides
  78. MichielBijl
    17:05
    Other than that, nice!
  79. zakim-robot
    17:07
    [bmeunier] I need to give you a cape.
  80. MichielBijl
    17:13
    Thank you sir, but I have my towel!
  81. MichielBijl @MichielBijl waves his towel fanatically
  82. StommePoes
    17:55
    testy mctest
  83. MichielBijl
    18:16
    @StommePoes the HTML document outline thing is still dead.
  84. StommePoes
    18:22
    \o/
  85. MichielBijl
    18:23
    That's not something to celebrate =P
  86. StommePoes
    18:23
    Because I was talking about it with my boss and she showed me this test she did and we saw all these h1's getting smaller as they nested and I was like wtf? but then saw a comment mentioning it in the paciellogroup article and was like, oh, just something to make CSS devs' lives harder that's all
  87. StommePoes
    18:24
    The belief in then Document Outline is in our EPUB standards
  88. StommePoes
    18:24
    so I need to find out if EPUB has any support and if not we've been screwing over users for a while, ug :(
  89. StommePoes
    18:26
    At least the FAQ section here states "not all assistive technologies handle HTML5's new allowance that a section can begin with a new h1 heading." http://www.idpf.org/accessibility/guidelines/content/xhtml/headings.php
  90. StommePoes
    18:26
    They just need to change "not all" to "none", old JAWSes excepted.
  91. MichielBijl
    18:29
    But, but, why did the h1's get smaller?
  92. zakim-robot
    18:49
    [marcysutton] Hi Slackers! Happy new year :champagne:
  93. MichielBijl
    18:49
    Happy new year Marcy, and congratulations on the job!
  94. zakim-robot
    18:50
    [marcysutton] Got a question for you from a reader on my blog: do you know of the best eCommerce solution for accessibility? I’ve heard from folks at Shopify that they aren’t stoked on their product’s a11y, but it’s been a while. Wordpress is good, but I haven’t tested any eCommerce plugins. Wondering if you have any tips!
  95. zakim-robot
    18:50
    [marcysutton] Thank you! I’m excited to be more productive this year :simple_smile:
  96. zakim-robot
    18:53
    [techthomas] @marcysutton: HNY! I don’t know of any but I am interested in the results as well. In the ideal world Target should be a reference implementation of how to do things correctly for e-commerce since they lost the big lawsuit. I have no idea if thats actually the case though. If you do receive results I would love to share with my freelancing course because I have a lot of fellow freelancers in my course that build e-commerce platforms.
  97. zakim-robot
    18:57
    [marcysutton] Well there’s end-user content, and then there’s authoring….I would expect an accessible eCommerce solution to work for both types of users. Target has a lot of different systems in play (and for many different sites), so it doesn’t make use of any one platform. A product like Shopify would be easier to recommend if it was accessible, but I haven’t tested it (yet).
  98. zakim-robot
    19:02
    [techthomas] @marcysutton: I’ll ping my group just to find out the platforms they are currently using
  99. zakim-robot
    19:02
    [marcysutton] Thanks @techthomas!
  100. zakim-robot
    19:16
    [marcysutton] @joe-watkins: your a11ywin is posted! http://a11ywins.tumblr.com/post/136691764448/united-airlines
  101. zakim-robot
    19:35
    [dean] Don’t tell Jared Spool!
  102. zakim-robot
    19:36
    [joe-watkins] @marcysutton: Rad! tnx :simple_smile:
  103. zakim-robot
    19:39
    [joe-watkins] I had fun co-writing this article for The Guardian .. snuck a callout to @marcysutton at the end! http://www.theguardian.com/sustainable-business/2015/dec/31/digital-discrimination-netflix-disney-target-web-accessibility-doj
  104. StommePoes
    21:30
    @MichielBijl h1's get smaller because some browsers apply new sizes to headings in default CSS based on fake-document-outline.
  105. StommePoes
    21:30
    terrible as it makes it seem like the outline's a thing. Also terrible because if you accidentally trigger it your CSS will seem messed up
  106. StommePoes
    21:30
    but, oh well.
  107. StommePoes
    21:31
    ...and off to bed. Not enough scotch
  108. MichielBijl
    21:49
    Good night @StommePoes!
  109. MichielBijl @MichielBijl takes a sip from his Nikka from the barrel