WCAG Compliance
To make to your questionnaire compliant with the WCAG norm (Web Content Accessibility Guidelines) and help the deficient visual persons to fill the survey , you'll need as prerequirements:
ADP | ADC |
Matter (V3.3.1 min) |
Statements (v 4.3.5 min) TemplateAll (v4.2.0 min) ResponsiveTable (V4.1.8 min) |
The latest versions are available in https://github.com/AskiaADX/default-adxs.git
1. Template settings
- Questions title generation in Screen generation section
By default , if you you're using a native long caption (without any style), ADP will put :
<h1 style="font-size:1.2rem">Caption</h1>
<h2 style="font-size:1rem" >Sub Caption</h2>
<h3 style="font-size:0.8rem" >Sub Sub Caption</h3>
- Page lay-out in Internet settings , Page section
For the HTLM Page generation , add these settings:
2. Default ADP/ADC
We recommend you to set 1 question per screen and use following objects:
- ADP
Use ADP Matter
- Closed questions
Use Statements ADC
- Open Questions
Use TemplateAll ADC
- Loop questions
We recommend to set 1 item per page. So you can use
- Statements ADC (with Automatic Submit enabled)
- Responsive table
3. Aria-Label
The aria-label attribute is used to define a non-visible legend associated with an HTML element conveyed only by the visual.
If you want to set some additionnal information close to the aria-label , you can specify a "|" after the response in Design mode as follow :
4. Contrast
If you want to know more about Contrast Recommendations , see https://www.w3.org/TR/WCAG21/#contrast-minimum
- Caption- 18px min
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Graphics
WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
As examle, you can set the typography in the ADP theme:
- Navigation buttons
The contrast is a key main In ADP properties , set Dark color on navigation button as follow:
5. Test your compliancy
To see if your questionnaire is WCAG compliant, you can use the plugin WAVE