Extended description using HTML details and summary
Notes about techniques
In the first image on this page, the HTML details and summary elements are used to expose the extended image descriptions below the image.
extdescription-010 Detection and Utilization of HTML Details and Summary elements Below Image
Check if you can use HTML details and summary successfully and read the extended description contained in it.
This test passes if all the following steps are successful:
- The HTML
details/summaryelements are reported. (For example, there is an interactive element like button, link etc. that you can activate.) - You can expand and collapse the
detailselement containing the extended description. (For example, you can activate the interactive element to expand or collapse the extended description.) - When expanded, the extended description should appear immediately after the activating element. When you collapse it, you should remain at the same position.
- When expanded, you should be able to read the extended description including being able to explore the HTML table within the description.
Bar chart image for test 010
Expand / collapse Extended Description
Overview
The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month.
Data
| Period | Site 1 | Site 2 | Site 3 |
|---|---|---|---|
| Jan | 135 | 112 | 92 |
| Feb | 117 | 114 | 99 |
| Mar | 96 | 111 | 126 |
| Qtr Total | 348 | 337 | 308 |
Presentation
The bar chart represents both the number of visitors per month for each website, and the total number of visitors per website for the entire quarter. Website visitors for each month are represented using columns lined up horizontally, with heights indicating the number of visitors. A fourth column is provided for each website with the accumulated site visitors for the quarter.
Filler text after the image's summary/details.