All content on the page/screen must be presented in a way users can perceive it.
Media
Include text alternatives
Actionable elements must have an appropriate ID name. At the same time, images need to be provided with a brief description of what is on the image so the users who use screen readers can understand the meaning and intent behind the read elements. Decorative elements do not require a text alternative.
Include audio & video captions/transcripts
For audio & video content, there needs to be a provided set of transcripts or captions for the users with hearing and vision difficulties to be able to access the content through reading or listening to the text alternative with screen readers. Communicate this to content providers and include an access point in your design where users can get to those transcripts or content descriptions.
Avoid image dependancy
Avoid placing important information inside an image. Images can be stretched; the right color contrast may not be met, and the content inside can become blurred or pixelated, making it harder for users to perceive.
Have an automatic audio playing control
Avoid using automatic audio playing as the sound may interfere with users who use screen readers. Make sure your design includes volume and play/pause controls.
Color & Contrast
Respect small text – 4:5:1 color contrast ratio
Small text (defined below) needs to pass the 4:5:1 color contrast ratio in order to achieve maximum readability. Bold text = 13pt and belowRegular text = 17pt and below.
Respect large text – 3:1 color contrast ratio
Large text (defined below) needs to pass the 3:1 color contrast ratio in order to achieve maximum readability. Bold text = 14pt and upRegular text = 18pt and up.
Respect non-text elements contrast ratio
For every actionable or critical element you need to make sure there is enough contrast to be easily distinguishable. For the elements 16px and above, follow the rule of 3:1, and for the elements below 16px, follow the rule of 4:5:1.
Avoid color dependency
Don’t rely solely on color to convey information. It will be harder to perceive different colors on the screen for different lighting conditions and visually impaired or color blind users. Add visual cues that help users distinguish the difference between the elements they are looking at (e.g., the underline for links, active tabs with a dot or a line indicator, different stroke and fill options, etc.).