[#20962] - [4.0] [a11y] Mod-popular, mod_logged, mod_latest
- Fixed in Code Base
- 17 Jul 2018
- Medium
- Build: 4.0-dev
- # 20962
- Diff
- brianteeman:module-a11y
User tests: Successful: Unsuccessful:
The modules on the control panel contain multi-dimensional data and so should be tables and not lists. By doing this we are also able to make them accessible.
The actual markup (the classes) will need to be reviewed before merging by someone other than me.
Accessibility improvements
Each column has a table header and each table header has a scope
The cell for the item has a scope of row (it therefore has to be a th not a td)
Adding the scope ensures that screenreaders understand what the numbers are eg 1024 hits for article link "similar tags"
If the site owner chooses not to display the module title then a sr-only caption is created - this is essential for a11y
Design improvements
By using tables etc then we avoid the crazy layout we can get now
Notes
the logout button in mod_logged is an <a href= role=button> - this could be changed to a real button if people feel strongly
checked out is not changed in this pr - that will need to be done in separate pr as it effects a library etc
Before
After
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Modules Administration |
| Labels |
Added:
?
|
||
Any particular reason for using module title as ID? ID must be unique. You can have multiple modules with the same title on the same page which means duplicate IDs.
No reason - this is just a proof of concept PR. can easily be changed to moduletitle and id
If the site owner choses not to display the module title then a sr-only caption is created
I feel like this should be done at module chrome level rather than in module layout.
That would require a new module chrome to be created and for this proof of concept I didnt want to do that if it can be avoided - and it can
Looks good for me, but I think the checked-out icon and the edit icon should have additional sr-only information.
As the Edit icon is purely decorative I don;t agree with it needing any sr-only text - it is inside the same link as the href etc.
I will look into the checked out one - that does need some improvement. Thanks for testing
The checked out stuff probably needs a library change :( So lets define what it should be here and then it is correct everywhere
Is there really only one person in the accessibility team who is going to take the time to check this out and comment. It might be just one module here but the principles, if accepted, will be applied in many modules and many admin views.
I have tested this item
I testing with NVDA. Ideally
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20962.
For the label for the Edit icon. In the item list view, e.g. Article Manager, the icon is hidden from screen readers. But each item has a tooltip with "Edit...." text. I think it should be the same consistently.
The tooltip really isnt needed anywhere
I do not insist. I agree that it is not necessary.
Thinking about it, is it really a good idea to show title when it's hidden? It might be unreadable or otherwise should not be displayed to the users. E.g. I can see administrators leaving titles derived from module name (mod_something).
Also, title needs to be escaped in ID.
Thinking about it, is it really a good idea to show title when it's hidden?
It is not shown
It's shown to screen reader users.
Added mod-latest
next up mod logged
It's shown to screen reader users.
As it should be
So we have only the title / tooltip for the checked_out button. This can be left until we have a general solution for this.
@brianteeman - I did not understand your remark "next up mod logged"? Do you mean that you adapt the logged_in module?
-
Yes I plan to make the same changes to mod logged
-
The checkout needs to be looked at as a separate issue as it is a library
The same changes are also needed in the module Recently Added Articles
Already done here
| Title |
|
||||||
I have updated the description - this pr is no longer a proof of concept and should be tested ready for merging
It includes the three modules that are multi-dimensional and therefore should not be lists
Where did you read that the role=button for the link is correct? Not applicable. Link is a link, button is a button. Why change the native semantics? Why not use a button when it is semantically a button?
https://www.w3.org/TR/using-aria/. See: 2.1 First Rule of ARIA Use, 2.2 Second Rule of ARIA Use
I think that we should make a new issue for this point when the layout is ready.
It is not as simple here.
Let @brianteeman decide.
This text also says: "Note: Where possible, it is recommended to use native HTML buttons [...] rather than the button role, as native HTML buttons are more widely supported by older user agents and assistive technology. "
Using role=button for links is bad practice.
yes but it doesnt say it is wrong
Hmmm. The issue is one of approach. Bad practice is bad practice. The rules are there to apply. You repeat this many times.
do what you want. but if i hadnt written it then we would still be waiting for xmas for anything from you
I have tested this item successfully.
My2Cent: The < a > instead of < button >can be accepted here even if it is not best practice. It is not for public and it is not used very often. And replacing it needs programming.
Let's do as @chmst proposes
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20962.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20962.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20962.
| Status | Pending | ⇒ | Ready to Commit |
Ready to Commit after two successful tests.
Sorry with the admin template being merged this has conflicted would you mind syncing this up and then just one tester (can be someone who tested before) to just review after that.
| Labels |
Added:
?
|
||
conflicts resolved
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20962.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20962.
I repeated the test with the new template. Everything is OK. Skipping the question of the button. Will be reported in the new PR.
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2018-07-17 06:24:05 |
| Closed_By | ⇒ | laoneo |
Thanks!
Thanks
Any particular reason for using module title as ID? ID must be unique. You can have multiple modules with the same title on the same page which means duplicate IDs.
I feel like this should be done at module chrome level rather than in module layout.