Explore of Backend pages type "manager" at Joomla 4

[zwiastunsw]

The goal of this task is to detect accessibility problems on Backend pages such as User manager, Menu item manager, Article manager, Category manager, etc.
We do not impose evaluating methods on anyone. Do it as you can.

• Examine the selected pages.
• Report the results of your tests and analyses here.
• Discuss the issues raised in the reports.

[zwiastunsw]

8 accessibility issues on "manager" type pages

I conducted an analysis of the accessibility of a "manager" type pages in the Backend of Joomla. I have analyzed the Article manage page and Article Category manage page.
I just looked at the main content of the page - a table with an article and category list. I have identified the following 8 accessibility problems.
Please confirm this and suggest how to resolve it.

The table has no captions

For the visually impaired the title of the table does not seem to be necessary - the contents of the table are obvious and understandable. However, I think that blind people should be given a brief description of the content of the table in its caption.

• H39: Using caption elements to associate data table captions with data tables
  Note Captions are not required to meet WCAG's success criteria, but are a simple way of providing the necessary information. See: Web Accessibility Tutorials. Caption & Summary

The table headings should be buttons

The table headers are now links that trigger an ascending or descending sorting action by title, access level. The link is not a valid semantic tag in this case. It will misinform the blind user. A screen reader user expects to connect to a different page or location on a page, not an action.

• Links vs. Buttons in Modern Web Applications

Here is a pattern for how to build an accessible sortable table.

• Sortable Grid by Deque University

Column headings are not correctly marked

In the article table, the first two columns do not have correctly marked column headings. In the first column we have an icon symbolizing sorting. In the second column we have a checkbox form field. In the table of article categories, four other columns also use icons as column heading (Published items, Unpublished items, Archived Items, Trashed items). There is a title here for screen readers only, but it is hidden because the parent span tag has the attribute aria-hidden="true".

• Assistive technology reading tables

Checkboxes in 2nd column are not labbelled

The checkboxes in the second column of the table are not labelled.

• Assistive technology reading tables

Buttons marked as links

The Status column contains two important switches: Published/Non-published, and Featured/Non-Featured. Visually they are icons, semantically they are links.
The screen user is not informed about the meaning of the icons. Only the "link link" message is heard. These should be buttons. And their names must be visible to users of screen readers.

• Links vs. Buttons in Modern Web Applications

Drag & drop function not accessible to keypad users

To change the order of items, the administrator can use drag & drop. Unfortunately, users who only use the keyboard cannot perform this task.

• Accessible Drag And Drop With Multiple Items
• Drag and Drop Example

Rows do not have a header column

The rows in the table do not have a marked header cell. In my opinion, this should be a cell with the title of an article.

• H63: Using the scope attribute to associate header cells and data cells in data tables

No information on the level of nesting of subcategories

In the category table, the information about the level of nesting of the subcategory is important. Unfortunately, this information is not passed on to screen readers at all.
(F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative )

[zwiastunsw]

@brianteeman : Can you ask for comments?

[brianteeman]

Would this methodology be acceptable

https://dequeuniversity.com/library/aria/tables/sf-sortable-grid

[brianteeman]

I just reread your report and see that you already suggested that so I guess it's ok for me to work from that
I have done most of it and will share tomorrow

[brianteeman]

Actually thats not correct - to do it exactly the way that deque do it will require a massive rewrite of every component.

[brianteeman]

Please take a look at
joomla/joomla-cms#21977

The main thing you will not like is that there are still <a for the column headings - I would need hep to change that as it would mean a js change that is beyond me but hopefully it is a start

[brianteeman]

I have now fixed the <a and made it a <button

PLEASE can this be tested asap as once tested we can tidy up the js into the correct location and apply this to all the tables

[brianteeman]

Is there anything left to do here?