Image Sliders Visual Description
This infographic shows a sample image slider that orients the viewer on how to use this type of ViewSpace resource by calling out six key features, as seen on desktop and mobile phone. The desktop view covers most of the graphic and is overlaid in the lower right corner with the mobile view, which is oriented vertically. Both show a color image of the Crab Nebula with labels, a caption below the image, and an interactive image slider bar below the caption. At the top of the page in both views, a title reads, “Star Death: Crab Nebula.” Below this is a subtitle: “Remains of an exploded star.”
On the desktop view, the key features of the sample image slider are called out with numbers in yellow circles and explanatory text in yellow boxes. On the mobile view, the same features are called out with corresponding numbers, but explanatory text is not included.
The six called-out features are as follows:
- Near the top left corner is the word “Topics” with a white carrot to the right to indicate that the button can be expanded to show options. The infographic’s explanatory text reads, “Topics Menu: Expand to access other image sliders.”
- Near the top right corner is the word “Labels” next to a bright green oval toggle switch button. The explanatory text reads, “Label Toggle: Toggle labels on and off.”
- In the middle, just to the right of the subtitle is a text icon in green and the words “Text Description,” also in green. The explanatory text reads, “Text Description: Access a detailed description of the image slider.”
- Three white text labels point to different aspects of the Crab Nebula image. Next to the top center image label, the explanatory text reads, “Labels: Learn about key features.”
- Below the image is a sentence related to the image. The explanatory text in the lower left reads, “Image Caption: Each image includes a unique caption.”
- Below the caption is a horizontal slider bar with labeled stops and a solid white circle. The infographic’s explanatory text pointing to the white circle reads, “Slider Control: Drag to switch between images.” In the desktop version, all slider stop labels are visible. In the mobile version, only the active stop label is visible.
