Accessibility - No Skip Link/Bypass Block

[dylanhthomas]

nopCommerce version: 4.3

Steps to reproduce the problem:

1. Navigate to a product page of demo site (as an example): https://demo.nopcommerce.com/build-your-own-computer
2. Hit 'tab' (and count the number of tabs) until you get to the first link of the page's unique content (in this case the image gallery)

Result

It takes 45 tab clicks to get to the content of the page because the global navigation has to be traversed first. This happens on every page.

Expected Results

User is able to skip repeated content if desired by having a "skip link" (also know as a "bypass block") available as the first item in the tab order. User should be able to:

• tab once
• follow skip link (enter)
• tab once
• have item selected

Fix

Implement a skip link. This has 3 components:

1. • the link itself
2. • the target anchor it links to
3. • the styles to only show the skip link when focused and position it appropriately

1 - Link

in _src/Presentation/Nop.Web/Views/Shared/Header.cshtml

<div class="header"> @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HeaderBefore }) becomes

<div class="header"> <a class="skip" href="#main">Skip Navigation</a> @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HeaderBefore })

2 - Anchor

in: _src/Presentation/Nop.Web/Views/Shared/Root.cshtml

<div class="master-wrapper-page">

changes to:

<div class="master-wrapper-page" id="main" role="main">

(the id enables the link. the role applies the correct aria landmark to the main section of the page)

3 - Styles

Following is added to: src/Presentation/Nop.Web/Themes/DefaultClean/Content/css/styles.css src/Presentation/Nop.Web/Themes/DefaultClean/Content/css/styles-rtl.css

a.skip {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;
}
a.skip:active, 
a.skip:focus, 
a.skip:hover {
    position: initial;
    top: 0;
    left:0;
    display: block;
    height: auto;
    margin: 3px 0;
    overflow: visible; 
    padding: 2px;
    color: #444444;
    background: #ffffff;
    text-decoration: underline;
    text-align: center;
    width: 100%;
    font-size: 16px;
}

WCAG Guideline

https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html

[dylanhthomas]

Should be resolved by PR #5034

[dylanhthomas]

@AndreiMaz I have updated the ticket with more information. Hopefully this helps. It aligns with the format and info in the tickets recently submitted by @adamjohnson

[AndreiMaz]

Regarding all accessibility tasks. We have the "accessiBe" plugin available out of the box. It's the #1 Fully Automated Web Accessibility Solution for ADA & WCAG Compliance

[dylanhthomas]

accessiBe is not a good solution to bypass good practices that are straight-forward to implement. I would urge reconsideration in this matter, especially as there have been many lawsuits lately against sites using accessiBe.