What Do HTML Elements Sound Like?

A video overview of HTML elements and how they sound when being navigated with assistive technology like the screenreader VoiceOver.

• What does a fieldset sound like?
• What does an img sound like?
• What does a list sound like?
• What does a br sound like?
• What does a time sound like?

What does a fieldset sound like?

A <fieldset> can be used to group similar fields together. Think radiobuttons, checkboxes, or a billing and shipping address. Use the <legend> element to describe the group.

Assistive technology can now tell what group the inner fields belong to.

Retweet “what a fieldset sounds like” and help raise accessibility awareness

Fieldsets can be nested, please show restraint as the NVDA screenreader will read out the fieldset legend for each focussed field.

On first sight, the radios might seem like a list because they are. It might be tempting to wrap them in a list element. Note that in the video above the assistive tech announces the total radio buttons and the current index without a list. If you wrap the radio buttons in a list the screenreader will announce the index and amount twice.

What does an img sound like?

The <img> element describes an image on the page. Always add the alt atrtribute. Set the alt attribute to an empty value if the image is decorative, it is decorative if it doesn’t add any additional information to the content. If it does add information to the content, add a description of the image contents to the alt attribute instead of leaving it empty.

Assistive technology will read out the alt attribute value. If the alt attribute is not set it will read out the image filename, which should be avoided at all costs.

Retweet “what an img sounds like” and help raise accessibility awareness

As you can see, CSS background images are ignored by screenreaders as they should only be used for decorative purposes, the screenreader also skips over the image element with the empty alt attribute.

What does a list sound like?

The <ul> element describes a list of items in no particular order. Use an <ol> if the list items wouldn’t make sense when re-ordered (e.g. steps in an IKEA manual, search results, article comments).

Assistive technology will inform the user of the list length, the focussed item symbol name or number, and its index.

Retweet “what a list sounds like” and help raise accessibility awareness

Sometimes when writing HTML every bit of content starts to look like a list. A good question to ask yourself to truly know if you’re looking at a list is: “Should a screenreader announce the number of items?” If that’s a yes, then you got yourself a list.

What does a br sound like?

A <br> element forces a line break but should only be used when the location of the break is semantically important, for example when formatting a poem or address.

Assistive technology will insert an appropriate pause when encountering the break.

Retweet “what a br sounds like” and help raise accessibility awareness

What does a time sound like?

Use the <time> element with a datetime attribute to describe dates, times, and durations. A time, date, or a datetime are all supported as long as supplied in ISO 8601 format, so 09:45 will work and 9:45 won’t.

Timezones don’t seem to work, when set, VoiceOver ignores the datetime attribute.

Assistive technology can now tell the user the time or duration in their native language.

Retweet “what a time sounds like” and help raise accessibility awareness

Conclusion

I hope this list of VoiceOver soundbites helps you understand how visually impaired users might be using your web product. Check back later, I plan to extend the list with additional videos regularly.