Accessibility Testing of Mango Languages – 2021

Accessibility Report for Mango Languages

Conducted and published by the National Network for Equitable Library Service (NNELS), Vancouver BC, June 2021.

This report was written with support from the Government of Canada’s Social Development Partnerships Program – Disability Component.

The opinions and interpretations in this publication are those of the author and do not necessarily reflect those of the Government of Canada.

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License

About NNELS

The National Network for Equitable Library Service (NNELS) is a digital public library of ebooks for Canadians with print disabilities, and an advocate for an accessible and equitable reading ecosystem for Canadians with print disabilities[1]. NNELS supports principles of openness, inclusion, and choice. NNELS is hosted by the BC Libraries Cooperative, a community service not-for-profit cooperative and a national leader in information and technology services.

Our team of Accessibility Testers has expert knowledge in the areas of accessibility testing, analysis, software development, and leadership. The team works to educate and advise publishers, technology vendors, and public libraries on best practices for accessibility. Our testers have lived experience with a range of print disabilities, including blindness, low vision, and learning disabilities.

Introduction

Mango Languages is a program that provides access to digital language learning courses and tools. It can be accessed through their website as well as the Mango Languages iOS and Android mobile applications.  Mango Languages can be accessed using personal paid accounts, or through some local public libraries’ digital services with a library card. For this report, our team of testers were provided with a trial account, but some found that access to the app was also provided through their local libraries.

Our testers used screen-reading and magnification software to assess the usability of the apps and website across supported platforms. A complete list of all the software and operating systems used in this assessment can be found in the Systems and Assistive Technology section of this report. The objective of this assessment is to determine the usability experience of readers with print disabilities, and to what extent they can access online educational tools through their local public library effectively and efficiently. It is important that learners with print disabilities can choose the online educational websites and apps that offer the accessibility features they require.

The results show that testers encountered moderate accessibility barriers, including unlabeled or mislabeled controls and inconsistent navigation. The website was found to be the most accessible option, with significant changes made which benefit screen-reader users. This report highlights the accessibility barriers of the Mango Languages mobile apps and website, explains the barriers that these issues pose and why they are problematic, and provides recommendations which could enhance the usability experience for learners with print disabilities.

Introduction to Assistive Technology

All mainstream operating systems include built-in screen readers (Narrator on Windows, VoiceOver on Apple devices, and TalkBack on Android) that read the contents of the screen out loud, allowing users with visual disabilities to browse apps and websites, send and receive texts and emails, and accomplish many other tasks with ease. Keyboard commands and custom touch gestures provide a flexible way for a user to find and interact with the controls on-screen. Windows also has alternative screen-reading software available, most notably a commercial option called Job Access with Speech (JAWS) and a free and open-source option called Non-Visual Desktop Access (NVDA). The text spoken by a screen-reader can be sent to a refreshable braille device. Mainstream operating systems are also equipped with user interface magnification, large text options, and high contrast viewing mode to assist people with low vision.

To ensure usability and accessibility of an application by people with print disabilities, all functions and controls must be accessible using assistive technologies (including screen readers, screen magnification software, and switches and voice controls for people with mobility impairments). The DAISY Consortium explains that the basic assumption of accessibility evaluations is that reading systems “should support reading with eyes, ears, and fingers.” (DAISY Consortium, 2017). It should be possible for users to read the content of the document by:

  • Reading the text with screen readers or self-voicing text to speech (TTS) applications.
  • Adjusting the display including font size, alignment, and color contrast, or combination of some or all these options.
  • Reading the text with a refreshable braille display.
  • Reading with assistive technologies designed for persons with dyslexia or other disabilities.
  • Reading with the app’s built-in read aloud functions.

