Improve web accessibility

demtario commented 3 years ago

Conclusions from https://github.com/demtario/hes-gallery/pull/11

1. Summary

There are some errors on demo page reported by WAVE — web accessibility evaluation tool.

Report.

2. Behavior

Behavior before

1X Missing alternative text
2X Empty button

3. Fix

3.1. Alternative text

Some default alt text should to img#hg-pic.

Missing alternative text:

Why It Matters

Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable.

3.2. Buttons

Empty button

Why It Matters

When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.

This can be solved by moving icon from CSS directly into button (in html structure), and by adding aria-label and title tag with "Next" or "Previous" text in them [source].

So to summarize, this:

<button id='hg-prev'></button>
<button id='hg-next'></button>

should be changed into:

<button id="hg-prev" title="Previous" aria-label="Next"> <img src="iconsource" /> </button>
<button id="hg-next" title="Next" aria-label="Previous"> <img src="iconsource" /> </button>

Kristinita commented 3 years ago

We are waiting for this feature to be implemented. It doesn’t have to be too hard.

Thanks.

demtario commented 2 years ago

Fixed in v1.4.12

Kristinita commented 9 months ago

Status: Not fixed fully :crying_cat_face:

1. Problem

Accessibility checkers still show errors for img#hg-pic.

Yes, hes-gallery dynamically adds alt text when the user starts interacting with the images, but if he doesn’t do that, alt="Something" should also be contained for the <img> stub.

2. Testing

I tested hes-gallery demo page.

2.1. WAVE Evaluation Tool

WAVE — browser extension for checking accessibility:

WAVE Evaluation Tool check hes-gallery demo

2.2. Pa11y

Pa11y — CLI accessibility checker:

D:\SashaDebugging>pa11y https://demtario.github.io/hes-gallery/demo/

Welcome to Pa11y

 > Running Pa11y on URL https://demtario.github.io/hes-gallery/demo/

Results for URL: https://demtario.github.io/hes-gallery/demo/

 • Error: The html element should have a lang or xml:lang attribute which describes the language of the document.
   ├── WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
   ├── html
   └── <html><head> <title>HesGallery</t…</html>

 • Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
   ├── #hg-pic
   └── <img id="hg-pic">

2 Errors

3. Environment

WAVE Evaluation Tool for Firefox 3.2.4.1
Pa11y 6.2.3

Thanks.

demtario / hes-gallery