E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Ajay Sharma
Date: Tue, Jun 02 2020 5:30PM
Subject: Row / Column resize using keyboard
No previous message | Next message →

Hello there,

I am looking for some examples of tables where we could resize the row or column with keyboard in a similar way like dragging with mouse.

Any pointer would be really helpful.

Thanks!
Ajay

From: Mallory
Date: Thu, Jun 04 2020 5:43AM
Subject: Re: Row / Column resize using keyboard
← Previous message | Next message →

Hi Ajay,
I have not seen one working, but remediation advice given in the past by teams I've worked with suggested having focusable buttons either in the column headers or possibly preceding the table itself (and then positioned over the vertical borders in the thead) which, when focussed, allowed left/right Arrow keys to move the column borders. Possibly the Escape key would reset the column-border position (allowing users to cancel in case they moved it unintentionally) makes sense as well. Tabbing away (blur) would set the new position, possibly also by hitting Enter. I've heard others say Tabbing away without pressing Enter should reset the column width.

I believe if these controls had proper naming (making it clear they are for column resizing and the name of the column whose width they control), along with some visible instructions for keyboard/speech rec users before or immediately after the table, that this can be useful, usable and not too complicated for users.

cheers,
_Mallory

On Wed, Jun 3, 2020, at 1:30 AM, Ajay Sharma wrote:
> Hello there,
>
> I am looking for some examples of tables where we could resize the row
> or column with keyboard in a similar way like dragging with mouse.
>
> Any pointer would be really helpful.
>
> Thanks!
> Ajay
> > > > >

From: Ajay Sharma
Date: Fri, Jun 05 2020 1:06PM
Subject: Re: Row / Column resize using keyboard
← Previous message | Next message →

Thanks Mallory! This is interesting, a good point to start with.

Cheers,
Ajay

> On Jun 4, 2020, at 4:44 AM, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi Ajay,
> I have not seen one working, but remediation advice given in the past by teams I've worked with suggested having focusable buttons either in the column headers or possibly preceding the table itself (and then positioned over the vertical borders in the thead) which, when focussed, allowed left/right Arrow keys to move the column borders. Possibly the Escape key would reset the column-border position (allowing users to cancel in case they moved it unintentionally) makes sense as well. Tabbing away (blur) would set the new position, possibly also by hitting Enter. I've heard others say Tabbing away without pressing Enter should reset the column width.
>
> I believe if these controls had proper naming (making it clear they are for column resizing and the name of the column whose width they control), along with some visible instructions for keyboard/speech rec users before or immediately after the table, that this can be useful, usable and not too complicated for users.
>
> cheers,
> _Mallory
>
>> On Wed, Jun 3, 2020, at 1:30 AM, Ajay Sharma wrote:
>> Hello there,
>>
>> I am looking for some examples of tables where we could resize the row
>> or column with keyboard in a similar way like dragging with mouse.
>>
>> Any pointer would be really helpful.
>>
>> Thanks!
>> Ajay
>> >> >> >> >>
> > > >

From: glen walker
Date: Fri, Jun 05 2020 5:05PM
Subject: Re: Row / Column resize using keyboard
← Previous message | Next message →

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.

From: Mallory
Date: Sat, Jun 06 2020 4:38AM
Subject: Re: Row / Column resize using keyboard
← Previous message | Next message →

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.
> > > > >

From: Murphy, Sean
Date: Sun, Jun 07 2020 4:16PM
Subject: Re: Row / Column resize using keyboard
← Previous message | No next message

I do have a question when you are resizing columns. How are you going to support the screen reader user? What information are you going to share to this group when you are in the mode of changing column sizes?

Sean




Sean Murphy | Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917
Digital Systems Launch Page
Accessibility Single source of Truth

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Mallory
Sent: Saturday, 6 June 2020 8:38 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Row / Column resize using keyboard

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

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.
> > > archives at http://webaim.org/discussion/archives
> >