WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Sections and links on collapsable menu

for

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

From:
Date: Mon, Apr 29 2019 5:16PM
Subject: Sections and links on collapsable menu
No previous message | Next message →

I am sure this question has been answered, but I didn't find it in the
threads.

I am working in the creation of a menu that is not the main menu of the
webpage.

This menu allows the user to load content on a video player next to this
menu.
This menu has to levels: section and content.

I am debating my self in a simple structure with list element and
aria-expanded. And adding a title in the top that clarifies the block.

Currently, we are using 'role="tab"' for the sections and 'role="link"' for
the internal elements. And currently, we don't support navigation between
tabs using the keyboard arrows. So the role tab is referring to the list of
links an not the element that load content in the player. As well more than
one section can be open.

Another complication is that the link levels show you the link to
additional resources.

Any thoughts?
Examples you consider well done with this or a similar structure?

From: Isabel Holdsworth
Date: Tue, Apr 30 2019 5:59AM
Subject: Re: Sections and links on collapsable menu
← Previous message | Next message →

Hi Raúl,

If the links are to additional resources, what's the element that
loads content into the video player, and where does it fit in the menu
structure?

Is the menu vertical or horizontal?

If it's vertical then you might be able to mark it up as an accordion,
with each section being a button wrapped in a heading. When the button
is clicked, its branch is opened or closed.

Here's an implementation of an accordion that you could copy and
change to suit what you need. This one has only one branch open at a
time, but you could have as many as you want open I guess.

https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html

Cheers - hope this helps.

Isabel

On 30/04/2019, Raúl Martín < = EMAIL ADDRESS REMOVED = > wrote:
> I am sure this question has been answered, but I didn't find it in the
> threads.
>
> I am working in the creation of a menu that is not the main menu of the
> webpage.
>
> This menu allows the user to load content on a video player next to this
> menu.
> This menu has to levels: section and content.
>
> I am debating my self in a simple structure with list element and
> aria-expanded. And adding a title in the top that clarifies the block.
>
> Currently, we are using 'role="tab"' for the sections and 'role="link"' for
> the internal elements. And currently, we don't support navigation between
> tabs using the keyboard arrows. So the role tab is referring to the list of
> links an not the element that load content in the player. As well more than
> one section can be open.
>
> Another complication is that the link levels show you the link to
> additional resources.
>
> Any thoughts?
> Examples you consider well done with this or a similar structure?
> > > > >

From:
Date: Tue, Apr 30 2019 10:26AM
Subject: Re: Sections and links on collapsable menu
← Previous message | No next message

Hi Isabel, thanks for the answer. To clarify more info in my question:

Every element in the second level changes the content in the video player.
Some of them have an extra button that allows accessing to additional
resources.

And yes, this solution is more aligned to my initial thought.

Thanks again!

On Tue, Apr 30, 2019 at 4:59 AM Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi Raúl,
>
> If the links are to additional resources, what's the element that
> loads content into the video player, and where does it fit in the menu
> structure?
>
> Is the menu vertical or horizontal?
>
> If it's vertical then you might be able to mark it up as an accordion,
> with each section being a button wrapped in a heading. When the button
> is clicked, its branch is opened or closed.
>
> Here's an implementation of an accordion that you could copy and
> change to suit what you need. This one has only one branch open at a
> time, but you could have as many as you want open I guess.
>
> https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html
>
> Cheers - hope this helps.
>
> Isabel
>
> On 30/04/2019, Raúl Martín < = EMAIL ADDRESS REMOVED = > wrote:
> > I am sure this question has been answered, but I didn't find it in the
> > threads.
> >
> > I am working in the creation of a menu that is not the main menu of the
> > webpage.
> >
> > This menu allows the user to load content on a video player next to this
> > menu.
> > This menu has to levels: section and content.
> >
> > I am debating my self in a simple structure with list element and
> > aria-expanded. And adding a title in the top that clarifies the block.
> >
> > Currently, we are using 'role="tab"' for the sections and 'role="link"'
> for
> > the internal elements. And currently, we don't support navigation between
> > tabs using the keyboard arrows. So the role tab is referring to the list
> of
> > links an not the element that load content in the player. As well more
> than
> > one section can be open.
> >
> > Another complication is that the link levels show you the link to
> > additional resources.
> >
> > Any thoughts?
> > Examples you consider well done with this or a similar structure?
> > > > > > > > > >
> > > > >