Midwest Dev Chat


  • The newest 15 messages in the super-cool #a11y channel.

  • 02/05 09:54:26 Gemma: Also note (I just read this): a screen reader has to focus an element in order to read it and let the user know of its existence. So if there’s a possibility that the user might be confused by a missing element, `readonly` may be a better option than `disabled`.
  • 02/05 10:04:48 Giuseppe: @Gemma that is partially correct and often leads developers down the path of incorrectly adding `tabindex="0"` to literally everything so that screen reader users can focus content. Screen readers offer different modes of operation. It is possible for screen reader users to switch to browse mode and read the disabled button. Might not be obvious, but most screen reader users expect that.
  • 02/05 10:07:06 Giuseppe: The company that I work for offers some great free resources on how to use screen readers. If you haven't already, I think it is well worth the time to get used to testing with screen reader software. https://dequeuniversity.com/resources/
  • 02/05 10:20:07 Giuseppe: Also, those courses in DequeU are top notch (and I'm not saying that just because I work there).
  • 02/13 13:46:53 Giuseppe: Following up on my lecture question: I have a draft ready if y'all want to take a gander. I still plan to make a few minor changes, but feedback is welcome. There are a bunch of extra slides at the end that I'll only use if time allows or they are needed to answer questions that come up. https://docs.google.com/presentation/d/1K9bM34_...
  • 02/15 15:35:15 Noel: How are people doing custom select elements in React these days? A coworker is trying to either build one or use a pre-existing component plugin and it's hard to find one that's accessible.
  • 02/15 15:35:51 Noel: This is using react-select, and keyboard nav works but since each option label is set as html, it reads "option [Object object] selected" in Voiceover and doesn't let you pass in an aria-label for each option.
  • 02/15 16:23:26 Noel: http://mikedesjardins.net/react-a11y-select/ This looks promising. Working for me in Voiceover.
  • 02/18 07:59:54 Giuseppe: So close! A few problems that I noticed at a glance. 1) the select doesn’t have a visual label (WCAG 3.3.2) but you should be able to fix this during implementation. 2) the bigger issue is that keyboard focus appears to be trapped to the button after it receives focus (can’t tab back to the link before it). Not so sure that you can fix that during implementation.
  • 02/18 08:01:21 Giuseppe: I unfortunately don’t have any specific recommendations for react. You might have to roll your own if a good community component doesn’t exist. Take a look at https://www.w3.org/TR/wai-aria-practices-1.1/#L... for how a listbox should be built, notice the example for “Collapsible Dropdown Listbox Example”
  • 02/18 08:02:38 Giuseppe: I will say that native selects are always more accessible, and in most cases all you need. You can’t inject images in options like these examples tho (but you might be able to with CSS)
  • 02/18 08:04:12 Giuseppe: Angular material has had so many problems with trying to create their own select component that they were eventually like “Here is our inaccessible version, so use native selects if you want them to be accessible” https://material.angular.io/components/select/e... - that’s pretty darn frustrating as a developer.
  • 02/18 08:06:23 Giuseppe: Side note: these aria practices examples are the ideal implementation, however that doesn’t mean that screen readers have robust support for them. I’m actually working with the group that made these examples to publish detailed reports on screen screen reader compatibility with the examples.
  • 02/18 08:08:22 Giuseppe: You might also be able to gleen some ideas from this (yes, I know it is a different framework) https://github.com/angular/material2/issues/11083
  • 02/18 09:47:30 Noel: Thanks, Michael! I'm having a hard time advocating for a native select in this use case - our design team thinks the image on each option label is necessary for context. It definitely seems like it would be much easier to implement, though.
  • *Usernames have been changed to protect the innocent.
We're currently 1136 members strong. Join us!
Request Invite

Check out all the cool channels!

Join the conversation!