It is important to note that since Mango Languages is not a traditional book reading system, many of the principles for reading systems may not apply. However, the principles for accessible reading systems can be found in the Web Content Accessibility Guidelines (WCAG 2.0) which is also used to make recommendations for the mobile applications and website. The principles of the Web Content Accessibility Guidelines state that all buttons and controls must be accessible and useable by people with disabilities:

  • Content must be perceivable.
  • Interface elements in the content must be operable.
  • Content and controls must be understandable.
  • Content must be robust enough to work with current and future technologies.

Accessibility Performance and Recommendations

In this section we dive deeper into specific accessibility issues present in the different features of Mango Languages when accessing it through the iOS and Android apps, as well as through their website. The developer recommendations section contains suggestions for improving the interface on each platform.

iOS

  • Tested iOS Version: 14.4
  • Tested App Version: 5.24

Home Screen

The sign-in process uses an email address and password, and signing into and accessing the home screen of the app is quite easy. Testers were provided with a username and password for testing the app but some were able to sign in through their local library as well. Generally, the process for signing into the iOS app is accessible with screen readers and screen magnification. Some of our testers did indicate that the sign-in button could be more visible (meaning that it should visually stand out more, with higher contrast foreground and background) but noted that the button was labeled correctly for screen readers.

The home screen posed no major issues for our testers. Overall, all the testers were able to navigate the app with few problems. The app did lack headings, which would allow for quicker navigation. For those viewing the app with screen magnification it was noted that some of the fonts were more difficult to read. With VoiceOver, some controls were not as clear as they could be. For example, the control for returning to the main menu did not indicate whether it was the home or main menu.

Language Lessons

The language lessons worked well for our testers. All the testers were able to open lessons and review the content. For those using VoiceOver, it was noted that when reading the text of the lessons with the screen reader, the text formatting did not allow the screen reader to detect the correct language. Therefore, it would not switch to the proper language when reading the content in a different language.

The slider control for playback was not easy to interact with, which made it difficult to advance the lesson without moving to the next or previous section. Having the ability to control the speed of the playback while listening to a lesson could be a useful addition to the app.

The lesson slides did not have any description of what was graphically contained in the slides. In most cases the text was partially displayed outside of the slide. However, if the slides also contained graphical content that held relevant information for the learning environment, having alt tags or captions would improve the accessibility of the app.

Visual Adjustment

As this app is primarily an audio language learning tool, the visual interface does not have many custom controls for adjusting the text. Our testers noted that it could be useful for the app to have the ability to adjust the fonts of the display, change text size, and perhaps change the contrast to dark mode or other high contrast theme. As mentioned earlier, buttons and controls could be more visually prominent throughout the app as some testers had difficulty finding controls such as the logout option.

Development Recommendations

Overall, the app is very usable for people with various print disabilities. The following recommendations will assist with further improvements to the app’s accessibility:

  • Ensure all controls are clearly labeled for those using a screen reader. This means ensuring that the text associated with a given control clearly indicates what the option will perform. For example, using the words “Main Menu” on a button clearly indicates this particular control would bring you back to the application main menu.
  • Utilize a heading structure that would be similar to the website. The app currently does not utilize headings and developing a logical heading structure for the main screen as well as the main screens of lessons would greatly improve the user experience with the app.
  • Add the ability to change the speed of playback in the audio lessons.
  • Ensure that the slider control is fully accessible. This means that when the screen reader encounters this control that it can be interacted with and moved around and indicates its position in a similar way to what is displayed on the screen.
  • Add settings to the app that would allow for changing display options like text size, contrast, and the ability to change fonts to a dyslexic font.

Android

  • Tested Android Versions: 10 & 11
  • Tested App Version: 5.24

Home Screen

The home screen posed no major issues for our testers and in general, all testers were able to log into and navigate the app with few problems. It was noted that the app did lack headings, which would allow for quicker navigation through the app. Also, for those viewing the app with screen magnification, it was noted that some of the fonts were more difficult to read. With TalkBack, some controls were not as clear as they could be. For example, the control for returning to the main menu did not indicate whether it was the home or main menu.

Language Lessons

