[Athen] Form Labels

[Alex Umstead]

Here’s a solution you might want to try. It’s a bit hacky, and might not work with direct speech in Dragon, but works with NVDA in FF and Chrome, JAWS 2018 in IE, FF, and Chrome, and VoiceOver on iOS in Safari. It probably goes without saying, but will want to make sure that if you go this route, you label the field/dropdown in a way that doesn’t change the meaning of the control substantially. Basically, what I’ve done is I’ve made the visual labels just be generic elements (rather than being <label> tags connected to the fields using the “for” attribute, which would he the typical “base” technique for labeling), and hid them by setting aria-hidden=“true”. I then labeled each form element with the aria-label attribute. Don't set aria-hidden on the form fields— just put it on the text labels. Again, not an idea situation, but if you have to use this design, might be workable. I might also suggest cross-posting on the web-a11y Slack if you haven’t already. 

You can ignore the placeholder tab stops at the top and bottom of the page - I only use them when coding prototypes because sometimes NVDA doesn’t read the first focused element on the page. They don’t have anything to do with the solution here. 

https://codepen.io/mra11yx/pen/bZxoXZ

Alex

Sent from my iPhone

On Mar 19, 2019, at 7:04 PM, Khoa Pham <kpham at swccd.edu> wrote:

Hi everyone,
 
Regarding text inputs fields and select menus in the attached image. How would you make something like these accessible with proper labels? I’m use to these fields appearing after a label, but I’m unsure of how to ensure accessibility when they are provided in the middle of a question or sentence like in the attached image.
 
Thanks,
Khoa
<2019-03-19_15-38-12.jpg>
_______________________________________________
athen-list mailing list
athen-list at mailman12.u.washington.edu
http://mailman12.u.washington.edu/mailman/listinfo/athen-list
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20190319/856cb67d/attachment.html>