WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table with expandable row > focus management

for

From: Mallory
Date: Apr 23, 2017 7:49AM

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