WCAG20 compatibility

[Noino]

Are you requesting a feature, reporting a bug or ask a question?

Bug/Feature

What is the current behavior?

The html generated does not conform to WCAG20 (https://www.w3.org/TR/WCAG20/) standards, and it therefor unusable by people with certain disabilities

What is the expected behavior?

That the html generated would confirm to WCAG20 and be usable by everyone.

How would you reproduce the current behavior (if this is a bug)?

Make a form, any kind of form, copy the resulting html to a validator
here: https://achecker.ca/checker/index.php
or using an extension: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

var surveyJSON = {pages:[{name:"page1",elements:[{type:"paneldynamic",name:"question12",templateElements:[{type:"file",name:"question7"},{type:"matrix",name:"question8",columns:["Column 1","Column 2","Column 3"],rows:["Row 1","Row 2"]}],panelCount:1},{type:"matrixdropdown",name:"question9",columns:[{name:"Column 1"},{name:"Column 2"},{name:"Column 3"}],choices:[1,2,3,4,5],rows:["Row 1","Row 2"]},{type:"matrixdynamic",name:"question10",columns:[{name:"Column 1"},{name:"Column 2"},{name:"Column 3"}],choices:[1,2,3,4,5]},{type:"panel",name:"panel1",elements:[{type:"multipletext",name:"question11",items:[{name:"text1"},{name:"text2"}]}]},{type:"text",name:"question1"},{type:"checkbox",name:"question2",choices:["item1","item2","item3"]},{type:"radiogroup",name:"question3",choices:["item1","item2","item3"]},{type:"dropdown",name:"question4",choices:["item1","item2","item3"]},{type:"comment",name:"question5"},{type:"rating",name:"question6"}]}]}

function sendDataToServer(survey) {
  var resultAsString = JSON.stringify(survey.data);
  alert(resultAsString); //send Ajax request to your web server.
}

var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").Survey({
    model: survey,
    onComplete: sendDataToServer
});

Specify your

• browser:
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue): jquery
• surveyjs version: 0.12.23

[andrewtelnov]

@Noino We will work on this. I think it is important to support WCAG20. We will discuss this issue and I will comeback.

Thank you,
Andrew

[Noino]

@andrewtelnov Woah, quick answer too.
Sounds good. The problems that my example form has according to the validator i linked is mostly just the way labels are used, WCAG20 requires labels to use the 'for' attribute to refer to their linked input, so don't think the fix would be all too much of a rewrite.

[tsv2013]

@Noino I've fixed a set of compatibility issues. Could you check it in the nearest release?

[Noino]

@tsv2013 Sorry for the delayed response.
I updated to 0.12.32 and ran the same form through the validators i linked. It seems there are still some problems.

The chrome addon reports this code block (and the similar ones for that question)

<label class="" style="margin: 0px; position: absolute;">
<input id="sq_113i" type="radio" class="" name="question8_Row 1" value="Column 1" aria-label="question8">
<span class="circle">
<span class="check">
</label>

Generated from this json

{type:"matrix",name:"question8",columns:["Column 1","Column 2","Column 3"],rows:["Row 1","Row 2"]}

as flagged with error:

Empty form label
What It Means
A form label is present, but does not contain any content.
Why It Matters
A element that is associated to a form control but does not contain text will not present any information about the form control to the user.
How to Fix It
Ensure that the form label contains text that describes the function of the associated form control. Labels are not required for image, submit, reset, button, or hidden form controls. If a label is not necessary visually, a descriptive title attribute may be added to the form control.
Standards and Guidelines
Section 508 (n)
1.1.1 Non-text Content (Level A)
1.3.1 Info and Relationships (Level A)
2.4.6 Headings and Labels (Level AA)
3.3.2 Labels or Instructions (Level A)

And also alert (this same alert appears where radio buttons are used):

Missing fieldset
What It Means
A group of check boxes or radio buttons is not enclosed in a fieldset.
Why It Matters
A fieldset provides a visual and structural grouping of related form elements. It is typically necessary for groups of check boxes or radio buttons where a higher level description (called a legend) is necessary to understand the function of the check boxes or radio buttons. The description will be identified by a screen reader only if provided in a fieldset legend.
Standards and Guidelines
Section 508 (n)
1.1.1 Non-text Content (Level A)
1.3.1 Info and Relationships (Level A)
2.4.6 Headings and Labels (Level AA)
3.3.2 Labels or Instructions (Level A)

