View Issue Details

IDProjectCategoryView StatusLast Update
10163Development Accessibilitypublic2018-02-16 15:54
ReportercortxdpAssigned ToDenisChenu 
PrioritynormalSeverityblock 
Status closedResolutionfixed 
Product Version 
Target VersionFixed in Version3.x 
Summary10163: Radio button table - Screen raders do not read table row headers
Description

I found a problem while testing radio table (type F) for accessibility issues.
While we tend to think that the table structure is enough to tell screen readers table headers each time we switch cell, it is not the case.

Normally when we navigate withing a data table, headers are read when we are changing columns or row. For example, when we are changing row, screen reader is reading the new row header but not the column headers.

The problem is when we include forms controls (radio button) in the table. Screen readers (I'm using NVDA) switch to "form navigation" and do not consider table headers anymore. It only reads the label.

The logic solution :
The right thing to do is not to use tables like these. While they are used to gain space and loose some repetition for not visually-impaired users, they have cognitive issues. You generaly can use multiple radio question instead.

Others solutions :

  1. Dropping the table markup and using css to visually place the content. By dropping the table, we could add a <fieldset> for each row and put the question within the <legend>. This solution reaches the logic one by having multiple radio button question.
    Drawback : retrocompatibility issues, css implementation for positionning element has to be done.

  2. Adding aria-labelledby attributes to the radio button wich point to the question text (row header) and radio value (column header). See file attached
    Drawback : Question text (row header) is read everytime we are changing value (it's ok for short question but not so much for long question).

  3. Repeat the question text (row header) in the radio button label.

I’m open to suggestions/comment.

Many thanks.

P.S. for some reasons, the checkbox table is not working the same way. NVDA is reading row headers

Tagsanswers_html

Activities

cortxdp

cortxdp

2015-12-17 17:51

reporter  

radiotable.txt (3,468 bytes)
	<fieldset form="limesurvey" class="fixfieldset">
	<legend><div class="question-moved">Ça c'est la question?</div><div class="help-moved"></div><div class="man_message-moved"></div><div class="valid_message-moved"><div class="questionhelp" id="vmsg_150"></div></div><div class="file_valid_message-moved"></div></legend>
	<table class="question subquestions-list questions-list " summary="Un tableaux avec les sous questions sur chaque ligne. Les réponses sont les entêtes de colonnes.">
		<colgroup class="col-responses">
			<col class="col-answers" width="20%" />
			<col class="odd" width="26.7%" />
			<col class="even" width="26.7%" />
			<col class="odd" width="26.7%" />
		</colgroup>
		<thead><tr class="dontread">
				<td>&nbsp;</td>
				<th id="C01">Oui</th>
				<th id="C02">Non</th>
				<th id="C03">Peut-être</th>
			</tr></thead>

		<tbody>

			<tr id='javatbd335266X81X1501' class='array2 answers-list radio-list'>
				<th class="answertext" id="L01">
					Question 1<input type="hidden" name="java335266X81X1501" id="java335266X81X1501" value="" />
				</th>
				
				<td class="answer_cell_00A1 answer-item radio-item" >
					<input aria-labelledby="L01 C01" class="radio" type="radio" name="335266X81X1501" value="A1" id="answer335266X81X1501-A1" onclick="checkconditions(this.value, this.name, this.type)" />
					<!-- <label class="hide read" for="answer335266X81X1501-A1">Oui</label> -->
				</td>
				<td class="answer_cell_00A2 answer-item radio-item"  >
					<input aria-labelledby="L01 C02" class="radio" type="radio" name="335266X81X1501" value="A2" id="answer335266X81X1501-A2" onclick="checkconditions(this.value, this.name, this.type)" />
					<!--<label class="hide read" for="answer335266X81X1501-A2">Non</label> -->
				</td>
				<td class="answer_cell_00A3 answer-item radio-item"  >
					<input aria-labelledby="L01 C03" class="radio" type="radio" name="335266X81X1501" value="A3" id="answer335266X81X1501-A3" onclick="checkconditions(this.value, this.name, this.type)" />
					<!--<label class="hide read" for="answer335266X81X1501-A3">Peut-être</label> -->
				</td>
				</fieldset>
			</tr>


			<tr id='javatbd335266X81X1502' class='array1 answers-list radio-list'>
				<th class="answertext" id="L02">
					Question 2<input type="hidden" name="java335266X81X1502" id="java335266X81X1502" value="" />
				</th>
				<td class="answer_cell_00A1 answer-item radio-item">
					<input aria-labelledby="L02 C01" class="radio" type="radio" name="335266X81X1502" value="A1" id="answer335266X81X1502-A1" onclick="checkconditions(this.value, this.name, this.type)" />
					<!--<label class="hide read" for="answer335266X81X1502-A1">Oui</label>-->
				</td>
				<td class="answer_cell_00A2 answer-item radio-item">
					<input aria-labelledby="L02 C02" class="radio" type="radio" name="335266X81X1502" value="A2" id="answer335266X81X1502-A2" onclick="checkconditions(this.value, this.name, this.type)" />
					<!--<label class="hide read" for="answer335266X81X1502-A2">Non</label>-->
				</td>
				<td class="answer_cell_00A3 answer-item radio-item">
					<input aria-labelledby="L02 C03" class="radio" type="radio" name="335266X81X1502" value="A3" id="answer335266X81X1502-A3" onclick="checkconditions(this.value, this.name, this.type)" />
					<!--<label class="hide read" for="answer335266X81X1502-A3">Peut-être</label>-->
				</td>
			</tr>
		</tbody>
	</table>
</fieldset>	
radiotable.txt (3,468 bytes)
DenisChenu

DenisChenu

2015-12-18 18:36

developer   ~34063

Hi,

Actually : each cell have a label inside with "hide" class. The default hide class (included in survey) put it outside of screen, but screen reader must read it.
Maybe use title attribute can be a solution, but broken if ANswers are updated by Expression Manager.

For aria label solution :

Did this work : http://accessible.sondages.pro/49728 ?

I don't use aria-labelled-by for radio button, but i use:
role="radiogroup" / aria-labelled-by for each line.
According to :

Seems the best way, no ?

cortxdp

cortxdp

2015-12-21 17:52

reporter   ~34075

Hi,

I tested your example and it works like a charm. Adding the role="radiogroup" and the labelledby on the tr is a solution I didn't think of.

Can this solution be integrated in the core anytime soon?

Many thanks

DenisChenu

DenisChenu

2015-12-21 18:39

developer   ~34079

After 2.5 is realeased as stable or for 2.5 stable release.

n2xek

n2xek

2016-06-03 18:04

reporter   ~39221

I think I am running into a similar problem when
I try to add suffix to an array using the documented work around.

I posted it in the following thread as well.. but I haven't had any response yet.

https://www.limesurvey.org/forum/installation-a-update-issues/104799-adding-suffix-to-array-in-2-06-not-working

jelo

jelo

2016-06-08 08:36

partner   ~39309

IS this bugreport for LS 2.5 or LS 2.06? The ticket isn't showing any version.

DenisChenu

DenisChenu

2016-06-08 08:46

developer   ~39310

Yes : actually read only the label : then the 'answer', not the sub question.

And more : using only tab key : a screen reader don't read question text or help.

Maybe it's not exactly the same issue , but still a lot of issue in 2.50 for accessibility in public part.

DenisChenu

DenisChenu

2016-09-16 08:47

developer   ~40795

For 3.0 :

Then : think we can not do more :)

DenisChenu

DenisChenu

2016-10-05 17:48

developer   ~41151

Adding role=group + role=radiogroup + aria-describedby + aria-labelledby

Issue History

Date Modified Username Field Change
2015-12-17 17:51 cortxdp New Issue
2015-12-17 17:51 cortxdp File Added: radiotable.txt
2015-12-18 18:36 DenisChenu Note Added: 34063
2015-12-21 17:52 cortxdp Note Added: 34075
2015-12-21 18:39 DenisChenu Note Added: 34079
2015-12-21 18:40 DenisChenu Status new => confirmed
2016-06-03 18:04 n2xek Note Added: 39221
2016-06-08 08:36 jelo Note Added: 39309
2016-06-08 08:46 DenisChenu Note Added: 39310
2016-09-16 08:44 DenisChenu Tag Attached: answers_html
2016-09-16 08:47 DenisChenu Note Added: 40795
2016-09-16 08:48 DenisChenu Assigned To => DenisChenu
2016-09-16 08:48 DenisChenu Status confirmed => assigned
2016-10-05 17:48 DenisChenu Status assigned => resolved
2016-10-05 17:48 DenisChenu Resolution open => fixed
2016-10-05 17:48 DenisChenu Fixed in Version => 3.x
2016-10-05 17:48 DenisChenu Note Added: 41151
2018-02-16 15:54 c_schmitz Status resolved => closed