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?
<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.
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?
<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.
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
What does a list sound like?
<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.
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?
<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.
What does a time sound like?
<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
Timezones don’t seem to work, when set, VoiceOver ignores the
Assistive technology can now tell the user the time or duration in their native language.
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.
I use Twitter to share new webdevelopment tips and tricks, so Follow me there if you found this interesting and want to learn more.