E-mail List Archives

Search E-mail List Archives for

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

From: Fernand van Olphen
Date: Wed, Apr 19 2017 11:39AM
Subject: Table with expandable row > focus management
No previous message | Next message →

I have a question about focus management.

The website I am reviewing is using a table with an expandable row. (This is the plugin being used: https://datatables.net/examples/api/row_details.html
It is not keyboard accessible. But let us suppose it is.)

This is what I should be able to do:

- I TAB to the "plus-sign" in the first cell
- I use ENTER or Spacebar
- The expandable row expands

However, the next element in the source order is the second cell, not the expandable row. So, should something be done with the focus management?


Fernand van Olphen
Accessibility Advisor
Municipality of The Hague


De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer

From: Karl Brown
Date: Thu, Apr 20 2017 1:16AM
Subject: Re: Table with expandable row > focus management
← Previous message | Next message →

Yes, as by expanding the row the user's saying "I want to know what
information's behind this expandable row".

That said, without seeing the mark-up I can't comment whether it's a tab
order issue or whether it could be solved another way.

On Wed, Apr 19, 2017 at 6:39 PM, Fernand van Olphen <
= EMAIL ADDRESS REMOVED = > wrote:

> I have a question about focus management.
>
> The website I am reviewing is using a table with an expandable row. (This
> is the plugin being used: https://datatables.net/
> examples/api/row_details.html
> It is not keyboard accessible. But let us suppose it is.)
>
> This is what I should be able to do:
>
> - I TAB to the "plus-sign" in the first cell
> - I use ENTER or Spacebar
> - The expandable row expands
>
> However, the next element in the source order is the second cell, not the
> expandable row. So, should something be done with the focus management?
>
>
> Fernand van Olphen
> Accessibility Advisor
> Municipality of The Hague
>
>
> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u
> op: http://www.denhaag.nl/disclaimer
> > > > >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015

From:
Date: Thu, Apr 20 2017 11:54AM
Subject: Re: Table with expandable row > focus management
← Previous message | Next message →

Fernand remember to communicate to the user the possibility to perform this
actions. What about to use the role button in this element and being sure
that your element behave as a button as you suggest (click, enter and space
key). In the code I am talking about .details-control.
I saw that they create another row in the table after the button is
clicked. Be sure that this cell is not looking for a wrong header.

As well inside this cell, they create a new table. For that table you have
to be sure that the table is well labeled, I feel very confusing to have a
table inside another table.


On Thu, Apr 20, 2017 at 8:25 AM Karl Brown < = EMAIL ADDRESS REMOVED = > wrote:

> Yes, as by expanding the row the user's saying "I want to know what
> information's behind this expandable row".
>
> That said, without seeing the mark-up I can't comment whether it's a tab
> order issue or whether it could be solved another way.
>
> On Wed, Apr 19, 2017 at 6:39 PM, Fernand van Olphen <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > I have a question about focus management.
> >
> > The website I am reviewing is using a table with an expandable row.
> (This
> > is the plugin being used: https://datatables.net/
> > examples/api/row_details.html
> > It is not keyboard accessible. But let us suppose it is.)
> >
> > This is what I should be able to do:
> >
> > - I TAB to the "plus-sign" in the first cell
> > - I use ENTER or Spacebar
> > - The expandable row expands
> >
> > However, the next element in the source order is the second cell, not the
> > expandable row. So, should something be done with the focus management?
> >
> >
> > Fernand van Olphen
> > Accessibility Advisor
> > Municipality of The Hague
> >
> >
> > De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u
> > op: http://www.denhaag.nl/disclaimer
> > > > > > > > > >
>
>
>
> --
> Karl Brown
> Twitter: @kbdevelops
> Skype: kbdevelopment
>
> Professional Certificate Web Accessibility Compliance (Distinction),
> University of South Australia, 2015
> > > > >

From: Mallory
Date: Sun, Apr 23 2017 7:49AM
Subject: Re: Table with expandable row > focus management
← Previous message | Next message →

Yeah, I'm always of two minds when it comes to tables whose rows
expand to show whole new, inner, tables. Since nested tables can
easily become confusing, I've sometimes looked to see if I can avoid
the first table entirely. Sometimes I can't, though.

