November Happy Hour will be moved to Thursday December 5th.

XFORMS Accessibility Report failure

Vote:
 

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
Vote:
 

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
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.