Archive index

A11y Slackers Gitter Channel Archive 18th of January 2017

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jan 18 00:35
    [herin] @caesar : In my past projects we have done different combinations of browsers with atleast 3 different Windows versions.
  2. [herin] One will be a complete testing and others are more of spot checks to see the consistency
  3. [herin] But, why the same browser and AT?
  4. [herin] Question : What's the rule of Thump about using Toolbar & Menubar?
  5. [herin] Can we put some internal links in the page and call it a Toolbar or should we call it a Menubar?
  6. zakim-robot
    @zakim-robot
    Jan 18 01:03
    [caesar] @herin, the same browser and AT to ensure that the issue is specific to the Windows version and not the applications themselves.
  7. [caesar] @herin refer to the ARIA role definitions? https://www.w3.org/TR/wai-aria/roles#toolbar
  8. [caesar] https://www.w3.org/TR/wai-aria/roles#menubar
  9. [caesar] Your case sounds more like toolbar
  10. zakim-robot
    @zakim-robot
    Jan 18 01:48
    [herin] Yes... At times I have done this as well. But not extensively. This is on a case by case basis.
    @herin, the same browser and AT to ensure that the issue is specific to the Windows version and not the applications themselves.
  11. [herin] Thanks @caesar. I agree.
    Your case sounds more like toolbar
  12. zakim-robot
    @zakim-robot
    Jan 18 03:17
    [herin] Hi, https://www.w3.org/TR/wai-aria/roles#tabpanel says
    For a single-selectable tablist, authors SHOULD hide other tabpanel elements from the user until the user selects the tab associated with that tabpanel. For a multi-selectable tablist, authors SHOULD ensure each visible tabpanel has its aria-expanded attribute set to true, and that the remaining hidden tabpanel elements have their aria-expanded attributes set to false
  13. [herin] What is your interpretation of single and multiselectable?
  14. [herin] Is it about normal Tabbed controls and Accordion like controls?
  15. zakim-robot
    @zakim-robot
    Jan 18 03:28
    [caesar] Single is like a horizontal tab navigation, where you only ever have one tab open at a time (usually because the tabpanels all share the same space in the viewport). The multiselectable is like an accordion where each section can be expanded independently of each other, at the same time, because the viewport expands (usually vertically) to accommodate them.
  16. zakim-robot
    @zakim-robot
    Jan 18 03:33
    [herin] Thanks @caesar.
  17. [herin] That clarifies my question.
  18. zakim-robot
    @zakim-robot
    Jan 18 09:32
    [jacquidow] I was wondering if somebody could help me please
  19. [jacquidow] I'm the senior UX designer at a software company in the UK, recently we have been asked a lot about our accessibility rating for our software and our line is 'we are aiming for AA rating, but we have no had the software officially tested'
  20. [jacquidow] I have a meeting later today titled 'Identify a list of accessibility rated stuff that can be added to coding standards'
  21. [jacquidow] I am very much a newbie at accessibility, I am trying to learn as much as possible from books, from reading through the W3 accessibility stuff, and looking at online courses
  22. [jacquidow] In your opinions, what are the basics for accessibility that we should be making sure we include when coding
  23. [jacquidow] So far I have, all code should be written semantically (although this is difficult as we use bootstrap)
  24. [jacquidow] And that we should include ARIA where we can (although none of us really understand ARIA, so we know there is a training requirement here)
  25. [jacquidow] And I am making sure that colour contrast, font sizes, weights etc are all catered for on the front end design
  26. zakim-robot
    @zakim-robot
    Jan 18 09:38
    [jacquidow] Another side question to this is... as a part of this I have suggested we have an accessibility expert come in and help us to understand where our software is lacking, what we can do to improve and also to discuss how to make our designs and code as accessible as possible - does anyone have any recommendations for anyone in the UK that may be able to help us here?
  27. zakim-robot
    @zakim-robot
    Jan 18 12:05
    [dean] “The first rule of ARIA is don’t use ARIA”.... has been getting a lot of flak recently, but I think you should know ARIA before trying to implement, and make sure that the issues can’t be solved by simply using correct semantics.
  28. [dean] Depends on budget and what you want done.
  29. [tink] +1 to knowing ARIA before you implement and using it as a tool of last resort.
  30. Job van Achterberg
    @jkva
    Jan 18 12:28
    ARIA is like the nuke launch button: you'd better really need to use it, and be aware of the consequences.
  31. zakim-robot
    @zakim-robot
    Jan 18 12:28
    [jacquidow] We use angular and bootstrap in our newer product, and .net in our older products
  32. [jacquidow] will this affect accessibility?
  33. Job van Achterberg
    @jkva
    Jan 18 12:28
    jacquidow: quite likely.
  34. But that's the best answer I can give you. I'm assuming you mean "will this affect accessibility negatively"?
  35. Which then further goes into: "Are you using Angular1? Are you using ng-aria"?
  36. For bootstrap (which version?) there are some issues, but also plugins that alleviate accessibility problems.
  37. zakim-robot
    @zakim-robot
    Jan 18 12:30
    [jacquidow] yes, will it affect it negatively
  38. [jacquidow] currently we use angular 1 but will be moving to angular 2 in the near future
  39. [jacquidow] (I'm not a developer by the way)
  40. [michiel] jkva: that’s a bit strong. ARIA is like heart surgery, you better know what you’re doing when you use it.
  41. [jacquidow] We have been using ARIA when it is used in bootstrap currently
  42. [jacquidow] For example:

  43. [jacquidow] `<label class="sr-only" for="inputHelpBlock">Input with help text</label>

    <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
    ...
    <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>`

  44. Job van Achterberg
    @jkva
    Jan 18 12:33
    @jacquidow: Please don't hide labels from non-screenreader users (it looks like that's happening)
  45. zakim-robot
    @zakim-robot
    Jan 18 12:33
    [jacquidow] Sorry, this was just pulled from the bootstrap site to illustrate when it uses aria
  46. [jacquidow] we don't hide labels in our app
  47. Job van Achterberg
    @jkva
    Jan 18 12:34
    the sr-only class suggeted that, sorry :)
  48. whoops, a bit too much code markup
  49. zakim-robot
    @zakim-robot
    Jan 18 12:34
    [jacquidow] ye I hadn't looked at the actual code just that it had aria in it! whoops!
  50. Job van Achterberg
    @jkva
    Jan 18 12:34
    I take back what I said 👍
  51. A lot of Bootstraps stuff is okay. But without reviewing the actual code / project, it's impossible to know the accessibility state
  52. Glad you're asking, though
  53. zakim-robot
    @zakim-robot
    Jan 18 12:36
    [jacquidow] I know I'm just a beginner, but I really want to make a difference and do a good job. It's become a bit of a personal project for me, fighting for our users! :)
  54. Job van Achterberg
    @jkva
    Jan 18 12:38
    Awesome!
  55. alt=an image from the classic "Tron" movie, showing the Tron character, and text "I fight for the users" https://usercontent.irccloud-cdn.com/file/OnmKYPoU/
  56. zakim-robot
    @zakim-robot
    Jan 18 12:44
    [dean] Hah, I just realised that I’ve been having 2 different conversations with you (Jacqui) in 2 different groups
  57. [dean] With regards to finding UK based accessibility consultants (that you asked in a UX group) you should definitely ask here too
  58. [dean] PS greets from Melbourne - 7 days until I return to the Netherlands, it was FOURTY ONE degrees yesterday, I don’t know how I’ll survive when I get back...
  59. Job van Achterberg
    @jkva
    Jan 18 12:50
    @dean o/ hang in there, you poor suffering vacation enjoyer
  60. zakim-robot
    @zakim-robot
    Jan 18 12:51
    [dean] ;)
  61. [dean] Part work too - been pretty awesome
  62. Job van Achterberg
    @jkva
    Jan 18 12:59
    And next up, CSUN. A good year for you
  63. Mallory
    @StommePoes
    Jan 18 14:21
    Dean's gonna turn into a Dean-cicle when he gets here
  64. "So far I have, all code should be written semantically (although this is difficult as we use bootstrap)" <-- I found the reason Bootstrap never saved me any time was that I needed to manually write around their crap. This was BS 2 however, before Patrick Lauke and Victor Tsaran and others started throwing darts at the BS repos
  65. Mallory
    @StommePoes
    Jan 18 15:16
    Just saw a weird creature in the wild... it's a checkbox+select box as a single unit
  66. where the checkbox says "use this in a search filter" and the select box basically sets the new value/label of that checkbox
  67. zakim-robot
    @zakim-robot
    Jan 18 15:17
    [karlgroves] Kill it with fire
  68. Job van Achterberg
    @jkva
    Jan 18 15:19
    🚒
  69. Mallory
    @StommePoes
    Jan 18 15:20
    I can't, everyone already likes using it.
  70. zakim-robot
    @zakim-robot
    Jan 18 15:34
    [michiel] Break it, build something better, and propose switching to that.
  71. [michiel] Build it with some hip thing everyone wants to use.
  72. Mallory
    @StommePoes
    Jan 18 16:14
    I'm not hip, I don't build hip things. That just makes it worse
  73. saw a "pagination" component built in React. So what could have just been some buttons or links have crap-tons of divs and spans and lord knows what else in there
  74. plus all the crap React stuffs in there
  75. zakim-robot
    @zakim-robot
    Jan 18 16:21
    [skymaiden] hello :) haven’t been here for a while – i’m looking for clear explanations of when to use alert/alertdialog/dialog… does anyone have a good resource they can point me to please? currently switching between developer.mozilla.org and w3.org but i’m too stupid to understand...
  76. zakim-robot
    @zakim-robot
    Jan 18 17:32
    [marcysutton] @skymaiden I love Marco Zehe's posts https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/
  77. [michiel] skymaiden: this might be helpful: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
  78. [michiel] Excuse me, here is the ED link: http://w3c.github.io/aria-practices/#dialog_modal
  79. zakim-robot
    @zakim-robot
    Jan 18 17:47
    [skymaiden] thanks @marcysutton and @michiel, i’ll be sure to read those :)
  80. Mallory
    @StommePoes
    Jan 18 17:51
    I use alerts (divs with roles) when some message pops up somewhere, but there's no reason to move the user's focus. Error messages that people need to know are there, but you don't move to.
  81. I haven't used alertdialogs yet because they're like Javascript's confirm() and alert()s and we just don't have that kind of thing in user flows very often.
  82. I'm starting to wonder though if we don't want to put role=dialog on our modals anymore. They're modals, but they're really nothing like the desktoppy modals that are only full of controls. Instead, it's mostly just a piece of normal web page. People are being pushed into focus/app mode when they launch them and that's almost never useful.
  83. it's basically designers having modal boners. modal All The Things! Why? Because Page Refreshes Are Evil! Why? Because!
  84. replacing multipage websites and regular navigation menus with one ginormous page and tab-panels is another hipness.
  85. I'm waiting for hair plaits to come back into fashion.
  86. zakim-robot
    @zakim-robot
    Jan 18 17:59
    [michiel] https://www.youtube.com/watch?v=wHWesbwEEc4
  87. powrsurg
    @powrsurg
    Jan 18 18:53
    http://jgthms.com/web-design-in-4-minutes
  88. I love that it starts with something ugly and completely accessible, and ends with something with 176 errors in aXe (175 being color contrast)
  89. Did the 508 refresh actually get refreshed today?
  90. zakim-robot
    @zakim-robot
    Jan 18 18:56
    [cordelia] yep, it did
  91. Jonathan Neal
    @jonathantneal
    Jan 18 18:59
    Forgive a naive question. Should something like [role="secton"] contribute to outline depth?
  92. zakim-robot
    @zakim-robot
    Jan 18 19:04

    [jbuller] Hi. I've just joined the community

    Does anyone here have knowledge of how accessible Oracle Fusion (HR) systems are in the real world not just their VPATs?

  93. Mallory
    @StommePoes
    Jan 18 19:06
    erm, it may depend on the browser @jonathantneal . That is, not sure they all honestly follow that proposed outline setup anyway
  94. "There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents"
  95. so... only if someone implemented it. And then the question would be, does the UA base any outline it makes on the role? One way to find out is to use teh CSS that Firefox and I think one other browser use in headings with sections
  96. like, the actual outline isn't semantically implemented but I know at least Firefox adjusts with user-agent CSS the sizes. So you could create an example with some divs with role=section and all h1's inside and see what Firefox visually does.
  97. I have a dilemma...
  98. We have powerpoint slides with tables. The old slides have images of tables with alt text... whoever filled the alts filled both the title and the description fields, with different things (they treated title like alt and desc like a longdesc).
  99. Now with newer ones, we're creating true tables in our powerpoints, and adding alts because Microsoft says we should. MS recommends the desc area only but apparently some SRs read only title, others read only desc, some read both... bleh. But for certain, NVDA doesn't let users navigate real tables
  100. so, pictures of tables + alts work for NVDA users, and real tables don't
  101. Mallory
    @StommePoes
    Jan 18 19:12
    nvaccess/nvda#5350 <-- NVDA issue
  102. Meanwhile, real tables are usable by JAWS users and ought to be better for low-vision/zoomy/mag-using users.
  103. Not sure which direction to go. JAWS is expensive. Real tables seem like the right thing, but it would knowingly block out NVDA users.
  104. Also, no idea what other SRs do. I guess that would only be Window-Eyes and Supernova but both of those are expensive too.
  105. US doesn't really seem to use supernova like it's used over here.
  106. Jonathan Neal
    @jonathantneal
    Jan 18 19:28
    @StommePoes, thank you for the input. I’ve recommended something like Paciello Group’s <html5-h> custom heading element be added to HTML. I followed your quotation and included it in my response: https://github.com/w3c/html/issues/774#issuecomment-273574800
  107. zakim-robot
    @zakim-robot
    Jan 18 19:30

    [george_zamfir] :wave: Hi everyone

    Just a heads-up that the newly-released Threads feature has limited support over IRC / XMPP, https://slackhq.com/threaded-messaging-comes-to-slack-417ffba054bd#.ghr7f3j2n. It will be a few days before the feature rolls out to all teams (including this one) but I just wanted to let you know ahead of time.

    IRC / XMPP clients will get threaded messages posted as regular messages, that is directly in the channel. Just like image comments have been working for a while now.

    *What does it mean?\ (thinking face emoji)
    Threaded messages may be posted in parallel with regular (non-threaded) messages directly in the channel. This usually happens in channels with a lot of members and / or discussions. Every team & channel is different so it’s hard to say at this point how often this will happen, if at all, in web-a11y.slack.com

    *Options for gateway users** :abc:
    The new threads feature doesn’t replace previous functionality. Everything you’re already used to is still there:

    1. You can always @mention people just like before
    2. Quoting a message (Gitter-style) or simply using > message
    3. Copy-pasting a message link and replying to it

    Please note that direct Slack users (on any platform) will not be affected by this. Threaded messages are directly linked from the channel and are displayed separately in the left pane. :slack:

    I am really sorry for any inconvenience. I’m here if I can help with any questions / information / support :raised_hands:

    _Cross-posting from #slack-a11y-feedback for visibility - https://web-a11y.slack.com/archives/slack-a11y-feedback/p1484767476000028. Sorry about that. Please feel free to leave us feedback in the other channel._

  108. Mallory
    @StommePoes
    Jan 18 19:40
    George, did you get the slack a11y job?
  109. Job van Achterberg
    @jkva
    Jan 18 19:43
    Thanks for the heads-up George!
  110. zakim-robot
    @zakim-robot
    Jan 18 19:56
    [marcysutton] Thanks George! @StommePoes yes he did!
  111. Job van Achterberg
    @jkva
    Jan 18 19:58
    Splendid :)
  112. zakim-robot
    @zakim-robot
    Jan 18 20:13
    [bo.campbell] Some fun - here is an “almost” AA compliant slack theme in case anyone wants it. #373232,#2a2626,#3c6df0,#ffffff,#4b4545,#ffffff,#57d785,#3c6df0
  113. [bo.campbell] I say almost because slack controls a couple things that are tough to see
  114. zakim-robot
    @zakim-robot
    Jan 18 20:29
    [karlgroves] That’s cool @bo.campbell
  115. [bo.campbell] Thanks, @karlgroves - there is an easy tool to play with them here: http://slackthemes.net I actually made about 6 of them but this one is my favorite.
  116. zakim-robot
    @zakim-robot
    Jan 18 22:21
    [herin] Hi, How many of you test the Contrast of Placeholder text across browsers?
  117. [herin] The Placeholder text default style is handled better in IE than firefox
  118. [caesar] Pretty much never, because placeholder text is non-essential (we fail 3.3.2 if it includes instructions that aren't included in the label)
  119. zakim-robot
    @zakim-robot
    Jan 18 22:27
    [caesar] I mean "if it is essential"
  120. [herin] 1.4.3 has a line "The minimum contrast success criterion (1.4.3) applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast"
  121. [herin] But, the problem I am facing is the browsers handling it differently and having to overwrite browser styles
  122. [herin] Looks like hover tooltips needs to conform to contrast as well...
  123. [caesar] ... another good reason why we always recommend against placeholder text, LOL.
  124. [herin] LOL
  125. [herin] agree
  126. [herin] When both Label and placeholder are available, still there is no getting away with ot
  127. zakim-robot
    @zakim-robot
    Jan 18 22:33
    [caesar] Seems to be an almost intractable problem: http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/
  128. [herin] Hard to implement as well as every browser handles it in its own way
  129. [herin] Thanks for sharing the article.
  130. [caesar] Found another great one by @stevef https://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/
  131. Mallory
    @StommePoes
    Jan 18 23:04
    We are styling it for webkit/blink, gecko and ms
  132. but, honestly, I warn against good contrast on placeholders
  133. they make fields look filled in
  134. now on a lot of web forms that's not such a danger, depending on what it's asking
  135. you see the problem more with internal forms
  136. and if the hint is actually useful, I want to continue to look at it while I'm filling my control in (like phone numbers, credit card numbers, whatever)
  137. btw, does everyone realise that poor Steve Fnikelstein is getting all these beeps and he prolly has no idea who we are?
  138. zakim-robot
    @zakim-robot
    Jan 18 23:07
    [michiel] @herin: I always fail if there is not enough contrast for the placeholders. Like StommePoes though, I would advise against placeholders and opt for a more permanent help text (under the input for example).
  139. [caesar] @StommePoes... LOL the problem is because SF has accounts on both Slack and Gitter but with different usernames. He's stevef on Slack, but stevefaulkner on Gitter. No idea how best to resolve. They'll just have to fight. To the death.
  140. zakim-robot
    @zakim-robot
    Jan 18 23:19
    [michiel] AFAIK he’s only on Gitter (as in, doesn’t read Slack)
  141. [michiel] Could be wrong…
  142. [caesar] Image showing Slack's automatic user lookup for stevef, aka Steve Faulkner