Pkp-lib: Skip links and anchors in the default theme should appear within landmarks

Created on 1 Nov 2019 · 13Comments · Source: pkp/pkp-lib

Our skip links should be moved inside the role="banner" element:

<header role="banner">
  <nav ...>
    <a href="#main">...</a>
    ...
  </nav>
</header>

And the anchors where those links skip to should be moved into the landmark role elements they pertain to:

<main role="main">
  <a id="main"></a>
  ...

Source

NateWr

Most helpful comment

@israelcefrin I'll leave it at In Progress until the PRs are merged and then move to Needs Documentation.

NateWr on 20 Apr 2020

👍2

All 13 comments

Being fixed as part of this branch (PR to come):
https://github.com/thinkbulecount2/pkp-lib/tree/i5175_fix_h1_header
https://github.com/thinkbulecount2/ojs/tree/i5175_fix_h1_header

thinkbulecount2 on 13 Nov 2019

PR: https://github.com/pkp/pkp-lib/pull/5343
cc: @NateWr

thinkbulecount2 on 11 Dec 2019

Hi @NateWr and @thinkbulecount2 , I've reviewed this one. The skip to content links are working fine and accessible through keyboard. Screen reader recognize it as links.

I'd just to recommend to move the skip navigation as the first thing of the HEADER container, before the Journal title H1. I mean, move the cmp_skip_to_content to above of pkp_site_name_wrapper

Also, adding an aria-label="Skip Links to content", e.g.:

...

This will announce to the screen reader user what kind of navigation this first menu will provide, e.g:
"Skip links to content, navigation".

One last thing, I don't know whether it is related. There is a button on the very top of page that is shown when there's no CSS loaded but it is not read or announced by screen readers like voice over (I didn't tested in Jaws though).

See the image:

Is this related to main navigation menu? And it is meant to not be announced as well?

israelcefrin on 16 Apr 2020

Thanks @israelcefrin. The Open Menu button should not be announced. It is only for visual users to toggle the menu open/closed on small devices. The menu is available either way for screen readers.

Ok, so @thinkbulecount2 it looks like we still need the following changes:

[x] {include file="frontend/components/skipLinks.tpl"} should be moved to the first child element of <header> in frontend/components/header.tpl.
[x] The <nav> tag in /frontend/components/skipLinks.tpl should have the aria-label="Jump to content links" attribute.