Accessibility guidelines for developers

Overview

Until ADA guidelines are finalized, WCAG 2.1 A (at the minimum) or WCAG 2.1 AA will be used instead. Developers must observe the following.

Fix items that can’t be detected by HTML Code Sniffer

Step 1 Jquery Accessible Nav

Submenus should be accessible using a keyboard.
Try navigating the submenus by pressing the “Tab” key.
This is how visually impaired people usually navigate a website.
You may use the jquery-accessible-nav plugin.

Step 2 Changing ID

In home.php, change the id of the first widget after the slideshow to content.
This must be done to make the Skip to content link functional.

Step 3 Install and activate POJO Accessibility

On POJO accessibility .

Step 4 Accessibility Settings

Note

Deactivate the plugin if the site has Accessibe, Userway, or another accessibilty widget.

On WP Admin→Accessibility, use the following settings:

Add outline focus: Enable
Skip to content link: Enable
Remove target attribute from links: Disable
Add landmark roles to all links: Enable
Sitewide accessibility: Enable
Remember user for: 12 hours

On WP Admin→Accessibility→Display Toolbar, use the following settings:

Display Toolbar: Visible Desktop
- Set to Disable if the client doesn’t want the accessibility widget but wants to keep the skip to content link and focus indicators.

Step 6 Accessibility Settings

On WP Admin→Accessibility→Customize→Accessibility, use the following settings:

Toolbar Icon: One Click
Offset from top (Desktop): Leave this blank
Toggle Button Background: Match with the main accent of the website
Active Background: Match with the main accent of the website

Step 7 Child Theme

Add the following to style.css of the child theme

terminal


body #pojo-a11y-toolbar {
  bottom:0 !important;
  top: auto !important;
}
 
body #pojo-a11y-toolbar,#pojo-a11y-toolbar-left ,#pojo-a11y-toolbar-toggle {
  top:auto !important;
  bottom:0 !important;
}

Note

Elements such as slider arrows and the hamburger menu must have an accessibility name. https://prnt.sc/u5vnq2

Fix the issues found by the HTML CodeSniffer bulk scanner

Step 1 Fix issues.

Go through each page one by one and fix the issues

Step 2 HTML CodeSniffer bookmarklet

You may use the HTML CodeSniffer bookmarklet for testing each page so you don’t have to run the bulk scanner again.

Step 3 G18 and G145

For iFrameinder, IDX Broker, Diverse Solutions, IxCore, and other third-party IDX pages, only fix the following issues:

G18
G145