WCAG: Navigable

[StephDriver]

Summary

Action Required

• Improve Journal page navigability #358
• Make navigation bar order consistent #357
• Add context to links #251
• Descriptive links within Citation Styles janeway#4084
• Improve accessibility of news article tags #359

Context

"Provide ways to help users navigate, find content and determine where they are."
This review considered:

1. Bypass Blocks
2. Page Titled
3. Focus Order
4. Link purpose (in context)
5. Multiple Ways
6. Headings and Labels
7. Focus Visible
8. Focus Not Obscured (Minimum)

Audit Results

Bypass Blocks

general

The drop-downs of the navigation menu are bypassed when not in use as per technique SRC28 which meets this requirement.
HTML5 semantic tags are used for nav, main, article etc providing the details required for bypassing content.
Heading elements have been used to structure content.

journal page structure

• on the Journals page, journals are listed alphabetically, but with no way to jump to a particular one. Especially an issue on mobile, as is it a long scroll.

Page Titled

Each page has a descriptive title using the title element.

Focus Order

the tab order/focus order of the menu does not match the physical layout on mobile screens, it follows the focus order of the desktop size where the search bar appears before the account.

Visual layout (on mobile):

• quick search
• About us
• Info for
• Learn
• Journals
• News
• Account

Focus Order

• About us
• Info for
• Learn
• Journals
• News
• quick search
• Account

Link Purpose (in context)

Ambiguous "find out more" style links

The following ambiguous links are used throughout the site:
"find out more" and "read more"
Either update the links to include context (e.g. find out more -> find out more about the OLH) or include an aria label that has the contextual version.

for example:

    <a 
            class="p-4 not-prose border rounded-full border-black flex gap-4 items-center" 
            href="https://www.asianetworkexchange.org">
       <span class="uppercase text-black font-poppins-bold text-xs tracking-widest">
             Go to journal
       </span>
       <img class="h-4" src="/static/hourglass/media/icons/arrow-black.svg" alt="">
  </a>

see https://www.w3.org/WAI/WCAG22/Techniques/general/G208.html for alternatives.

Citations

The way we present lists of articles as references, for example on the reading list page, doesn't provide links that make sense without the surrounding context. While the format is correct in terms of the academic reference, because the link often is simply the DOI rather than any kind of article title, this does not make sense when viewed without the rest of the reference.

for example:

<li class="max-lg:-indent-4 lg:-indent-9">
   <b>Adema</b>, <b>Janneke</b>, ‘Overview of Open Access Models for Ebooks in the Humanities and Social Sciences’, 
   <em>Oapen, </em>March, 2010 &lt;
   <a href="https://core.ac.uk/download/pdf/228144629.pdf">https://core.ac.uk/download/pdf/228144629.pdf</a>&gt; [accessed 15 February 2024]     
</li>

taking the link in isolation, https://core.ac.uk/download/pdf/228144629.pdf does not identify the link destination without the context of the rest of the item.

Filtering Tags

Tags are visually distinguished - but not marked up as such for assistive tech - their function is not clear. They need markup (aria?) of some kind to make clear their function.

<span class="bg-tan border-white border-2 rounded-full py-2 px-4">
                          embodiment
                        </span>

Further, some tags appear with a number in brackets denoting the count of articles with that tag, e.g. "Library Partnership(217)" on the news and announcements page. The purpose of the
number can be guessed sense in the visual context, but is unclear without.