Open mlewand opened 2 years ago
We focused exclusively on keyboard handling so far - but we need to remember that semantical markup is core requirement for this component.
I started a research on markup that we should produce for accessible grid components. The benefit of semantically marked grid is that it will convey information that this is a 2 dimension widget (has rows and columns).
<table>
element - so they went an extra mile ensuring that metadata is conveyed.Others simply don’t implement it well. They simple are using options.
<table>
with a grid
role and gridcell
role on focusable elements.
div[role=row]
with [aria-owns]
to mark relations which row contains which item.
div[role=row]
at runtime.[aria-owns]
attribute.aria-rowcount
on grid
element and aria-rowindex
on gridcell
.
role=row
wrappers is read properly.It seems that an example with a dynamic row count is a no go – it's incorrectly handled by both NVDA and VoiceOver. The most promising one is the method with [aria-owns]
– it's correctly handled by VO, NVDA, and JAWS and it does not require "tablesque" structure.
But, tbh, the easiest one would be to use table
which would provide us with nearly everything out of the box. The biggest issues with tables are probably their issues with responsivity and the fact that we will need to calculate the whole table before displaying it to the user. OTOH, we would probably also need to calculate the whole [aria-owns]
grid before rendering – otherwise, it would cause quite a reflow. So… the only real advantage of the [aria-owns]
method is the ability to break free from the standard structure of the grid and introduce some additional div
s (or omit them) if we want to.
The special characters buttons in the CKEditor allow for arrow key navigation, but the markup does not insinuate to users of screen readers that they are navigable with up/down AND left/right arrow keys.
In lieu of the proposed ARIA grid (role) my organization has extended the default special character buttons in CKEditor5 by adding ARIA menu and menuitem roles. This to-date has helped provide our customers the information (direction and cues) that the buttons are navigable through two-dimensional or bi-directional means.
However, our accessibility office agrees with this ticket that ARIA grid along with row and gridcell roles is the optimal markup. The aria-rowindex and aria-colindex properties (permissible on the row role per the ARIA 1.2 specification) would be ideal to (help) convey the bi-directional cues to users of screen readers.
So far we have handled only keyboard interaction for grids in #11851 but in order to make grids accessible we also need to provide proper semantic annotation for it.
Most importantly user needs to have semantic information that this is a two dimensional widget (columns and rows).
We need to ensure that all grid components already existing in the editor gets this improvement.
If you'd like to see this fixed sooner, add a 👍 reaction to this post.