moreAccessibility

More
2 years 3 months ago - 2 years 1 week ago #123198 by DenisChenu
DenisChenu created the topic: moreAccessibility
This plugin try to fix some accessibility issue in LimeSurvey core. Some fix can be included in LS core after testing.

Actual fix are
  • Replace the label for single question choice by label to the question (to be included in LimeSurvey core).
  • Optionnal: Use a real string for the asterisk in mandatory question type
  • Optionnal: Add fieldset for list of answers and subquestion
  • Use role=group and aria-labelledby for list of question is fieldset is not forced

Contribution, test and request are welcome.

Find the plugin in Framagit : git.framasoft.org/SondagePro-LimeSurvey-...in/moreAccessibility or at github or bitbucket.

Test functionality : accessible.sondages.pro/
Website use :
- skeletonquest template
- showpopups to false
- bFixNumAuto to 0 and bNumRealValue to 1

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 2 years 1 week ago by DenisChenu.

Please Log in to join the conversation.

More
2 years 1 month ago #127406 by cortxdp
cortxdp replied the topic: moreAccessibility
I will test it. I'm a accessibility specialist and we're starting to use Limesurvey more often. We made some improvements for our short term needs but i'm really interesseted to work with you to test this, and future versions, of this plugin.

Je vais le tester. Je suis spécialiste en accessibilité et je suis en train de faire des essais sur limesurvey. Nous avons fait plusieurs modifications côté frontend pour le court terme, mais je suis disponible pour tester et commenter tout autres ajout à votre plugin.

Please Log in to join the conversation.

More
2 years 1 month ago #127416 by DenisChenu
DenisChenu replied the topic: moreAccessibility
Hi cortxdp,

The last version is OK for:
- labelling
- add "manadatory string"
- Add fieldset (but broke color ;)

I think i made a template too to fix this issue.

Another think : i think we need update the title of the page when we come back with 'error'. But i don't have access to title .... maybe except with a specific template.
Actually : i test with SkeletonQuest , and i think i start with this template for other adaptation.

Great to have an accessibility specialist. Please, please : report all accessibility bug :)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
2 years 1 month ago - 2 years 1 month ago #127479 by cortxdp
cortxdp replied the topic: moreAccessibility
We had some retrofit to make after activating you plugin, but I tested it.

Fieldset are good for radio button and checkboxes. Have you made modifications for other question types regarding fieldset?
The replacement for the asterisk works, but I does not find a use for this option. It is ok to put an asterisk before or after a field as long as you explain at the begining of the form it is for what purposes. It is a good idea too to replace the text(*) for an image of an asterisk and add the alternative text "This question is mandatory.". But since the use of the astertisk is very common, there's no obligation to do so.
Labelling is good.

I have two propositions regarding labeling fields.

Mandatory text : It is a good idea to put the mandatory text in a <label for="id.."> too. This way, both the question text and the mandatory text are read by screen readers when you enter a field.
Help text : the help text should be read too when you enter the field. We could use a <label> but it is a good idea to use the ARIA attribute describedby
Then the field should have this attribute <input... aria-describedby="idforthequestionhelptext"> and the Help text must have an id.

Let me know if you have any comments or questions.
Thanks again.
Last Edit: 2 years 1 month ago by cortxdp.

Please Log in to join the conversation.

More
2 years 1 month ago - 2 years 1 month ago #127481 by cortxdp
cortxdp replied the topic: moreAccessibility

DenisChenu wrote: Another think : i think we need update the title of the page when we come back with 'error'.


It's a great idea because the page title is read after the page validation and it could tell screen reader users that there was an error.

For error detection, in addition to the error message for each field, the best thing is to have the error list at the begining of the form. Each list element could be a link to the field.

Example :
<h2>Error list</h2>
<ul>
<li><a href="#[fieldid]">[fieldtext]:error message</a></li>
<li><a href="#[fieldid]">[fieldtext]:error message</a></li>
...
</ul>

Of course the error list is a too much when you have only one field in the page. Both cases must be treated.
This way, errors should be easily detected by the page title and the focus could be put directly on the error list after the validation.
Last Edit: 2 years 1 month ago by cortxdp.

Please Log in to join the conversation.

More
2 years 1 month ago #127482 by cortxdp
cortxdp replied the topic: moreAccessibility
A note on the asterisk, when the question type is a list (radio button, checkboxes..) the asterisk must be put inside the legend with the question text.

Please Log in to join the conversation.

More
2 years 1 month ago - 2 years 1 month ago #127486 by DenisChenu
DenisChenu replied the topic: moreAccessibility
Hi,

For the fieldset : i think i add it when we need one.
WIth the template : i think it can be good to add fieldset start at start of a group, ending at end. But we are unsure we have group title and/or group description. And it's a template behaviour (i put it in next template).

For the 'asterisk" : think the best is to add the information at start of survey, but sometimes we have 2/3 mandatory answer in a big survey : here it's more the purpose.
I don't like to add a picture with title. Or maybe like "help" image in LimeSurvey core ? With the good title ?

You rigth about the aria-describedby , i can test if we have : a user test OR a automatic help by LimeSurvey and add it automatically. The hardest part can be in "multiple" question to find the input id. And after i must update (in PHP ...) the input id part .... : hard work here.

For error at top of the form : i know (i think i have a feature request for this). But i only have access to "question part", can only update this part actually. Not other part (not really).
It can be done with javascript .... but .....

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 2 years 1 month ago by DenisChenu.

Please Log in to join the conversation.

More
2 years 1 month ago - 2 years 1 month ago #127488 by cortxdp
cortxdp replied the topic: moreAccessibility

