Accessibility audit for Non-profit organization
Objective
Access the compliance with accessibility requirements and propose corrections
My Role
Accessibility audit plan
Accessibility audit on the four main pages
Comprehensive report and correction proposal
Hand off
Tools
WCAG 2.1, ADA, Section 508
Axe
Wave
Lighthouse
Google suite
Team
Solo project
Duration
6 months
Scans with Wave and accessScan resulted in 35 errors
Missing alternative text
Missing links
Empty button
Missing labels
Empty heading
Contrast errors
Missing Alt Text
Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable.
Missing Form Label
If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.
Contrast Error
Adequate contrast of text is necessary for all users, especially users with low vision.
Empty Link
If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.
Empty Button
When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.
Empty Heading
Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion.
Linked Image Missing Alt Text
Images that are the only thing within a link must have descriptive alternative text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.
Suspicious Alt Text
If the alternative text for an image does not provide the same content or information conveyed by the image, that content will not be available to screen reader users and when images are unavailable.
Redundant Link
When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.
Fix Missing Alt Text
Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image. If the content of the image is conveyed in the context or surroundings of the image, or if the image does not convey content or have a function, it should be given empty/null alternative text (alt="").
Fix Missing Form Label
If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.
Fix Contrast Error
Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
Fix Empty Link
Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
Fix Empty Button
Place text content within the <button> element or give the <input> element a value attribute.
Fix Empty Heading
Ensure that all headings contain informative content.
Fix Linked Image Missing Alt Text
Add appropriate alternative text that presents the content of the image and/or the function of the link.
Fix Suspicious Alt Text
Ensure that the alternative text for the image or image input provides a succinct, yet equivalent alternative to the content and function of the image. Screen readers and browser presentation inform the user that the object is an image, so alternative text of "image of..." (and similar) should be avoided. If the image does not convey content or if the content is presented in nearby text (e.g., a caption), null/empty alternative text (alt="") is appropriate.
Fix Redundant Link
If possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt="").
The Details
Equal Access
The ADA mandates that businesses and organizations, including those with websites, provide equal access to their services and information to individuals with disabilities. This means websites should be usable by people with various disabilities, such as those who use screen readers, have motor impairments, or have cognitive disabilities.
Legal Protection
Failure to make a website ADA compliant can lead to lawsuits and potential fines. The Department of Justice has applied the ADA to web content since 1996, and the ADA requires businesses to remove access barriers that prevent people with disabilities from accessing goods and services.
Broader Audience
Making a website accessible can broaden the reach of a business or organization, as it can be accessed by a wider range of users, including those with disabilities.
Positive Brand Image
Demonstrating a commitment to accessibility can enhance a brand's reputation and demonstrate a commitment to inclusivity.
Improved Usability
ADA compliance often leads to better usability for all users, not just those with disabilities.
SEO
Accessible websites can be easier for search engines to crawl and understand, potentially leading to better search engine rankings.
People Grove
A responsive mobile app for an existing website.
