Accessibility Report for Beanstack

August 2024

PDF | DOCX

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.

Accessibility Summary

Our testers found the Beanstack website and mobile apps to be usable, but not without significant frustration and nonstandard behaviour which made doing so unnecessarily challenging. Most notably, some testing configurations encountered difficulty creating an account or logging in, which is effectively a barrier to the rest of the platform. When able to log in, screen reader users can access the features of the platform, but must wade through unlabeled images, inefficient keyboard functionality, and a mix of under-labeled and verbosely labeled controls. Low-vision users had varying experiences, but insufficient colour contrast was a common complaint.

Introduction

Beanstack provides tools to patrons of participating libraries to encourage them to meet their reading goals. Users can join challenges, track how much time they spend reading, and collect badges which reward them for reaching milestones within their challenges. Users can also review the books they are reading.

Our testers used screen-reading and magnification software to assess the usability of Beanstack. Readers can find a complete list of all the software and operating systems used in this assessment in this report’s Systems and Assistive Technology section.

This assessment aims to determine the usability experience of readers with print disabilities and to what extent they can access Beanstack effectively and efficiently. While this report aims to provide an overview of the accessibility performance across supported platforms, this is not an in-depth review of Beanstack itself. As a result, some functionality may not be discussed at all or in-depth.

Beanstack’s accessibility is quite poor overall. While assistive technology can navigate to and operate the controls, many of these controls are missing accessibility features and attributes. Where accessibility information is included, it is often improperly done, resulting in unhelpful and/or overly verbose speech.

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. 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 colour contrast, or a 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

Accessibility Performance and Recommendations

This section will dive deeper into specific accessibility issues encountered while testing the Beanstack website and mobile app. Below you will find the testing results and their related recommendations as they pertain to:

  • Sign-Up and Login
  • Layout and Navigation
  • Participating in Challenges
  • Visual Adjustment

Finally, the development recommendations sections contain suggestions for improving the interface on each platform. These suggestions will be relevant to any issues or observations noted above.

Beanstack Website

  • Tested operating systems: Windows 11, MacOS 14.5
  • Tested browsers: Chrome 126, Edge 125, Firefox 128, Safari 17.5

Sign-up and Login

The registration and login process presents a variety of accessibility barriers. Some of these issues are experienced consistently regardless of the browser and assistive technology being used. Screen readers do not announce when the contents of a sign-up page changes, such as results appearing when a user types into the library search field, and the options changing based on whether the user is signing up as an individual or a family. Many images do not have alt text, which leaves screen reader users unsure if they have a purpose and what that purpose might be. Text boxes on the sign-up and login forms have poor colour contrast, making them difficult to see for low-vision users.

Additional issues were encountered by some but not all screen reader testers. The unlocked-a-badge pop-up shown when selecting a reading challenge remains visible to Narrator when it should be dismissed. Labels for the fields on the login form are repeated by VoiceOver, resulting in unnecessarily verbose speech.

Lastly and most urgently, VoiceOver with Safari on MacOS is not able to select age and grade level when registering. As these are required fields, this can prevent a user from being able to create an account if they do not have another device they can use to complete the registration process. Because an account is required to use Beanstack, this issue alone can deadlock users out of the entire platform.

Layout and Navigation

The website makes good use of regions and landmarks to denote the header, main content, and footer. Skip to main content links are provided which allow screen reader users to quickly navigate to the main content of the page, bypassing the navigation menu. The button for logging reading time, a task core to the usage of the platform, is large and prominently featured, which makes it quick and easy for low-vision users to find.

Many individual elements throughout the site are missing roles and features, hampering their accessibility to screen reader users. Expandable buttons, particularly in the navigation menu, do not convey to screen readers that they expand menus nor the current expanded or collapsed state of their menus. Several features are accessed through modals or pop-up dialogs which cannot be dismissed with the “esc” key and do not confine keyboard focus to them while they are open. Many images do not have alt text descriptions, making their purpose difficult to determine. Some clickable elements are not recognized by screen readers as controls and cannot be reached using the tab key.

Low-vision testers found that the website does not offer a dark mode, which limits the ways in which contrast can be adjusted to meet various visual needs. Most elements of the website remain accessible when magnified, but buttons too close modals can become obscured when using Fusion.

Participating in Challenges

Screen reader and magnification users can navigate to and interact with the features which contribute toward completing challenges. Low-vision testers did not identify significant issues beyond those which impact their usage of the site, such as the lack of a dark mode. Screen reader users, however, encountered several barriers which degraded the experience.

When viewing the details of a challenge, screen readers do not identify which subpage, such as badges or tickets, is currently displayed. Alt text for challenge and badge images is generic and not descriptive, which causes clutter without providing value. Content which is supposed to be hidden is visible to screen readers, which can cause confusion when a screen reader user attempts to scroll through the various badges.

