Flash-cards accessibility issues

[kompetenzzentrumgit]

Flashcards

We are the KOMPETENZZENTRUM DIGITALE BARRIEREFREIHEIT.NRW, a digital accessibility evaluation and testing facility at the Technical University of Dortmund, Germany. We have scientifically evaluated the accessibility of various H5P elements, including the Flashcards.

1. Issue: After submitting a solution, the card automatically switches, providing insufficient time to read the correct answer.

• Suggestion 1: Allow users more time to read the correct answer by delaying the automatic card switch after submitting a solution.
• Suggestion 2: Add a button which allows the user to decide to submit an answer.

2. Issue: When teh card is open the focus goes directly to the answer box, and the screen-reader user must navigate to the picture with the Alt text.

• Suggestion: Force teh focus on the picture's Alt text.

3. Issue: The button to display results is small and lacks visual feedback on hover.
   Suggestion: Increase the size of the button to enhance its visibility and provide appropriate visual feedback on hover.

4. Issue: The results window is too small, requiring both scrolling within the window and the entire browser window.
   Suggestion: Resize the results window to a more appropriate size, eliminating the need for excessive scrolling.

5. Issue: The color contrast within the element is inadequate (specifically, red text on a black background during the solution display).
   Suggestion: Improve color contrast within the element to meet accessibility standards, ensuring legibility and readability for all users.

6. Issue: The "Hint" button appears in the tab order after the "Check Input" button, causing confusion especially for Screenreader users.
   Suggestion: Adjust the tab order to ensure a logical and intuitive flow, placing the "Hint" button before the "Check Input" button.

7. Issue: When zoomed in to 400%, the texts "Correct" and "Incorrect" overlap longer answers.
   Suggestion: Implement responsive design techniques to prevent the overlapping of "Correct" and "Incorrect" texts when zoomed in at 400%.

8. Issue: The "Check Input" button is not visible when zoomed in to 400%.
   Suggestion: Ensure that the "Check Input" button remains visible and accessible even at 400% zoom level.

9. Issue: The tooltip of the "Check Input" button does not scale properly when zoomed in to 400%.
   Suggestion: Modify the tooltip of the "Check Input" button to scale appropriately when the zoom level is set to 400%.

10. Issue: The icons indicating whether an answer is correct or incorrect lack an aria-label.
    Suggestion: Provide an appropriate aria-label for the icons representing correct and incorrect answers, allowing screen readers to convey the information to users who rely on auditory feedback.

Conclusion:

Addressing the identified issues and implementing the suggested improvements will enhance the overall accessibility of the website. By making these enhancements, you will ensure that all users, including those with disabilities, can fully engage with and benefit from your website's content and functionality. It is recommended to prioritize these accessibility improvements to ensure compliance with web accessibility guidelines.
Please feel free to reach out if you have any questions or require further assistance in implementing these accessibility enhancements.