jooa11y - The Joomla Accessibility Checker plugin.

When developing a Web site, accessibility has become an important component in recent years. With accessibility you make sure that your website can be viewed by everyone, including people with (visual) impairments.

Compare it with a physical store. When you have to cross a staircase or a high threshold to get into your store, it is not accessible for people in wheelchairs or for people with baby carriages. You will then lose visitors and sales. This also applies to your website. If the font sizes and colors are not correct, then some people will quickly leave your website.

In addition, good accessibility also benefits you indirectly. Google responds very positively to this and a well accessible website automatically ensures that your website ends up higher in the search engines.

But how do you know if you are doing everything right and what could you possibly improve? Joomla has a special plugin for this from Joomla 4.1, the Joomla Accessibility Checker. This Joomla a11y Checker visually flags general accessibility and usability problems. The plugin checks at about 50 points for errors or warnings and guides the site administrator to fix them. It is important to mention that it is, of course, an automatic system and you should always continue to use common sense yourself to think about whether or not you want to change some things.

This plugin was developed by Brian Teeman, who prepared the Sa11y script for use within Joomla.

How do you enable the Joomla a11y Checker?

To use the Joomla Accessibility Checker, first of all, you need to make sure that your Joomla version is 4.1 or higher.
You can then go to System " Plugins and search for "Joomla Accessibility Checker", This is a System plugin where you can set different options. Here you can enable the plugin.

Once the plugin is enabled, go to the frontend of the website and log in as administrator/superuser to see the plugin in action.

What points does the Joomla a11y Checker check for?

Jooa11y does a quick scan when loading the page. Each page is checked at about 50 points. If there are errors or warnings, it displays a notification badge with the total number of detected problems. Red indicates errors, while yellow indicates warnings only.

Clicking on the accessibility button or notification badge on the page will give you more information.

Below I will provide as complete an overview of all notifications as possible.

 

You can group accessibility issues into several categories.

• Text readability
• Titles and headers
• Texts
• Contrast
• Images
• Links
• Embedded content
• Forms
• Tables

Text readability

The Jooa11y plugin gives you an indication of the level of technical readability of your entered text. A good readability score is an indication that your text is understandable and easy to process. Beyond technical readability, the content, structure and design of the text are also important for overall readability. Therefore, this plugin does not guarantee the exact reading level but is only an indication.

The readability score is expressed in:
- Good
- Fairly difficult
- Difficult
- Very difficult

The readability score is based on the total number of words in the text, average number of words per sentence. And the percentage with complex words.

The Flesch-Kincaid readability test is used

 

Tips to improve the score

• Keep sentences around 15 words on average.
• Avoid sentences larger than 25 words.
• Split long sentences or use bullet points.
• Avoid complex words or words with many syllables.

 

Titles and headings

For the page to be understood, it is important that you place titles and headings correctly on your website. Web browsers, plug-ins and assistive technologies can use them to provide in-page navigation.

Empty header found!
It can happen that you accidentally place an empty header in your article. e.g. <h2></h2> You can also use this to increase the distance between different pieces of text, but actually this is not the right way. Remove this line or change the format from Heading to Normal or Paragraph to fix this.

 

Missing Heading 1
Make sure every page starts with an H1. Heading 1 should be the beginning of the main body of the content and is the main title that describes the overall purpose of the page.

 

Non-consecutive headings level used.
Headings should never skip levels. So in your text, always go from H1 to H2 to H3 etc.

 

Heading is too long!
Headings should be used to organize content and convey structure. They should be short, informative, and unique. Therefore, always keep Headings shorter than 160 characters (no more than one sentence).

 

Texts

All capital letters found.
Some screen readers may interpret text with all capital letters as an acronym (abbreviation) and will read each letter separately. In addition, some people find all capital letters harder to read and make them look like SHEETS.

 

Entire paragraph in bold and italic text
Bold and italic tags have semantic significance and should not be used to mark entire paragraphs. Bold text should be used to give strong emphasis to words and phrases. Italics should be used to highlight proper names (i.e. book and article titles), foreign words and quotations. Long quotations should be formatted as blockquotes.

 

Bold text is used as heading
A line of bold text may look like heading, but someone using a screen reader cannot determine if it is important or jumps to the content. Bold text should never replace semantic headings (Heading 2 to Heading 6).

 

