Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

ARIA radiogroups and groups issue (maybe?)

More
6 years 2 weeks ago #165249 by mass
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-->
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 2 weeks ago #165264 by DenisChenu
Replied by DenisChenu on topic ARIA radiogroups and groups issue (maybe?)
No,

See www.w3.org/TR/2016/WD-wai-aria-practices...les/radio/radio.html

Then the aria-labelledby is for the radio wrapper, the radiogroup (see <div class="ls-answers answers-list radio-list row" role="radiogroup" aria-labelledby="ls-question-text-331454X3X39">).

Maybe we must move to ul and not wrapper, but seems clean.

Remind : you don't need aria-checked on real radio

If you set aria-labelledby="ls-question-text-331454X3X39" : you loose link between radio label and radio (for="answer331454X3X39A1")
If you set aria-labelledby="ls-question-text-331454X3X39 label-answer331454X3X39A1" then ls-question-text-331454X3X39 is repeated at each radio.

Using radiogroup seems the best solution

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose