zwiastunsw
commented
6 years ago 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 )
brianteeman
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.