accessibility testing: non-visual considerations

Looking at the following image, what does the text shown read?

Splitter. That's correct. It's quite a clever design: ‘’SPLI. TTER.” See what they did there?

To achieve the above we could do something like this:

<h1 className='text-lg text-green-500'>
	SPLI
	<br />
	TTER
</h1>

Now, take a moment and guess how a screen reader would narrate the above.

Not Splitter. Also correct.

Instead, a screen reader would narrate the above as "S. P. L. I. TTER." *worries in how did this happen.

This observation was increasingly disconcerting as I began to recall all the places I (intentionally) littered <br> elements around to achieve a visual effect in a design. Where else does does this issue crop up.

But, (thankfully) this feeling was short lived. After testing the above with different combinations of words and sentences, I realised the break in words in the narration is warranted and to be expected. The screen reader was taking its best guess at what the word might be. Visually, we can see the title reads 'Splitter', but for users with visual impairments who rely on screen readers to navigate our web pages, they can't.

This drives home an important consideration concerning accessibility: (first and foremost) the content and structure our web pages should be accurately reflected in the HTML.

This isn't the case with the above heading. Visually, it reads 'Splitter', but in the HTML it actually reads 'Spli. Tter' because of the <br> element that's breaking the word in two (see what I did there). 'Spli' isn't much of a word, and machines don't have the deductive reasoning or creativity we have as humans to elegantly fumble our way through and come to say 'Spli'. So, the safest and next best guess for our machines would be to pronounce 'Spli' as 'S. P. L. I.'. Not bad a guess.

To fix this, we can add an aria-label attribute to the <h1> element to give the heading a more accessible name as shown below.

<h1 className='text-lg text-green-500' aria-label='Splitter'>
	SPLI
	<br />
	TTER
</h1>

Now, let's take a moment and guess how a screen reader would narrate the above.

Splitter. That's correct. And now everyone will know it's Splitter.