WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Row / Column resize using keyboard

for

From: Mallory
Date: Jun 6, 2020 4:38AM

I'm curious Glen what role you gave these focusable headers? And how did you keep only the colheader text as the header name of the cells below?

(incidentally I was testing a table I found in the wild which named column headers with aria-label. Since in this table they were not focusable, I was curious if that aria-label would even work.
with JAWS in FF/Chrome, it did-- even as a column name as I moved between cells in the body.
with NVDA in FF/Chrome, it did not. I only got the visible text.)

cheers,
_mallory

On Sat, Jun 6, 2020, at 1:05 AM, glen walker wrote:
> Another possibility but related to Mallory's, is for the column heading to
> be a focusable element itself. We've done this before and had the header
> focusable because selecting it would sort the column. But since it was
> focusable we also allowed the left/right arrow keys to resize the column
> (when the header has focus). If you have a grid instead of a table, where
> left/right normally navigates to the next cell (which we had in some of our
> apps), then a modified left/right might be needed, such as ctrl+left and
> ctrl+right.
>
> We also had a modifier with the arrow key that simulated a "double click on
> the column border", which would size the column as big or as small as
> needed given the contents of all the cells. We communicated the
> interactions via screen reader text.
> > > > >