[A11Y] Skip to content links are not within a landmark element and they are visually hidden even when focused on

[israelcefrin]

Issue Description

The links to skip content are not contained within a landmark region. This issue prevents users from having programmatic access to the section and even navigating to different sections of the page.
Also, the links to skip to content are not visually available when the user moves the focus to any of them. This results in a lack of clarity about the current status of the page since there is no visual indication of the focus location.

How to reproduce / Current behavior

1. Access the Demo Journal - Immersion: https://ojs34.demo.publicknowledgeproject.org/index.php/immersion/index
2. Press TAB key a few times
3. Check that status at the bottom of the page showing links to internal sections but not showing any link focused visually.

What application are you using?

OJS version 3.4

Stack

• Device: Laptop
• OS: MacOS Sequoia
• Browser: Firefox

Testing method

• Method: Keyboard
• Automated test: Browser plugin - IBM Equal Access Accessibility Checker (Firefox)

Action

1. Enclose the content within an HTML5 sectioning element with navigation landmark role (e.g., <nav aria-label="Skip to Content">List of links</nav>)

Or,

2. Add the "role" attribute on an enclosing element to specify an appropriate ARIA landmark value (e.g., <div role="navigation" aria-label="Skip to Content" class="cmp_skip_to_content">...</div>)

Additional information

HTML chunk of skip to content component:

<div class="cmp_skip_to_content">
  <a class="visually-hidden" href="#immersion_content_header">Skip to main navigation menu</a>
  <a class="visually-hidden" href="#immersion_content_main">Skip to main content</a>
  <a class="visually-hidden" href="#immersion_content_footer">Skip to site footer</a>
   </div>
</div>