Day 99: Semantic Elements and Their Quirks
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 accomplishedPermalink for "Things I accomplished"
- Completed Deque's "Semantic Structures and Navigation" course.
- Reviewed Deque's checklist of semantic structure dos and don'ts [PDF].
- Browsed PowerMapper's HTML Elements - Screen reader compatibility tables.
- Started Deque's "Images, SVG, and Canvas" course. 6% complete.
What I reviewed todayPermalink for "What I reviewed today"
- Semantic structures that screen readers (and sometimes everyone):
- elements announced & unannounced
- parsing & validity
- Navigation keyboard shortcuts for screen readers;
What I learned from itPermalink 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:
- putting the
figureelement, and using
table aria-labelledbyto associate the table with the summary
- adding an
idto a separate paragraph and adding
aria-describedbyto the table element to point to that
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.
code element with a
pre element is appropriate, and helps the visual presentation of code blocks.