PDF | DOCX

Accessibility Report for Flipster

December 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.

Accessibility Summary

The Flipster platform has added some accessible features to its app and web platforms. However, testers with print disabilities did find accessibility barriers that prevented them from enjoying all the features offered by Flipster.

The text view for reading magazines is accessible for screen reader users. But it does not have visual adjustments that would allow users to adjust/customize the text’s view (changing the font, font size, and text spacing, etc.) according to their own preferences. Readers with low vision must use the page view zoom function to read magazines because the text view does not offer this feature. The Flipster website does not have a text view option to read magazines, so that needs to be added to make it accessible for screen reader users.

Accessibility improvements discussed in this report also include improving the app and website labels. Some of the labels are overly verbose and have the word “label” in the actual label, which is redundant. And other labels are not descriptive enough. Making all the Flipster apps and website labels clear and descriptive would be very helpful for adaptive technology users. Additionally, improving the text-to-speech options so that users can adjust the speed to their preference would be beneficial.

Introduction

Flipster provides access to digital magazines through participating public libraries. The service is offered as a mobile application and website. Our testers used screen-reading and magnification software to assess the usability of the apps and website across supported platforms. 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 content through their local public library 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 Flipster itself. As a result, some functionality may not be discussed at all or in-depth.

While accessibility appears to be a consideration in the Flipster apps and website design, testers found moderate accessibility barriers in the mobile applications, and screen-reader users were unable to read magazines at all on the Flipster website because it lacks a text view option.

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 Flipster apps and website. Below you will find the testing results and their related recommendations as they pertain to:

• Library Access
• Signing In
• Searches
• Reading and Navigating Magazines
• Visual Adjustments

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.

Flipster App for iOS

• Tested iOS version: 12.4, 14.6+
• Tested app version: 5.6.3

Signing In

Logging in is a simple, accessible process that only requires one to find their library and enter a card number. Testers encountered no issues in this section of the app. Unlike the website, there is no need to create an additional account to save articles or bookmarks.

General

The home screen of the iOS app is divided into three tabs–”Explore,” “My Shelf,” and “Read.” On the “Explore” tab, the top heading is read as “Explore button heading” by VoiceOver, though nothing happens when pressed.

Searching and Browsing

The list of magazines on the “Explore” page is easy to read and navigate, with one minor note. VoiceOver users found that each magazine listing has an extra control for the issue date, which is redundant because VoiceOver already reads this information after the magazine’s title. For example, the following controls are read as part of a magazine title when swiping right:

• “Canadian living: November, 2021”
• “Download button”
• “November, 2021”

The “Shelf” tab lists all downloaded titles, their expiration dates, and an option to delete them. Unfortunately, some of the VoiceOver labels on this page are overly verbose and include the word label–for instance, “percent read label” and “chronology label.” Removing the word “label” would be helpful, but eliminating these controls entirely and adding the “percent read” information as part of the magazine title is the best solution, like:

Canadian living: November, 2021, 35% read

This reduces the number of VoiceOver controls on the shelf page, which allows for more concise navigation without any loss in functionality.

The search function is very minimal and intuitive. Search results appear similarly to listings on the “Explore” page, with a download button next to each item. Testers did not find filtering or advanced search functions, and the search results seem to include all magazines even when a specific category is selected on the “Explore” page.

When viewing the info page for a magazine, the previous issues are listed after the other metadata. Unlike other listings in the app, the download buttons next to previous issues are labelled “ic download.”

Reading and Navigation

The magazine reader is accessible to VoiceOver as long as the text view is selected. A zoom function is available for adjusting the size of text and images in page view, but VoiceOver cannot read the text and no other visual adjustments are possible. Text view exposes the text of articles to VoiceOver, but no visual adjustments are available in this view as well. Since images are not included in text view, it is also not possible to navigate to them with VoiceOver.

These extra steps and the lack of visual adjustments make the text view option feel “bolted on” to the reader rather than simply another reading mode. Text view could solve accessibility concerns for users with low vision, dyslexia, or other print disabilities that require fine-tuning of text appearance, but Flipster did not include these options.

Ideally, the reader would work best if page view were made accessible, but this would require rendering text with markup (such as HTML) rather than simply displaying images of each page. If this is not possible, the app could remember the text view setting and always return to it, rather than defaulting to page view every time a new article or magazine is opened.

The “Table of Contents” screen is accessible, but the labels for each item or section are overly verbose. VoiceOver will say “table of contents item” before the name of the article or “table of contents section” followed by the section’s name. Each item should just be the name of the article, and each section should be the name of the section with a heading attached for efficient navigation. As stated above, navigating to a new section will also disable text view even if it was selected when moving to the table of contents, which creates an extra step for anyone relying on this view.

Bookmarks can only be created from page view, and they appear in the “Shelf” tab. When returning to a bookmark, page view once again becomes the active mode. This creates two extra steps for text view users: creating a bookmark and returning to it.

The app includes a text-to-speech function that automatically reads articles using the system voice. The following concerns were noted by testers of this mode:

