1.1 User Feedback

To initiate the project, I began by gathering online feedback from users on Duolingo's accessibility, as well as their expectations and requirements for the app. Through this process, it became evident that accessibility was an area of concern that required attention. The anonymous comments and feedback of Duolingo revealed some users' concerns and helped me better understand the needs and preferences of Duolingo's user base. I was then able to focus my efforts on improving accessibility and ensuring that the app met the needs of all users, regardless of their individual abilities.

Key Findings

• Users with visual impairment often rely on VoiceOver technology to navigate through the app. (Learn more about VoiceOver here, or watch this video by Apple on VoiceOver!)

• Users with visual impairment and who use VoiceOver expressed the need for additional context to assist with language learning.

• Insufficient color contrast and small text size can make it difficult for users to read and understand the content.

2.1 Accessibility Audit

Using VoiceOver, I navigated the app to conduct an accessibility audit. While successfully completing beginner Japanese lessons, I encountered several opportunities for improving accessibility in accordance with the WCAG 2.1 guidelines:

1. Enhance readability by improving contrast ratio and enlarging text sizes.

2. Ensure effective content detection by VoiceOver by providing explicit object names.

3. Enable VoiceOver to accurately read the information by refining overlays to avoid confusion.

4. Facilitate efficient and effective comprehension by enhancing action context within lessons

2.2 More "Perceivable" & "Operable"

The four screens I chose to annotate are frequently seen across Duolingo's mobile app. The first set of screens is presented during language learning lessons, and opportunities to enhance compliance with the "Perceivable" and "Operable" principles of the WCAG accessibility guidelines include:

1. Enhancing readability and comprehension, the low contrast ratio poses challenges in reading and comprehending the content.

2. Facilitating seamless navigation using assistive technology, the grouping of chat bubbles and images in the bird and man Comic page (Screen 1) can be further optimized.

3. Ensuring improved accessibility, the overlay design in the Incorrect Screen (Screen 2) can be made detectable by assistive VoiceOver technology.

2.3 More "Understandable" & "Robust"

This second set of screens below is presented at the end of the learning lessons, providing users an opportunity to review learning scores and engage in discussions with others regarding lesson content. Opportunities to enhance compliance with the "Understandable" and "Robust" principles of the WCAG accessibility guidelines include:

1. Enhancing comprehension by addressing low contrast ratios and small text sizes.

2. Providing text descriptions for each badge on the Lesson Complete page (Screen 1) to support users relying on VoiceOver technology.

3. Ensuring detection and seamless interaction with the upvote and downvote buttons on the Discuss page (Screen 2) for users with visual impairments.

3.1 WCAG 2.1 as Redesign Principles

After conducting the heuristic analysis and before beginning any redesign, I took a pause to review and remind myself to focus on designing based on the four main principles of WCAG accessibility standards to create a more inclusive, accessible, and user-friendly language learning experience.

3.2 Redesign

3.3 Optimizing for VoiceOver: A Comparison of Before and After Content Readability

To ensure a seamless user experience, I took into account the reading behavior of VoiceOver and restructure the information hierarchy accordingly. Below are comparisons of the VoiceOver's reading behaviors before and after the redesign. Yellow numbers indicate VoiceOver's reading order.

Less Negligence, more "Operable"

Before: The placement of the dialogue bubbles may lead to VoiceOver users' confusion.

After: Repositioning the dialogue bubbles allow VoiceOver to detect the left bubble first, reading the screen in a logical order for users with visual disabilities.

Less Uncertainty, more "Robust"

Before: As user selects the incorrect message, VoiceOver continues to falsely observing and reading aloud the background hiragana cards (yellow numbers 5 and 6).

After: Incorporating a taller overlay with a higher contrast ratio from the background, alongside correct and incorrect answers ensure VoiceOver receives sufficient context to understand the screen.

Less Obscure, more "Understandable"

Before: VoiceOver only reads the title and numerical value of each badge after identifying the title "Lesson Complete," leaving users to have to guess the meaning of each badge.

After: By providing a description of each numerical value, the redesign enables VoiceOver users to better comprehend the screen's context.

Less Hidden, more "Perceivable"

Before: The low contrast and incorrect component labeling forbid VoiceOver to detect the upvote and downvote buttons under each comment.

After: By improving the contrast ratio and rearranging the upvote button to the left of the number, VoiceOver now reads the information in an order that is easy for users to comprehend.