Logging reading time is done within a modal which cannot be dismissed with “esc” and does not trap keyboard focus. The calendar within this modal contains date cells with overly verbose ARIA labels, forcing a screen reader user to wait several seconds to hear all the information about a date. If using VoiceOver, focus is ejected when attempting to navigate to the previous or next month. VoiceOver also has trouble reading the current timestamp when logging via timer, as it recognizes each digit as a separate element. Keyboard focus can leave the modal and activate a link elsewhere on the page, which causes the modal to vanish and the user to lose any time or information which was not already submitted.

The heading hierarchy used while viewing activities is illogical, with level 4 headings being used to denote primary sections of the content. Screen reader users can navigate and complete activities but are not informed that some checkboxes cannot be unchecked once they have been checked.

When leaving a review, screen readers do not announce when the text or picture review options are expanded. When writing a review, screen readers can tab to all 245 available emojis, which is very cluttered without a pagination system. There is no option to provide alt text when leaving a picture review, which means users cannot make picture reviews accessible to screen reader users even if they want to.

Screen reader users can browse recommendations, but searching and filtering are not without frustration, particularly for VoiceOver users. VoiceOver is not able to activate links to select filter criteria, and while it is able to expand the search field, there is no spoken announcement and focus is not moved to it.

Visual Adjustment

Beanstack does not offer any sitewide visual accessibility settings. Users are reliant on magnification, high contrast, and dark mode within their operating system or browser, which may not always be as compatible with the specific content of the website.

Development Recommendations

  • Use technology-agnostic event handlers for custom controls so they can be activated using assistive technology.
  • Write meaningful alt text for important images and image links and provide empty alt text for images which can be ignored by screen readers to reduce clutter.
  • Add accessibility attributes to controls to allow screen readers to announce their state.
  • Allow for the “esc” key to close modals, and trap keyboard focus within modals until they are dismissed.
  • Rewrite overly verbose ARIA labels to be descriptive but concise.
  • Adjust foreground and background colours so all elements meet contrast requirements (3:1 for large elements, 4.5:1 otherwise).
  • Provide native visual accessibility options such as text size, high contrast, and dark mode.

Beanstack App for iOS

  • Tested OS version: iOS 17.5.1
  • Tested app version: 4.32.26 and 4.32.30

Sign-up and Login

Registering and logging in present challenges to VoiceOver and magnification users. Controls lacking a label or a proper role are difficult for VoiceOver users to identify. Many of the buttons to proceed to the next screen are obscured when the on-screen keyboard is shown, forcing users to dismiss it before they can continue.

The app window appears to be calibrated for the screen size of an iPhone and does not properly enlarge on an iPad. This does not allow magnification users to benefit from the larger screen. This issue is particularly noticeable when the on-screen keyboard is visible and taking up some of the limited screen space. Attempting to make use of accessible large text sizes pushes information and controls off the screen, which makes signing up and logging in next to impossible.

Layout and Navigation

The Beanstack app is arranged using a system which emulates a tabbed interface. Because tabs are emulated rather than being used natively, VoiceOver recognizes tab controls as standard buttons, and is not able to announce information about each tab control’s state.

Navigating the app is inconvenient for VoiceOver users. Sections on screen are not reliably denoted using headings, so VoiceOver users cannot make use of rotor gestures to jump from heading to heading to locate a specific section of the screen. Many controls, such as cancel buttons, are not properly labeled, instead reading something not descriptive such as ‘Screenshot’. Other controls have generic and repetitive labels such as ‘View All’, which does not clearly identify the context of the control’s purpose. Still more controls, such as tabs on the Log and Discover pages, are labeled twice, which is unnecessarily verbose. Back buttons do not make use of native iOS controls, limiting VoiceOver’s ability to properly recognize them and activate them via common gestures.

Navigation is also challenging for low-vision users. Using accessible large text sizes continues to cause content to exceed the bounds of the screen, which is not helped by the window utilizing less than the entire screen on iPad. Text boxes throughout the app are very faint and difficult to see.

Participating in Challenges

Magnification users encounter barriers when performing tasks related to challenges, such as logging reading time. Enlarged content being pushed outside of the screen margins makes it difficult to select a title to log time for. Text boxes which do not meet colour contrast requirements make it difficult to enter information.

The Log Reading screen is one of the easier screens to navigate and operate using VoiceOver, as all the controls on this screen are labeled. However, buttons have separate text labels in edition to integrated labels, which causes VoiceOver to recognize two separate elements with the same label. Attempting to activate the text-only label element does not activate the button. This causes unnecessary clutter, and can confuse less savvy users.

Visual Adjustment

The Beanstack app does not offer any visual adjustment settings, such as adjusting text size, contrast, or dark mode. Users are reliant on their device’s low-vision accessibility settings, which the app is not fully compatible with. This results in issues such as content being pushed off the screen when enlarged, which would not happen if content could be magnified using options within the app.

Development Recommendations

  • Use native iOS controls for navigational elements, such as tabs and back buttons.
  • Use headings to mark the start of sections on screens with a lot of content.
  • Provide concise, descriptive labels for all controls and images.
  • Adjust foreground and background colours so all elements meet contrast requirements (3:1 for large elements, 4.5:1 otherwise).
  • Implement visual accessibility options such as text size, high contrast, and dark mode. These settings must be accessible without being logged in.

