The purpose of this post is to add different types of content to check if it validates when running it through Wave (web accessibility evaluation tool), available at http://wave.webaim.org or as a google extension.

Update: The online Wave tool isn’t able to reach my site, due to a bug related to http/https. Soon to be fixed according to Jared Smith at WebAIM.org, who also recommended the chrome extension as an alternative.

Want to learn more about accessibility? Check out this free course on Udacity, made in collaboration with google.

Alt text and linked images:

Via https://webaim.org/blog/alt-text-and-linked-images/

General rules:

1. Decorative images should be given empty or null alt text. (they will then be skipped by screen readers)
2. When the content presented in an image is conveyed elsewhere, such as in a caption, the image may also be given empty alt text.
3. However, any time an image is the only content within a link, the image MUST be given alternative text that presents the function of that link.
4. However, if a link following the image has text that is identical to the image alt text, you should consider adding aria-hidden=»true» to the image, to prevent repetitiveness. Or change one of the texts to differentiate.

Test 1
If the content of the image is presented in the caption (aka in text directly succeeding the image), the image may be given empty alt text:

Photo of an amazing lightning storm

Wave test-result: Feature. All good. And empty alt is ignored by screen readers.

Test 2: Linked image, with alt, no caption. Should validate.

Wave test-result: Feature. All good. Has alt, and no identical caption.

Test 3: Linked image, url has title, image has empty alt, no caption

Wave test-result: Error: An image without alternative text results in an empty link.

Test 4: Linked image, no title on link, has alt tekst, and has caption.

This image shows some people.

Wave test-result: Feature. All good.

Test 5
Image inserted with wp, with caption and clickable image

Wave test-result: Feature. All good.

Test 6
Image inserted with wp, without caption, without alt, without link on image

Test 7:
Image inserted with wp, where the alt and caption is identical (very common)

Wave test-result: Yellow alert: The alternative text for an image is the same as nearby or adjacent text.

Test 8
P3.no main frontpage plug, original:

Wave test-result: Yellow alerts: The alternative text for an image is the same as nearby or adjacent text. + Adjacent links go to the same URL.

Possible solution 1: Set aria-hidden=»true» on image.

Wave test-result: Nope, even with aria-hidden=»true» on the linked image the yellow alerts are still there. The alternative text for an image is the same as nearby or adjacent text.+ Adjacent links go to the same URL.

Possible solution 2: Empty alt-text on image. Should make a screenreader ignore the image and the link.

Wave test-result: Nope. Red error. An image without alternative text results in an empty link. AND An image without alternative text results in an empty link.

Possible solution 3:
Put all content within one ahref. No value in alt. (In html5 it is also allowed to wrap an ahref around a div)
Read https://www.w3.org/TR/WCAG20-TECHS/H2.html

Wave test-result: All good.

Testing same solution on original plug. Ahref around everything, no alt-text on image role=»text» on h1 plus ingress (to allow for no visual cue that it is a link??)

Swifts kledelige stilskifte

Vellykket lek med form på hennes nye album.

Wave test-result: Jesus.
Red errors: An image without alternative text results in an empty link + A link contains no text.
Yellow alerts: Adjacent links go to the same URL x2.

Test 9
Nrk.no frontpage plug.

Wave test-result: Red error: A link contains no text. + Yellow alert: Adjacent links go to the same URL.