Archive index

A11y Slackers Gitter Channel Archive 20th of September 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Sep 20 08:56
    [michiel] longdesc +2
  2. jnurthen @jnurthen I thought you wern't here today
  3. zakim-robot
    @zakim-robot
    Sep 20 09:03
    [michiel] I’m not.
  4. luis garcia
    @garcialo
    Sep 20 09:29
    Neither am I. It's way too late
  5. Job van Achterberg
    @jkva
    Sep 20 09:40
    I'm here in spirit
  6. And hello from Vienna! o/
  7. zakim-robot
    @zakim-robot
    Sep 20 10:13
    [michiel] Hi jkva :)
  8. zakim-robot
    @zakim-robot
    Sep 20 10:40
    [dean] You’re such a well travelled bunch
  9. Job van Achterberg
    @jkva
    Sep 20 10:42
    I have a conference problem
  10. zakim-robot
    @zakim-robot
    Sep 20 10:44
    [michiel] I have a fear of complicated buildings.
  11. zakim-robot
    @zakim-robot
    Sep 20 11:58
    [michiel] jkva: what are you doing in Vienna?
  12. [michiel] dean: you travel all the time.
  13. [michiel] Or at least when there is a role=drinks on >:)
  14. Job van Achterberg
    @jkva
    Sep 20 12:03
    :D
  15. @michiel: speaking on a11y
  16. zakim-robot
    @zakim-robot
    Sep 20 12:07
    [michiel] Nice! Taustation?
  17. Job van Achterberg
    @jkva
    Sep 20 12:13
    @michiel: No, hour-long thing on inclusive design, live demo, patterns. Basically the same as I gave at YAPC. I need to finish captioning the remaining half!
  18. @michiel: this one, https://www.youtube.com/watch?v=kysW8WSk41Y
  19. zakim-robot
    @zakim-robot
    Sep 20 12:16
    [michiel] Right, it’s on my watch list.
  20. powrsurg
    @powrsurg
    Sep 20 13:34
    From https://dev.opera.com/blog/opera-40/ (a what's new in Chromium 53 and Opera 40) they say "The HTML spec was changed so that <label> elements aren’t form-associated elements anymore. As a result, support for the form attribute on <label> elements was removed, and labelElement.form is now an alias for labelElement.control.form (instead of mapping to the form attribute value)."
  21. Can anyone elaborate on this?
  22. Is that saying that <labels> no longer need to be contained within a <form>?
  23. zakim-robot
    @zakim-robot
    Sep 20 14:12
    [miwayha] I received a question about gif accessibility today and I have no idea how to think through it… does anyone have any resources?
  24. [david_caldwell] Anyone got any experience of making HP ExStream for mass PDF production?
  25. [david_caldwell] ^^ as in make them accessible ?
  26. powrsurg
    @powrsurg
    Sep 20 14:25
    @miwaya it might help if we knew the question
  27. zakim-robot
    @zakim-robot
    Sep 20 15:01
    [car] @miwayha is the question really about <img> accessibility where the img src happens to be a gif? If so, perhaps they were saying that the img also needs an alt attribute in order to be accessible? For example, <img src="smiley.gif" alt="Smiley face" height="42" width="42"> (from http://www.w3schools.com/tags/tag_img.asp)
  28. zakim-robot
    @zakim-robot
    Sep 20 15:48
    [car] @powersurg I don't think labels ever had to be in forms? We have them all over the place in our web app. :)
    The Changes section of the HTML 5.1 spec says: "The label element is no longer Reassociatable".
    It also says, "form attribute on label element. Removed because implementation is not consistent and the idea didn’t make sense."
    Near as I can figure, the spec change just says that labels can no longer specify the id of a form to belong to (because their 'form' attribute was removed), but it apparently didn't make sense for them to do that anyhow.
    So, "business as usual". And put your label elements anywhere, as long as their for attribute (or child element) is a "labelable element".
    https://www.w3.org/TR/html51/changes.html#changes
    https://www.w3.org/TR/html51/sec-forms.html#reassociateable-element
    https://www.w3.org/TR/html51/sec-forms.html#form-owner
  29. zakim-robot
    @zakim-robot
    Sep 20 15:58
    [dna] i’m a novice JAWS user and I’ve somehow gotten to a state where JAWS won’t announce anything within IE other than the keystrokes I’m pressing
  30. [dna] anyone have any suggestions?
  31. [dna] i must’ve pressed something… or entered some sort of mode...
  32. [jiatyan] @miwayha was it about animated gif?
  33. zakim-robot
    @zakim-robot
    Sep 20 16:39
    [dna] just in case anyone else has this issue, I called freedom scientific and JAWS doesn’t work with MS Edge (which is apparently not the same thing as “Internet Explorer”)
  34. zakim-robot
    @zakim-robot
    Sep 20 17:35
    [car] @dna Yes, on Windows 10, you can either use Narrator with Edge, or you can explicitly open IE and use JAWS or NVDA. http://www.thewindowsclub.com/open-internet-explorer-in-windows-10
  35. zakim-robot
    @zakim-robot
    Sep 20 17:42
    [car] These 2 posts give a flavor of the issues:
    http://www.serotek.com/blog_seroteks_position_on_microsoft_edge
    http://www.nvaccess.org/win10/
  36. powrsurg
    @powrsurg
    Sep 20 19:48
    Honestly, I thought labels, inputs, buttons, etc at least used to be required in form elements back in the HTML 4 days. I could be wrong though
  37. zakim-robot
    @zakim-robot
    Sep 20 20:04

    [csantos] @Here hi guys, I’m new in accessibility matters. I was wondering if you can help me check this example:
    https://jsfiddle.net/9mh6pzy4/4/
    Steps:
    2- Access with Google Chrome
    1- Activate Voice Over, or NVDA
    2- navigate through buttons with down key
    3- hear: First, button, Second, dimmed, button
    4- press button First (it should active second button)
    5- navigate through buttons with down key
    6- We still hearing Second, dimmed, button

    Do you know why?

  38. zakim-robot
    @zakim-robot
    Sep 20 20:22

    [micnap] I'm not fully understanding what you're asking, but here is how I navigated:

    • Loaded the page in Chrome
    • Enabled VoiceOver
    • Clicked in the frame with the buttons to access it.
    • Pressed tab key - this put focus on the first button and "First Button" was read to me by VO.
    • Pressed enter key to activate First button - this enabled the Second button
    • Repeatedly pressed First button and this toggled the Second button - nothing was read by VO during the toggling
    • Pressed tab key again and focus went to the Second button - "Second Button" was read by VO
    • Pressed enter on Second button.

    When the second button is greyed out, VO skips it and won't read it for me. This is as I would expect. It sounds like the Second button is being read to you when it is greyed out?

    I'm on OXS 10.9.3 with Chrome 53.

  39. [micnap] @csantos ^
  40. zakim-robot
    @zakim-robot
    Sep 20 20:35
    [csantos] safari.mov
  41. zakim-robot
    @zakim-robot
    Sep 20 20:42
    [micnap] The only way I am able to access the second button without the tab key is if I use the additional VO keys with the right arrow. And then that operates as intended. That allows me to access things that are not clickable, which includes the disabled button. Am I understanding correctly?
  42. [micnap] @csantos ^
  43. [csantos] Yes @micnap
  44. [cordelia] Seems like a Chrome bug… Can you reproduce it in Firefox + NVDA?
  45. [cordelia] I don’t get the bug in Safari but do in Chrome (using VO)
  46. zakim-robot
    @zakim-robot
    Sep 20 20:56
    [csantos] @cordelia @micnap It works fine in Firefox + NVDA (_With NVDA you can navigate through buttons, pressing:_ B or Shift + B)
    It doesn’t work inChrome + NVDA
  47. Šime Vidas
    @simevidas
    Sep 20 21:01
    Including an SVG file via <object> enables “text search and selection”, according to http://w3c.github.io/svgwg/specs/svg-authoring/#svg-in-object; my question is, is the SVG accessible, i.e. how much is passed to ATs?
  48. In other words, is a11y the same as with inline SVG, or worse?
  49. Mallory
    @StommePoes
    Sep 20 21:58
    @dna you might have been in one of the cursor modes or forms mode. When I get stuck like that, I flail around switching cursor modes until things work again
  50. Thierry Koblentz
    @thierryk
    Sep 20 23:13
    Howdy!
    Is it normal that in the list of roles for aria-expanded tab is not listed? Or am I reading that incorrectly? (I could be looking at the wrong doc too...)
  51. zakim-robot
    @zakim-robot
    Sep 20 23:16
    [caesar] Is it because the state should be aria-selected?
  52. [caesar] (It is listed under aria-selected)
  53. [caesar] https://www.w3.org/TR/2011/CR-wai-aria-20110118/states_and_properties#aria-selected
  54. [caesar] How do you do inline links in Slack?
  55. [caesar] <a href="https://www.w3.org/TR/2011/CR-wai-aria-20110118/states\_and\_properties\#aria-selected">aria-selected</a>
  56. [caesar] `code'
  57. Thierry Koblentz
    @thierryk
    Sep 20 23:20
    @caesar aria-selected is different than aria-expanded isn't? I see the latter in accordion markup where multiple could be opened at once (unlike panels of Tab Panel).
  58. Are those 2 redundant then? The fact that aria-expanded is not listed there confuses me
  59. Semantically they are very different though
  60. zakim-robot
    @zakim-robot
    Sep 20 23:23
    [caesar] Depends on how you understand the tab UI pattern. It does not expand/collapse. A tab is more like a radio button set where one item from several is selected. Then the corresponding tabpanel is displayed, not expanded.
  61. [caesar] For accordions there's aria-multiselectable
  62. Thierry Koblentz
    @thierryk
    Sep 20 23:24
    I'm talking about Accordion widget where headers have the role tab
  63. Check the markup of this accordion for example: http://www.oaa-accessibility.org/examplep/accordian1/
  64. On the same element, we have: aria-selected="true" aria-controls="panel1" aria-expanded="true" role="tab"
  65. zakim-robot
    @zakim-robot
    Sep 20 23:27
    [caesar] Oh I see
  66. [caesar] https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
  67. [caesar] Maybe one for @michiel when he clocks on...
  68. Thierry Koblentz
    @thierryk
    Sep 20 23:28

    Yes, that link confirms the issue, it says:

    An accordion should manage the expanded/collapsed state of each tab by maintain its aria-expanded state.

  69. zakim-robot
    @zakim-robot
    Sep 20 23:29
    [caesar] I'm only guessing here now, but maybe it's because the accordion is taking on a hybrid, but it is using roles and states independently.
  70. Thierry Koblentz
    @thierryk
    Sep 20 23:29
    so may be tab is just missing from the list on that doc I posted
  71. zakim-robot
    @zakim-robot
    Sep 20 23:30
    [caesar] No worries, interesting pickup. Will leave it for the more experienced to answer that!
  72. Thierry Koblentz
    @thierryk
    Sep 20 23:31
    Thanks. I think if aria-expanded is a valid state for role="tab" then it should be listed in the doc (https://www.w3.org/TR/2011/CR-wai-aria-20110118/states_and_properties#aria-expanded)
  73. zakim-robot
    @zakim-robot
    Sep 20 23:40
    [caesar] Also check out the tab role description - aria-expanded is mentioned there https://www.w3.org/TR/2011/CR-wai-aria-20110118/roles#tab
  74. [caesar] It says there that it's used in tabpanel role, so maybe it's tabpanel that should be added, not tab.
  75. [caesar] :)
  76. Thierry Koblentz
    @thierryk
    Sep 20 23:46
    :smile: actually, it kinda makes sense. May be it's the markup of the accordion that is wrong. That would explain the wording of the W3C docs
  77. zakim-robot
    @zakim-robot
    Sep 20 23:47
    [caesar] I've been confused by aria-expanded in the past. I've seen it said that it should be assigned to the button role that expands/collapses the panel
  78. Thierry Koblentz
    @thierryk
    Sep 20 23:48
    yes, that's how the example is built, but that's not how the docs mention its use
  79. if it is meant to be associated with button then for sure it is not supposed to go on the panels of a accordion but rather on its headers (with role="tab") - the actionable stuff.