There are some others listed too but these are the only errors it reports.

I've also attached the pdf report from achecker.ca which lists 60 known problems with this sample form.

achecker_2017-10-10_10-22-45.pdf

Source code for this report:

<!DOCTYPE html>
<html lang="en"><head>
<title>mulukku formi</title>
<link href="css/survey.css" type="text/css" rel="stylesheet">
<script src="js/jquery3.js"></script>
<script src="js/survey.js"></script><style id="surveyjs"></style>
<script>
$(function(){
var surveyJSON = {pages:[{elements:[{type:"paneldynamic",name:"question12",panelCount:1,templateElements:[{type:"file",name:"question7"},{type:"matrix",columns:["Column 1","Column 2","Column 3"],name:"question8",rows:["Row 1","Row 2"]}]},{type:"matrixdropdown",choices:[1,2,3,4,5],columns:[{name:"Column 1"},{name:"Column 2"},{name:"Column 3"}],name:"question9",rows:["Row 1","Row 2"]},{type:"matrixdynamic",choices:[1,2,3,4,5],columns:[{name:"Column 1"},{name:"Column 2"},{name:"Column 3"}],name:"question10"},{type:"panel",elements:[{type:"multipletext",items:[{name:"text1"},{name:"text2"}],name:"question11"}],name:"panel1"},{type:"text",name:"question1"},{type:"checkbox",choices:["item1","item2","item3"],name:"question2"},{type:"radiogroup",choices:["item1","item2","item3"],name:"question3"},{type:"dropdown",choices:["item1","item2","item3"],name:"question4"},{type:"comment",name:"question5"},{type:"rating",name:"question6"}],name:"page1"}]}
var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").Survey({
model: survey,
onComplete: sendDataToServer
});
function sendDataToServer(survey) {
var resultAsString = JSON.stringify(survey.data);
alert(resultAsString); //send Ajax request to your web server.
}
});
</script>
</head>
<body>
<div id="surveyContainer"><div class="sv_main"><div id="sq_page" class="sv_body"><div><div class="sv_row"><div id="sq_100" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">1. question12</span></h5><div><div><div class="" style="vertical-align: top; display: inline-block; width: 100%;"><div style="padding-left: 0px;"><div class="sv_row"><div id="sq_112" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">question7</span></h5><div><input id="sq_112i" type="file" aria-label="question7"></div></div></div><div class="sv_row"><div id="sq_113" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">question8</span></h5><table class="sv_q_matrix"><thead><tr><td></td><th><span style="">Column 1</span></th><th><span style="">Column 2</span></th><th><span style="">Column 3</span></th></tr></thead><tbody><tr><td><span style="">Row 1</span></td><td><label class="" style="margin: 0px; position: absolute;"><input id="sq_113i" type="radio" class="" name="question8_Row 1" value="Column 1" aria-label="question8"><span class="circle"></span><span class="check"></span></label></td><td><label class="" style="margin: 0px; position: absolute;"><input type="radio" class="" name="question8_Row 1" value="Column 2" aria-label="question8"><span class="circle"></span><span class="check"></span></label></td><td><label class="" style="margin: 0px; position: absolute;"><input type="radio" class="" name="question8_Row 1" value="Column 3" aria-label="question8"><span class="circle"></span><span class="check"></span></label></td></tr><tr><td><span style="">Row 2</span></td><td><label class="" style="margin: 0px; position: absolute;"><input type="radio" class="" name="question8_Row 2" value="Column 1" aria-label="question8"><span class="circle"></span><span class="check"></span></label></td><td><label class="" style="margin: 0px; position: absolute;"><input type="radio" class="" name="question8_Row 2" value="Column 2" aria-label="question8"><span class="circle"></span><span class="check"></span></label></td><td><label class="" style="margin: 0px; position: absolute;"><input type="radio" class="" name="question8_Row 2" value="Column 3" aria-label="question8"><span class="circle"></span><span class="check"></span></label></td></tr></tbody></table></div></div></div></div><input class="" type="button" value="Remove" style="margin-top: 5px;"></div><input class="" type="button" value="Add new" style="margin-top: 5px;"></div></div></div><div class="sv_row"><div id="sq_103" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">2. question9</span></h5><div><table class="sv_q_matrix"><thead><tr><td></td><th><span style="">Column 1</span></th><th><span style="">Column 2</span></th><th><span style="">Column 3</span></th></tr></thead><tbody><tr><td><span style="">Row 1</span></td><td class=""><div class=""><select id="sq_126i" class="" aria-label="Column 1"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_127i" class="" aria-label="Column 2"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_128i" class="" aria-label="Column 3"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td></tr><tr><td><span style="">Row 2</span></td><td class=""><div class=""><select id="sq_129i" class="" aria-label="Column 1"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_130i" class="" aria-label="Column 2"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_131i" class="" aria-label="Column 3"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td></tr></tbody></table></div></div></div><div class="sv_row"><div id="sq_104" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">3. question10</span></h5><div><div><table class="table"><thead><tr><th><span style="">Column 1</span></th><th><span style="">Column 2</span></th><th><span style="">Column 3</span></th><td></td></tr></thead><tbody><tr><td class=""><div class=""><select id="sq_132i" class="" aria-label="Column 1"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_133i" class="" aria-label="Column 2"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_134i" class="" aria-label="Column 3"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td><input class="" type="button" value="Remove"></td></tr><tr><td class=""><div class=""><select id="sq_135i" class="" aria-label="Column 1"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_136i" class="" aria-label="Column 2"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td class=""><div class=""><select id="sq_137i" class="" aria-label="Column 3"><option value="">Choose...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></td><td><input class="" type="button" value="Remove"></td></tr></tbody></table></div><input class="" type="button" value="Add row"></div></div></div><div class="sv_row"><div class="" style="vertical-align: top; display: inline-block; width: 100%;"><div style="padding-left: 0px;"><div class="sv_row"><div id="sq_105" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">4. question11</span></h5><table class=""><tbody><tr class=""><td><span class=""><span style="">text1</span></span></td><td><input id="sq_105i" class="" type="text" placeholder="" aria-label="text1" style="float: left;"></td></tr><tr class=""><td><span class=""><span style="">text2</span></span></td><td><input class="" type="text" placeholder="" aria-label="text2" style="float: left;"></td></tr></tbody></table></div></div></div></div></div><div class="sv_row"><div id="sq_106" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">5. question1</span></h5><input id="sq_106i" class="" type="text" size="25" placeholder="" aria-label="5. question1"></div></div><div class="sv_row"><div id="sq_107" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">6. question2</span></h5><div class="sv_qcbc"><div class="sv_q_checkbox" style="margin-right: 0px; display: inline-block; width: 100%;"><label class=""><input type="checkbox" value="item1" id="sq_107i" aria-label="6. question2" style="margin-right: 3px;"><span class="checkbox-material" style="margin-right: 5px;"><span class="check"></span></span><span><span style="">item1</span></span></label></div><div class="sv_q_checkbox" style="margin-right: 0px; display: inline-block; width: 100%;"><label class=""><input type="checkbox" value="item2" aria-label="6. question2" style="margin-right: 3px;"><span class="checkbox-material" style="margin-right: 5px;"><span class="check"></span></span><span><span style="">item2</span></span></label></div><div class="sv_q_checkbox" style="margin-right: 0px; display: inline-block; width: 100%;"><label class=""><input type="checkbox" value="item3" aria-label="6. question2" style="margin-right: 3px;"><span class="checkbox-material" style="margin-right: 5px;"><span class="check"></span></span><span><span style="">item3</span></span></label></div></div></div></div><div class="sv_row"><div id="sq_108" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">7. question3</span></h5><div class="sv_qcbc"><div class="sv_q_radiogroup" style="margin-right: 0px; margin-left: 0px; display: inline-block; width: 100%;"><label class=""><input id="sq_108i" type="radio" name="question3_sq_108" value="item1" aria-label="7. question3"><span class="circle"></span><span class="check"></span><span style="margin-left: 3px; display: inline; position: static;">item1</span></label></div><div class="sv_q_radiogroup" style="margin-right: 0px; margin-left: 0px; display: inline-block; width: 100%;"><label class=""><input type="radio" name="question3_sq_108" value="item2" aria-label="7. question3"><span class="circle"></span><span class="check"></span><span style="margin-left: 3px; display: inline; position: static;">item2</span></label></div><div class="sv_q_radiogroup" style="margin-right: 0px; margin-left: 0px; display: inline-block; width: 100%;"><label class=""><input type="radio" name="question3_sq_108" value="item3" aria-label="7. question3"><span class="circle"></span><span class="check"></span><span style="margin-left: 3px; display: inline; position: static;">item3</span></label></div></div></div></div><div class="sv_row"><div id="sq_109" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">8. question4</span></h5><div class=""><select id="sq_109i" class="" aria-label="8. question4"><option value="">Choose...</option><option value="item1">item1</option><option value="item2">item2</option><option value="item3">item3</option></select></div></div></div><div class="sv_row"><div id="sq_110" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">9. question5</span></h5><textarea id="sq_110i" class="" type="text" placeholder="" cols="50" rows="4" aria-label="9. question5"></textarea></div></div><div class="sv_row"><div id="sq_111" class="sv_q" style="display: inline-block; vertical-align: top; width: 100%;"><h5 class="sv_q_title"><span style="">10. question6</span></h5><div class="sv_q_rating"><label class="sv_q_rating_item"><input type="radio" name="question6" value="1" aria-label="10. question6" style="display: none;"><span style="">1</span></label><label class="sv_q_rating_item"><input type="radio" name="question6" value="2" aria-label="10. question6" style="display: none;"><span style="">2</span></label><label class="sv_q_rating_item"><input type="radio" name="question6" value="3" aria-label="10. question6" style="display: none;"><span style="">3</span></label><label class="sv_q_rating_item"><input type="radio" name="question6" value="4" aria-label="10. question6" style="display: none;"><span style="">4</span></label><label class="sv_q_rating_item"><input type="radio" name="question6" value="5" aria-label="10. question6" style="display: none;"><span style="">5</span></label></div></div></div></div></div><div class="sv_nav"><input class=" sv_complete_btn" type="button" value="Complete" style="margin-right: 5px;"></div></div></div>
</body></html>