Beanstack App for Android

  • Tested OS version: Android 14
  • Tested app version: 4.32.30

Sign-up and Login

Low-vision testers did not encounter any issues signing up or logging in. The same cannot be said for TalkBack. The first set of screens contain many elements which are not recognized as buttons or any other type of control. Many of these controls are unlabeled, which makes their purpose unclear. TalkBack’s focus jumps around unpredictably because of a carousel that cannot be paused.

The Find a Site screen is completely inaccessible with TalkBack, which recognizes only a blank screen. AI recognition and trial and error is necessary to search for and select a library site, which is challenging for advanced users and likely beyond the abilities of less technology-savvy users, completely preventing them from accessing the platform. TalkBack can accessibly navigate the screens following Find a Site, assuming the user is able to reach them.

Layout and Navigation

The app is laid out with navigational buttons at the top of the screen, and tab controls at the bottom. Headings are not used, depriving users of a way to determine which screen they are on and to quickly navigate to sections of the screen. Some tab controls are erroneously encountered twice by TalkBack, while a control labeled ‘+’ is read as a tab control but is not.

Controls on many screens throughout the app are missing labels and/or roles. Examples include the activity buttons on the Activities screen being read as ‘Undefined Activity’, the ‘Close Streak Message’ control not being recognized as a button, and book list labels containing multiple elements, some of which being labeled and others being read as unlabeled.

Low-vision testers did not encounter any significant difficulty navigating and using the Beanstack app for Android. It is important to stress that the needs of individual low-vision users can vary greatly, and an app that is easy for one user to navigate can be extremely difficult for another.

Participating in Challenges

TalkBack users can participate in challenges, but the prevalence of unlabeled and role-less elements complicates the process. Other behaviour commonly implemented to improve efficiency with screen readers is also absent. TalkBack does not announce when some of the contents on screen change, such as when switching between tabs on a challenge’s information screen. Focus is not moved to newly available content, which can cause TalkBack users to struggle to find it, especially if there is also no spoken announcement stating the content has appeared or changed.

Additional issues were noted by talkBack users on the Log tab. It contains a search field which loads what is recognized as a blank screen when typed into and submitted. TalkBack users are unable to use this field or even determine what its purpose is supposed to be. When selecting a sub-tab on the Log tab, some other tab controls become impossible to focus, preventing TalkBack users from being able to activate them to display their tabs.

Logging reading time can be done using TalkBack, but few of the controls are recognized as buttons or other clickable elements. This includes confirmation buttons, controls to select options, and dates within the calendar. Some of the controls that TalkBack does recognize as a button have duplicated labels, and others have text labels which are not properly associated with the control, causing them to be read separately. Togglable controls, such as the option to specify if a book has been finished, do not report their current state to TalkBack. These issues may not completely prevent a user from participating, but they make the process more difficult and lengthy than it is for sighted users.

Visual Adjustment

The Beanstack app does not offer any visual adjustment settings, such as adjusting text size, contrast, or dark mode. Users are reliant on their device’s low-vision accessibility settings, which the app is not fully compatible with.

Development Recommendations

  • Apply concise, descriptive labels to all controls and images.
  • Apply appropriate roles to custom controls.
  • Completely rewrite search results screens to use elements TalkBack can focus and read.
  • Make use of headings to help users identify and navigate screens.
  • Adjust foreground and background colours so all elements meet contrast requirements (3:1 for large elements, 4.5:1 otherwise).
  • Implement visual accessibility options such as text size, high contrast, and dark mode.

Conclusion

The Beanstack platform includes many accessibility barriers. Many can be powered through with time, effort, and a little trial and error. However, some issues prevent a potential user from being able to sign up or log in, leaving them unable to use the platform at all, regardless of how accessible the rest of its features are. These issues will need to be thoroughly addressed if readers with print disabilities are to participate as fully as their fellow currently non-disabled book lovers.

Systems and Assistive Technology

  • Operating Systems
    • Windows 11
    • macOS 14.5
    • Linux 6.9.6
    • iOS 17.5.1
    • Android 14
  • Mobile Applications
    • Beanstack 4.32.26 and 4.32.30 (iOS)
    • Beanstack 4.32.30 (Android)
  • Browsers
    • Chrome 126 (Windows)
    • Edge 125 (Windows)
    • Safari 17.5 (MacOS)
    • Firefox 127 and 128 (Windows, Linux)
  • Screen-readers
    • NVDA 2024.2 (Windows)
    • JAWS 2024 (Windows)
    • Narrator (Windows)
    • ORCA (Linux)
    • VoiceOver (macOS, iOS)
    • TalkBack 14 (Android)
  • Magnification
    • Fusion 2023 (Windows)
    • Zoom (iOS, MacOS)

Acknowledgements

The following testers and editors contributed to this report:

  • Patrick Bouchard (lead writer)
  • Tait Hoyem
  • Simon Jaeger
  • Riane LaPaire
  • Ka Li
  • Michael Krupp
  • Megan Sellmer
  • Melody Shih
  • John Ylioja

Published by the National Network for Equitable Library Service (NNELS), Vancouver BC, 2024.

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