WCAG Compliance
To make to your questionnaire compliant with the WCAG norm (Web Content Accessibility Guidelines) and help the visually impaired fill in the survey, you'll need the following set as prerequisites:
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 layout in Internet settings, Page section
For the HTLM Page generation, add these settings:
2. Default ADP/ADC
We recommend that you to set one 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 that you set one 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 additional information close to the aria-label , you can specify a "|" after the response in Design mode as follows:
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).
For example, you can set the typography in the ADP theme:
- Navigation buttons
The contrast is a key main In ADP properties, set Dark colour on the navigation button as follows:
5. Test your compliancy
To see if your questionnaire is WCAG compliant, you can use the plugin WAVE