The language lessons worked well for our testers, and they were able to open lessons and review the content. For those using TalkBack, it was noted that when reading the text of the lessons with the screen reader, the text formatting did not allow the screen reader to detect the correct language. Therefore, it would not switch to the proper language when reading the content in a different language.

The slider control for playback was challenging to interact with. Therefore, it was difficult to advance the lesson without moving to the next or previous section. When listening to the lesson, it was noted that having the ability to control the speed of the playback could be a useful addition to the app as well.

TalkBack users did note that the back buttons did not have any button control that would be visible to their screen reader. There was text, but only tapping the text verified that it was the control to move back out of the lesson. The lesson slides did not have any description of what was contained in the slides. In most cases some of the text was displayed outside the slide, however, if the slides also contained graphical content that would be important for the learning environment, then having alt tags or captions would improve the accessibility of the app.

Visual Adjustment

As this app is primarily an audio language learning tool, the visual interface does not have many custom controls for adjusting the text. Our testers noted that the app could have the ability to adjust the fonts of the display, change text size, and perhaps change the contrast to dark mode or other high contrast themes. Also, as mentioned earlier, buttons and controls could be more visually prominent throughout the app. Some testers had difficulty finding controls such as the logout option.

Development Recommendations

  • Overall, the app is very usable for people with various print disabilities. The following recommendations will assist with further improvements to the app: Ensure that all controls are clearly labeled for those using a screen reader. This means to ensure that the text associated with a given control clearly indicates what action the control will perform.
  • Utilize a heading structure that would be similar to the website. As the app currently does not utilize headings at all, developing a logical heading structure for the main screen and the main screens of lessons would greatly improve the user experience with the app.
  • Add the ability to change the speed of playback in the audio lessons.
  • Ensure that the slider control is fully accessible. This means that when the screen reader encounters this control, that it can be interacted with and moved around and indicates its position in a similar way to what is displayed on the screen.
  • Add settings to the app that would allow for changing display options like text size, contrast, and the ability to change fonts to a dyslexic font.

Web

The Mango Languages website was tested by several different browser and access technology combinations. Our testers found the website very usable overall. There were some specific issues that have been mentioned in the tester feedback. If no browser is mentioned specifically, it can be assumed that the issue is a concern across all browsers.

Homepage

The homepage generally is quite usable, and all testers were able to find the login link and successfully login into the languages portion of the site. However, contrast between the text and background of the button could be enhanced, for improved visibility. Because the login screen seemed to be near the bottom of the screen, some testers did note that choosing one of the lesson workgroups associated with the user account was challenging, as the text was difficult to read. It was noted that the main page did have some unlabeled graphics that could be providing important information. All graphics except for decorative graphics should have descriptive alt tags so that those using screen readers can benefit from information which may be contained in the page graphics.

The page controls were easy to find. However, some of the page controls did not behave as expected. For example, the account menu did not expand or collapse as expected and our testers using screen readers had to toggle their screen reader’s virtual cursor or browse mode on and off to activate this menu. The inability to expand or collapse menus without changing the mode of the screen reader can cause people to think the menu has no sub-menu or when changing to focus or forms mode, and one may end up editing an editable section of the webpage without intending to. The main banner menu did not have any skip navigation commands which was problematic for effective use of the menu options.

For the most part the homepage did have all the headings which would allow you to navigate to important sections of the page. However, all the headings were at Level 4 which means it would not be possible to look for different levels of content on the page when using a screen reader. Many people use different heading levels to find important content on a page. Usually, they would look for headings at different levels. For example, when looking for main sections of articles or books, they may use keyboard commands to look for heading level 1 headings or heading level 2 headings. When headings are at a single level, and set at a level 4 in the case of this website, some screen reader users may assume the page has no headings if they have used their hotkeys for searching for specific headings.

Language Lessons

Our testers did not report any major issues with accessing the language lesson content. For the most part, they could choose a language, open the lesson to view the individual lessons, and begin playing the lessons. It was noted that the website version of the slider used to advance or rewind the lesson worked better with screen readers than the app.

