Archive index

A11y Slackers Gitter Channel Archive 27th of August 2015

What fresh hell is THIS now? - Patrick Lauke
  1. jonathantneal
    01:06

    There is a rising popular technique where a <label> is styled to mimic the appearance of a placeholder attribute. 

    <label><span>Search the site</span><input type="search"></label>

    An issue arises where “Search the site” is repeated twice, once for the <label> or <span> and then again for the <input>. Using <span aria-hidden="true"> makes it so the label is not read at all, but then using <input type="search" aria-label="Search the site"> resolves this. 

    <label><span aria-hidden="true">Search the site</span><input type=“search” aria-label="Search the site"></label>

    The tripled redundency in the code recreates the intended experience for the screen reader. Are there better ways to do this?

  2. jonathantneal
    01:27
    Well, for now, one way I avoid this redundancy in compiled HTML is to add it via JavaScript. 
    <label><span data-label>Search the site</span><input type="search"></label>

    function defineAria(input) {     var label = input.parentElement.querySelector('[data-label]');      if (label) {         label.setAttribute('aria-hidden', true);         input.setAttribute('aria-label', label.innerHTML.replace(/<[^\s][^>]*>/g, ''));     } }  Array.prototype.forEach.call(document.querySelectorAll('button,input,select,textarea'), defineAria);
  3. zakim-robot
    01:59
    [dsturley, a11y] why not trade the div for a span and just <div class=“floaty-label-thingy”><label for=“dingy”>Dingy</label><input id=“dingy”></div>?
  4. zakim-robot
    02:00
    [dsturley, a11y] The ID can be auto-generated to avoid collisions
  5. jonathantneal
    02:29
    @dsturley, thanks - I had it the other way to avoid the id and make sure the container was clickable, but these are weak concerns that can be avoided other ways. I like your solution. Thanks for keeping it simple.
  6. jonathantneal
    02:47
    @dsturley, the problem remains that the label is read twice, so JavaScript is still required, but it’s cleaner now using the <div> wrapper as you recommended: 
    <div class="form-group"><label for="search-more">Search the site</label><input id="search-more" type="search"></div>

    function setAriaAttributes(input) {     if (input.id) {         var label = document.querySelector('label[for="' + input.id + '"]');          if (label) {             label.setAttribute('aria-hidden', true);             input.setAttribute('aria-label', label.innerHTML.replace(/<[^\s][^>]*>/g, ''));         }     } }  Array.prototype.forEach.call(document.querySelectorAll('button,input,select,textarea'), setAriaAttributes);
  7. zakim-robot
    02:53
    [som, a11y] What is reading the label twice?
  8. zakim-robot
    02:54
    [som, a11y] Do you have the same problem if the label is after the input?
  9. zakim-robot
    02:56
    [som, a11y] e.g: 
      <input id=s type=search oninput="this.setAttribute('data-value', this.value);" data-value>   <label for=s>Search</label> </div>  /* CSS */ div {   position: relative; } label {   position: absolute;   left: 0.5em;   opacity: 0; } input[data-value=""] + label {   opacity: 0.5; }
  10. cyns
    03:25
    @stevefaulkner have you done (or know of) a recent set of ARIA Browser support test results? My searches aren't turning up anything newer than CR testing. Thx
  11. jonathantneal
    03:39
    @som, yes the label is then read after the input because it’s still an element that can be navigated to (on VoiceOver with Control+Option+Right Arrow).
  12. zakim-robot
    03:53
    [som, a11y] @jonathantneal .. surely that must be intended behaviour then? If VO reads a label followed by the input it is representing
  13. stevefaulkner
    09:32
    Whether a label is read before or after the control it labels is not an issue, that is part of the "aural UI" of the screen reader
  14. jonathantneal
    11:09
    It seems rigt to attach the label to the input so that it is read once and in conjunction with the input. @stevefaulkner, are you saying this is unexpected behavior for an aural UI?
  15. StommePoes
    11:12
    better question: is reading the label twice expected behaviour?
  16. jonathantneal
    11:13
    Sure. This would be good to know and to share with others, since I could imagine other developers reaching the same conclusion that I did ( that it should be read once )
  17. StommePoes
    11:15
    I would expect it to be read once if you focus on the input. Being read again if you move yourself further sounds sensible though.
  18. StommePoes
    11:16
    But if I focus on the input "search search" would sound pretty confuzling.
  19. StommePoes
    11:16
    I dunno if that's what they meant by "read twice:
  20. StommePoes
    11:16
    "
  21. stevefaulkner
    12:03
    Hi @cyns I don't know of any comprehensive ARIA browser implementations tests other than the ARIA CR tests, I did the CR tests for HTML5 CR implicit semantics http://stevefaulkner.github.io/html-mapping-tests/ but that is only a subset against HTML implementation requirements at the time of html5 going to REC
  22. stevefaulkner
    12:06
    @jonathantneal Label should be read once either before role announced or after see (work in progress) http://thepaciellogroup.github.io/AT-browser-tests/ for some examples
  23. StommePoes
    12:09
    @jonathantneal do you mean you would hear this label twice (sorry it's in Dutch) in the form at the bottom of this page http://www.weps.be/ ?
  24. StommePoes
    12:09
    wait I found we do have an English one http://www.hedgrenwebshop.com/
  25. jonathantneal
    12:10
    I’ve got a test page I’ve run through VoiceOver & Browsers and ChromeVox. Now I’m testing Windows.
  26. StommePoes
    12:11
    (the HTML for the input comes from the company who deals with the input results, not me)
  27. StommePoes
    12:11
    <label for="mce-EMAIL">Enter your email address for newsletter subscription</label>
  28. StommePoes
    12:11
    This should only read the label once.
  29. StommePoes
    12:11
    <input type="email" value="" name="EMAIL" aria-required="true" class="required email" id="mce-EMAIL">
  30. StommePoes
    12:12
    Unfortunate that the company who made the form inputs adds aria-invalid to the input the moment you blur that input but haven't filled anything in... maybe you didn't really want the newsletter. But whatever...
  31. jonathantneal
    12:12
    It would be nice if I knew how to use commands with JAWS. Right now I have to listen to the whole page read a few times write it down, then listen to it again.
  32. StommePoes
    12:13
    freedom scientific has pages showing the quick nav
  33. StommePoes
    12:13
    you can quicknav to forms with F
  34. StommePoes
    12:13
    and combined with shift you can do next/prev form (or t->table, or h->heading etc)
  35. StommePoes
    12:14
    there should be a "Jaws key", a key like Insert usually which you can use for commands...
  36. StommePoes
    12:14
    http://www.freedomscientific.com/training/Surfs-Up/Quick_Keys.htm
  37. jonathantneal
    12:17
    Is there something like a modifer key. ChromeVox’s is Control + Command and VoiceOver’s is Control + Alt.
  38. StommePoes
    12:18
    yeah insert is generally jaws' mod key, but I forget how to set your own (lots of people like caps lock)
  39. jonathantneal
    12:32
    In Windows, it doesn’t always do the same thing if you are reading elements aloud versus if you click into them.
  40. Heydon
    12:36
    NVDA + Chrome (latest both) seems utterly borked. As in keypresses totally bizarre etc. Can anyone corroborate?
  41. zakim-robot
    12:38
    [dsturley, a11y] @jonathantneal you don’t want aria-label or aria-hidden if you are using a real <label>
  42. StommePoes
    12:39
    aria-label will override any real labels... but it wouldn't double a label
  43. StommePoes
    12:39
    or, shouldn't
  44. StommePoes
    12:39
    unless there's a bug?
  45. jonathantneal
    12:42
    Tests: http://jonathantneal.github.io/rat/tests/label.html
    Results (not yet written up nicely): http://viewsource.in/jonathantneal.github.io/rat/tests/label.html
  46. jonathantneal
    12:43
    It’s pretty inconsistent.
  47. Heydon
    13:54
    Hi Jamie!
  48. stevefaulkner
    16:00
    @StommePoes note that both required and invalid states are exposed for input with HTML required attribute set (until the validation constraints are met)
  49. jonathantneal
    18:29
    Is there a role or attribute to identify a link as self referential (like a link pointing to the current page in a navigation)?
  50. zakim-robot
    18:32
    [Karl Groves, a11y] Assistive technologies will announce those links as such.
  51. jonathantneal
    18:32
    Thanks, Karl Groves. I wasn’t sure if I should be adding rel=“canonical" or something like that.
  52. stevefaulkner
    21:27

    A11ySlackers chat log 26th August 2015 http://w3c.github.io/a11ySlackers/archives/2015/08/2015-08-26.html

  53. zakim-robot
    23:16
    [blink183, a11y] JAWS has a Quick Navigation Keys Manager that you can access by pressing insert+f2.