Accesibility thread

[Tazoeur]

Hi,

A client recently asked us to improve the accessibility of their moodle. They did an audit of their platform (I think its was following the RGAA 2.2 or 3.0 standart) and we had to work on the problems they puted in light.

Since this moodle platform do use your plugin (great work by the way :D ), we though it might be a good idea to share our work with you and the community.

So here is some description of the problems we've faced and I will provide the pull requests in a near future.

1. Likert scale - make relation between grid header title and each response

The idea was to link the header with every <input type="radio"> of the same column.
To do so, we added an id for every header (named q<question_number>_resp<response_number>) and we used the HTML property aria-labelledby to do the link.

We also added a role="presentation" to the table.

So the desired HTML looks like this :

<table style="width:99.9%" role="presentation">
    <tbody>
      <tr>
        <td id="q1_resp1">religiously agree</td>
        <td id="q1_resp2">agree</td>
        <td id="q1_resp3">meh</td>
        <td id="q1_resp4">disagree</td>
        <td id="q1_resp5">outrageously disagree</td>
      </tr>
      <tr class="raterow" role="radiogroup group" aria-labelledby="q1">
        <td id="q1" >Sharks are stronger than gorillas</td>
        <td style="text-align:center" class="c1 raterow"><input aria-labelledby="q1_resp1" name="q1977_4965" value="0" id="q1977_4965_0" type="radio"></td>
        <td style="text-align:center" class="c1 raterow"><input aria-labelledby="q1_resp2" name="q1977_4965" value="1" id="q1977_4965_1" type="radio"></td>
        <td style="text-align:center" class="c0 raterow"><input aria-labelledby="q1_resp3" name="q1977_4965" value="2" id="q1977_4965_2" type="radio"></td>
        <td style="text-align:center" class="c1 raterow"><input aria-labelledby="q1_resp4" name="q1977_4965" value="3" id="q1977_4965_3" type="radio"></td>
        <td style="text-align:center" class="c0 raterow"><input aria-labelledby="q1_resp5" name="q1977_4965" value="4" id="q1977_4965_4" type="radio"></td>
      </tr>
...
</table>

Here is an ugly output of a likert scale question :

	religiously agree	agree	meh	disagree	outrageously disagree
Sharks are stronger than gorillas

2. Required fields

It seems that there was no legend saying that the required fields were marked by a red asterisk. So we had to add one.

Since the red asterisks are <img> tags, the HTML tags have to contain the alt attribute.

3. essay box - make relation between label and id

The HTML for the essay box was like this :

<div class="qn-question ">
    <label for="edit-q1777">
        <div class="no-overflow"><p><span>This is my question</span></p></div>
    </label>
</div>
<div class="qn-answer">
        <textarea id="q1777" name="q1777" rows="5" cols="80"></textarea>
</div>

You easily see that the id of the textarea is close but not equal to the id given in the for attribute of the <label> tag

[mchurchward]

Thanks for your issue. Did you create code to fix these?

[Tazoeur]

Yes I did, and I will propose three pull request (corresponding to the issues described here).
If all goes well, I will be done around noon :)

[Tazoeur]

Yeah "noon" ^^'

So here is the work we've done.

I have mixed some of the commit :(
In the "essay box" branch, there is some modifications that should have been in the other branches. Since I am not a git master, I did the best I could but that's kind of dirty :/

There is also a last branch where I putted the changes that didn't make sense in the other branches : #104

I would like to say that this is the first time we participate at a community plugin and if you could give me some advices about the sharing process (obviously apart from the mixed branches for wich I already apologize) it would be nice :)

I hope that despite the dirtiness, you will find this helpfull.

Regards,
Guillaume

[mchurchward]

Thanks for that. I will review and let you know about any issues. I will also let you know about any way to participate easier. Thanks for the contribution!