Re: Use of tablist role for tabbed content

Thanks Paul.

The demo I posted can be transformed into a accordion by simply adding a
class (“accordion") to the container.
Try to replace <div id="tabpanel" class="widget”> with <div id="tabpanel"
class="widget accordion”> and see how it goes...

As a side note, I prefer the way “my” widget works compared to the AccDC
demo because users are not forced to tab through all focusable elements
inside an open panel before reaching the next header (since users can
navigate through headers via arrow keys).

> I fear that it's a little pointless to tell the SR user that they're
interacting with a set of tabs when there's a simpler implementation to go
with

As I mentioned in the article, I think it’s too bad that we have to convey
this simple construct (headings/divs) as a widget which is a much more
complex mental model.

-- 
Thierry Koblentz
Sent with Airmail

On May 24, 2017 at 07:41:46, Paul Sandwell (paul.sandwell@heathwallace.com)
wrote:

Excellent article Thierry! This is the direction I started to lean towards
(the demo definitely saved me having to build it to try it out!).

However now I'm beginning to wonder, as horizontal tabs are probably more
of visual design consideration, would it make sense to treat is as an
accordion for a screen reader user? (Similar to the point Bryan made in a
separate response, something like this: http://whatsock.com/tsg/
Coding%20Arena/ARIA%20and%20Non-ARIA%20Accordions/ARIA%
20Accordion%20(Internal%20Content)/demo.htm).

I fear that it's a little pointless to tell the SR user that they're
interacting with a set of tabs when there's a simpler implementation to go
with. Or would this thinking make the tablist role completely redundant?

On 23 May 2017 at 18:32, Thierry Koblentz <thierry.koblentz@gmail.com>
wrote:

> For what it is worth, this is a different take on Tab List/Panels:
> http://cssmojo.com/tab-panel-the-right-way/
>
> Demo: http://codepen.io/pankajparashar/full/oJEAF/
>
> --
> Thierry Koblentz
> Sent with Airmail
>
> On May 23, 2017 at 02:42:28, Paul Sandwell (paul.sandwell@heathwallace.com)
> wrote:
>
> Hi all,
>
> Recently I've been doing research on how to tackle accessibility for a
> typical set of "tabbed content", where are page with lots of content is
> split into smaller tabs. I believe this may have come up in the past but I
> have a few additional concerns.
>
> I understand that the WAI-ARIA design pattern is the most preferred
> approach (https://www.w3.org/TR/wai-aria-practices/#tabpanel) as it's
> used to emulate native OS behaviour. This is great, however:
>
>    - How well does this translate to mobile devices? What about larger
>    touch only devices?
>    - Wouldn't the change in keyboard behaviour confuse an inexperienced
>    sighted keyboard user?
>
> Is it that we may be using the tablist role incorrectly? Tablist sounds
> like it's more suited to creating rich web applications (similar to
> menubar). Maybe we should be using a simpler aria-expanded="true|false"
> style approach for content based tabs instead?
>
> Any thoughts?
>
> Thanks in advance,
> Paul
>
> --
>
> Paul Sandwell
>
>
> UI Team Lead
> *HeathWallace*
> Email: paul.sandwell@heathwallace.com
> Phone: +44 (0)118 9561 757
> LinkedIn: https://www.linkedin.com/profile/view?id=79070203
>
> HeathWallace Ltd, 5-9 Merchants Place, Reading, RG1 1DT, UK
>
> The information in this message is intended only for the individual or
> entity to whom it is addressed. It may contain privileged and confidential
> information that is exempt from disclosure by law and if you are not an
> intended recipient, you must not copy, distribute or take any action in
> reliance on it. Any dissemination of this communication is strictly
> prohibited. If you have received this message in error, please notify
> info@heathwallace.com.
>
> Warning: Computer viruses may be transmitted or downloaded on to your
> computer system via email communication. HeathWallace operate antivirus
> software.
>
> However it is the recipient's responsibility to take any action necessary
> to prevent computer viruses being transmitted in this way. HeathWallace
> disclaim all responsibility which arises directly or indirectly from such
> transmission or computer viruses.
>
> Registered in England: 4343367
>
> Registered address: 5-9 Merchants Place, Reading, RG1 1DT
>
>


--

Paul Sandwell


UI Team Lead
*HeathWallace*
Email: paul.sandwell@heathwallace.com
Phone: +44 (0)118 9561 757
LinkedIn: https://www.linkedin.com/profile/view?id=79070203

HeathWallace Ltd, 5-9 Merchants Place, Reading, RG1 1DT, UK

The information in this message is intended only for the individual or
entity to whom it is addressed. It may contain privileged and confidential
information that is exempt from disclosure by law and if you are not an
intended recipient, you must not copy, distribute or take any action in
reliance on it. Any dissemination of this communication is strictly
prohibited. If you have received this message in error, please notify
info@heathwallace.com.

Warning: Computer viruses may be transmitted or downloaded on to your
computer system via email communication. HeathWallace operate antivirus
software.

However it is the recipient's responsibility to take any action necessary
to prevent computer viruses being transmitted in this way. HeathWallace
disclaim all responsibility which arises directly or indirectly from such
transmission or computer viruses.

Registered in England: 4343367

Registered address: 5-9 Merchants Place, Reading, RG1 1DT