Be sure to use semantic lists with bullets or numbers.
When using a semantic list, supporting technologies can convey information such as the total number of items and the relative position of each item in the list.

Contrast

This plugin also has a color contrast analysis tool that displays a page's color contrast issues according to the WCAG 2.1 Guidelines. Color contrast refers to how bright or dark colors stand out against each other on screens; specifically with respect to relative, grayscale brightness as perceived by the human eye.

When it comes to Web site accessibility, the contrast between the text and the text background is a concern for color-blind and other visually impaired users.

This text does not have enough contrast with the background.
The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text.

Images

Images should have Alt text that describes the information or function the image represents. This ensures that images can be used by people with different disabilities.

 

Missing Alt Text!
If the image conveys a story, mood or important information, be sure to describe it.

 

Image is used as a link but lacks Alt-text!
Make sure Alt text describes where the link takes you.

 

File extension within the Alt-text found.
Also, don't use the file name as Alt text. If the image conveys a story, mood or important information, make sure you describe the image.

 

If you don't want to provide alt text, you can also mark the image as a decorative image. The image will be ignored by assistive technology.

 

Alt text description on a linked image is too long.
As with (intermediate) headings, it is not wise to use texts that are too long. Consider the title of the page it links to as alt text.

 

Consider using the title of the page he is linking to as Alt text.
Don't use meaningless Alt text like "Click here," but make sure Alt text describes the destination page. Or replace the following Alt text with something more substantive.

 

Image link contains both Alt text and surrounding link text.
This can happen when you also place a link near an image and this image is (unintentionally) included in the link.

 

Links

Link text is not descriptive enough
Link text should always be clear, unique and meaningful. Avoid common words such as "click here"; or "more information."

 

Empty links
If you (accidentally) placed a link without text, it will also be noticed.

 

Links to PDF files
PDFs are considered Web content and should also be made accessible. PDFs often contain problems for people who use screen readers (missing structural tags or missing field labels) and people with limited vision (text does not reflow when enlarged).

• If this is a form, consider using an accessible HTML form as an alternative.
• If this is a document, consider converting it to a Web page.

 

Link to file without warning.
Links to a PDF or downloadable file (e.g. MP3, Zip, Word Doc) without warning. Specify the file type within the link text. If it is a large file, consider including the size of the file.

 

Link opens in new window/tab without warning.
Doing this can be disorienting, especially for people who have difficulty experiencing visual content. In addition, it is not always a good idea to control someone's experience or make decisions for them. Specify that the link opens in a new window within the link text.

 

Link has identical text as another link, but points to a different page.
Multiple links with the same text can cause confusion for people who use screen readers. Consider making the link more descriptive to distinguish it from other links.

 

Embedded content

Embedded content requires an accessible name that describes the content.
As with images and links, provide a unique title or aria-label attribute to the iframe element that describes the object.

 

Make sure all videos have subtitles and provide transcription for when podcasts.
Providing subtitles for all audio and video content is a Level A requirement. Subtitles support people who are deaf or hard of hearing.

Forms

There is no label associated with this entry.

Add an id to this entry, and add a corresponding for attribute to the label.

 

There is an id but no label associated with this entry.
Add a for attribute to the label that matches the id of this entry.

 

The label is invisible
Input has an accessible name, but make sure there is also a visible label.

 

Never use a reset button
The biggest problem with a reset button in a form is that it gets accidentally clicked and then the visitor loses all the information entered and has to start filling out again.
Having two buttons at the bottom of a form makes the interface cluttered and makes it harder for users to clearly see their next step. A small amount of wasted time is spent scanning the useless button and deciding which of the two buttons is the correct one.

When users want to modify their entered data, they are better off modifying the information by hand.

 

Tables

Using tables is something I always advise against, but sometimes you can't escape using it. Make sure you use the <th> elements properly to make it clear what information can be read in the table.

Empty table header found!
Table headers should never be empty. It is important to point out row and/or column headings to convey their relationship. This information provides context for people using assistive technology. Keep in mind that tables should only be used for tabular data.

 

Missing table headings!
Accessible tables need HTML formatting that gives header cells and data cells that define their relationship. This information provides context for people using assistive technology. Tables should only be used for table data.

 

Headings such as Heading 2 or Heading 3 should not be used in HTML tables.
Instead, specify table headings using the th element.