DenisChenu wrote: Hi,

For the fieldset : i think i add it when we need one.
WIth the template : i think it can be good to add fieldset start at start of a group, ending at end. But we are unsure we have group title and/or group description. And it's a template behaviour (i put it in next template).

Denis


Fieldset are required for radio buttons, checkbox, etc.
Fieldset can be added for question grouping if it's relevant. For example, in a form with shipping and billing adresses where both have the sames fields (name, street adress, etc..). This way, the fieldset makes the contextualisation. As a note, filedset can be nested if needed. Another note : heading can ben use instead of fieldset for question grouping. It's easier to navigate.

DenisChenu wrote: For the 'asterisk" : think the best is to add the information at start of survey, but sometimes we have 2/3 mandatory answer in a big survey : here it's more the purpose.
I don't like to add a picture with title. Or maybe like "help" image in LimeSurvey core ? With the good title ?

Denis

I understand the need now. I tought you meant that the use of asterisk was not ok for accessibility. It's ok if you teel people what it means at the beginning of the form. Your option to show the text instead is ok too.
Last Edit: 2 years 1 month ago by cortxdp.

Please Log in to join the conversation.

More
2 years 1 month ago #127505 by DenisChenu
DenisChenu replied the topic: moreAccessibility
Hi,

Actually : i can only add fieldset 'automatically', then added to "ansers part of" :
- Multiple question : text/numeric multiple ("M","P","Q","K"): exemple Multi short question.
- Array of input text/number (";",":"): unsure we have to put it here. But more : each input have a 2 label, unsure the good way to labelling (event with aria)
- Single choice (radio) ("Y","G","5","L","O") : exemple : gender.
- The arrays (of radio) ("F","H","A","B","E","C","1") : the question array is a bad idea to be used for an accessible survey ;)

Then if you need a name, street adress, etc : put it in a multi text question type .

For asterisk, what did you think if i use (inside label or legend if needed)
<img class="asterisk" title="This question is mandatory, please check one answer" alt="Mandatory Question" src="mandatory.png" >
I use "mandatory question" because we have it in LS core translation. The more specific mandatory string is less important. User have to know only 'mandatory', unsure here ...

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
2 years 1 month ago #127564 by cortxdp
cortxdp replied the topic: moreAccessibility

DenisChenu wrote: Hi,

For asterisk, what did you think if i use (inside label or legend if needed)

<img class="asterisk" title="This question is mandatory, please check one answer" alt="Mandatory Question" src="mandatory.png" >
I use "mandatory question" because we have it in LS core translation. The more specific mandatory string is less important. User have to know only 'mandatory', unsure here ...

Denis


The title attribut doesn't exist for the IMG tag. It exist for A tag but is not generally read by screen readers. A rule of thumb, don't use title attribute for any significant informations. Use ALT for IMG and an significant anchor texte for link. Thats all you need for 90% of cases.

Please Log in to join the conversation.

More
2 years 1 month ago #127589 by DenisChenu
DenisChenu replied the topic: moreAccessibility
I'm silly , know it .... title need an a or a button ....

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
2 years 1 month ago #127646 by Mazi
Mazi replied the topic: moreAccessibility
Nice to see that you guys are working on improving accessibility. Would be great to have most of this at the core of LS 3.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
2 years 1 month ago #127667 by cortxdp
cortxdp replied the topic: moreAccessibility
I will take a quick look at the requests in the bug tracker. I found it hard to keep track of suggestions in the forum.

Do you want to improve on this plugin or to keep it small and make requests in the bug tracker instead for other things we talked like having a tag to put in template to generate the error list.

Please Log in to join the conversation.

More
2 years 1 month ago #127690 by DenisChenu
DenisChenu replied the topic: moreAccessibility
The actual Bugtracker for this plugin is : git.framasoft.org/SondagePro-LimeSurvey-...Accessibility/issues

aria-labelled-by for single question is here : git.framasoft.org/SondagePro-LimeSurvey-...037d0cdac3c5c9e1f84b

Actually : it's a plugin not directly linked with LimeSurvey : bug for LS must be put in LimeSurvey bug tracker.

Actually : there are only some bug for LimeSurvey core and accessibility ..... Then according to this bug report : LimeSurvey is very accessible .....
- bugs.limesurvey.org/view.php?id=9494 : 09494: Section 508 issue with class="hide label"
- bugs.limesurvey.org/view.php?id=9106 : 09106: Add some 'error' in tite and list error before showing question


I think i can fix LS core with labelling on question text ... but it's not suffisant... need aria for "help/dynamic help".

@Mazi : aria need HTML5 to be properly validate. And actually seems we need aria to proper fix this issues

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
2 years 1 month ago #127710 by cortxdp
cortxdp replied the topic: moreAccessibility
We found problems with the « other » choice when using checkboxes and radiobuttons.

In details
The checkbox did not have any label associated. Instead, the label was associate with the text field. It seems that to solve some problem, they decided to put the class « don’t read » on the checkbox. It doesn’t work for me so the checkbox was read with no label. My suggestion is to get rid of this class and modify the code.

To solve this and to be constant, we change the label to be associate with the checkbox. Because a label can be associate with only one field with the « for » attribute, and we didn’t want to add another label, we added the aria-labeledby to the textbox. It points to the same label.

We did the same thing for the radio button « other ».

I put the file here if you want to add it to your plugin for more convinience. I think this one should be put in core too.

File Attachment:

File Name: patchAcces....php.txt
File Size:6 KB



As a note, I don’t fond a use for the « don’t read » class and I have seen it many time on the forum or bug tracker.
Attachments:

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!