Common Accessibility Issues

Checking for 1.4.3 - Contrast (Minimum)- contrast ratio

Examples of Success Criterion 1.4.3 - Contrast (Minimum), which requires a minimum contrast ratio of 4.5:1 for normal text (smaller than 18pt or 14pt bold) to ensure text is readable.

Checking for 4.1.2 Name Role and Value

Using semantic HTML elements is always preferred for accessibility because assistive technologies natively understand their roles and behaviors without additional ARIA attributes.

button is designed using the Semantic <button> element.

This button is designed using the role="landmark" in a <div> element.

The "value" represents the current state or setting of an element, such as it could refer to whether a checkbox is checked / unchecked.

Checking for 1.1.1 Non-text Content

Success Criterion 1.1.1 ensures that all non-text content (e.g., images, videos, icons) has a text alternative so assistive technologies can convey its meaning.

Decorative Image

Decorative images don’t require a description. Their only purpose is to add visual appeal to content, not to add contextual information. The decorative image in our example just helps to create visual interest. Using a description for a decorative image gives users unnecessary information that can distract from the content on the page.

Balanced Diet

A healthy diet may contain fruits, vegetables, and whole grains, and may include little to no ultra-processed foods or sweetened beverages.