Archive index

A11y Slackers
Gitter Channel Archive 27th of July 2015

What fresh hell is THIS now? - Patrick Lauke
  1. stevefaulkner
    Jul 27 08:53

    A11ySlackers chat log 26th of July 2015 - http://w3c.github.io/a11ySlackers/archives/260715.html

  2. zakim-robot
    Jul 27 08:56
    [Michiel Bijl, a11y] @Katy Moe: that is correct. Turning it into an actual <button> is also possible.
  3. stevefaulkner
    Jul 27 08:58
    me/ morning slackers
  4. zakim-robot
    Jul 27 08:58
    [Michiel Bijl, a11y] morning/ slackers me
  5. zakim-robot
    10:59
    [Katy Moe, a11y] Does anyone have experience making wysiwig web text editors accessible for screen readers? I’m interested in whether functionality such as making a word bold is even useful, since when it gets read out the SR won’t differentiate between bold and non-bold words
  6. zakim-robot
    11:00
    [Katy Moe, a11y] I’ve found an example that says it’s accessible and uses contentEditable: https://textbox.io/
  7. zakim-robot
    11:00
    [Katy Moe, a11y] But using VoiceOver I couldn’t tell how the text was formatted
  8. zakim-robot
    11:04
    [Michiel Bijl, a11y] I’m unable to hear a difference between <strong> and <em> in VO.
  9. zakim-robot
    11:05
    [Michiel Bijl, a11y] Not sure how other SR’s handle it.
  10. stevefaulkner
    11:24
    @kmoe this may be helpful https://www.marcozehe.de/2014/02/26/wai-aria-showcase-tinymce-4-17/ also take a look at http://ckeditor.com/
  11. zakim-robot
    11:25
    [Katy Moe, a11y] thanks @stevefaulkner!
  12. stevefaulkner
    11:27
    np :-)
  13. zakim-robot
    11:27
    [Katy Moe, a11y] Another challenge is that ideally it should work nicely with React, in particular Flux - but that may be asking too much
  14. zakim-robot
    11:29
    [Katy Moe, a11y] We may end up writing our own plugin for wysiwig in React, but it’s good to have some examples of accessible wysiwig editors for a baseline.
  15. stevefaulkner
    11:32

    but it’s good to have some examples of accessible wysiwig editors for a baseline.

    right

  16. zakim-robot
    11:56
    [Wilco Fiers, a11y] Anyone here have any experience / interest in the W3C's WCAG-EM Report Tool? (http://www.w3.org/WAI/eval/report-tool/)
  17. zakim-robot
    13:43
    [Michiel Bijl, a11y] Experience, no. Interest, yes.
  18. zakim-robot
    13:47
    [Wilco Fiers, a11y] It's a tool/assistant designed to guide an accessibility auditor through the process of manual evaluation. I helped them with the initial dev work, but am looking for ideas / support for improvements.
  19. zakim-robot
    13:49
    [Michiel Bijl, a11y] I’ll have to use it first before I can give feedback. I’ve bookmarked it and will use it in my next audit :simple_smile:
  20. zakim-robot
    13:53
    [Karl Groves, a11y] @Katy Moe: CKEditor is very good. I’d be interested in hearing anyone’s findings with TinyMCE
  21. zakim-robot
    13:54
    [Katy Moe, a11y] I’ve found an editor built on top of CKEditor using React - http://alloyeditor.com/
  22. zakim-robot
    13:54
    [Katy Moe, a11y] Unfortunately the module format isn’t quite right for my app, but I’ll try to adapt it
  23. StommePoes
    13:55
    Just added another pile of @font-face fonts to a website, for mobiles to download, because between two mobile devices the default fonts "look a little different". Yay, making the world a little less usable and accessible at a time (cause it's robot-thin @ #777 on #f2f2f2, which while unreadable, apparently "looks cool".
  24. StommePoes
    13:56
    I'm pretty sure I've given up on this site. Hope my name doesn't ever get any association with it.
  25. zakim-robot
    13:56
    [Michiel Bijl, a11y] Yug
  26. StommePoes
    13:57
    My job: make the world a crappier place.
  27. zakim-robot
    13:57
    [Michiel Bijl, a11y] a11y win for the day: I convinced a stubborn project manager not to use the white text on light green the designer suggested.
  28. zakim-robot
    13:58
    [Katy Moe, a11y] nice one @Michiel Bijl
  29. zakim-robot
    13:59
    [Katy Moe, a11y] white text on light green - wow
  30. StommePoes
    13:59
    Michiel++
  31. zakim-robot
    13:59
    [Katy Moe, a11y] We have a style guide including three shades of each colour, tested for contrast with white/black text. This means the designers know which combinations pass our accessibility guidelines without having to measure each time.
  32. StommePoes
    14:00
    We have moving goalposts: everything changes the moment something pretty was seen on a bootstrap site
  33. StommePoes
    14:00
    We have MBs of javascript now to make things move, wiggle, scroll and animate
  34. StommePoes
    14:00
    bootstrap plus jQuery
  35. StommePoes
    14:00
    for mobile
  36. StommePoes
    14:00
    haha
  37. zakim-robot
    14:00
    [Michiel Bijl, a11y] Thanks! This was the design: http://agosto.nl/dir/dump/Screen%20Shot%202015-07-27%20at%2015.00.15.png
  38. StommePoes
    14:01
    font-awesome, plus all the css of all the growing plugins, and all the images being added to the pages might be shown at around 60px by 60px, but they're on the page as 800 x 800, or larger
  39. zakim-robot
    14:01
    [Wilco Fiers, a11y] owch! Painful. This hits me right in the soul
  40. zakim-robot
    14:01
    [Michiel Bijl, a11y] @Katy Moe: that is an excellent idea.
  41. StommePoes
    14:01
    Michiel: yeah, what WERE they thinking :P
  42. zakim-robot
    14:02
    [Michiel Bijl, a11y] Haha, that was me editing company information :stuck_out_tongue:
  43. zakim-robot
    14:06
    [Michiel Bijl, a11y] This is from the same design :sob: http://agosto.nl/dir/dump/Screen%20Shot%202015-07-27%20at%2015.05.33.png
  44. zakim-robot
    14:06
    [Michiel Bijl, a11y] But those are changed to black, too.
  45. StommePoes
    14:06
    psht, look at the footer here http://www.boumankantoortotaal.nl/
  46. zakim-robot
    14:07
    [Michiel Bijl, a11y] MY EYES, MY EYES!
  47. zakim-robot
    14:08
    [Wilco Fiers, a11y] wow... that blue is amazing. 1.6:1
  48. zakim-robot
    14:08
    [Michiel Bijl, a11y] That carousel that changes the height of the page is interesting
  49. zakim-robot
    14:09
    [Michiel Bijl, a11y] @StommePoes, I’m near Veenendaal, want me to pay them a visit? >:)
  50. zakim-robot
    14:10
    [Wilco Fiers, a11y] #a11y-hitman
  51. zakim-robot
    14:10
    [Michiel Bijl, a11y] Haha
  52. StommePoes
    14:10
    I had to do this http://shop.boumankantoortotaal.nl/ and then drank a lot of cheap whiskey. You paying a visit now will never save my liver
  53. zakim-robot
    14:11
    [Michiel Bijl, a11y] Sound like next time we meet we need to go for whiskey instead of coffe :stuck_out_tongue:
  54. zakim-robot
    14:11
    [Wilco Fiers, a11y] Did someone say whiskey? I'm in
  55. StommePoes
    14:11
    this is pain-whiskey, you don't waste the good stuff on this
  56. StommePoes
    14:12
    cheap vodka would work as well
  57. StommePoes
    14:12
    popov
  58. zakim-robot
    14:12
    [Michiel Bijl, a11y] You start with good stuff and change after two glasses
  59. StommePoes
    14:25
    nog meer fonts toevoegen "Dan is alles in een keer opgelost" But dude I explained to you that you sit there with blink for several seconds being unable to read any text because it's loading a web font
  60. StommePoes
    14:26
    and safari
  61. zakim-robot
    14:27
    [Michiel Bijl, a11y] Plus, Safari doesn’t have a load time limit for fonts; so if it can’t find the font file; you’re doomed.
  62. StommePoes
    14:27
    Colleague who just came back from vacation had just told all of us how his data plan didn't let him read a single news site, because they were all busy loading so much crap, he ran out of his data plan (10MB per day) within minutes.
  63. StommePoes
    14:27
    Bwahaha, brilliant. I should mis-name some fonts. "whoops"
  64. StommePoes
    14:31
    homepage. Uncompressed size: 4249 KB; compressed size: 4229 KB.
  65. StommePoes
    14:31
    lol mobile.
  66. zakim-robot
    14:46
    [Michiel Bijl, a11y] My latest project fits within 500kb uncompressed :stuck_out_tongue:
  67. zakim-robot
    15:11
    [dylanb, a11y] @Katy Moe: re: wysiwyg editors - the formatting is important semantic information which (regardless of screen reader treatment of the rendered output) should be communicated to all users. I would argue that an accessible editor would add that semantic information in a way that it is accessible to screen readers. Editors fall under ATAG as well as WCAG http://www.w3.org/WAI/intro/atag-glance
  68. zakim-robot
    15:13
    [dylanb, a11y] @Katy Moe: I believe that this falls under A.2.2 http://www.w3.org/TR/ATAG20/#gl_a22
  69. zakim-robot
    15:20
    [dylanb, a11y] @Steve Faulkner: what makes you think CKEditor is accessible?
  70. zakim-robot
    15:20
    [dylanb, a11y] I cannot get it to do even the most basic accessibility despite documentation to the contrary
  71. zakim-robot
    15:20
    [dylanb, a11y] have tried OS X and Windows
  72. zakim-robot
    15:27
    [dylanb, a11y] @Karl Groves: I cannot get CKEditor to provide even the most basic keyboard accessibility on the demo site http://ckeditor.com/demo am I missing something?
  73. zakim-robot
    15:28
    [Karl Groves, a11y] @dylanb: that’s unfortunate. I looked into RTEs a while ago and CKEditor was the clear winner.
  74. stevefaulkner
    15:30

    @Steve Faulkner: what makes you think CKEditor is accessible?

    like karl when i looked into it (quite a while back admittedly) ckeditor worked well

  75. zakim-robot
    15:30
    [Jordan Scales, a11y] @dylanb http://docs.cksource.com/CKEditor_3.x/Users_Guide/Keyboard_Shortcuts? Discoverable by alt+0
  76. zakim-robot
    15:33
    [dylanb, a11y] @Jordan Scales: ouch!!
  77. zakim-robot
    15:33
    [dylanb, a11y] why don't they just make it naturally keyboard focusable?
  78. zakim-robot
    15:34
    [dylanb, a11y] How does a user discover the Alt+0?
  79. stevefaulkner
    15:35
    @mgifford doesn't drupal use ckeditor?
  80. zakim-robot
    15:41
    [Jordan Scales, a11y] @dylanb I’m not sure how that decision was made :disappointed:
  81. zakim-robot
    15:41
    [Jordan Scales, a11y] I’ve never really understood the relation between keyboard accessibility and keyboard shortcuts - do they go hand in hand?
  82. zakim-robot
    15:42
    [dylanb, a11y] shortcuts are shortcuts - literal, English meaning
  83. zakim-robot
    15:42
    [dylanb, a11y] everything should be naturally accessible just with tab
  84. zakim-robot
    15:43
    [dylanb, a11y] or with arrow keys once a widget is focused
  85. zakim-robot
    15:44
    [dylanb, a11y] you have to consider people with cognitive disabilities too
  86. zakim-robot
    15:44
    [dylanb, a11y] if I am relying on someone remembering a shortcut that cannot be discovered, then I am failing
  87. zakim-robot
    15:45
    [dylanb, a11y] I don't know how this could ever possibly have passed a usability test
  88. zakim-robot
    15:48
    [Jordan Scales, a11y] @dylanb :thumbsup:
  89. zakim-robot
    15:48
    [Jordan Scales, a11y] I dig the sentiment
  90. zakim-robot
    15:49
    [Jordan Scales, a11y] > The accessibility shortcuts for toolbar navigation were modified in CKEditor 3.6, when the concept of a toolbar button group was initially introduced. On entering the toolbar you can now use the Tab and Shift+Tab shortcuts to navigate between button groups and the Arrow keys to navigate between the buttons within a group. In CKEditor 3.5.x and before both Tab and Arrow keys were used to navigate between the toolbar buttons.
  91. zakim-robot
    15:49
    [Jordan Scales, a11y] so looks like there is a way to get up there, somehow
  92. zakim-robot
    15:51
    [dylanb, a11y] Alt+F10
  93. zakim-robot
    15:52
    [dylanb, a11y] but you have to know Alt+0 to discover Alt+F10
  94. deborahgu
    15:53
    one thing people designing web interfaces forget is that the keyboard shortcuts in desktop interfaces have always been visually exposed. In both OS X and Windows, you have the keyboard shortcut visually indicated right there in the menu items, and (in Windows, not in OS X) also on the top level menus.
  95. deborahgu
    15:54
    And nobody hated that. I think at various times various interfaces have made it an option that you can turn on or off, but I've never seen angry rants about how the design is made hideous by having underlined letters at the top levels of the menus, or any other kind of built-in documentation.
  96. dylanb
    15:59
    I agree - and instead of turning natural keyboard accessibility off by default (as it is), you could have it on by default and allow mouse junkies to turn it off themselves
  97. deborahgu
    16:13
    ++
  98. zakim-robot
    16:21
    [Francis Storr, a11y] I’ve just created an #events Slack channel to mention any a11y-related events.
  99. zakim-robot
    16:22
    [Michiel Bijl, a11y] Nice going
  100. zakim-robot
    16:41
    [Katy Moe, a11y] awesome, thanks for continuing the discussion guys
  101. zakim-robot
    16:41
    [Katy Moe, a11y] @dylanb: good point about ATAG - so I should really be asking whether wysiwig editors are ATAG as well as WCAG compliant
  102. deborahgu
    16:45
    i'm on a mission to make people remember that ATAG and UAAG exist.
  103. zakim-robot
    16:49
    [dylanb, a11y] @Katy Moe
  104. zakim-robot
    16:50
    [dylanb, a11y] @Katy Moe: ATAG references WCAG, so technically you just need to comply with ATAG
  105. zakim-robot
    16:50
    [Katy Moe, a11y] cool :thumbsup:
  106. zakim-robot
    16:52
    [dylanb, a11y] @Katy Moe: but really, you want to aim for usability and IMO ATAG is just straightforward common sense extrapolation from WCAG with a usability mindset
  107. zakim-robot
    16:55
    [dylanb, a11y] IMO CKEditor might be best of breed at the moment but it is not fully accessible
  108. deborahgu
    17:00
    the important thing that people forget about ATAG is that both tool and output need to be accessible.
  109. deborahgu
    17:00
    A lot of people seem to feel like it should be one or the other.
  110. zakim-robot
    17:38
    [jitendra, a11y] A new course on http://Lynda.com|Lynda.com http://www.lynda.com/course-tutorials/Accessibility-WordPress/374185-2.html
  111. stevefaulkner
    17:39
    Request for comments on "Best practices for accessible diagram design" (draft) http://webaim.org/discussion/mail_thread?thread=7054
  112. zakim-robot
    19:40
    [Michiel Bijl, a11y] Minutes: ARIA APG Task Force - Monday July 27: http://www.w3.org/2015/07/27-aria-apg-minutes.html
  113. Scratch2k
    00:43
    Hi folks, I need some advice. Our UX people have come up with a design where a link on a page is not visible until i received focus (or hover), the only indicator that there is a link there is a sideways pyramid, when the user hover/focuss the element the background changes to a solid colour and the link text can be seen. I think this is terrible from a usability perspective but they wont change it unless i hit them with a WCAG violation, I can't find a WCAG guideline which covers this except maybe 3.2.1 On Focus, any other ideas?