Navigation Issues lacking the A. B. C's
Different look & Different functionality and Inconsistency

Navigation Issues lacking the A. B. C's

1.Tab index is not provided when needed for keyboard access. WCAG 2.1.1 level A The HTML tabindex atribute is responsible for controlling sequential access by keyboard navigation. When the user presses the Tab key the focus is shifted from one U.I. element to the next following the order in the DOM and/or the tabindex value. When tabindex is set to 0, the element is inserted into the tab order based on its location in the source code. As shown above, the main Safeway page uses tab index, but the Weekly Ad page does not.

This is clearly a case of in-consistency which is one of the biggest Usability errors on the web. With various include files in use, it is imperative to test and confirm both keyboard access and a proper reading order. It is no wonder Safeway was served a lawsuit for an inaccessible web site. Fact is, the entire global navigation lacks keyboard access on it's Weekly Ad page. There is no excuse for a lack of consistency from one page to another.

2. Visual Focus is not provided WCAG 2.4.7 level AA. Besides issues of being mouse dependent on the Weekly Ad page, the global menu on the Safeway main page fails to provide focus for the Weekly Ad menu item. Again, another in-consistency! Teams need to implement their focus CSS for all U.I. elements.

3. Skip Links of navigation are never provided. WCAG 2.4.1 level A. Its about being User Friendly to all Users by providing an inclusive design that implements all the WCAG accessibility standards, and not just some of them. Teams need to do their due diligence by making templates that have these repeatable links to prevent these code bugs.

4. Lack of Consistent Navigation and Identification WCAG 3.2.3 & WCAG 3.2.4 The global nav menus of the main page and Weekly Ad page do not match and one menu does not function with the keyboard. (related to the first issue above)

5. Frames for the Ads don't provide the necessary title labels. WCAG 2.4.2 level A . This is on all 4 ad frames on both of these pages and appears to be a global issue.

So, the Screen Reader User is merely notified that these are objects: frame 1, frame 2, frame 3, and frame 4. This is like the Soup Nazi not giving soup to all customers on Seinfeld!

Conclusion: Mandates from upper management need to employ governance toward providing a User Centered Design that will meet these 6 accessibility standards for equal access. Clearly, many web teams need to mature and improve their QA process for accessibility by ensuring consistency and due diligence.

If you show me a. Proper web A11y SME management; b. Proper testing tools like robotic scans & self testing; and c. Proper training certifications for the SME's and the lead U.I. members... then these 6 WCAG issues would likely never occur on any bug reports, and the majority of WCAG issues would not either. Its obvious web teams with these type of issues lack the A. B. C's of an A11y Program.

To view or add a comment, sign in

Others also viewed

Explore content categories