Archive index

A11y Slackers Gitter Channel Archive 28th of September 2016

What fresh hell is THIS now? - Patrick Lauke
  1. zakim-robot
    @zakim-robot
    Sep 28 00:34
    [conley] @caesar how the containers handle page-level zoom will dictate if horz scroll occurs. Generally it's best to use rems for font sizes. This ensures that OS-level zooms are honored. As long as the user can read the content you should be good
  2. [conley] Normally users of assistive technology will have font size set to large at the get-go
  3. [caesar] Yeah... client is preventing zoom using CSS setting, and arguing that page zoom (magnification) is sufficient to meet 1.4.4 - but that leads to horizontal scrolling as I mentioned.
  4. [conley] @caesar if they're just looking to achieve level 1, then yes. Best practice to never disable zoom.
  5. zakim-robot
    @zakim-robot
    Sep 28 00:41
    [conley] @chris__pearce semantically yes, but inline errors are not ideal. I would recommend a visibly hidden div with aria-live="polite" role= "alert" to announce validation errors to the screen reader
  6. [conley] Also, are your radio buttons contained in a fieldset?
  7. [chris__pearce] @conley yes they’re in a fieldset with a legend
  8. zakim-robot
    @zakim-robot
    Sep 28 00:49
    [conley] FYI you might want to set the alert role or display:none via JS, it has a tendency to be announced even if it's empty.
  9. [conley] Trial and error ;)
  10. [chris__pearce] @conley thanks for the advice, the error <div> won’t be in the DOM until it’s needed to be rendered.
  11. [conley] Is error validation on submit or onBlur?
  12. zakim-robot
    @zakim-robot
    Sep 28 00:55
    [chris__pearce] currently on submit
  13. [conley] Okay, then I'd recommend that announcement container we discussed have some kind of genenric message like "there are errors in your submission, please review" or something like that
  14. [conley] Form validation is always tricky
  15. [conley] Otherwise force focus to the first offending field, aria-describedby should announce the error
  16. zakim-robot
    @zakim-robot
    Sep 28 01:03
    [conley] should being the operative word here hah

  17. [chris__pearce] Unfortunately I won’t be able to do the generic message at the top (out of my control I’m afraid), all the errors will be inline underneath the offending input.

    Form validation is always tricky

    Yep :)

  18. zakim-robot
    @zakim-robot
    Sep 28 01:36
    [conley] I hear ya, do the best you can!
  19. Srinivas Y
    @sri429_twitter
    Sep 28 06:42
    Giving a tabindex=0 to a div is making voiceover and narrator read it as a group
  20. is this a bug or its expected as other screen readers dont do this.
  21. zakim-robot
    @zakim-robot
    Sep 28 08:11
    [dean] @bmeunier @jiatyan Loop11 had a fantastic GAAD offer where you could get some free tests, my tests weren’t all that extensive to be honest but I was happy with the feedback.
  22. zakim-robot
    @zakim-robot
    Sep 28 09:47
    [marcysutton] @sri429_twitter that is expected, there is no accessible role on it...what would you expect it to read?
  23. [marcysutton] A div is a group by nature, and it contains other nodes that would be read when focused with tabindex=0. If you're using it for focus management I'd recommend tabindex=-1 instead, and if reading the group is an issue than put it on a heading instead
  24. stevefaulkner
    @stevefaulkner
    Sep 28 10:24
    @sri429_twitter this thread may be helpful http://webaim.org/discussion/mail_thread?thread=7210 and also recent twitter discussion https://twitter.com/stevefaulkner/status/780350480283238400
  25. Srinivas Y
    @sri429_twitter
    Sep 28 10:40
    I always had the assumption that tabindex=-1 removes the element from keyboard navigation flow. dint know that you can still focus using javascript
  26. @stevefaulkner thanks for pointing in the right direction. my case is a right candidate for tabindex -1
  27. Job van Achterberg
    @jkva
    Sep 28 10:40
    Afternoon folks
  28. stevefaulkner
    @stevefaulkner
    Sep 28 10:43
    @sri429_twitter :+1:
  29. hiya jk
  30. Job van Achterberg
    @jkva
    Sep 28 10:44
    o/
  31. stevefaulkner
    @stevefaulkner
    Sep 28 10:58
    thinking it may be useful to codify advice on not disabling zoom as a normative 'SHOULD NOT' in HTML, any thoughts? w3c/html#602
  32. Job van Achterberg
    @jkva
    Sep 28 12:11
    @stevefaulkner: That was a good discussion github, and Patrick raised a good point
  33. I would agree with both of you that overriding zooming has a place, but the default recommendation should be to not disable it unless you have a good reason and an accessible way to redefine it
  34. stevefaulkner
    @stevefaulkner
    Sep 28 12:14
    :+1:
  35. zakim-robot
    @zakim-robot
    Sep 28 12:54
    [beth] I have a coding question (because I don’t code… yet!) Our FED people want to code a very complicated page with 3 layers of nested tables. Prices for products are a list of tabs. Inside each tab panel is a list of tabs that show either the product details (open by default) or another set of product specs. Within the product specs tab panel is the potential for ANOTHER tab list showing variations of product specs. I’m concerned about the cognitive load for both sited and non-sited users. I know that theoretically it can be done, but should it? Would this make so complex that it’s unusable? Any suggestions for how to remediate this?
  36. Job van Achterberg
    @jkva
    Sep 28 13:06
    @beth: Hard to gauge without analysing the actual page, but it sounds pretty complex. User testing would be a good call here, if you can.
  37. It also sounds like a lot of information overall - how is it supposed to behave on smaller viewports?
  38. zakim-robot
    @zakim-robot
    Sep 28 13:48
    [beth] @jkva Smaller viewports will have different UI. What is a “tab” on the larger screens will open a new page with the detailed info on smaller screens. I would post a screenshot, but I’m under NDA and I’m afraid I’d be disclosing too much.
  39. [beth] @jkva We will be doing user testing with people with disabilities, so hopefully they will catch any issues. I just hate for it to get that far along before I flag it. If I at least mention now, then I feel like I’ve set the stage for them to expect possible problems in testing. ;)
  40. Job van Achterberg
    @jkva
    Sep 28 13:51
    Yeah, agreed. Ideally the testing is part of it from the beginning. Try to sketch how it would work? And what you'd have to remember? Make yourself tasks and try to accomplish them? I'm not really sure what to tell you @beth, sorry.
  41. zakim-robot
    @zakim-robot
    Sep 28 14:10
    [conley] @beth that does sound rather complex. What does your UX team say?
  42. [conley] I would think that product detail should be it’s own page
  43. [conley] Especially from an SEO perspective
  44. zakim-robot
    @zakim-robot
    Sep 28 14:54
    [beth] @conley I’m a UXD, but also the a11y SME. On this project we’re working with a UX team from an agency who isn’t super aware of a11y. They don’t know how much they don’t know. I’ve been trying to school them, but it’s difficult to get it across in 30-60 minute meetings… and they’re on 2 week sprints so they only feel like I’m “slowing them down”. However, you’ve given me a great idea to include SEO. Having them weigh in might give me the leverage to get this thing redesigned. Thanks so much for the help!
  45. [conley] @beth my pleasure and I hear you, I’m a Tech director at my company and have been working UX and visual to educate them on a11y
  46. zakim-robot
    @zakim-robot
    Sep 28 15:00
    [dean] As a UXer I’d ask what the goal is of the table, what is the information that they are trying to get across. I’d then look at improving the way that the data is presented. You can look at technical solutions, but it sounds more like a data visualisation issue rather than a technical accessibility one.
  47. zakim-robot
    @zakim-robot
    Sep 28 15:52
    [brianarn] Hey all, a question for the group, one that isn’t so much tech as it is doing right by people and also being safe and respectful and legal and such
  48. [brianarn] (trying to phrase well, probably should have done that before the first part)
  49. [brianarn] We’ve done a lot of focus groups and whatnot, but my company is wanting to make a larger commitment to proper accessibility, and is looking to build up a group of people to provide feedback on product and direction and UX and all of that, but specifically looking for people to help us with their thoughts on being accessible
  50. [brianarn] like an a11y ux focus group with people who deal with a11y concerns every day, either due to use of screen readers or high contrast or dealing with color contrast issues etc
  51. [conley] Habe you taken a look at http://www.access-works.knowbility.org/index.php
  52. [brianarn] we’re working on a form where we’re asking people if they’d be interested in providing feedback, and we’re wanting to ask people if they’re interested in these areas, but also want to respect privacy and whatnot
  53. [brianarn] We haven’t, but I quite like the look of this
  54. zakim-robot
    @zakim-robot
    Sep 28 15:58
    [brianarn] we’re also wanting to ask about a11y in a user research survey, curious if anyone has done that in the past, has concerns over that, etc
  55. [brianarn] like, I don’t want to seem like we’re trying to single out people or offer different experiences based on assistive techs or anything, more just like, getting different perspectives and feedback on experiences from a wide range of our users and making sure we pay attention to all forms of access
  56. zakim-robot
    @zakim-robot
    Sep 28 16:09
    [beth] @brianarn I’ve heard that Knowbility works really well with Loop 11 (a remote user testing tool). Loop 11 can partner with Knowbility to get you the pool of people you need.
  57. [brianarn] I’m sharing that along and I think it’ll be pretty great, though I’m not sure I phrased my question well :)
  58. [brianarn] We’re starting an initiative to reach out to our users and get them involved in our future direction, and are wanting to work with our users who have a11y concerns in particular, and are looking for a way for them to self-identify that doesn’t feel gross or bad, if that makes sense
  59. zakim-robot
    @zakim-robot
    Sep 28 16:20
    [beth] Opinion Lab feedback link? Then filter results to look for specific key words. Or maybe you could ask the participants of the survey if they have any "special needs”, or if they use any assistive technology.
  60. [beth] @dean it’s a flight block. We aren’t using tables, but yeah... lots of information to display.
  61. zakim-robot
    @zakim-robot
    Sep 28 17:13
    [jiatyan] @dean thanks for your recommendation on Loop11. I'll definitely use them when I need a UX test. I've come across of other local networks which specialise in testing conducted by people using, but Loop11 is so far the only one which is usability focussed, with the added advantage of recruiting a good mix of user with different abilities.
  62. Mallory
    @StommePoes
    Sep 28 18:08
    @car re focus state: in my case, there was a background image of the fake control for every state: checked, unchecked, focussed-checked, focussed-unchecked, checked-disabled, unchecked-disabled. Big sprites.
  63. zakim-robot
    @zakim-robot
    Sep 28 18:21
    [car] Ah, ok. So you didn't need the outline to show up around the whole fake control. Makes sense.
    I was struggling with getting the parent to have a nice outline on focus, but css selectors don't go up (I'm still a css noob - takes me hours to do anything tricky <g>). In the end, I had to give the parent tabindex="0", give the transparent checkbox tabindex="-1", and add a bit of js to handle the space key. Got my nice focus outline, but I wondered why I didn't just implement the whole thing in js with a div and a couple of spans. ;) I was trying to "go native". :)
  64. [car] @stommepoes^
  65. zakim-robot
    @zakim-robot
    Sep 28 18:27
    [herman] Does anyone have a link to the high contrast mode requirements in the accessibility standards that IBM follows?
  66. [jiatyan] http://www.ibm.com/design/language/framework/visual/color/ <-- this?
  67. zakim-robot
    @zakim-robot
    Sep 28 18:44
    [herman] Pasted image at 2016-09-28, 2:44 PM
  68. Mallory
    @StommePoes
    Sep 28 21:06
    @car if I had needed an outline around the whole control + label it would have gone on the label
  69. since in the case only of radios and checks, I could guarantee that the label came after the control
  70. so I could, in those cases only, do control:focus+label
  71. I did this for :checked and :disabled as well
  72. for this reason, I needed to allow a fallback for IE8 and under, who didn't support those.
  73. But so the opacity thing for custom controls meant I needed to be responsible for ALL the things the normal control did, and because I was replacing the control with an image who was held by the label, I used all those images for all the states.
  74. If I have to do it again (probably soon), I'll try SVG instead of background images, so they don't vanish with High Contrast or no-images.
  75. and so they scale when zoomed.
  76. The designers have already created animated submit buttons, which I'm not against in the form they've created them, but it means probably some weird SVG animation stuff in my future.
  77. James Nurthen
    @jnurthen
    Sep 28 22:14
    @StommePoes can you use ::before {content: } for your images rather than background images to preserve them in HC mode on Win?
  78. zakim-robot
    @zakim-robot
    Sep 28 23:01

    [jpdevries] This is an Accessibility Preference page that uses localStorage to allow users to “order a website their way” and choose preferences for font size, typeface, and contrast. In supported browsers (Edge, Firefox and I think as of today Chrome) there is an auto contrast mode that will switch a high contrast mode on if you are in a dimly lit environment https://vimeo.com/184758648

    I think this is a fun example of using JavaScript to enhance accessibility.

  79. zakim-robot
    @zakim-robot
    Sep 28 23:35
    [alice] /summon @bkardell for above