Archive index

A11y Slackers Gitter Channel Archive 13th of October 2016

What fresh hell is THIS now? - Patrick Lauke
  1. powrsurg
    @powrsurg
    Oct 13 00:19
    That said, I see Drupal avoids this issue by not including a width value in its element-invisible class
  2. seanus1138
    @seanus1138
    Oct 13 00:26
    Quick someone add a PR to all the frameworks to get smushed text fix in
  3. luis garcia
    @garcialo
    Oct 13 00:29
    @caesar What would it mean for a technique to have a conformance level?
  4. zakim-robot
    @zakim-robot
    Oct 13 00:30
    [caesar] It's mostly a "explain to clients" thing when we recommend this technique. They inevitably ask what level it is, as a kind of prioritisation strategy
  5. [caesar] Part of one, anyway
  6. powrsurg
    @powrsurg
    Oct 13 01:04
    how does the smushed text thing not get noticed?
  7. zakim-robot
    @zakim-robot
    Oct 13 02:02
    [marcysutton] Hi @tkadlec!!
  8. [tkadlec] Hey @marcysutton! :D
  9. zakim-robot
    @zakim-robot
    Oct 13 02:08
    [marcysutton] Welcome to our lair =D
  10. [tkadlec] Not sure how I went this long without knowing it existed. :) Was happy to see you tweet about it.
  11. zakim-robot
    @zakim-robot
    Oct 13 03:06
    [chris__pearce] Welcome :)
  12. [marcysutton] I am also very surprised, since the accessibility and performance conversation that spurred my talks seemed to begin in here!
  13. zakim-robot
    @zakim-robot
    Oct 13 05:18

    [sareh] Hello,

    I was wondering if there is a recommended way to deal with share tool pop-ups. For example: if you have a Twitter icon that's a link, is it best to open it in a new window, continue the journey with tweeting, then assume that the user will know to close that window to get back to the original site?

    I'm particularly interested in the best way to communicate this via markup to screenreader users.

  14. [sareh] There's an interest that our Product team have to enable it to be easier to return to our site, after completing that "share on social media" task.

    So UX are discussing whether it's best to open in the same window (so the return journey will just be going back a few times) or opening a new window (where the return journey would be to close the window).

    Different sites seem to take different approaches. So, I was wondering whether one way is better than the other.

  15. zakim-robot
    @zakim-robot
    Oct 13 05:24
    [caesar] There's a lot of ground to cover in that! :)
  16. [caesar] This is a personal opinion, but I would open a new window for Twitter because it's a spin-off task, rather than part of the customer journey on your own site.
  17. [caesar] There are some basic techniques about notifying users on how to open a new window in WCAG (Technique G201), but this WebAIM article has some good tips - http://webaim.org/techniques/hypertext/hypertext_links#new_window
  18. [caesar] It should also be visible though, not just for screen readers. The accessibility concerns people with cognitive disabilities as well as visual disabilities
  19. [caesar] But if it's a visual icon that can be complicated.
  20. zakim-robot
    @zakim-robot
    Oct 13 06:26

    [sareh] Thanks, @caesar! Great point about cognitive disabilities, too.

    Yes, elsewhere on the site we have an "open in new window icon" that we use. However, to add that next to each of the Twitter, Facebook, Pinterest links that are in a row seems very repetitive and visually confusing, too - it won't necessarily be clear in that context why the apparent "doubling" of icons mean. (Also, since most other sites don't have these 'open in a new link' icons next to their share icons, the UX team suggest it's more useful to be in keeping with what's familiar to users. :/ ) I'm not quite convinced.

  21. zakim-robot
    @zakim-robot
    Oct 13 09:42
    [caesar] Yeah, it's definitely a paradox when it comes to image links!
  22. zakim-robot
    @zakim-robot
    Oct 13 10:22
    [alandunning] Hi all, thanks to @sareh for sharing the link to this channel online
  23. luis garcia
    @garcialo
    Oct 13 14:24
    @sareh I think it makes more sense to let the user decide whether their journey would be to continue in their current window/tab or to create an offshoot journey with a new tab.
  24. That said, if you are going to force the user into a new window/tab, you should let them know. I think if the social icons are grouped up in the visual design properly, you might be fine with only one "opens in a new window" message. Maybe a tooltip on focus/hover over that section?
  25. zakim-robot
    @zakim-robot
    Oct 13 16:27
    [shawn.henning] Are there preferred browser plug-ins for checking a11y, or WCAG? We found a Chrome one, but I recall some talk of a Firefox one on here.
  26. [alexlande] aXe is really good. There are chrome + firefox versions: http://www.deque.com/products/axe/#aXeExtensions
  27. zakim-robot
    @zakim-robot
    Oct 13 16:48
    [conley] CHeck out http://khan.github.io/tota11y/ as well
  28. [drtomlins] I've used tota11y, and I really like it :)
  29. [sareh] You're welcome, @alandunning :)
  30. [sareh] @garcialo Thanks for your reply. Yes, maybe the div that houses all the share icons could have the 'opens in new window' text and then that leaves the individual share icons as they are.
    I'll prototype that and see what our user feedback says about it.
  31. zakim-robot
    @zakim-robot
    Oct 13 16:59
    [shawn.henning] Thank you for your suggestions.
  32. zakim-robot
    @zakim-robot
    Oct 13 17:09
    [conley] @shawn.henning also check out the webdeveloper extension - https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US
  33. [conley] It’s old school but has some accessibility tools like disabling CSS, highlighting aria attributes ,etc
  34. [conley] also avail for FF
  35. [doeg] I use https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl to simulate different vision problems
  36. zakim-robot
    @zakim-robot
    Oct 13 17:33

    [jpdevries] So I just noticed today that twitter.com redirects to mobile.twitter.com if you have JavaScript disabled and I had no idea that was possible. You can detect if JS is enabled on the server side? (thinking face emoji)

    It is like the opposite of progressive enhancement and not a very good pattern, but I’m curious how they are achieving this.

  37. zakim-robot
    @zakim-robot
    Oct 13 17:54
    [tkadlec] Using <noscript>
  38. [tkadlec] <noscript><meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F"></noscript>
  39. [tkadlec] Sadly it means a ton of stuff loads from twitter.com + a redirect + more stuff for mobile.twitter.com
  40. James Nurthen
    @jnurthen
    Oct 13 18:28
    do people really disable javascript? The browsers don't even give you a UI to do that any more
  41. zakim-robot
    @zakim-robot
    Oct 13 18:36
    [scottohara] i disable javascript on mobile safari. makes everything so much faster
  42. [scottohara] i know 3 other people that do this as well. so. There’s at least 4 of us :)
  43. zakim-robot
    @zakim-robot
    Oct 13 18:41
    [wesruv] lol, there's always the case of a bad internet connection where the page is usable but the client wasn't able to DL/execute the JS, or if there's an error in the JS and it doesn't work
  44. [wesruv] stuff happens, best to plan for what happens if there isn't JS
  45. zakim-robot
    @zakim-robot
    Oct 13 18:53
    [spell] Hi a11y peeps! A couple of questions for ya! In regards to font size and contrast, we require 4.5:1 for normal text (18pt) to meet AA, right? First Question: How does one calculate pts to pixels or ems and Second Question: Won't units, like vw, that scale, make the part about text size moot? Might the thing we need to do then is to simply assure that color contrast is always within acceptable range, regardless of text site? Thanks in advance for your answers!
  46. [spell] @wesru Good point! JS is a fragile layer! Anything can happen!
  47. [conley] @spell https://offroadcode.com/rem-calculator/
  48. [conley] rems are preferred because many users who rely on assistive technology will have their font sizes set at the OS level
  49. [conley] fonts that are measured in pts will only change at the browser level via ctrl +/-, not within the browser settings themselves
  50. [conley] Helpful for color contrast - http://webaim.org/resources/contrastchecker/
  51. zakim-robot
    @zakim-robot
    Oct 13 19:02
    [spell] @conley Thanks! I'm totally down with rems. Are we saying vw's are bad then? I hope not because they can be very useful. On my screen the font sites is within acceptable size range, but on somebody else (like somebody doing an a11y audit) they may appear smaller. What might I say in those situation? Which is why I'm wondering if just going with color, always, is a better idea.
  52. [spell] Regardless of size, given the glut of different viewport sizes out there.
  53. [conley] I wouldn’t say “bad” but aren’t universally supported yet - http://caniuse.com/#feat=viewport-units
  54. [conley] and IE is still a decent percentage AT users
  55. [conley] also, if someone’s viewport is smaller, that might affect your font size
  56. [conley] So, yeah, I would rely on vw/vh for layout purposes and stick with rem to ensure your font size is consistent
  57. [conley] np btw :)
  58. zakim-robot
    @zakim-robot
    Oct 13 19:11
    [spell] Support is real good, so no reason to not use (progressive enhancement ftw!) on type or anywhere a designer or developer may feel is needed for the design to scale more appropriately cross-viewport. I just had an idea, though. If font size is important, and it is, you could make the minimum font size 18pt, I guess. :) Anyway, thanks for feedback so far! I think this is important discussion to have and hope more folks chime in on it.
  59. zakim-robot
    @zakim-robot
    Oct 13 19:29
    [jpdevries] @jamesn safari and chrome to name a few haves UIs for disabling JS. It is actually under Security settings in OS X Safari
  60. luis garcia
    @garcialo
    Oct 13 20:16
    @spell If you use a tool like Google Accessibility Developer Tools to inspect an element with text for its Accessibility Properties it will do the size calculations when it evaluates it for contrast. It won't tell you directly if it's considered large or small, but if it fails you can figure out based on the recommendations whether it's large or small.
  61. zakim-robot
    @zakim-robot
    Oct 13 22:53
    [caesar] Does anyone know what would cause a website to prevent JAWS from entering into read/browse mode? I.e. on page load it goes automatically into virtual mode.
  62. zakim-robot
    @zakim-robot
    Oct 13 23:00
    [caesar] FWIW the site's built on AngularJS