Issue
- Table view is set up for Documents and Media widget
- If I view the page on mobile screen, the table does not fit
- There is a scrollbar to see all columns but it is small and difficult to use
- I am worried that this does not qualify as an accessible design
- I expect a vertical design
Environment
- Liferay DXP 7.4+
Resolution
The current design is responsive, the table resizes horizontally as much as it can.
The table is cut off on the mobile viewport and a horizontal scrollbar appears to let the table scroll. However, if you open the Dev Tool of the browser (F12), open the Toggle device toolbar (Ctrl + Shift + M), and start to resize the screen, you can see that the table starts to narrow down and the space between the columns is getting smaller.
Horizontal and vertical designs were considered and the current view was a conscious decision.
This behavior was the result of a design decision because it is simple and straightforward. Vertical design has disadvantages as well, for example taking too much space vertically in case of lots of data.
The scrolling area is keyboard accessible.
With the current solution, the important thing to check from an accessibility point of view is if the scrolling area is keyboard accessible.
With tabbing, you can navigate from one interactive component to another such as buttons and links. Using the Chrome screen reader extension, we are able to use tabbing between the links in the table. In this case, the name of the link is read out lead and we can also interact with the link by navigating inside that link.
Buttons and links in the table, jumping from an interactive component to the next/prev interactive component works as expected on mobile view
On the other hand, screen readers usually use arrows to browse content and rotor/shortcuts to jump between types of semantic content. Semantic data cannot be read by tabbing, but with other quick navigations. To test that, we can use for example VoiceOver and JAWS screen reader programs. In this case, the simplest example is that we can navigate with arrow keys between the semantic information like the table header, status, and date.
With the screen readers, we are able to also navigate through the off-screen data in the table as well which is either displayed on the screen or read out loud depending on which program we use.
Additional Information
- You can also consider using the List or Card views in the Documents and Media widget which will fit into the screen on mobile as well.