Hello Folks,
I am trying to use WAVE to validate my survey for a client. I need it to pass up to WCAG 2.0 AA.
WAVE flags a 'fieldset alert' every time I run the validation process. Specifically on arrays and yes/no questions.
Looking at the code: Shouldn't the
id="answer331454X3X39A1 in the radio answer area match the
aria-labelledby="ls-question-text-331454X3X39" prefectly?
I am looking at
www.w3.org/TR/WCAG20-TECHS/aria#ARIA17
unless I am missing something then
id="answer331454X3X39 should equal =
aria-labelledby="answer331454X3X39"
Am I missing something or is WAVE wrong?
No one is complain that LS 3.0 is not a11y - I hope I am just missing something.
Code snippet is below.
Code:
<!-- Question Q00006-->
<!-- Question text-->
<div class=" question-title-container col-xs-12 ">
<!-- Add a visual information + just Mandatory string for aria : can be improved-->
<div class=" asterisk pull-left">
1
<small class=" text-danger fa fa-asterisk small" aria-hidden="true"></small>
<span class=" sr-only text-danger">
(This question is mandatory)
</span>
</div>
<div class=" question-text ">
<div id="ls-question-text-331454X3X39" class=" ls-label-question ">
How well do you know the history of this site?
</div>
</div>
</div>
<!-- LimeSurvey valid message and help-->
<div class=" question-valid-container text-info col-xs-12">
1
<div class="ls-question-help " role="alert" id="vmsg_39">
<div id="vmsg_39_default" class="ls-question-message ls-em-tip em_default ls-em-success">
1
<span class="fa fa-exclamation-circle" aria-hidden="true"></span>
Choose one of the following answers
</div>
</div>
</div>
<!-- Answer-->
<div class=" answer-container col-xs-12">
<!-- List Radio-->
<!-- answer-->
1
<div class="ls-answers answers-list radio-list row" role="radiogroup" aria-labelledby="ls-question-text-331454X3X39">
<!-- on small screen, each column is full widht, so it look like a single colunm-->
1
<ul class="list-unstyled col-sm-12 col-xs-12">
<!-- answer_row-->
<li id="javatbd331454X3X39A1" class="form-group answer-item radio-item">
<input type="radio" value="A1" name="331454X3X39" id="answer331454X3X39A1" onclick="if (document.getElementById('answer331454X3X39othertext') != null) document.getElementById('answer331454X3X39othertext').value='';checkconditions(this.value, this.name, this.type)">
11
<label for="answer331454X3X39A1" class="control-label radio-label">
Extremely
</label>
</li>
<!-- end of answer_row-->