• There are only three speech rates that equate to slow, normal, and fast. More granularity would be helpful: Most testers found the “normal” speed to be quite slow, while the “fast” speed is extremely fast–but not as fast as the maximum speech rate of the selected voice.
• It is not possible to play or stop narration using a headset. Instead, using the play controls on the headset will resume any previous media playback and cause the narration to become unresponsive and continue reading until the text-to-speech screen is closed.
• The narration will never play if the device’s mute switch is enabled, causing some users to believe the function does not work at all.
• The VoiceOver labels for the speed controls are + and -, which are technically correct but somewhat unclear without context. (If a user touches these buttons without realizing they are in the speed control section, they may not understand their purpose.) Relabeling these to “Increase Speech Rate” and “Decrease Speech Rate” would be helpful.

Visual Adjustment

Low-vision testers found that the icons and buttons were quite small. A less compact view would go a long way to making the app more usable.

As mentioned above, the text view does not allow any control over the way text is visually presented. This leaves the zoom function of page view as the only way to adjust the appearance of magazines. As a result, this app falls short for users requiring a custom colour scheme, line spacing, or other fine tunings.

Development Recommendations

• Remove verbose labels in the Shelf tab and other areas of the app
• Fix labels on past articles, download buttons, and speech rate controls
• Allow text view to be the default view when first opening a magazine or article
• Add visual adjustments to text view so that visual readers can still take advantage of the functionality
• Troubleshoot text-to-speech playback issues (stuck playback and mute switch)
• Add more speech rate options to text-to-speech
• Make the process of adding bookmarks in page and text views more accessible

Flipster App for Android

• Tested Android Version: 11
• Tested app version: 3.3.1

Signing In

Testers encountered no issues with the sign-in process. An alert for screen-readers to indicate that library suggestions have loaded would be helpful.

General

The app contains three tabs–”Explore,” “My Shelf,” and “Read.” TalkBack correctly indicates which of these tabs is selected, but it does not identify them as tabs.

The “Explore” page contains most of the app’s functionality, including a drawer menu at the top, which exposes sort, filtering, and library management. TalkBack correctly focuses on the first option in this menu after it is opened.

Searching and Browsing

The “Explore” page displays a list of available magazines. By default, all categories are shown, and the list is sorted by recent. Each magazine listing has both a “Download” button and an “Info” button visible to TalkBack, but since tapping a magazine title will display its information page, the info button is redundant. Notably, the info button does not appear in magazine listings when performing a search.

The info screen for a magazine shows its publication date, description, and other relevant information; it also lists past issues, which users can download separately to the shelf. Testers found no accessibility issues here.

The shelf tab contains any magazines that have been downloaded. The screen-reader labels for progress and issue date are called “Percentage label” and “Chronology label,” which is redundant. Merging the progress percentage into the magazine label would make it practical to hide these controls from TalkBack, but removing the word “Label” will suffice if this isn’t done. This is identical to a bug on iOS, which suggests a shared codebase between the mobile apps.

Reading and Navigation

The Android app has a text view that users can open from any page that contains text. If the page has only images, the button to open text view will not be present. This could confuse users into believing magazines are not accessible if they search for the button from the front cover.

When navigating to a new article via the table of contents, page view automatically becomes the active view, and a screen-reader user will need to open text view again. Text view also lacks any visual adjustment settings, limiting its potential for visual readers who require customization beyond page view’s zoom function. Lastly, there is no way to add a bookmark from the text view, so it is necessary to return to the page view to create one. When returning to that bookmark, page view once again becomes the active mode. This creates two extra steps for text view users.

The lack of visual adjustments and the extra required steps cause text view to feel somewhat “bolted on” rather than just another reading mode. Ideally, the reader would work best if the page view was made accessible, but this would require rendering text with markup (such as HTML) rather than simply displaying images of each page. If this is not possible, the app could remember the text view setting and always return to it, rather than defaulting to page view every time a new article or magazine is opened.

The text-to-speech mode is much more limited on Android than iOS, though it appears more stable and responsive. Regardless of the system voice and preferred engine that is selected, Flipster will always read articles using Google’s text-to-speech engine. There is no speed adjustment, but the app does respect the speech rate configured in text-to-speech settings.

Visual Adjustment

By default, magazines are shown in a page view, which displays images of each page. The only visual adjustment in this mode is a zoom feature. The app zooms back out to the default setting when turning a page, so users who want to zoom in will have to do so repeatedly on every new page.

Pages with text can also be opened in a text view, which exposes the original text of the chosen article; however, this mode lacks any visual adjustment at all. Text view could be a great option for readers with print disabilities, but more text adjustments are needed to achieve this. At a minimum, a variety of fonts (including Dyslexic,) colour adjustments, and a line spacing setting would go a long way toward making the text more readable.

Development Recommendations

• Remove redundant “Info” buttons
• Change labels on the Shelf tab so that they do not include the word “Label”
• Add a rate adjustment to the text-to-speech mode and respect the system voice
• Allow text view to be the default when jumping to a new page
• Add visual adjustments to both the text and page views, including a dyslexic font

Flipster Website

Signing In

Testers logged into the website using a specific Northwest Territories Library URL and a library card number. This process was simple and accessible.

