Make accessibility improvements for ZubHub

[DonPresh]

Motivation:
Accessibility is one of the bedrocks of design. It aims to be inclusive of all users irrespective of their disabilities. Empathy guides all my design decisions. In order to be truly empathetic, I have to seek for a way to use design and technology to bridge the gap in accessibility.

These are the accessibility issues I identified in the web app

Unlabeled icons

User story
Joy is a 12 years old user with cognitive disability who faces obstacles interacting with our webpage due to unlabeled icons.

Missing alt descriptions for images.

User story
Mark is a tech-savvy child reliant on screen readers. He encounters difficulties navigating our app because of missing alt descriptions for images.

Videos don’t use closed captioning

User story
Kids like Sarah who are deaf or hard of hearing or any situational disability or scenario that might not allow a user watch videos with sound. Sarah and others need closed captioning in video content to fully engage and communicate effectively.

Contrast

WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Whenever using color in images, ensure that the colors have a contrast ratio of at least 4.5:1. This ensures that the text is still readable to those who may have color blindness.

Accessibility benefits all of us by creating more inclusive digital environments. It ensures that everyone, regardless of abilities, can access and interact with web content, apps, and services. This not only enhances user experiences for individuals with disabilities but also improves usability, expands audiences, and promotes equal opportunities for all.

[DonPresh]

These are some iterations I made for some of the accessibility issues I raised

Labeled icons

I deviated a bit from issue I raised to add how users can easily access categories in the web app

Contrast

Made iterations to a color that’s more accessible and text that’s legible.

Alt description and closed captioning

ideally, I think the implementation of closed captioning is not exactly on the designer but I added a feature where users can enable closed captioning.

@srish @tuxology Please can you review this issue and my iterations. Thank you.

[srish]

Thanks a lot for making these excellent suggestions, @DonPresh! This can become a project of its own and be promoted via the next round of Outreachy.

[DonPresh]

Awesome! Thanks for the feedback

[aqsaaqeel]

Thanks a lot for making these excellent suggestions, @DonPresh! This can become a project of its own and be promoted via the next round of Outreachy.

Hey @srish Can I work on a few of the issues that @DonPresh pointed out though? Some are really quick fixes that could improve the UI more!