Flash cards are used extensively in our Pearson courses. Flash cards are usually in the form of numbers, words, or pictures. Learners can click on the card to flip it and access the information displayed on the other side of the card. They are extremely useful for teaching concepts and are found very helpful by people with learning impairments.
Flash cards are used to display a term on one side and its definition on the other side. They are also used to display a question on one side and its answer on the other side. They are even used for teaching math concepts like multiplication, addition, subtraction, or division and are found helpful by children.
Text-based flash cards have information available in the form of text and what needs to be done is to make the interaction accessible for people with visual and mobility impairments. However, in the case of picture-based flash cards textual description needs to be provided for the image as well as the interaction needs to be made accessible for all users.
How to Implement
This section lists the techniques that need to be implemented to ensure that flashcards are accessible.
Designers Need to…
- Use color contrast effectively to ensure flash cards provide enough contrast between text and background. This will make it easier for people with visual impairments to read and understand the content.
- Specify textual descriptions for the informative pictures available on either side of the card via the “alt” attribute.
- Specify empty “alt” attribute for decorative pictures used on either side of the card.
- Ensure that the content on the reverse side of the flashcard is hidden and becomes available on user request.
Content Writers Need to…
- Provide descriptive alternative text for informative pictures displayed on either side of the card.
How to Test for Accessibility
To test accessibility of flash cards, perform the following steps:
- Open the web page that needs to be tested in a browser.
- Check if the information displayed on either side is implemented using text by inspecting the code.
- Check if the text alternative is specified for informative pictures available on either side of the card by inspecting the code.
- If the conditions in steps 2 and 3 fail, then it is an accessibility violation as per WCAG 2.1 success criteria 1.1.1 at Level A.
Dated: 2023-12-01