Day 99: Semantic Elements and Their Quirks

Published on 09 Mar 2019

• journal
• resources
• review
• was
• assistive-tech
• design
• html
• ux

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.

• 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.

• Semantic structures that screen readers (and sometimes everyone):
  • tables
  • lists
  • iframes
  • elements announced & unannounced
  • parsing & validity
• Navigation keyboard shortcuts for screen readers;

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 table in a figure element, and using figcaption with table aria-labelledby to associate the table with the summary
• adding an id to a separate paragraph and adding aria-describedby to the table element to point to that p id.

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:

• strong
• em
• q
• code
• pre
• del
• ins
• mark

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.