Archive index

A11y Slackers Gitter Channel Archive 17th of November 2015

What fresh hell is THIS now? - Patrick Lauke
  1. MichielBijl
    08:55
    https://twitter.com/htmlandbacon/status/666374248852795393
  2. MichielBijl
    08:55
    Haha
  3. MichielBijl
    13:36
    Is there a aria/html way to declare an entire form as valid?
  4. MichielBijl
    13:36
    Want to do something like form[valid] button[type="submit"] { color: green }
  5. MichielBijl
    13:50
    http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid is the closest I can find.
  6. MichielBijl
    13:50
    But that neither forbids nor permits its use on forms.
  7. MichielBijl
    15:45
    Anyway, if anyone has the time, I present the first version of Cool Semantic Styles: http://codepen.io/Michiel/details/zvebZO/
  8. MichielBijl
    15:45
    It's just buttons for now, but I'm working with browser vendors to include more stuff soon!
  9. MichielBijl
    15:50
    Wonder if I should expand it before I release it.
  10. bkardell
    16:47
    @MichielBijl there's the valid pseudo-class
  11. MichielBijl
    16:48
    Hmm, but how would one use that to mark a success button.
  12. MichielBijl
    16:48
    I'm not really sure what a success button is even.
  13. MichielBijl
    16:48
    Should the button be valid?
  14. MichielBijl
    16:48
    And how can a button be invalid?
  15. MichielBijl
    16:48
    It makes no sense!
  16. powrsurg
    16:50
    I like the joke about the CSS framework in there.
  17. MichielBijl
    16:50
    I'm writing a blog post about it now ;-)
  18. powrsurg
    16:51
    minor typo in: Internet Explorer 6 and earlier don't allow you te select states in your Cool Semantic Styles documents.
  19. MichielBijl
    16:53
    I'm not seeing it?
  20. powrsurg
    16:53
    I guess a submit button could be if the button was pressed, all form elements were validated and nothing invalid happened. It'd give some type of indicator that everything is going to go through smoothly. That's at least my best guess for how you could make a "success button"
  21. powrsurg
    16:53
    it should be "don't allow you to" instead of "don't allow you te"
  22. MichielBijl
    16:54
    WHoops
  23. powrsurg
    16:54
    .. I should have read the whole blog before I made my guess on a success button :p
  24. MichielBijl
    16:55
    Hehe, yeah that is the thing. How do I mark that up.
  25. MichielBijl
    17:02
    Thank you for reading :)
  26. zakim-robot
    17:07
    [fstorr] Interesting colour blindness problem for some NFL fans a few days ago: http://www.huffingtonpost.com/entry/colorblind-nfl-bills-jets_5645ef84e4b08cda3488576c
  27. MichielBijl
    17:16
    @fstorr that is interesting, thanks for sharing.
  28. zakim-robot
    17:17
    [fstorr] @michiel: adding it to my list of "things to put in a presentation"
  29. bkardell
    17:21
    @MichielBijl I was just answering your question about "Is there a aria/html way to declare an entire form as valid?" - yes, the pseudo-class, right?
  30. bkardell
    17:23
    FWIW, I totally agree that some of those make absolutely no sense as buttons. In bootstrap those are simply contextual classes and thus could really be applied to just about anything - in some contexts they seem rather unintuitive (like this one) but this is always the case with "bolt on" stuff :)
  31. MichielBijl
    17:28
    @bkardell I agree. Okay. So lets say we do form:valid button { color: green } How do I denote that form as valid in HTML?
  32. MichielBijl
    17:28
    aria-invalid="false" would be one, but I'm not even sure that is allowed.
  33. MichielBijl
    17:33
    Or am I totally missing what you meant?
  34. StommePoes
    17:58
    Forms... don't have a valid state. So it's added-text-to-the-form to the rescue.
  35. StommePoes
    18:00
    conceptually it makes as little sense to say a form is valid as it is to say a key fits a door (it fits a lock on the door...)
  36. bkardell
    18:07
    wait what?
  37. bkardell
    18:07
    forms do have a valid state
  38. bkardell
    18:07
    form:valid means the form is valid
  39. bkardell
    18:08
    same with individual elements
  40. StommePoes
    18:12
    I can't find that, I do find that checkValidity can return true if everyone inside is valid...
  41. MichielBijl
    18:15
    So let's assume checkValidity returns true, is there a matching attribute? Or does form:valid do the same as checkValidity?
  42. StommePoes
    18:17
    in jQuery it does, because .valid() is the boolean representing the result of their validate() method...
  43. MichielBijl
    18:18
    Okay, but I'm talking native
  44. MichielBijl
    18:18
    Otherwise my whole “supported by all major browser vendors” thing is dead in the wather
  45. StommePoes
    18:18
    Maybe I'm looking in the wrong place
  46. MichielBijl
    18:19
    I believe it does.
  47. MichielBijl
    18:20
    So :valid equals form.checkValidity if the latter equals true.
  48. MichielBijl
    18:20
    Cool
  49. MichielBijl
    18:21
    Thank you @bkardell, I'll credit you in some sort of way
  50. MichielBijl
    18:25
    Updated pen thing.
  51. powrsurg
    18:35
    Does it really need jQuery?
  52. StommePoes
    18:36
    checkValidity is HTML5 built-in native for forms.
  53. StommePoes
    18:37
    jQuery might use it internally and then whatever else they add as well
  54. powrsurg
    18:37
    Right, but it sounded like he was using jQuery somewhere in this. And technically, shouldn't the goal for this to be done without the need for JS?
  55. StommePoes
    18:38
    I think I'm the only one who mentioned jQuery. When looking around, I found .valid() first.
  56. powrsurg
    18:40
    It's in the blog post too
  57. StommePoes
    18:41
    I think I missed a message.
  58. StommePoes
    18:45
    Ah, I found MDN's page on :valid
  59. StommePoes
    18:45
    They state it is supported in IE10, and not on IE mobile.
  60. StommePoes
    18:45
    In IE11, while the inputs' background colours change accordingly, there's no border visible.
  61. StommePoes
    18:46
    On my mobile IE (Windows 8.1) it's the same: inputs do change colour, but no border.
  62. bkardell
    18:46
    sorry for flaky in and out here, slack is being funky for me
  63. bkardell
    18:46
    so @MichielBijl you got it?
  64. bkardell
    18:47
    validity can apply to all sorts of things, including imperative checks on what is valid. it sets a property, but not an attribute- that's why there is a pseudo-class
  65. MichielBijl
    18:49
    Yeah exactly, I got that now :)
  66. MichielBijl
    18:50
    @powrsurg :valid is CSS native.
  67. powrsurg
    18:52
    w00t
  68. MichielBijl
    18:53
    Because indeed the point is the whole thing being native
  69. zakim-robot
    18:57
    [cameron] @marcysutton: have you looked at Alaska Airlines site since your post? http://a11ywins.tumblr.com/post/127823149418/alaska-airlines
  70. zakim-robot
    18:57
    [cameron] you mentioned needing improvements to the tabbed sections on the home page
  71. zakim-robot
    18:58
    [cameron] I think they may have taken you up on it
  72. zakim-robot
    18:58
    [cameron] <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="selected active" role="presentation" aria-hidden="false"><a id="tab-booking" href="#booking" role="tab" data-toggle="tab" aria-controls="booking" aria-selected="true">Book</a></li> <li role="presentation"><a href="#checkin" id="tab-check-in" role="tab" data-toggle="tab" aria-controls="checkin" tabindex="-1" aria-selected="false">Check In</a></li> <li role="presentation"><a href="#status" id="tab-status" role="tab" data-toggle="tab" aria-controls="status" tabindex="-1" aria-selected="false">Flight Status</a></li> <li class="last" role="presentation"><a href="#manage" id="tab-manage" role="tab" data-toggle="tab" aria-controls="manage" tabindex="-1" aria-selected="false">Manage</a></li> </ul>
  73. zakim-robot
    18:59
    [cameron] that’s the markup from their tablist
  74. StommePoes
    19:00
    weird, I'm not finding the aria-hidden there
  75. StommePoes
    19:00
    (which is good)
  76. StommePoes
    19:01
    <li class="selected active" role="presentation" aria-hidden="false"> .... <li class="selected active" role="presentation">
  77. zakim-robot
    19:02
    [cameron] @stommepoes I’m not sure why that’s even there, but it doesn’t get set to true ever.
  78. garcialo
    19:02
    @cameron You'll be finding a lot more airlines with better accessibility soon. The deadline for the Air Carrier Access Act is coming up on December 12.
  79. StommePoes
    19:02
    Wonder if my dev tools are messing with it
  80. garcialo
    19:03
    Correction. A deadline; not THE deadline.
  81. StommePoes
    19:03
    zomg what's virginand ryan gonna do, they're so screwed
  82. StommePoes
    19:03
    actually, lemme check.
  83. StommePoes
    19:04
    Ug, started out ok, but you get stuck in the 1 adult control and can't back out of it.
  84. StommePoes
    19:06
    controls are finicky
  85. zakim-robot
    19:07
    [marcysutton] I haven’t booked any flights, so I hadn’t looked! But I heard they were improving it. Nice!
  86. zakim-robot
    19:08
    [cameron] yep
  87. StommePoes
    19:08
    virgin oughtta hire the alaska devs
  88. powrsurg
    19:10
    so for my upcoming blog post on inclusive design I made a graphic of random people I drew/colored in with inkscape. Despite the fact that the colors are arbitrary and have no meaning I still ran them through a color blindness simulator to test it out ...
  89. zakim-robot
    19:10
    [cameron] Marcy, do you know who developed the AlaskaAir site? Was it all internal?
  90. zakim-robot
    19:12
    [marcysutton] I think they worked with Deque
  91. MichielBijl
    19:16
    Ask @johnfoliot in that case ;)
  92. garcialo
    19:16
    Or @dylanb. I think he might work there.
  93. zakim-robot
    19:41
    [marcysutton] He does.
  94. zakim-robot
    19:45
    [dylanb] @cameron: @marcysutton I cannot comment on, confirm, or deny any involvement with Alaska Airlines. I must say though, the site is getting better :wink:
  95. zakim-robot
    20:20
    [lliskovoi] can anyone think of a reason not to use role=“alert” when a form is returned with errors after attempting to submit?
  96. MichielBijl
    22:54
    Because you can use aria-live="assertive".
  97. MichielBijl
    22:54
    Not really a reason, but you could.
  98. MichielBijl
    22:55
    Would have the same result I guess.
  99. zakim-robot
    23:14
    [cameron] voiceover can show visual focus when navigating. Does NVDA have a similar feature?