Wanted: accessibility

In a future update, I’d really like to see VFB take some additional steps for accessibility.

WCAG (Web Content Accessibility Guidelines) guidelines suggest using ARIA labels to label the form input fields so that screen readers can more easily identify them. The approaches are discussed in detail at this link: https://www.w3.org/WAI/tutorials/forms/labels/ and also: https://webaim.org/techniques/forms/controls

Right now, VFP form elements look like this:
<li class="vfb-item vfb-item-email " id="item-vfb-10"><label for="vfb-10" class="vfb-desc">Your email address <span class="vfb-required-asterisk">*</span></label><input type="email" name="vfb-10" id="vfb-10" value="" class="vfb-text vfb-medium required email " /></li>

This works fine for sighted users because they can easily see the input box, but it may be tougher for screen readers because the label values are arbitrary alphanumerics and the “required” asterisk might not be read at all. This is where ARIA labels can help. For example, screen readers might have an easier time if the input were labeled like this:

<li class="vfb-item vfb-item-email " id="item-vfb-10"><label for="vfb-10" class="vfb-desc">Your email address <span class="vfb-required-asterisk">*</span></label><input type="email" name="vfb-10" id="vfb-10" value="" class="vfb-text vfb-medium required email " aria-labelledby="item-vfb-10" aria-required="true" /></li>

This tells a screen reader that the input box and the label go together, which otherwise might not be apparent, and that the input is required. (There might be better approaches; the WebAIM pages at the above link talk about the mechanics of each in detail.)

For similar reasons, it would also be helpful to use aria-invalid=”true” for validation results, something discussed in more detail here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute

I’m not qualified to rewrite the plugin to do this, but I know other VFB users are concerned about it as well, as accessibility is a potential liability area for businesses as well as a courtesy for visitors.

Could we get this in future updates?

Thanks!

• This topic was modified 4 years, 7 months ago by Ate Up With Motor. Reason: added tags