[tsv2013]

@Noino This markup

<label class="" style="margin: 0px; position: absolute;">
<input id="sq_113i" type="radio" class="" name="question8_Row 1" value="Column 1" aria-label="question8">
<span class="circle">
<span class="check">
</label>

is used to support bootstrap material design skin, because it requires specific DOM structure. We need to discuss the fix with the team.

[tsv2013]

@Noino @andrewtelnov I've added dummy span as a temporary measure to suppress the error. As for fieldset tag - if this warning is not crucial, I wouldn't like to add extra markup on the page.

[Noino]

I believe that it is necessary to fieldset radio buttons, and even checkboxes that are part of a multiple choice question.

Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description.
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H71

[okkuweb]

What is the status of this issue? It seems like there has been some progress, but the changes are still underway?

[tsv2013]

@okkuweb I've fixed all errors shown by WCAG20 validators. There are still some warnings. Some of them require markup changes and adding additional markup. The markup changes can became "breaking changes". I'd like to evaluate warnings cruciality to fix most crucial ones to minimize markup changes.

[Noino]

@tsv2013 Thanks for your hard work.

Seems you've got pretty much all of them down. Really only fieldsets remaining as far as i can see, and i'm not sure how you are supposed to accomplish that within matrix tables, but in my form "6. question2" and "7. question3" you have a <form> tag where <fieldset> would seem natural.

