[#23896] - [4.0][a11y] Hints not correctly linked to forms
- Closed
- 3 Mar 2019
- Medium
- Build: master
- # 23896
Steps to reproduce the issue
- Go to Admin menu > Content > Articles > New
- Use screen reader (e.g. NVDA)
- Go on "Option" tab
- Move focus to options: Icons, Print, Email, Unauthorised Links, Read More Text
Expected result
You should hear the names and labels of the fields and related hint, eg.
Icons / combobox / use global show / Print and email will utilise icons or text.
Actual result
Form controls sometimes have related instructions (hints, tip). Sighted users can see them. Blind users using a screen reader should hear them when the form field is focused. Otherwise they may not understand how to fill in the field.
Unfortunately, currently the tips are not accessible for blind users.
In the code, in all cases there is an aria-describedby attribute with the id of the item that contains a clue. Unfortunately, the attribute is not assigned to the corresponding form control.
For example: Option tab on the Articles: New page
Note that the attribute for assigned to the label tag indicates the select form (id="jform_attribs_show_icons")., but the aria-describedby attribute is not assigned to the select tag. It has been assigned to the tag <div class="controls ....">. The div tag is not an interactive element, it does not receive a focus. Therefore, the screen reader will not read the hints indicated in this tag.
System information (as much as possible)
- Windows 10,
- Chrome 72.0.3626.81, Firefox/65.0
- NVDA 2018.4
Additional comments
I have reviewed the following pages
- Articles: New
- Menus: Edit Item
- Banners: New
- Contacts: New / Edit
- News Feed: New / Edit
- Module Site - Articles Category: Edit
Here is a list of some detected cases that need to be corrected:
- Page Articles: new/edit
- Option Tab: "Icons", "Print", "Email", "Read More Text", "Unauthorised Links"
- Publishing tab: "Key Reference", "External Reference"
- Page Menus: new/edit
- Options tab: "Chose a Layout", "Read More Link", "Icons", "Print", "Email", , "Unauthorised Links"
- Link Type tab: "Image Class
- Page Banners: new/edit
- Publishing tab: Meta Keyword Prefix
- Page Contacts: new/edit
- Form tab: "Banned Email", "Banned Subject" "Banned Text"
- Page News Feed: new/edit
- Display tab: "Characters Count"; Note: On the Publishing tab the hint for the field "External Reference" has been omitted.
- Page Modules site: Articles Category
- Modules tab: "Mode"
- Dynamic Mode Options tab: "Show on Article Page"
- Filtering Options tab: "Count", "Tags",
- Grouping Options tab: "Month and Year Display Format",
- Display Options tab: "Date format"
In addition:
For fields “Date format” and “Month and Year Display Format” a hint is placed in the title attribute.
The screen reader reads this hint, but this is not a good solution. The title attribute is not recommended and is not needed here. It should be an aria-describedby attribute
joomla-cms-bot
- | Labels |
Added:
?
|
||
- Publishing tab: "Key Reference", "External Reference"
There is nothing wrong. The description is in the accessibility tree as you can see below.
The reason that you are not "hearing" it on your NVDA screen reader is that it is not configured to announce descriptions by default - you have to enable that in the screen reader options. Other screen readers may call this "verbose" mode
General note. If it is in the accessibility tree then there is no problem. No need to have a screen reader to test.
You are partially right.
When a controls has a title attribute, some screen readers read its contents. These descriptions are in the accessibility tree because the reader "calculated" them from the title attribute and not from the describedby attribute.
In the cases presented by you, as well as in a few others, we have both the badly addressed attribute describedby and additionally the title attribute on the control. In other cases we have only badly addressed attribute describedby.
I have a well-configured screen reader and I can hear these descriptions, but - these are not descriptions from the recommended describedby attribute , but descriptions from the not recommended (and redundant) title attribute.
My shortcoming: I should describe this in more detail.
Well in that case the title is clearly not redundant ;)
In future it will make it easier to understand what you are saying if you include sample code of how it should be. Not php just simple html markup
You have a description text in the output code twice, See Key Reference case
- in
<input...>tag and - in
<small ...>tag below
So you have to repeat it unnecessarily.
In my opinion, the code should be like this (movearia-describetbyattribute fromdiv class="control...>tag to<input...>tag, removetitleattribute):
<div class="controls has-success">
<input type="text"
name="jform[xreference]"
id="jform_xreference" value=""
class="form-control valid form-control-success"
size="20"
aria-describedby="jform[xreference]-desc"
aria-invalid="false">
</div>
<div id="jform[xreference]-desc">
<small class="form-text text-muted">Used to store information referring to an external resource.</small>
</div>
So the problem that needs to be resolved is that currently the code aria-describedby="jform[xreference]-desc" is coming from
When it needs to come from the $input defined on the next line. Therefore we need to change all the files in https://github.com/joomla/joomla-cms/tree/4.0-dev/layouts/joomla/form/field
I will have something to test shortly. Just working through all your reports to make sure I have covered them all.
Write more precisely what you expect. Or in other words, because I don't understand
I am working on a pull request. The basic has been done and I am just making sure it fixes everything you reported.
I will try to test it as soon as you publish PR. But not today - it is very difficult for me to update the test environment.
For this test you will be able to apply the pull request using the patchtester
OK. You are irreplaceable.
If all the reported issues are dealt with can you close this please. If not please let me know which are still to do
| Status | New | ⇒ | Information Required |
@zwiastunsw can this Issue be closed?
| Status | Information Required | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-03-03 22:18:12 |
| Closed_By | ⇒ | zwiastunsw |
@franz-wohlkoenig : I think you can close it. @brianteeman fixed the descriptions in the controls: acesslevel, calendar, combo, email, list, number, range, tel, text, textarea, url. If we find other cases, a new issue will be reported
@zwiastunsw thanks for cleaning up.
Same issue: