volume_up

A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More

volume_up

A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More

XFORMS Accessibility Report failure

Hi,

Our site which uses XForms has failed an accessibility report as it says controls such as a Radio button isnt Labelled appropriately and that Mandatory fields are not flagged as mandatory. Is there something that we can set up to:

  • Mark each Mandatory fields highly visible for screen readers?
  • Add appropriate labels to check boxes and radio boxes?

Many thanks

 

Jonathan

#74035
Aug 19, 2013 11:43

Hi Jonathan,

Xforms elements do get rendered out with labels (whether these labels are output correctly from an accessiblity perspective is another matter). If you look at this example: 

http://alloy.uk.episerver.com/About-us/Become-a-reseller/

The Radio buttons have Label elements, and there's also mark-up relating to validation messages.  

In terms of making Mandatory fields highly visible, I'm not sure what would be acceptable from a Screen-reader perspective, but I'm guessing you could:

  1. Hook into the BeforeLoadingForm event and modify the mark-up, as per this example: http://www.frederikvig.com/2010/11/semantic-markup-with-episerver-xforms/
  2. Apply css to all fields with validation (the validation message is output in a span tag with class "xformvalidator"
  3. Supply a custom css class when adding the form field within the xform builder. 

Hope this helps

Mark

 

#74175
Aug 21, 2013 20:00
error This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.