Archive index

A11y Slackers Gitter Channel Archive 19th of February 2016

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    Feb 19 07:14
    @fstorr James filed a bug too https://twitter.com/cookiecrook/status/700576155984752640
  2. sophieschoice
    Feb 19 09:13
    Question (hopefully I don't open a can of worms :P) : how do the standard themes of Wordpress do, accessibility-wise?
  3. stevefaulkner
    Feb 19 09:18
    @sophieschoice dunno, but I know some people on twitter that would https://twitter.com/stevefaulkner/status/700610334000689153
  4. sophieschoice
    Feb 19 09:47
    There is a tag for accessibility ready themes, but some are really a joke, when you inspect them with the AInspector Toolbar in firefox: https://wordpress.org/themes/tags/accessibility-ready/
  5. sophieschoice
    Feb 19 09:48
    and wordpress's own themes aren't quite there yet either, going by the results of the toolbar...
  6. FionaTG
    Feb 19 10:37
    I'm running the Twenty Fifteen theme and it's not too bad, keyboard accessible menu etc.
  7. MichielBijl
    Feb 19 10:41
    Isn't Marco's website running a default WP theme too? https://www.marcozehe.de/
  8. MichielBijl
    Feb 19 11:16
    using something like Colour Contrast Checker: https://www.paciellogroup.com/resources/contrastanalyser/
  9. MichielBijl
    Feb 19 11:16
    @sophieschoice, there are some things you can do even before the need for further a11y testing: run your website through the W3C Nu validator (https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.allthingsroyal.nl), run your website through tenon.io (http://tenon.io/testNow.php?url=http://www.allthingsroyal.nl/), check colour contrast between text/background
  10. sophieschoice
    Feb 19 13:50
    Cleaned some errors up already. Thanks! :D
  11. sophieschoice
    Feb 19 13:51
    Though I don't understand why this is wrong ? <image xlink:href="assets/img/social-icons/svg/facebook25.svg" src="assets/img/social-icons/png/facebook25.png" width="26" height="39">
  12. garcialo
    Feb 19 13:54
    Does that need src?
  13. garcialo
    Feb 19 13:55
    Is that supposed to work as like a fallback? What does having both do?
  14. sophieschoice
    Feb 19 14:00
    http://lynn.ru/examples/svg/en.html
  15. stevefaulkner
    Feb 19 14:02
    so its not conforming to spec, but does no harm, so ignore
  16. sophieschoice
    Feb 19 14:02
    From what I read, it is to provide a sort of fallback for browsers who don't handle SVG-images well
  17. stevefaulkner
    Feb 19 14:03
    @sophieschoice when using the validator it's worth having a read of this http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/
  18. garcialo
    Feb 19 14:07
    ah, interesting
  19. garcialo
    Feb 19 14:07
    thanks for the link @sophieschoice
  20. sophieschoice
    Feb 19 14:08
    @stevefaulkner Thanks :) ! But there were a few really stupid errors in there: a stray <a> element, a button placed inside a link (quick googling showed that is semantically incorrect)
  21. sophieschoice
    Feb 19 14:08
    @garcialo no problem ;)
  22. sophieschoice
    Feb 19 14:12
    @MichielBijl that colour contrast checker from the Paciello group is sweeeeeeet!
  23. stevefaulkner
    Feb 19 14:16
    @sophieschoice it's the sugar coating...
  24. sophieschoice
    Feb 19 14:16
    hahaha :D
  25. powrsurg
    Feb 19 14:48
    any suggestions on how to create some type of automatic testing for accessibility on pages that are password protected?
  26. MichielBijl
    Feb 19 14:48
    user:password@address.com
  27. MichielBijl
    Feb 19 14:48
    ?
  28. MichielBijl
    Feb 19 14:49
    Or do you mean like some .net/php/whatever type of login?
  29. powrsurg
    Feb 19 14:53
    yeah, something like the latter. Something that needs to create a PHP session in our system
  30. powrsurg
    Feb 19 14:54
    to me it seems like you'd typically need something command line based that'd allow you to configure some type of prefix action that would let you log in. But I could be overthinking things
  31. powrsurg
    Feb 19 15:06
    Of course, I'd say most of our a11y related issues can't be checked manually, but it'd be nice automate color contrast checking.
  32. powrsurg
    Feb 19 15:07
    Trying to win the war on getting us to use <button><img></button> and doing actions on the button, over <img tabindex="0"> and then actions on the click event since it seems easy to forget to add tabindex.
  33. jnurthen
    Feb 19 15:32
    And you need to add key events on the IMG too.
  34. garcialo
    Feb 19 15:35
    @powrsurg I've not really done any automation, but I'd imagine the "sign into this site for automated testing" problem has been solved.
  35. powrsurg
    Feb 19 15:44
    why add key events on the img if we make clickable on the button? a person using a keyboard will tab to that button.
  36. powrsurg
    Feb 19 15:44
    er, oh you mean with the tabindex solution. Yes, I know
  37. powrsurg
    Feb 19 15:45
    with the buttons you would not ...
  38. stevefaulkner
    Feb 19 16:06
    @powrsurg wrote this a while back https://www.paciellogroup.com/blog/2011/04/html5-accessibility-chops-just-use-a-button/
  39. StommePoes
    Feb 19 16:11
    you wouldn't believe the number of non-buttons I come across
  40. StommePoes
    Feb 19 16:12
    Luckily they're mostly anchors with href="#" so Tenon bitches
  41. zakim-robot
    Feb 19 16:19

    [karlgroves] >any suggestions on how to create some type of automatic testing for accessibility on pages that are password protected?

    SELENIUM ALL THE THINGS

  42. zakim-robot
    Feb 19 16:20
    [karlgroves] https://github.com/poorgeek/tenon-selenium-example
  43. powrsurg
    Feb 19 16:32
    Yeah, listening here has gotten me to realize to think harder about how one does buttons. Buttons for action, links for navigation. That said, I just realized I removed a role="button" in a spot where we did have an image like in Steve's example. I got so headstrong on removing badly-added role="buttons" that I am now removing when they are supposed to be in ...
  44. powrsurg
    Feb 19 16:32
    And I have got to get into using selenium ...
  45. zakim-robot
    Feb 19 16:41
    [poorgeek] use one of the many selenium abstractions. straight selenium will drive you mad
  46. zakim-robot
    Feb 19 16:45
    [karlgroves] What;s your favorite, @poorgeek
  47. zakim-robot
    Feb 19 16:46
    [poorgeek] depends on how I’m writing my tests and the limitations of the system where they’re being run.
  48. zakim-robot
    Feb 19 16:46
    [poorgeek] cucumber.js backed by webdriver.io is pretty nice if you’re in node
  49. MichielBijl
    Feb 19 16:47
    +1 Cumcumber
  50. zakim-robot
    Feb 19 16:47
    [poorgeek] if you’re in Java land, geb is pretty awesome
  51. zakim-robot
    Feb 19 17:02

    [karlgroves] > Cumcumber

    :scream:

  52. jkva
    Feb 19 17:16
    >_<
  53. MichielBijl
    Feb 19 18:05
    That's as bad as my breadcumbs design pattern…
  54. jnurthen
    Feb 19 18:22
    Where is your breadcrumbs design pattern?
  55. MichielBijl
    Feb 19 18:26
    Code example: https://cdn.rawgit.com/w3c/aria/feature/breadcrumb/practices/examples/breadcrumb/index.html
  56. MichielBijl
    Feb 19 18:26
    Design pattern WIP: http://rawgit.com/w3c/aria/feature/breadcrumb/practices/aria-practices.html#breadcrumb
  57. MichielBijl
    Feb 19 18:29
    My word smithing skills are not as good yet, but I'll get there I suppose.
  58. jnurthen
    Feb 19 18:29
    ah yeah - i remember you asking about aria-current and stating it wasn't available unless you made the current page a link
  59. jnurthen
    Feb 19 18:31
    I'll tell a dirty secret here.... I had to code the following for a customer once who insisted that making links into just text when the control wasn't active was a violation (i.e. previous link when there are no previous results as you are on the first page)
  60. jnurthen
    Feb 19 18:31
    <div role="link" aria-disabled="true">Previous</div>
  61. jnurthen
    Feb 19 18:31
    I felt so dirty
  62. jnurthen
    Feb 19 18:33
    but they were happy - so win.
  63. powrsurg
    Feb 19 18:53
    just a heads up that there is a specific type to schema markup that Google uses (or at least used to use) when displaying breadcrumbs in search results. It would be useful for a pattern to make it simple to implement both
  64. zakim-robot
    Feb 19 20:16
    [poorgeek] I don’t believe the structure of your pattern matters as much when you’re building our breadcrumbs if you use something like RDFa to define the proper metadata for each crumb in the path
  65. zakim-robot
    Feb 19 21:21
    [cordelia] Do most screenreaders treat alt=“” and alt=“ “ the same? (empty string vs space) I just did a quick test with JAWS + IE, NVDA + FF, & VO + Safari and only NVDA seemed to treat them differently, but could be the way I’ve configured the screenreaders.
  66. garcialo
    Feb 19 21:22
    Have you done a lot of customization on NVDA?
  67. garcialo
    Feb 19 21:22
    I keep mine pretty vanilla
  68. zakim-robot
    Feb 19 21:22
    [cordelia] Actually I have not on NVDA, mine is also pretty vanilla.
  69. zakim-robot
    Feb 19 21:22
    [cordelia] It announces alt=“ “ as “graphic” and does not announce alt=“” at all
  70. garcialo
    Feb 19 21:23
    I would have expected it to treat them the same...that's interesting.
  71. garcialo
    Feb 19 21:26
    hmmm..my NVDA seems to treat them the same by ignoring both
  72. garcialo
    Feb 19 21:27
    ah wait, no...it was my fault
  73. garcialo
    Feb 19 21:28
    yeah, I'm getting what you're getting
  74. zakim-robot
    Feb 19 21:28
    [cordelia] ideal behavior is that it doesn’t read out at all, right?
  75. garcialo
    Feb 19 21:28
    For me it would be...I mean blank would be a pretty useless atl
  76. garcialo
    Feb 19 21:28
    alt
  77. MichielBijl
    Feb 19 21:29
    @jnurthen yeah, I'm not putting that into the spec :P