Perceivable Flashcards
(54 cards)
What are the different types of images? 7 types
- Active
- Informative
- Decorative
- Complex
- CAPTCHA
- Input Controls
- Images of Text
Active Image Definition
Images that activate something or change the page in some way.
What must the alt text for an active image convey?
The purpose of the link tied to the active image. What does it active? What does page does it take you to?
Informative image definition
Images that convey an important yet simple message that can be conveyed in a short phrase or sentence. Without these images, the point of the page would be lost.
Decorative image definition
Images that add visually appealing flare.
Complex Image definition
Images you cannot explain in one sentence
Complex images examples
- Graphs
- Maps
- Diagrams
CAPTCHA Images Definition
Verification images on forms that help filter out spam because a robot cannot interpret these images.
Input Control Images Definiton
Similar to active images but related to forms.
Input Controls Images Definition
Images that control or accept user input and have a name that describes the purpose of the image/control. Similar to active images but related to forms.
Images of Text Definiton
Images that have text embedded into them. Text is displayed as intended to be read. With current CSS Capabilities in most web browsers, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation.
Active Images examples
- Logos
- Social Media Links
- Carts
How should the text alternative be written for informative images?
The text alternative should be written to convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image.
Decorative Images Examples
- Images and adjacent text are duplicates (ex: a headshot of an employee working at a company and their title. If you’re not going to describe what they look like and that information is not necessary for the page, then it can be considered decorative)
- Anything that is just visually appealing and serves no other purpose.
- Borders or spacers
How would you describe a diagram of an eye?
A diagram of an eye is considered a complex image, so I’d start with a detailed diagram of the eye. Then, include a link to a longer description describing the parts that make up the eye.
When CAPTCHA is on a website, how is alternative text approached?
- Needs an alternative text to identify the purpose and the tasks of the CAPTCHA (ex. Type the word in the Image)
- Needs an alternative version for those who cannot see the image — such as an audio prompt or an additional for form prompt such as a simple math problem
Input Controls Images Examples
Input Controls Images Examples
Search Button
Play/Pause Control Button
Print Button
Delete Button
Open in a new tab/window link
Alt text
Alt text is the text encountered by a screen reader that describes what an image is trying to convey.
Alt Text Requirements
- Short and Clear! No more than 15 words in length.
- Provide a quick overview of essential content
Why should alt text be short and clear?
Some screen readers have limits and will truncate the alt text when the image is reached.
Common Alt Text Issues
Inappropriate alt text: Alt text that fails to convey the information contained in or around the image.
Missing alt text: Images that have not been labeled at all.
Excessively wordy: contains more than 15 words or describes more than is necessary
What is Accessibility?
The quality of being easy to approach, reach, enter, interact with, use, or understand, especially as suitable or adapted for use by people with disabilities.