Some general comments included ensuring that all player controls had labels that were clear, when playing a lesson some of the controls with unclear labels were more difficult to access. It was also noted that it was difficult to save your place in the lesson if you were not able to finish a given topic. Adding a feature to adjust playback speed could also be useful.

In the portions of the lessons that display the text in alternate languages, our testers using screen readers noted that the page allowed the screen reader to switch to the language settings for the specific language in parts of the lesson where you would be reviewing the text of a given sentence or phrase. This is an excellent feature, and would be a very useful feature to add to the app.

Visual Adjustment

Testers using screen magnification did note that the website could use more custom controls for adjusting the screen layout and fonts. In the login screen it was noted that text was small and too close together in the section for finding the associated workgroup or project. The website also does not have a dyslexic font available, and it was difficult to increase the size of text and change the contrast. Allowing people to apply settings like dark mode, and letter and word spacing would greatly improve the visual accessibility of the website.

Development Recommendations

Overall, the website is very usable for people with print disabilities. The following accessibility improvements will increase the ability for all people with disabilities to enjoy using this website for learning new languages:

  • Add skip controls to the main menu. This will give people using screen readers the ability to move past the banner or main menu to important page content on all pages.
  • Ensure that collapsible menu controls allow screen readers to detect the status of the menu.
  • Graphics that are not decorative in nature should have alt tags. People using screen readers would benefit from knowing the content of all important graphics on the page.
  • Ensure that headings are logical and meaningful. The page should have a heading structure that utilizes heading levels starting at heading level 1 when possible. For example, within the lessons, the main lesson could be heading level 2 and the subsections could be at heading level 3.
  • When expanding lessons, utilize an Accessible Rich Internet Applications (ARIA)[2] control to inform the screen reader that the section has been expanded or collapsed. The expanded content should appear below the lesson title. If not, the website should move the focus of the screen reader to the beginning of the content.
  • Ensure that all buttons and controls have labels for easy identification for a screen reader. For example, currently the Yes and No buttons in help articles are only labeled as buttons. Having clearly labeled buttons will take the guess work out of using the app for people using screen readers. Knowing that a button is Yes or No, for example, not only improves accessibility, but also improves the overall user experience.
  • Ensure the quiz timer can be accessed with a screen reader. This does not have to be a live region; however, the person should be able to quickly find the remaining time using their screen reader.
  • Allow for visual adjustments such as changing fonts or size of printed information.
  • Allow for colour adjustments for the display. For example, giving the ability to apply dark mode settings on the website would improve the visual accessibility of the website.

Conclusion

Learning languages is something that is increasingly being offered to library patrons. As people with print disabilities continue to look for opportunities to learn new skills online, having accessible apps and websites is especially important.

Mango Languages is generally off to a great start. Many of the suggested improvements are issues only in extremely specific sections of the app and website. It is evident that some attention has been paid when it comes to incorporating accessibility on the iOS and Android Apps.

Systems and Assistive Technology

Operating Systems

  • Windows 10 (various versions)
  • iOS 14.4
  • Android 10 & 11

Mobile Applications

  • Mango Languages 5.24 iOS & Android

Browsers

  • Firefox 85 & 86
  • Chrome 87-91

Screen-readers

  • VoiceOver 14.4 IOs
  • TalkBack 8.9 & 9.1 Android
  • NVDA 2020.3 & 2020.4 Windows
  • JAWS 20 Windows

Magnification

  • ZoomText 2020 Windows

Contributors

The following people contributed to this report, including testers and editors.

  • Karoline Bourdeau
  • Simon Jaeger
  • David Kopman
  • Riane Lapaire
  • Ka Li
  • Richard Marion
  • Laetitia Mfamobani
  • Deanna Ng
  • Corey Wintemute
  • John Ylioja

 

[1] Print disabilities are defined by Canada’s Copyright Act and include visual, mobility, or comprehension impairments such as dyslexia.

[2] Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.