100 Days of A11y
New design!

Day 99: Semantic Elements and Their Quirks

Published on

Today I worked on finishing a Deque course about semantic code. All my time got wrapped up in the fascinating aspects of which HTML is read aloud and easily navigable, and which elements are ignored by screen readers.

Things I accomplished

Permalink for "Things I accomplished"

What I reviewed today

Permalink for "What I reviewed today"

What I learned from it

Permalink for "What I learned from it"

I've been mixing up the purpose to the caption element and the summary attribute for tables. Caption is the accessible name of the table, so it shows up in a list of tables provided by a screen reader. The summary attribute was deprecated in HTML5. Caption should be short, even when including a brief summary. Summary replacements include:

When using iframe, include a title attribute, and ensure the embedded page/content has a title element. Screen readers like JAWS vary in behavior as to which one they read. Also, as a note to myself, I need to start defining the type of content within tthe iframe title attribute, like starting the title with "Video", so it's clear what they are accessing.

HTML elements that we can't rely on screen readers to read aloud, therefore, should provide additional cues for important information:

These have given me a lot to think about and stresses the importance of testing my sites on a few different screen readers and platforms.

Wrapping a code element with a pre element is appropriate, and helps the visual presentation of code blocks.