| <h1 aria-label="big blue banana">Big<span>yellow</span>bananas</h1> | |
| <p> | |
| This is a test of whether an <code>aria-label</code> will work on a heading element. The use-case is for a heading which has several words, but contains no spaces. The <code>aria-label</code> is intended to provide a properly-spaced alternative to the heading content, to avoid mispronunciation problems by screen readers. | |
| </p> | |
| <p>This is an experiment, to answer a StackOverflow question. See <a href="https://stackoverflow.com/questions/51816452/how-do-screen-readers-handle-text-separated-by-tags-not-spaces">How do screen readers handle text separated by tags (not spaces)?</a></p> | |
| <p>TODO: Test in various screen readers, note results here. Does the screen reader say yellow, or blue?</p> |
| h1 span { | |
| font-weight: 100; | |
| color: yellow; | |
| } |
A test of whether aria-label can be used to override a HTML heading. The use case is a heading with several words but no spaces between them. The aria-label is intended to provide the same heading, but with spaces between words, to make pronunciation more robust.
A Pen by Andrew Macpherson on CodePen.