Archive index

A11y Slackers Gitter Channel Archive 14th of June 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Jun 14 07:29
    [michiel] cordelia: I really like the name for it too! Time to Roll!
  2. Mallory
    @StommePoes
    Jun 14 11:02
    chart_table.png
  3. The only way I can code this image is to do 2 separate tables and CSS them to look like one. Which is stupid, becaiuse content-wise this is on chart.
  4. complex_table.png
  5. And something like this... even with headers attributes this gets weird. Who was is who claimed they've never seen "complex tables" anywhere before? It's all over edumacation materials
  6. Mallory
    @StommePoes
    Jun 14 11:10
    @robdodson I didn't realise but I've been looking for that link since yesterday. Mobile a11y was suddenly dropped into my lap, serendepity.
  7. Now people are retweeting my bad HTML grammar/vocab
  8. Job van Achterberg
    @jkva
    Jun 14 11:16
    Rrrrrgh I have way too much of a coffee high
  9. Must....slack.....
  10. zakim-robot
    @zakim-robot
    Jun 14 11:17
    [michiel] StommePoes: can't you do tr with th's?
  11. [michiel] scope=col and done?
  12. Mallory
    @StommePoes
    Jun 14 11:21
    Maybe, I dunno
  13. for the first one you mean?
  14. I recall having a chart very similar to the first one except shit-tons of rows and more ingewikkeld headers, where I had asked on a forum if a table could have more theads/tbodies inside
  15. and the answer to that was, if you have more theads and tbodies, make more/separate tables. But for some of our insurance charts that was also not really correct. Sometimes the tables really had what ought to have been theads in the middle
  16. all the columns still being about the same topics
  17. But probably for these little ones th's+scope might be ok
  18. Probably a heuristic on their part, but if a table has no th's in IE, NVDA doesn't count it as a table. But in FF, sure thing.
  19. I thought at first it was because the terrible HTML writers had wrapped everything in links. Instead, all that does is hijack the Enter key and calls all lines "visited link".
  20. zakim-robot
    @zakim-robot
    Jun 14 11:27
    [michiel] StommePoes: yes for first one. Have to go do legal stuff, will look later.
  21. Mallory
    @StommePoes
    Jun 14 12:34
    It would just be the most fantastic thing if pages like these https://www.w3.org/wiki/SVG_Accessibility/ARIA_roles_for_charts had dates on their comments.
  22. Jonathan Neal
    @jonathantneal
    Jun 14 12:43
    @cordelia, @scottohara, @alexlande, the use case is visually hiding content that otherwise improves the screen reading experience. This is most commonly solved by using a utility class or a bundle of CSS that clips the text without hiding it from ATs.
  23. zakim-robot
    @zakim-robot
    Jun 14 12:45
    [scottohara] can you not do just that in this situation too then?
  24. Jonathan Neal
    @jonathantneal
    Jun 14 12:46
    I’d prefer a semantic approach, and at some point I recall this being that.
  25. Perhaps I misunderstood the conversations happening at that time. Or, perhaps there is not as much desire to see this cowpath turned into an explicit HTML attribute or CSS declaration.
  26. zakim-robot
    @zakim-robot
    Jun 14 12:53
    [scottohara] i see. and under that rational, i agree that it’d be nice if there was some sort of semantic element to do this. [visually-hidden] or something
  27. Jonathan Neal
    @jonathantneal
    Jun 14 12:58
    @scottohara, I put together this set of tests to see how ATs handle these attributes or CSS natively. http://jonathantneal.github.io/rat/
  28. zakim-robot
    @zakim-robot
    Jun 14 12:59
    [scottohara] oh very cool
  29. powrsurg
    @powrsurg
    Jun 14 14:20
    What do you call following H1 -> H6? The Document Structure? Document Outline?
  30. zakim-robot
    @zakim-robot
    Jun 14 14:29
    [johnbhartley] Heading structure
  31. [michiel] Outline, just as in text document.
  32. [johnbhartley] Semantic structure could be another one / Content Structure, but I'll defer to @michiel
  33. powrsurg
    @powrsurg
    Jun 14 14:33
    Okay, I'll just say use "HTML4 Document Outline". I'm making a checklist of things we should ensure when trying to go live with new features. I wanted to make sure we do that and have an appropriate title tag set
  34. We have too many times where someone wants to start with an H2, or skip H2 and go H1 -> H3 for reasons
  35. zakim-robot
    @zakim-robot
    Jun 14 14:36
    [dean] How does it work with modular systems?
  36. [dean] Example, if you have a ‘page’ that has a <h1> and some intro blocks have <h2> and some product blocks have <h3>, and on some pages the content creator realises they don’t need to place an intro block.
  37. Peter Krautzberger
    @pkra
    Jun 14 14:38
    Phew. This took a while. If you want to waste a few minutes/hours https://github.com/mathjax/MathJax-a11y/blob/0d4e20fa614771dc800f9b76d0d6ca9d86669bac/docs/README.md#summary-of-test-results
    Comments and suggestions would be welcome!
  38. powrsurg
    @powrsurg
    Jun 14 14:41
    @dean it creates gaps in the outline
  39. zakim-robot
    @zakim-robot
    Jun 14 14:41
    [jonathan.tucker] @dean: htm5 redefined the document outline algorithm to address this sort of thing by making the heading levels based solely on the nesting levels of the sectioning elements they are in instead of based on the number of the heading tag (<h1>, <h2>, etc…). but, unfortunately, user agents never implemented this new algorithm
  40. powrsurg
    @powrsurg
    Jun 14 14:43
    yeah, I had seen Steve post stuff about recommending authors stop trying to comply to that since it's never actually been a thing
  41. zakim-robot
    @zakim-robot
    Jun 14 15:56
    [ellyjones] WCAG has specs for the contrast ratio text should have; is there a spec for the contrast ratio other pieces of UI should have? (for example, the border of a button, to ensure it's visible)

  42. [scottohara] context is sort of key here. because, if it’s a white button on a white background with a light grey border, then if that light grey doesn’t meet contrast requirements for text, it’s not going to meet them for a border either.

    but again, context. if it’s a blue button with a light grey border, then it’s not as important because if the blue still stands out and has good contrast, then the loss of the border isn’t really as big of a deal

  43. zakim-robot
    @zakim-robot
    Jun 14 16:18
    [ellyjones] nod - in this case it's a gray border for a gray tab on a gray background
  44. [ellyjones] (different shades of gray, of course)

  45. [alexlande] Does the WCAG spec apply to non-text color contrast? (i.e. would you fail wcag for the grey button on grey background case?)

    It’s definitely not great for user experience, but if it’s something you can point to as a concrete wcag violation that would help a lot in avoiding it

  46. zakim-robot
    @zakim-robot
    Jun 14 16:24
    [ellyjones] yep - that's what I'm looking for here, basically
  47. [ellyjones] I've filed a bug about the contrast being quite low, and now I'm trying to find a guideline to point at
  48. zakim-robot
    @zakim-robot
    Jun 14 16:38
    [techthomas] @ellyjones @alexlande for non-text color contrast 2.4.7 Focus Visible is relevant.. ie grey button on grey background needs to show visible focus when it receives keyboard focus https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
  49. zakim-robot
    @zakim-robot
    Jun 14 16:59
    [michiel] powrsurg: in web context/teaching devs I'd probably go with johnbhartley's suggestion though. Seeing how HTML5 document outline has some bad sauce over it with its algorithm and all that.
  50. zakim-robot
    @zakim-robot
    Jun 14 17:20
    [garcialo] @techthomas I don't think 2.4.7 actually mentions a contrast ratio. Of course, the focus should be discernable to pass, but I'd consider having a sufficient contrast as a best practice.
  51. zakim-robot
    @zakim-robot
    Jun 14 17:36
    [garcialo] @ellyjones: You should be able to make a good argument that it isn't discernible because of the grey/grey/grey, but sadly WCAG doesn't contain a justification for calling contrast minimums on any non-text content.
  52. [ellyjones] @garcialo okay, thanks :) I'm in agreement with the person I'm discussing the bug with that there should be more contrast, and now we're trying to settle on exactly how much
  53. [garcialo] Awesome.
  54. [garcialo] :)
  55. Mallory
    @StommePoes
    Jun 14 19:42
    Someone asked me why 4.5.1 is the minimum contrast ratio and I thought I could find the discussion in one of the lists.w3.org
  56. because apparently at some point it was changed from 5
  57. Also, something weird: I've been trying to test some mathy math in NVDA. NVDA doesn't read the math out if I had started Firefox with JAWS running first, then turn on NVDA. I discovered still by accident that if I run NVDA first, then open firefox, the math is read out. However because I was debugging the problem, in the meantime I downloaded MathPlayer (which I hadn't needed before but thought maybe with an NVDA update I suddenly needed it) so now I'll have to delete MathPlayer and try a few more times
  58. I swear I always run into things being weird if I don't have the SR running first
  59. zakim-robot
    @zakim-robot
    Jun 14 21:09
    [garcialo] @StommePoes the rationale is in 1.4.3 itself - https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-73-head
  60. Mallory
    @StommePoes
    Jun 14 21:48
    Oh! Thank you, @garcialo! My UX guy was wondering if the number was pulled out of someone's butt, came from then-current CRT ratings, or user testing.
  61. w00ts. @garcialo++
  62. Quick question: if a div (not menu bar) has some buttons and they act kinda radio-ish (one one is in a pressed or selected state, to control how a graph looks), is "pressed" or "selected" the correct state? Reading the wia-aria states page, it seems "pressed" is for toggle buttons (which are usually by themselves on-off things) but I'm not certain these aren't really toggle buttons (in that they are either selected, or not selected)
  63. The "selected" part of that page is rather hard for me to read what exactly it means... but I don't see role=button in the roles box, so it looks like no. But not 100% sure.
  64. zakim-robot
    @zakim-robot
    Jun 14 21:52
    [garcialo] I think radio buttons are "checked"
  65. [garcialo] I remember it being odd in a way; and I think it was odd because it was like checkboxes
  66. Mallory
    @StommePoes
    Jun 14 21:53
    These are button buttons
  67. They act radio-y in that only one can be "selected" out of the group at a time.
  68. Since they run scripts, someone chose buttons, which I think is ok to do here.
  69. zakim-robot
    @zakim-robot
    Jun 14 21:54
    [garcialo] Ah, I see
  70. [garcialo] Is it like a soundboard where you can run the script over and over again every time you press it or should it complete the script before you can activate the button again?
  71. Mallory
    @StommePoes
    Jun 14 21:56
    I'm not sure, the whole thing is rather slow due to it being Javascript rendering math
  72. but, certainly nobody actually sets these buttons to a disabled state
  73. I could probably freeze my browser with it, hitting them fast
  74. It makes a small event flood in JAWS, who eventually catches up and reads everything that happened :P
  75. Focus slowly moves through the ones I clicked as well.
  76. zakim-robot
    @zakim-robot
    Jun 14 21:57
    [garcialo] So if you press it multiple times it'll just send multiple floods?
  77. Mallory
    @StommePoes
    Jun 14 21:58
    Hm, it's supposed to read out a formula when hit and a few times it seemed to repeat it but usually it only reads it out once
  78. it might rename the button a few times. They've added (bad) hidden text calling the selected button "disabled". I'm recommending they use something else.
  79. I've hit the button about 10 times and got the formula and button name read out 2 or 3 times. So not keeping all the events. :P
  80. luckily
  81. maybe they throttle but real slow.
  82. But so I think I want to tell them to use actual states and use aria-pressed when a button is selected
  83. But I've only seen aria-pressed with one-off, standalone toggle buttons
  84. zakim-robot
    @zakim-robot
    Jun 14 22:00
    [garcialo] yeah
  85. Mallory
    @StommePoes
    Jun 14 22:00
    never a button group where only one is allowed to be "toggled"
  86. But if that's also a valid use case then I can more confidently pass that on. Anything better than text saying this focusable button is disabled.
  87. zakim-robot
    @zakim-robot
    Jun 14 22:00
    [garcialo] maybe have it be disabled/pressed while the script is running...maybe set up a cooldown period until you can activate the same button?
  88. Mallory
    @StommePoes
    Jun 14 22:09
    Well, seeing's how people would be using this, I don't expect anyone would be hitting these things a lot except only just to mess with it :P
  89. You hit a button, the graph nearby updates with new data, and the new formula associated gets read out. So to me, the buttons are like a menubar of buttons that Do Stuff to the page and ought to have an actual, HTML-ised state. And not have some hidden text saying the button's now disabled.
  90. I'm not sure they should actually use disabled states and then switch to pressed or anything... that might be weird.
  91. Of course, after I go through all of their issues, I always end with "you ought to test these on real students" as there is a group that does user testing of applications these groups can go to for studies.