Long Description Test Page

For an explanation of this page, see the related blog post from 2009 .

Example 1: Image with longdesc attribute, description on a separate page

Example 2: Image with longdesc attribute, description on the same page (ID prefaced with #)

Example 3: Image with longdesc attribute, description on the same page (ID not prefaced with #)

Example 4: Image with aria-describedby attribute

Example 5: Image with aria-describedby attribute, and tabindex="0"

Example 6: Image within a <figure> tag, with description linked within a <figcaption> tag

Same-page Description

The following description is explicitly referenced in some of the above examples. If they worked as expected, you should have heard the description before now.

Observations

2018 Results with longdesc

• NVDA 2018.1.1 in Firefox 60 and IE11 announces "Graphic has long description", followed by the alt text. NVDA + D opens the description page in a new browser window (or tab), switches to that window (or tab), and begins reading. If the description is contained on a separate web page, that works fairly well. However, if the description is contained on the same page as the image, this experience (opening a new instance of the same page) might be disorienting.
• NVDA in both Chrome 66 and Edge (Windows 10) does not announce the availability of a long description.
• JAWS 2018 in IE11 announces "Graphic", followed by the alt text, then "Press Alt+Enter for long description". In IE11, Alt+Enter behaves the same as NVDA+D if the description is on a separate page, but if the description is on the same page, it attempts to load the id as if it were a separate web page (i.e., handles the id like a file name), which will likely result in an error. This happens regardless of whether the ID is prefaced with #.
• JAWS in Chrome announces "Graphic", then the alt text, then "Press Alt+Enter for long description". However, pressing Alt+Enter doesn't work. Nothing happens, regardless of whether longdesc references a separate page, or an id on the same page.
• JAWS in both Firefox and Edge does not announce the availability of a long description.
• VoiceOver in Safari on Mac OS Sierra (10.12.6) does not announce the availability of a long description.
• VoiceOver in Safari on iOS 11 does not announce the availability of a long description.
• Narrator in Edge (Windows 10) does not announce the availability of a long description.

2018 Results with aria-describedby

• VoiceOver in Safari on Mac OS Sierra: Works as expected
• Voiceover in Safari on iOS 11: Works as expected
• NVDA 2018.2.1 in both Firefox 60 and Chrome 66 does not announce the aria-describedby text unless the image is focusable. Then, it only announces the aria-describedby text if the user lands on the image by pressing the tab key. Results are the same for Narrator in Edge (Windows 10).
• JAWS 2018 does not announce the aria-describedby text, regardless of whether the image is focusable. This was observed in both IE11 and Firefox 60.

2018 Results with figure and figcaption

• Some screen readers (VoiceOver in Safari on Mac OS Sierra, JAWS 2018 in Firefox 60) read the figure's caption text before identifying the element as a figure. Then, the user can drill into the figure to read its components. This a clumsy experience with the example on this page, as the caption doesn't make for a good image title.
• Other screen readers (Voiceover in Safari on iOS 11, JAWS 2018 in IE11, NVDA 2018.2.1 in both Firefox 60 and Chrome 66, Narrator in Edge (Windows 10)) don't seem to recognize the figure as a group or related elements. Each element is accessible independently, but not explicitly associated with each other.

2014

• JAWS 15 announces that a long description is available and can be opened with Alt+Enter. Doing so opens the long description page in a new tab, reads the HTML title, then begins reading the page. JAWS does not read the aria-describedby text.
• NVDA 2014.2 announces "graphic has long description", then reads the alt text. Users must know how to access the long description (NVDA + D). After executing the hot key, the long description opens in a new tab or window, depending on how the browser is configured (NOTE: IE blocks this under the default security settings, so you may have to grant permissions for this site then try again).
• ChromeVox 1.31.4 announces "Image with long description", then reads the alt text. Like with NVDA, users must know how to access the long description, and I was unable to get it to work. It's probably broken, and I see that a ChromeVox bug has already been filed.
• VoiceOver in Safari on MacOS X 10.9.3 (Maverick) does not announce availability of any of the long descriptions.

NOTE: If you're curious about the content of the image, it comes from a research paper I wrote with colleagues, titled International Research on Web Accessibility for Persons With Disabilities.