E-mail List Archives

Search E-mail List Archives for

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

From: Kirsty.Baker
Date: Thu, May 07 2020 11:18AM
Subject: Accessible browse lists
No previous message | Next message →

Hello

I'm working with a developer to update a repository website which includes different ways of browsing to access the content. Here's an example from one of the browse pages, where each heading would link to a list of documents relevant to that heading. These browse lists are often quite long and this is just an extract:

Faculty of Arts and Social Sciences (FASS) (10229)

* Arts and Humanities (2965)

* Art History (390)
* Classical Studies (440)
* English & Creative Writing (896)
* History (620)
* Music (398)
We are trying to come up with an accessible way to present these browse lists, particularly thinking of any improvements we might be able to make for screen reader users to make the hierarchy of the categories clear. Does anyone have any thoughts on how to create an accessible browse list like this one? Would it be appropriate to add headings to these categories - or would that not be a good idea because there is no content below the headings?
Many thanks
Kirsty

From: glen walker
Date: Thu, May 07 2020 4:58PM
Subject: Re: Accessible browse lists
← Previous message | Next message →

Using proper list nesting is the first step. If you have a <ul> nested in
a <ul> nested in a <ul>, then the screen reader can convey the number of
list items in each list and some screen readers will tell you the nesting
level, which is really helpful.

Having headings could help but you'd have to decide if the heading is a
link itself. If the headings are just static text, then the links under
that heading would be a separate sublist. Something like

<ul>
<li>
<h2>first group</h2>
<ul>
<li><a href=".">link a</a></li>
<li><a href=".">link b</a></li>
<li>
<h3>first subgroup</h3>
<ul>
<li>
<li>
</li>
</ul>
</li>
<li>
<h2>second group</h2>
<ul>
<li><a href=".">link c</a></li>
<li><a href=".">link d</a></li>
</ul>
</li>
</ul>


On Thu, May 7, 2020 at 11:18 AM Kirsty.Baker < = EMAIL ADDRESS REMOVED = >
wrote:

> Hello
>
> I'm working with a developer to update a repository website which includes
> different ways of browsing to access the content. Here's an example from
> one of the browse pages, where each heading would link to a list of
> documents relevant to that heading. These browse lists are often quite long
> and this is just an extract:
>
> Faculty of Arts and Social Sciences (FASS) (10229)
>
> * Arts and Humanities (2965)
>
> * Art History (390)
> * Classical Studies (440)
> * English & Creative Writing (896)
> * History (620)
> * Music (398)
> We are trying to come up with an accessible way to present these browse
> lists, particularly thinking of any improvements we might be able to make
> for screen reader users to make the hierarchy of the categories clear. Does
> anyone have any thoughts on how to create an accessible browse list like
> this one? Would it be appropriate to add headings to these categories - or
> would that not be a good idea because there is no content below the
> headings?
> Many thanks
> Kirsty
>
> > > > >

From: Murphy, Sean
Date: Thu, May 07 2020 6:01PM
Subject: Re: Accessible browse lists
← Previous message | Next message →

All,

From a screen reader user point of view with lists, I find nested lists can distract from the meaning. Especially when the list has only one item within it. For example:

<ul>
<ul>
<li> text </li>
</ul>
<ul>
<li> text </li>
</ul>
<ul>
<li> text </li>
</ul>
</ul>

The use of landmarks is another possibility. Within the land mark you can have the related lists. Provide another means of structuring your content.

Sean

Sean Murphy | Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Friday, 8 May 2020 8:59 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible browse lists

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

Using proper list nesting is the first step. If you have a <ul> nested in a <ul> nested in a <ul>, then the screen reader can convey the number of list items in each list and some screen readers will tell you the nesting level, which is really helpful.

Having headings could help but you'd have to decide if the heading is a link itself. If the headings are just static text, then the links under that heading would be a separate sublist. Something like

<ul>
<li>
<h2>first group</h2>
<ul>
<li><a href=".">link a</a></li>
<li><a href=".">link b</a></li>
<li>
<h3>first subgroup</h3>
<ul>
<li>
<li>
</li>
</ul>
</li>
<li>
<h2>second group</h2>
<ul>
<li><a href=".">link c</a></li>
<li><a href=".">link d</a></li>
</ul>
</li>
</ul>


On Thu, May 7, 2020 at 11:18 AM Kirsty.Baker < = EMAIL ADDRESS REMOVED = >
wrote:

> Hello
>
> I'm working with a developer to update a repository website which
> includes different ways of browsing to access the content. Here's an
> example from one of the browse pages, where each heading would link to
> a list of documents relevant to that heading. These browse lists are
> often quite long and this is just an extract:
>
> Faculty of Arts and Social Sciences (FASS) (10229)
>
> * Arts and Humanities (2965)
>
> * Art History (390)
> * Classical Studies (440)
> * English & Creative Writing (896)
> * History (620)
> * Music (398)
> We are trying to come up with an accessible way to present these
> browse lists, particularly thinking of any improvements we might be
> able to make for screen reader users to make the hierarchy of the
> categories clear. Does anyone have any thoughts on how to create an
> accessible browse list like this one? Would it be appropriate to add
> headings to these categories - or would that not be a good idea
> because there is no content below the headings?
> Many thanks
> Kirsty
>
> > > archives at http://webaim.org/discussion/archives
> >

From: Murphy, Sean
Date: Thu, May 07 2020 6:17PM
Subject: Re: Accessible browse lists
← Previous message | No next message

Kirsty

Another method other than what I have already posted. Using accordians is another solution or tablists. The ARIA 1.1 author guide has examples you can start with. I would suggest you have everything collapsed if using an accordian and allow the user to show or hide the content.

Sean




Sean Murphy | Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Kirsty.Baker
Sent: Friday, 8 May 2020 3:18 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Accessible browse lists

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

Hello

I'm working with a developer to update a repository website which includes different ways of browsing to access the content. Here's an example from one of the browse pages, where each heading would link to a list of documents relevant to that heading. These browse lists are often quite long and this is just an extract:

Faculty of Arts and Social Sciences (FASS) (10229)

* Arts and Humanities (2965)

* Art History (390)
* Classical Studies (440)
* English & Creative Writing (896)
* History (620)
* Music (398)
We are trying to come up with an accessible way to present these browse lists, particularly thinking of any improvements we might be able to make for screen reader users to make the hierarchy of the categories clear. Does anyone have any thoughts on how to create an accessible browse list like this one? Would it be appropriate to add headings to these categories - or would that not be a good idea because there is no content below the headings?
Many thanks
Kirsty