One thing i noticed trying that same form through achecker.ca again (even though it seems to not understand html5 very well) was that I'm getting a duplicate id "sp_100" which i don't think is valid html.
root level div
<div id="sp_100" class="sv_body">
and "4. question11" first text box
<input id="sp_100" class="sv_q_mt_item_value" type="text" placeholder="" aria-label="text1">

[tsv2013]

@Noino Thank you for the valueable feedback! I'll fix remaining issues and update this thread. Hope it will be soon.

[tsv2013]

@Noino I've added fieldset tags with necessary 'legend' tags inside.
I had to implement not so beautiful solution for matrixes as I wanted to. I wrapped with fieldset tag the whole matrix question due to the 'tr' and 'td' tags wrapping crashes table structure.
Changes wil be available in the nearest update.

Thank you for cooperation

[Noino]

The lastest change (8578f4f) seems to be missing in jquery and angular?

[tsv2013]

@Noino jquery and angular libraries are based on the the react code. They're just wrappers.

[Noino]

@tsv2013 Alright. Thought it might have been the case since i was seeing some complaints about fieldsets missing still, but turns out it was a cache issue, hard reload fixed almost all.
Still, one type that i clearly missed in my previous response, "10. question6" i get error for due to missing fieldset. This is the rating type question.

Sorry for resurrecting a closed ticket, should've noticed this before