One in four people in the United States — and more than a billion people worldwide — have a disability. Accessibility is the inclusive practice of removing barriers that prevent people with disabilities from doing what they need to do online. Integrating simple web page elements can have a huge impact on the experience these types of users have when visiting your website.
Images
Alternative Text Overview
Alternative text or alt text is a description of an image or graphic file. It allows people who are visually impaired to understand what the image or graphic is and how it relates to its corresponding content. Here is an example of what alt text looks like in code:
...
In the above line of code, the tag is everything between the opening (<) and closing (>) carrot marks. In this instance, you are looking at an image tag.
This image tag has two attributes:
Src – the source of the image or graphic
Alt – alt text associated with the image or graphic
In the example code shared, the alt attribute for the image is set to "Map of Georgia." The presence of this description enables screen readers, a type of assistive technology used by people who are visually impaired, to describe the image out loud instead of defaulting to the image source (i.e., the file name). So, in this case, users who are visually impaired would hear “Map of Georgia” when they interact with that image on the webpage.
There are two types of images or graphics:
Informative images or graphics support their surrounding content and provide additional context. These types of images should have an accurate alt text that explains their purpose in as much detail as required.
<img src="/images/global/”georgia-map.svg" alt="Map of Georgia">
Decorative images or graphics do not support the content on the page. These types of images should have an empty or “null” alt attribute, which triggers a screen reader to skip over the image. If you do not include an empty alt attribute, a screen reader will default to reading the file name for the image instead, which can be a distraction to people using screen reading technology.
...
Accessibility DCI Score
The accessibility DCI score contains two categories of accessibility issues:
WCAG conformance: Levels A, AA, and AAA issues related to WCAG 2.1
Accessibility best practices: Issues related to WAI-ARIA authoring practices and general accessibility best practices.
The Accessibility DCI score is made up of 90 points awarded for WCAG conformance (Levels A, AA, and AAA), with the remaining 10 points gained for the use of accessibility best practices.
...
Example of Accessibility DCI Score
The accessibility checks are based on the Accessibility Conformance Rules (ACT) Format 1.0 adopted by the W3C in 2019. Accessibility Conformance Testing Rules (ACT) is incorporated into the Accessibility DCI score to give an accurate measurement of the level of accessibility. The accessibility checks meet the success criteria under the Web Content Accessibility Guidelines (WCAG 2.1).
Best Practices
What do “best practices” mean?
WAI-ARIA authoring practices are checks that help track the quality implementation of ARIA to ensure that it’s correctly implemented and used.
Accessibility best practices are checks related to content and code that have a significant impact on user experience but are not covered by WCAG.
One example is the detection of improper use of heading tags on a page (H1, H2, H3). These enable screen readers to navigate a page much faster.
Even though complying with WCAG is an important goal, keeping Best Practices in mind is important too since they can have a significant impact on user experience.