- Posts: 2
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
ARIA radiogroups and groups issue (maybe?)
- mass
- Topic Author
- Offline
- New Member
Less
More
6 years 2 weeks ago #165249
by mass
ARIA radiogroups and groups issue (maybe?) was created 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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13935
- Thank you received: 2551
6 years 2 weeks ago #165264
by DenisChenu
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.
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
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.