I don't know if this is a good pattern, but the first of the new row
could
have tabindex="-1" on it and the clicking of the show-more-rows
button could also send focus there manually with Javascript. I don't
think there's any spec on expanding tables in ARIA authoring practices
so there's no standard to follow. So, user testing might be awesome.

When one of my teams gets to recoding some tables that do this, it's
what I'm planning on implementing and having the UX Researchers
test this. However, I don't know when this will happen.

cheers,
_mallory

On Thu, Apr 20, 2017, at 07:54 PM, Raúl Martín wrote:
> Fernand remember to communicate to the user the possibility to perform
> this
> actions. What about to use the role button in this element and being sure
> that your element behave as a button as you suggest (click, enter and
> space
> key). In the code I am talking about .details-control.
> I saw that they create another row in the table after the button is
> clicked. Be sure that this cell is not looking for a wrong header.
>
> As well inside this cell, they create a new table. For that table you
> have
> to be sure that the table is well labeled, I feel very confusing to have
> a
> table inside another table.
>
>
> On Thu, Apr 20, 2017 at 8:25 AM Karl Brown < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Yes, as by expanding the row the user's saying "I want to know what
> > information's behind this expandable row".
> >
> > That said, without seeing the mark-up I can't comment whether it's a tab
> > order issue or whether it could be solved another way.
> >
> > On Wed, Apr 19, 2017 at 6:39 PM, Fernand van Olphen <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> > > I have a question about focus management.
> > >
> > > The website I am reviewing is using a table with an expandable row.
> > (This
> > > is the plugin being used: https://datatables.net/
> > > examples/api/row_details.html
> > > It is not keyboard accessible. But let us suppose it is.)
> > >
> > > This is what I should be able to do:
> > >
> > > - I TAB to the "plus-sign" in the first cell
> > > - I use ENTER or Spacebar
> > > - The expandable row expands
> > >
> > > However, the next element in the source order is the second cell, not the
> > > expandable row. So, should something be done with the focus management?
> > >
> > >
> > > Fernand van Olphen
> > > Accessibility Advisor
> > > Municipality of The Hague
> > >
> > >
> > > De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u
> > > op: http://www.denhaag.nl/disclaimer
> > > > > > > > > > > > > > >
> >
> >
> >
> > --
> > Karl Brown
> > Twitter: @kbdevelops
> > Skype: kbdevelopment
> >
> > Professional Certificate Web Accessibility Compliance (Distinction),
> > University of South Australia, 2015
> > > > > > > > > >
> > > >

From: Fernand van Olphen
Date: Sun, Apr 23 2017 12:06PM
Subject: Re: Table with expandable row > focus management
← Previous message | Next message →

Thanks everyone for your comments! They're very useful.


@ Mallory: maybe a design pattern could be that the trigger element ( the plus sign) should always be in a LAST column, not in a FIRST column.

Putting the trigger element in the last column will solve the focus problem, in my view.

Because: in that case the expandable row directly follows the trigger element in the source order, which makes traversing the DOM a lot more logical.

Or am I mistaken?

- Fernand

De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer

From: Mallory
Date: Sun, Apr 23 2017 2:43PM
Subject: Re: Table with expandable row > focus management
← Previous message | No next message

In our case, multiple rows can be expanded and the tables are often
sortable (so I would not be able to guarantee where the expander
rows are). The rows who appear should ideally come right after
the row who initialised their opening-ness, so I can always move
down by 1 row to find new rows (IF I don't move focus down into
those new rows myself).

cheers,

On Sun, Apr 23, 2017, at 08:06 PM, Fernand van Olphen wrote:
> Thanks everyone for your comments! They're very useful.
>
>
> @ Mallory: maybe a design pattern could be that the trigger element ( the
> plus sign) should always be in a LAST column, not in a FIRST column.
>
> Putting the trigger element in the last column will solve the focus
> problem, in my view.
>
> Because: in that case the expandable row directly follows the trigger
> element in the source order, which makes traversing the DOM a lot more
> logical.
>
> Or am I mistaken?
>
> - Fernand
>
> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u
> op: http://www.denhaag.nl/disclaimer
> > > >