TotalValidator checks your website regarding various web and accessibility standards by the press of a button. Building valid code is one of the highest goals developers should strive for. TotalValidator helps a lot with achieving this.

Installation

Total Validator Basic is a software application whose purpose is to look for broken links within a specified website, as well as check the spelling for several languages. Magento: How to solve css validation using Total Validator tool in Magento 2?Helpful? Please support me on Patreon: https://www.patreon.com/roelvandepaarWit.

Download TotalValidator and run the installer. Houseparty download for mac. Then install Chrome and Firefox extensions.

Configuration

Under Validations, we recommend to disable Check for broken links, as it slows the tool down.

Usage

After launching it, open your website in either Firefox or Chrome, and activate TotalValidator by clicking its icon in the browser toolbar.

Inspect the displayed results (which vary from parsing errors to very specific accessibility warnings).

Which ones are relevant for accessibility?

The bookmarklet Filter relevant TotalValidator results is an attempt to give a pragmatic answer to this question. It scans the summary of a results page, looking out for the following 5 types of error codes, highlighting them visually:

• Incomplete start/end tags
• Invalid nesting
• Duplicate attributes
• Duplicate IDs
• Invalid ARIA

It shows a summary of its findings, as well:

Check out the bookmarklet's description text for more details.

ARIA provides an attribute which allows to hide elements from screen readers. It works pretty uniformly on non-focusable elements in modern browsers and screen readers, but it still has some very odd peculiarities. So you better try to create solutions that do not need it.

Background

While it is only possible using a workaround to hide elements visually but leave it there for screen readers (see Hiding elements visually by moving them off-screen), there exists a specific ARIA attribute aria-hidden to hide elements from screen readers (but leaving them there visually).

Intended use

The following paragraph is ignored by screen readers: Download and install xvid codec for mac.

Peculiarities and side effects

All children hidden

When setting aria-hidden='true' to an element, all children will also be hidden. It is not possible to override this by setting aria-hidden='false' to a child element.

Does not work on focusable elements

You must never use aria-hidden='true' on any focusable element, or on any element that itself contains focusable children.

This is due to the fact that aria-hidden indeed is respected by screen readers even on focusable elements while reading them in browse mode - but during usage of focus mode, focusable elements are still reachable by the browser (with the Tab key), which leads to strange (or missing) announcements of hidden elements.

Not hidden anymore as description

Elements hidden using aria-hidden are not hidden anymore when referencing them using aria-describedby.

Total Validator Pro

In focus mode, a screen reader's announcement of the link will be:

Please click me. Link. This link is not great.

But the 'not' in the describing paragraph is hidden using aria-hidden. Look at it in browse mode, and it will be announced by screen readers like this:

This link is great.

Very confusing stuff.

Real world use (and conclusion)

While you can use aria-hidden='true' on any element that is not focusable and does not contain any focusable element itself, you must never use it on focusable elements. Also be careful when referencing hidden elements using aria-describedby.

Website Validation Tool

In general: whenever you think about hiding something from any audience, better ask yourself whether this is really a good solution. Most of the time it is better to create a solution that works the same way for everybody, and which does not need any shaky ARIA.