WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible browse lists

for

From: Murphy, Sean
Date: May 7, 2020 6:01PM

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 REMOVED> > On Behalf Of glen walker
Sent: Friday, 8 May 2020 8:59 AM
To: WebAIM Discussion List < <EMAIL 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 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
> >