Accessibility Audit (individual)

Learning Goals for this assignment (competencies)

Participation, Effort and Teamwork
Accessibility Implementation
Accessible Communication

Submission requirements for this assignment

Accessibility Audit (upload as a word document). Make sure it is accessible!
ALSO send it to the group you audited

Familiarize Yourself With the Web Content Accessibility Guidelines (WCAG)

Familiarize yourself with the Web Content Accessibility Guidelines (WCAG) for creating accessible web content for people with disabilities.

Start with this WCAG beginners’ guide to understand common accessibility criteria and how to meet them. (Optional: Check out this full list of WCAG guidelines).

Accessibility Testing

Follow this Beginners’ Guide to Accessibility Testing to start evaluating web/app accessibility:

Manual Testing Without Assistive Technology

Begin with the success criterion in the testing without tools section to complete manual testing without assistive technology. Next, reference the success criterion in the text resizing and color contrast and sections to test both and ensure they are accessible.

Device Specific Tools

Note: There are device specific tools which can check for accessibility problems as well.

For Android Devices:

Use the Android Accessibility Suite and the Google Accessibility Scanner. Follow the instructions on the Getting started with Google Accessibility Scanner page to get the scanner working on your device. Android support provides a tutorial on how to install and use it, or you can use the Android Accessibility Tutorial.

For iOS and macOS Devices:

Use the Accessibility Inspector to perform and audit and identify accessibility issues. Follow these instructions to open up the Inspector and get started.

Write up your Audit

Based on your evaluation, you will now create an accessibility report that summarizes your findings of accessibility issues (and perhaps successes). Be sure to include at least four problems or good aspects, at least one that you found with a screen reader or other accessibility technology. If while evaluating you do not find any accessibility issues (the app is very accessible) write a summary of how the app showcases particularly good accessibility practices.

Template:

In general, your audit should:

Identify whose work you audited
Include the time and place where you conducted the audit
Describe the devices and device settings you used
Describe what the app does well
Describe what the app does poorly, and how it could be improved

Some key things to make a note of in your audit. Make sure to record these items for each accessibility problem you find. If the app does a certain aspect well, also note that in this format.

Name/Brief Description - Provide a very brief name/summary of the issue
Testing Method - Indicate if you tested using a tool/assistive technology or manually
Evidence - Specify the guideline violated and provide a screenshot with evidence of the violation. Your screenshot must include alt text.
Explanation - Explain the issue and include possible causes when appropriate. Explanation should include which WCAG guideline(s) were violated.
Severity - Rank severity 1-4
- 1 - Cosmetic
- 2 - Minor: Low Priority
- 3 - Major: High Priority
- 4 - Catastrophe
Justification - Justify your ranking in terms of frequency, impact and persistence.
- Frequency - Is the problem common or rare?
- Impact - Is it hard or easy to overcome this?
- Persistence - Is there a way to work around this problem?
Possible Solution - Explain a potential solution to improving the accessibility.

Good Accessibility Audit Example:

Accessibility Issue #1

Description: Very Low Color Contrast for Text
Testing Method: WebAim Contrast Checker
Evidence: Guideline violated: 1.4.3 Contrast (Minimum)

standard calculator with rounded buttons forehoumbers, basic operations and so on. Most buttons are light grey with white text which is very hard to read.

Explanation: This accessibility issue violates success criterion 1.4.3 Contrast as the color contrast between the text and color of the buttons does not meet the required contrast ratio making the text not easily distinguishable. This could create a challenge for users with low vision or other vision impairments because of the inadequate contrast of colors in the application. As a result, some users may not be able to fully engage with the functionalities of this application and this could even cause users to experience additional negative consequences while trying to navigate this issue.

Severity Rating: 3

Justification: Frequency is high on this app because there is more than one color contrast error on this page. Impact is high since this is an issue that disrupts the main functionality of the app, making it hard to overcome. This in return impacts the user’s ability to interact with the rest of the content on this app. Persistence is high as this accessibility issue cannot be avoided due to it being one of the main features of the app.

Possible Solution: To improve this, the developer should increase the contrast ratio by either (1) making the color of the text darker (e.g., black text against the light gray button) or (2) making the color of the buttons darker (e.g., dark gray button against with white text).

What Makes This a Good Accessibility Audit:

The auditor explicitly states which guideline was violated (1.4.3 Contrast (Minimum)) and provides a clear screenshot of the indicated accessibility issue. The auditor goes on to clearly explain what WCAG guideline is violated (success criterion 1.4.3 Contrast) and why this violation is a problem (does not meet the required contrast ratio of at least 4.5:1 and is not easily distinguishable).

Moreover, this example states who would potentially be impacted by this violation (users with low vision, would have difficulty with the inadequate contrast of text) and how it could impact them (some users may not be able to engage with this application and may even experience additional negative consequences).

Finally, the auditor explicitly explains tangible ways to improve the accessibility issue (adjusting the colors of the text or background to improve the color contrast ratio)

Bad Accessibility Audit Example:

Description: Color Contrast Issue
Testing Method: WebAim Contrast Checker
Evidence: Violated Guideline

Explanation: There is bad contrast between the elements in the text for the given application. This will make it hard for people to use the app.

Severity Rating: 3

Justification: The application will make it hard for users who do not have good vision since they will not be able to see the text on the buttons. Which will make it hard for the person to use the app.

Possible Solution: Change the buttons colors to something that makes the contrast better

What Makes This a Bad Accessibility Audit

The auditor does not explain what guideline(s) were violated from the WebAim Contrast Checker.

In the explanation, the auditor doesn’t quite explain what elements in the application have bad contrast. Is it between the text and the buttons, is it between the background and the buttons?

The user also doesn’t quite explain how it will be hard for users when using the application. Moreover, they do not mention who might be impacted by this application. For the justification, the auditor did not explain the frequency of the issue which is a measurement for the severity of an issue. Additionally, they did not talk about the impact of this violation or how challenging navigating this issue could be.

Lastly, the user does not mention if this issue could be avoided. If there are no ways to workaround this, this would be measured as a more severe issue. Finally, the auditor does not explicitly explain tangible ways to improve the accessibility issue such as adjusting the colors of the background to improve the color contrast. Furthermore, they do not explain why these changes would improve the contrast.