Multiple testers reported that the first link on the page would sometimes open the “Select Resource” page with an error message: “A System Problem has occurred. To begin a new session, please login again.” This login page did not accept a library card number, so it was necessary to navigate back to the specific login page for the NWT library.

General

Above the search field, screen-readers will encounter a piece of text which reads as follows:

“Press ENTER to clear search text or tab to go to SEARCH button.”

This text appears to be misplaced, as the same hint is announced when navigating to the “Clear” button. Further hints are found on the search button and the search field. These are well-intended, but it is ultimately the user’s responsibility to operate their device, and the instructions were designed with the assumption that the user is on a Windows browser and using a keyboard. Some of the referenced commands would not work on macOS, and none of them would work on a mobile device with a touchscreen. As a result, the users who need these instructions may become confused by their screen-reader telling them to navigate using the tab key when their device only has a flat screen.

Searching and Browsing

In carousels, the cover images are announced by screen-readers as “Link to detail record.” This is not a useful label, and since the magazine title is listed in addition to the cover, the best solution is to remove the alt-text of this image entirely.

Regardless of which display format is used, search results are screen-reader accessible, and each begins with a new heading, allowing for easy navigation from one result to the next. In detail view, the metadata for each magazine is rendered on a single line, and a screen-reader announces it as one block of text. Breaking this metadata into items in an unordered list would allow screen-reader users to move through list items and read the information more efficiently.

The “Share” button is located in an HTML region that has a label of “Alert, Save and Share Results.” This label is quite verbose and is spoken by screen-readers when navigating to the button. When the share menu is opened, the keyboard focus is moved to a control called “Add to folder,” which is a heading. Pressing the enter key at this point will close the menu. The correct link to add the search to a folder is labelled with the search text. This may be confusing to screen-reader users, and a hint on this link may help clarify its purpose (for example, “add this search to your folder.”)

Advanced search is minimal but powerful. Keyboard navigation works very well in this view: Pressing space on a “Select a Field” button will open the list of available fields, and the arrow keys will traverse the list. The clear button on this page is labelled “Clear Find Field.” This is misleading because “Find Field” is not a common way to refer to a search field, and the button clears multiple fields. This button label would be less ambiguous if it were called “Clear search,” “Reset,” or “Clear”.

Reading and Navigation

Unlike the mobile applications, testers could not find a text view in the web-based reader, and screen-reader users could not read the text of magazines or navigate through pages. The help section references settings for Acrobat Reader, but this documentation appears to be out of date or not applicable to the current reader view. The availability of a text view on the web would allow for more specific visual adjustments (such as font and line spacing) in addition to providing screen-reader access to magazines.

Pages can only be turned with a mouse click, preventing screen-reader users from doing so conveniently.

Visual Adjustment

Since magazines can only be read in page view, the only visual adjustment is the zoom setting. By default, this resets every time a page is turned. A setting called “Zoom out on page change” controls this functionality. For users who rely on the zoom feature, turning this option off by default would make more sense. This setting does not save across sessions, so it must be disabled every time a new magazine is opened. The ability to manipulate text appearance directly would create a much more accessible experience for users with learning disabilities or other needs not covered by the zoom feature.

Development Recommendations

• Ensure labels are clear and informative
• Split up metadata into an unordered list to make it more readable for screen-readers
• Remove verbose keyboard hints on basic search controls
• Ensure text view is available in the magazine reader and that keyboard users can access it efficiently
• Consider disabling “Zoom Out on Page Change” by default
• Add additional visual adjustment settings

Conclusion

The Flipster platform has been designed with accessibility as a consideration, and the interface is quite usable with screen-readers. Unfortunately, the lack of a text view on the web means that screen-reader users cannot use the service’s core functionality. The mobile applications provide this functionality, but it is not a smooth experience compared to page view. To achieve optimal accessibility, text view should be available on all platforms and include all standard appearance settings. Users should then be able to choose text view as the default reading mode. NNELS appreciates the accessibility enhancements across all tested platforms and hopes that the suggestions in this report can assist the developers in working toward a fully-accessible Flipster experience.

Systems and Assistive Technology

• Operating Systems
  • Windows 10 (20H2)
  • macOS 11.3
  • iOS 12.4 and 14.4+
  • Android 10 and 11
• Mobile Applications
  • Flipster 5.6.4 (iOS)
  • Flipster 3.3.1 (Android)
• Browsers
  • Chrome 86, 88, 90, 91
  • Safari 14.1
• Screen-readers
  • NVDA 2020.4 (Windows)
  • JAWS 2020 and 2021 (Windows)
  • VoiceOver (macOS)
  • VoiceOver Touch (iOS)
  • TalkBack (Android)
• Magnification
  • Magnifier (Windows)
  • ZoomText 2020 (Windows)
  • Zoom (iOS)

Acknowledgements

The following testers and editors contributed to this report:

• Maryse Glaude-Beaulieu
• Simon Jaeger (Lead Writer)
• David Kopman
• Riane LaPaire
• Ka Li
• Richard Marion
• Laetitia Mfamobani
• Deanna Ng
• Megan Sellmer

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

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