Hello - this is going to be a longer post, as I received an in-depth analysis of a survey I created from a colleague who tests content for VI accessibility. We understand, of course, if these changes are not possible to do. I am also sending ahead that I personally don't understand many of the comments, but if I can do anything to help fix from my end, I will do my best!
(He tried the "accessible" version and the normal version for the survey and both seemed to have similar issues.)
1. Changing Tab order by tabindex attribute
Desc.: Many form elements and links contains tabindex attribute that changes an order of elements when going through them by Tab key. It could be very confusing for screen reader users because they will get elements in different order when going by Tab and when going by virtual cursor of a screen reader. See Using the tabindex attribute page for more information.
The best approach would be to place all elements in HTML code in the logical order and avoid changing Tab order by tabindex.
Note: Could this issue be coming up because I have some randomized questions in the survey?
2. Missing connection between invalid field and its error message
Desc.: When user activates the Next button but the input is invalid or some required answers are not filled in the error message appears above the form, i.e. “Please also answer this question – Your answer to this question is of importance to this study.” The problem is that screen reader doesn’t read the message in that moment so user doesn’t know why he or she doesn’t proceeds to the next step. When user finds the error message he or she doesn’t learn from its text which form field is problematic. So it’s difficult to find and correct invalid input with screen reader. We suggest following adjustments:
• All such error messages should be marked with role=”status” to force screen reader to read the message automatically when it appears.
• Text of error message should always contain name of the problematic element so user gets information where is the problem.
• Focus should ideally go automatically to the first invalid form elementso user doesn’t need to search it in the form.
• The error message is paired with the problematic form element by aria-describedby attribute so screen reader reads the error message automatically as the additional information when the form gets focus.
3. Marking up groups of select boxes or other elements
Desc.: There are groups of <select> boxes in the accessible version. For instance on the page “Ease of use of autonomous cars” there is a group that begins with “Please indicate your agreement to the following statements:”. These groups should be marked as groups in HTML so that screen reader can read automatically the label of group when user gets there. So <div> containing <select>* boxes should have the attributes role=”group” and aria-labelledby=[id of label]. The label “Please indicate your agreement...” should have the corresponding id.
4. Dynamic page titles
Desc.: All pages have the same title ‘Questionnaire’ ( tag in section). It would be much better when every page could have a unique title based on its content. The best way is to use text from main H1 heading as a beginning of page title, i.e. title ‘title ‘Data protection and consent to participate | Questionnaire‘ for the third page., title ‚Autonomous and connected vehicles | Questionnaire‘ for the fourth page etc. Another possibility can be showing a percentage of progress in the title – something like 6% done | Questionnaire‘. The page title is the first text that is read by screen reader on page load and a user should get information from the title that he or she proceed to the other page.
Note: I have a feeling I might be able to change this one from my side, but not sure where.
5. Visibility and Position of the button for disabling more accessible mode
Desc.: The button “Change to the accessible version” is visually hidden now. The button should be visible for low vision users (and The button for disabling accessible mode too).
Desc.: The button for disabling more accessible mode should be positioned at the same place the button for enabling it, that is, at the top of the page.
Note: this one is strange, for me they appear both at the very bottom of the page. I agree that they are hard to find though.
6. Missing markup for required form fields
Desc.: All the required form fields, including checkboxes, radio groups, edit fields etc., should have the aria-required=”true” attribute set on them. This ensures the require status of the field is conveyed to screen readers.
Thanks a lot for your help!