No alt at all

An img with no alt attribute is the one accessibility fault a machine detects perfectly -- and the reason a clean scan proves so little.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

alt="image" passes every scanner. So does an empty alt on the one photograph carrying the story. Presence is machine-checkable; usefulness is a judgement somebody has to make.

How to think about it

querySelectorAll('img:not([alt])') in the console finds them all in a second. Then read the ones that do have alt, because that is the part nothing can do for you.

Worked example

<img src="x" alt="Ada Lovelace, 1843"><img src="x" alt=""><img src="x">

hasAttribute('alt') is false for the third one only. The other two both have alt, and only one of them says anything.

Your turn

The selector that finds images with no alt attribute.

img:not([])

The trap

For a chart, put the trend in the alt and the numbers in a table beside it. Every data point in an alt attribute is unusable, and the table is better for everybody.

Practise no alt at all on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.