Accessibility Report for Tumble Products

PDF | DOCX

February 2024

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

This report provides information on the accessibility of TumbleBookLibrary (and its counterpart BiblioEnfants), TeenBookCloud, and TumbleMath. These products are available through schools and local libraries.

Our testers used a range of assistive technology and devices to assess the usability of the above products on supported platforms. All products are available on the web, and TumbleBooks also offers a mobile application. 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. Several public libraries were used for testing, with additional accounts provided by NWT Libraries for testers who required them.

This report assesses the usability experience of readers with print disabilities and to what extent they can access digital content 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 Tumble products. As a result, some functionality may not be discussed at all or in-depth.

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 users 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 modes to assist people with low vision.

To ensure the 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 Tumble products. Below, you will find the testing results and their related recommendations as they pertain to:

  • Signing In and Registering.
  • Searching and Browsing Content.
  • Reading and Navigating Content.
  • 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.

TumbleBookLibrary Website

TumbleBookLibrary (or TumbleBooks) provides access to children’s stories in various formats, including audiobooks, graphic novels, read-alongs, and videos. A French version of this website is provided under the name BiblioEnfants.

Signing In

For library-based accounts, TumbleBooks did not require a specific sign-in; instead, testers could use a link on the library’s website to launch the TumbleBooks website, which required no sign-in or other authentication.

When visiting tumblebooklibrary.com directly, a login window is presented. This might be used for school accounts. Notably, the text fields for entering username and password have no associated label, so this form may not be read correctly when navigating with a screen reader.

General

Upon entering the Tumble Books website, the user is met with abundant colour. While vibrant colours can create a fun atmosphere for young readers, this also creates a barrier for those in the low-vision community. Many of the colour choices do not meet the WCAG 2.1 AA colour contrast requirements. The following buttons located on the homepage failed to meet these requirements:

  • Read-Alongs: 2:1;
  • Ebooks: 1.5:1;
  • Graphic Novels: 1.6:1.

Most pages contain a language selection dropdown and two distinct navigation sections. The second section contains links to specific types of formats—such as ebooks, graphic novels, and read-alongs. The first navigation section contains general links, such as “Favourites”, “Contact”, “Newsletter”, and various help pages.

These two navigation sections need better separation both visually and nonvisually. While this navigation is fully accessible to screen reader users, there is no separation between the language selector and the two menus, and it is difficult to move from one to the next quickly, requiring excessive key presses or swipes. This navigation area comprises nearly 20 links or other controls, which may confuse novice screen reader users—particularly children.

High magnification can cause parts of the top navigation to scroll completely off the screen, making the outer links unusable.

Headings are used inconsistently across the site, with some pages (including home) lacking a level-1 heading at the start of the main content and some pages—such as book details—having important content before the main heading.

Screen reader users often rely on the title of the current window or tab to determine where they are. With TumbleBooks, the title of the active tab changes from one page to the next, but these titles are often non-specific, verbose, and unhelpful. For instance, every title starts with “TumbleBooks – Ebooks for eKids!” followed by a generic name for the current page. These titles would be far more readable if the changeable section were prepended to the beginning rather than added to the end. This would result in titles such as “Books List – TumbleBooks – Ebooks for eKids!”

Often, there is nothing after the static part of the tab title, or if there is, it may not be specific: On a books list, it doesn’t specify whether the list contains graphic novels, ebooks, or another type of content. When reading the record details page for an item, the item’s name is not listed—the last part of the tab title simply says “Book”, even if the record page displays a video or other type of content. When a book or video is open, the last part of the tab title might say “EPub Player”, or nothing at all.

When books are identified by a cover image, the cover often includes the author’s name, but the alt text for the image only contains the book title, so a user relying on alt text would need to go to the details page for each book to read the name of the author. In many cases, these cover images are low-quality and hard for users to read with high magnification.

The site does not use consistent colour and contrast across pages or respect the user’s contrast or dark mode preferences.

Home

The homepage contains many carousels showcasing new books and other curated lists. The initial slideshow—which comes before the first heading on the page—is set to auto-scroll by default, so screen reader navigation is very inconsistent. A pause button is available, but every page refresh causes the carousel to start scrolling again. When this top carousel features a book summary, it is often truncated with a “[more…]” at the end. If this “[more…]” text is clickable, screen reader users are not able to activate it and view the rest of the summary.

The remaining carousels are largely accessible to screen reader users, apart from the lack of author names on book covers. The heading before each carousel contains its name and acts as a link to open the list of items.

As well as the “Previous” and “Next” buttons, each carousel has pagination buttons for moving through the “pages” of items in the carousel. For screen reader users, these buttons are mislabelled as “Go to slide 1”, “Go to slide 2”, etc. In reality, these buttons go to the first and second groups of slides. Replacing the word “slide” with “page”—perhaps not the correct terminology for carousels—would make the function of these buttons more intuitive and clear.

Searching

There is no search field on the homepage or in the top region of every page. Instead, a “TumbleSearch” option is located in the navigation menu.

The search page contains separate form fields for each search criteria, such as author, title and keyword. Each of these fields is followed by a separate “Go” button corresponding to that particular criteria, meaning it is necessary to press a different “Go” button when searching for an author instead of a title. It is necessary to specifically press the correct “Go” button to perform the search; pressing enter in the text field after typing a query does not work on any operating system.

This is cumbersome in many ways: For usability—especially when children are the primary audience—it would be better to have a single search field on every page which accepts combinations of title, author and other queries. The existing interface is useful but functions more like an advanced search page and contains potentially unfamiliar terms such as “Lexile”. In short, it doesn’t cater to the audience very well.

For screen reader users, this interface poses additional barriers. The labels for each search field are not associated with the text field, so in many cases, screen readers will simply say “Edit”, or “Text Field”, without telling users what type of search term they should be writing into the text field. It would be very easy for even an experienced screen reader user to type an author into the “Search by Title” field because of the missing label. The “Go” buttons also do not have a specific label to indicate the type of search they will submit. Lastly, a MacOS tester noted that after loading the search page, VoiceOver’s cursor consistently jumped to the footer at the bottom.

The autocomplete functionality works well with screen readers and keyboards. While typing into a search field, the number of autocomplete results is automatically announced after a short delay, and these results can be reviewed and chosen easily. However, if the user types a search term that returns no results, the screen reader will still claim there is one autocomplete result, continuing to repeat this announcement as more letters are typed. Pressing the down arrow to review that nonexistent result will instead clear the search field.

Search results pages use the same layout as the detail view, but these pages lack sorting and filtering options, which could result in extra navigation while trying to find the desired title. Each book is separated by a level-2 heading, but the “Book Details” heading is also level-2. The “Add To Favorites” and “Read Online” links are above the book title heading, so it is necessary to navigate backwards to find them. The book title heading is also not a link, so if one wanted to go to the record page for a book, one would need to find the book cover image, which is up even further from the “Read Online” link.

Browsing

Three distinct views are available when browsing titles:

Category view is presented when first opening an item from the top navigation menu, such as “Read-Alongs” or “Ebooks”. This view is also used on the homepage. Each category is presented under a heading, with carousels containing book cover images and pagination links. The book cover images are missing the author’s name, and the pagination links are mistakenly labelled with the word “slide”, where “page” might be more appropriate.

When activating the link for a particular category or the “View All Titles” link, the book list will be displayed in cover view. Much like the cover images in category view, each book cover has alt text that contains the title and content type—for example, “Because of Winn-Dixie (EBook)”. In cover view, there is no heading before the list of books—or anywhere else on the page, but the book list is contained in the main navigation landmark and is, therefore, easy to find. This view has additional issues, including the alt text for book covers not being descriptive and the images often being low-quality and difficult to see at high magnification.

Detail view can be activated from cover view. In detail view, titles, authors, and summaries are available, as well as buttons to read the title or add it to favourites. For all testers, the detail view is preferable to the cover view. However, this view still has minor accessibility barriers that may cause confusion, especially for younger readers.

The book title and summary are contained under a level-2 heading, leaving screen reader users with no way to move through books quickly. The cover, “Read Online”, and “Add to Favourites” buttons are all above the book title heading in navigation order, meaning that if a screen reader user wanted to go to a book’s details page, read it, or favourite it, they would need to navigate backwards from the heading. Adding the heading to the book cover would be a better approach, as that heading would then serve as a link to the details page and would be immediately followed by the action buttons.

Both detail and cover views offer dropdowns with sorting options. On Windows, it is possible to cause an instant page reload by changing these options with the arrow keys without first opening the dropdown. This will unexpectedly change keyboard focus, and the WCAG recommends against this behaviour, instead suggesting a submit button. The TumbleBooks pages do contain a “Save” button after the sorting options, which appears to save the current configuration so it can be applied to future book lists. However, this produced inconsistent results, with some testers needing to switch to detail view manually on every new page.

When a large list of books is displayed, pagination links allow for navigating between results pages. These links would benefit from clearer labels: The links to move backward and forward by one page are labelled “«” and “»”, which may be skipped entirely by some screen readers. The links to specific pages are only labelled with the page number. A specific screen reader label which adds the word “Page” to each link would help eliminate confusion, and a container, such as a list, would act as a navigation aid for screen reader users, allowing them to navigate in and out of the pagination section.

Item Details

The details page resembles the layout of the details view and is similar for all titles, whether videos or stories. There is no level-1 heading at the start of the main content, but there is a level-2 heading before the book summary. Unfortunately, this heading is after the action buttons such as “Read Online” and “Add to Favourites” in reading order, so a screen reader user navigating by heading would likely miss these controls entirely and may become confused while trying to find the link to read the book.

Most of the content of details pages is accessible to screen readers. The most notable exception is the “You may also like:” carousel, where each book cover has an alt text of “book cover”. This section is largely unusable with screen readers as there is no way to read the titles of books in the carousel without opening each details page separately.

When adding a book to favourites, the page displays an alert to indicate the book has been successfully added, but the button does not change its label to “Remove from Favourites” or similar, and repeated presses of the button will continue to show alerts claiming the book has been added to favourites, even if it is already there.

Ebooks

Ebooks can be displayed in one of two views, which differ significantly. Based on the title of the reader webpage, these views are hereafter referred to as the EPub Player and the HTML5 Player.

The EPub Player is used for books such as BenBee and the Teacher Griefer. Several accessibility barriers lead to this view being frustrating for all testers and almost completely unusable with screen readers:

First, all navigation controls are hidden by default and can only be shown with a screen reader by activating the blank control at the bottom of the page. This control has no role or label, and some screen readers do not detect it. After finding and activating this control, screen reader users have no indication that the navigation menu has appeared, and the menu loads at the top of the page, whereas the non-button that makes it visible is at the bottom. One tester reported that the controls remained visible with VoiceOver on MacOS but could not be activated. It is possible VoiceOver was detecting these controls even though they were not visually shown.

Second, the navigation menu only remains on the screen for a few seconds, so users must find and activate the desired menu item within a few seconds. All testers found this frustrating, including testers who did not use a screen reader. These menu items—and the control to display them—are also not reachable with the tab key. For a screen reader user, these compounded barriers lead to an interface whose basic navigation is unintuitive to the point of being almost completely unusable. Even if users can invoke the menu and figure out that the items have silently populated at the top of the page, it is still difficult to find and activate the desired item in the short time it remains visible.

For visual readers, the settings and navigation can be unhidden by clicking in the middle of the screen, but clicking too far to one side will cause a page turn instead. A distinct menu button would be helpful for all users.

Notably, this EPub Player lacks almost all visual appearance settings, only containing buttons for increasing or decreasing font size. There is no option to change the font, alignment, colour, or spacing.

The HTML5 player is used for books such as Because of Winn-Dixie, and a very similar view is used for read-along with the addition of audio player controls. While this view is better for usability, it still contains significant accessibility barriers, especially for screen reader and keyboard users:

The “Chapter Menu”, “Bookmark”, “Text Options”, “Colour Options”, “My Notes”, and “Help” links are all well-labelled and easy to activate with a keyboard or a screen reader, but the focus is not automatically moved to the new controls. The expanded or collapsed state of these links is not communicated to the screen reader. Immediately before and after this set of links, there are links for moving to the next or previous page of the book, which are mislabelled with part of the book URL.

Expanding more than one of these options simultaneously is possible, leading to page clutter and potential confusion. For example, a screen reader user can choose “Text Options” and “Color Options”, and then both sets of options will be available simultaneously. For many of the options, activating the link for a second time closes the popup if it is open, but this does not happen with the “My Notes” area; it stays open even after the link is activated a second time.

One possible solution involves using a tab panel for these options so that a screen reader could better indicate which is selected and design the page so that only one could be active at a time. This would encourage the screen reader user to explore the area below the tabs for new content.

Both the EPub Player and the HTML5 Player will render an entire chapter of a book at once, and within that chapter, the page navigation buttons simply scroll the text backward or forward. Unfortunately, since screen readers are designed to navigate all text in the HTML document, they can sometimes read text which is not visually shown, and moving forward a page does not actually move the screen reader focus to the start of the new page’s content. When a screen reader user reaches the end of a chapter and tries to turn the page, the first page of the chapter may still be visible, so they might only move to the second page of the same chapter. Continued presses of the arrow key will eventually refresh the page with a new chapter, but there is no non-visual indication of pages turning, so a user could easily believe the page navigation is simply not working. When moving to a previously set bookmark, the screen reader focus is also not shifted to the correct point in the chapter, so the bookmark feature is not very useful for non-visual readers.

Visually, the HTML5 player is also a better experience, with far more settings than the EPub Player. Six fonts are available, though a dyslexic-friendly font is not one of the options and would be an easy addition. Spacing and text size can be adjusted independently, and a large selection of foreground and background colours are available. Apart from the issues noted above, adjusting colour and text settings with a screen reader or keyboard is also quite accessible. However, testers requiring these adjustments noted that the buttons for size and spacing caused very small adjustments, sometimes requiring many presses to achieve a usable result. Unfortunately, settings need to be re-adjusted whenever the reader is closed and reopened. If favourites can be saved to a user’s browser, text settings should be saved similarly.

Story Books

Story books are animated audiobooks. When pressing the “Read Online” link for a story book, a media player opens with player controls.

These controls are reachable and marked as buttons for screen reader users but have no label. The interface is rendered as an array of unlabelled buttons, and there is no easy method for distinguishing between the buttons and finding the correct one. Conversely, the speed controls are labelled with “+” and “–“ symbols, and the current speed (1.0 by default) is read by screen readers, but these controls are not buttons, and the labels mention nothing about playback speed, so more clarity is still needed.

Visually, testers noted that these buttons do not have familiar icons associated with their function and can appear quite small, even with high levels of magnification. Using text labels or more familiar icons would help make these buttons recognizable.

This player is also used to play content in the “Playlists” and “Language Learning” areas.

Read-Alongs

Read-alongs are ebooks with accompanying audio narration, and TumbleBooks uses the HTML5 player to open most of them. The same text navigation controls are present in this version of the player, with the same accessibility considerations. Additionally, the page contains a list of tracks and a ”Play/Pause” button. These controls have clear labels and function as expected for screen reader users.

On this HTML5 player, the text does not appear to synchronize well with the audio. Tracks are often not clearly labelled with their chapter number, and playing a track does not cause the reader to load the corresponding chapter associated with that track. However, when a text chapter is loaded, the player moves to the correct audio file for that chapter, so the association between files and text chapters is present, but this information is not being used to its full potential.

For instance, when reading A Frog in My Throat, the tracks are labelled “Track 14”, “Track 15”, etc. Tracks 1 through 13 are nowhere to be found, and track 14 contains the narration for chapter 1. Selecting “Track 16” will cause the audio for chapter 3 to begin playing, but the text will still display chapter 1. Repeated page turns will eventually lead to chapter 2 being displayed, which will move the audio player backwards to the track associated with chapter 2.

Enhanced Ebooks

TumbleBooks appears to be rolling out a newer player for read-alongs, which is inconsistently referred to as the RA2 or RA3 player. At the time of testing, the new player is only used for one title: Lark and the Dessert Disaster.

This player solves many of the audio synchronization problems present in the HTML5 player. However, it is a significant regression in accessibility.

Each control in the player is an image labelled with the word “button” as part of its alt text. None of these controls are given the role of button, so screen reader and keyboard users cannot move to them with button navigation or the tab key. While screen readers can typically interact with these basic button-like controls, a nonstandard control such as the volume slider is entirely unusable.

The page contains a button which switches between reading controls and playback controls. This control is also an image, and its alt text changes between “Switcher Reader Button” and “Switcher Player Button” depending on which interface is visible. This label does not adequately indicate which interface is visible and which interface will be shown when the button is pressed. A slight rewording to “Switch to Player Controls” and “Switch to Reading Controls” would significantly improve the clarity of this label.

One of the buttons on this page is labelled “Swither Auto Play”, which contains a typo, is a generally unhelpful label, and appears to be completely inaccurate. The button acts more like a mute button, and its state is not correctly indicated when it is toggled on.

The controls for changing playback speed are labelled “+” and “-“, which will be ignored by some screen readers depending on their punctuation setting and may be confusing even if they are read correctly. The currently chosen speed is readable, and the “Speed Control” text serves as a helpful context indicator.

The book text allows a user to click or tap on each word to move the audio to that exact word. This is a useful feature, but unfortunately, it has disastrous results for some screen readers. VoiceOver navigates each word as a separate control, which makes the book effectively unreadable. NVDA announces the word “Clickable” before every word. This announcement can be turned off, but because the navigation controls are not properly marked up as buttons, turning off the “clickable” announcement will cause NVDA to stop indicating that the navigation controls are clickable.

When first playing a book, the button to start playback is located at the bottom of the page in screen reader navigation. The “Next” and “Previous” buttons have nothing between them until the book has been played for the first time. Once the book has started playing, the “Play (or Pause)” button will appear in a sensible place. It is unclear whether the button visually changes position or if it is only rendered this way for screen reader users.

Visually, this interface is also a step backward, as it lacks almost all the text appearance settings available in the HTML5 player. The only available setting is text size.

Graphic Novels

For screen reader users, the controls for navigating graphic novels are somewhat accessible but lacking clarity. The title of the current chapter is not shown, and the links for moving to the previous or next chapter are only labelled with the name of the chapter they will load, where “Previous Chapter” and “Next Chapter” would make more sense. The “Chapter Menu” control has no role and no expanded or collapsed state, though the list of chapters is easy to locate when the menu is opened.

Unfortunately, none of our testers could read any part of a graphic novel with a screen reader—not even the text. While this is a very visual format, the ability to read the text of each page would provide some support for readers who can see the pages but cannot read the words. Visual readers could also adjust the text appearance to adapt it to their specific reading needs.

Quizzes

Quizzes are available on the record page for certain books. When a book has an associated quiz, the link to the quizzes page will be near the “Read Online” link. Testers found no way to search specifically for books that contained quizzes.

On the page listing the available quizzes for a book, each quiz listing consists of a link labelled with the book’s title, a link labelled with the word “Quiz”, and a text element containing the quiz’s title. As a result, a screen reader user can navigate through available links but will not be told the quiz’s name corresponding with the link. Instead, they need to navigate past the link to read the quiz title. Once a quiz has been started, the name of the quiz is not shown on the quiz page or in the tab title.

Questions are displayed one page at a time, with each question’s text contained in a heading for easy navigation. Answers are chosen with radio buttons, but the text of each answer choice is not associated with the radio button, so screen reader users will need to read past the radio button to find the corresponding label.

The link to proceed to the next question is an image link with no alt text, which makes it difficult to identify. There is no control to return to a previous question. There is a “Back” link, but it exits the quiz and returns to the list of quizzes. A “Close” label would be more intuitive for this link.

When a quiz is complete, a page displays the score and, if applicable, lists the questions that were answered incorrectly as well as their correct answers.

Videos

The link for opening a video uses the same icon as the link for opening a book, and the same alt text of “Read Online” is used, which is not the correct terminology for video playback.

Videos open in a simple player, which includes standard playback controls. This player has clear labels and is largely accessible to screen readers and keyboard users, seeming to use standard browser functionality. The arrow keys will adjust the volume and move the playback position as expected, and the state of each button (mute/unmute, play/pause) is indicated by the label of the button. When using the full-screen player, buttons to pause the video and exit full-screen are available.

Puzzles and Games

Puzzles and games do not appear to offer any accessibility adjustments or screen reader considerations. Whether the games would be playable by screen reader users is uncertain, as none of the buttons and controls in the game player screen appear to have labels. Many games are visual, such as the sentence games that instruct players to find the best picture associated with the sentence. These games could be made accessible with careful use of alt text to describe each image. However, even with described images, the help text for these games referred to buttons that were not found by any screen reader user, such as the “Audio” button that allowed players to hear the sentence spoken out loud. For memory games, none of the controls have labels, and if there is a help button, screen reader users cannot locate it.

BiblioEnfants and Language Support

BiblioEnfants is a French version of TumbleBooks, accessed by changing the language in the top navigation section. While the address bar will update to indicate that the URL has changed to biblioenfants.com, the tab title remains at “TumbleBooks – eBooks for eKids!” and much of the site remains in English, including the alt text for the “TumbleBooks” logo at the top of the page, the “Book Details” heading on details pages, the carousel action buttons, and various search fields which are partially translated: “Recherche par TumbleTime :”, “Recherche par Accelerated Reader :”, etc.

When text is translated into French, no HTML language indicators are used, so screen readers cannot distinguish between English and French—and when both are heavily used, it is very important for the text to be presented with the correct Braille table and speech synthesizer. Right now, whether the screen reader is set to speak in French or English, some of the website will be spoken in the wrong language.

Development Recommendations

  • Change page titles to better indicate the currently loaded page.
  • Add additional landmarks to top navigation menus for better separation.
  • Make use of language tags so screen readers will adapt accordingly.
  • Change headings in detail view and book record pages to place them before the “Read Online” and other action links.
  • In the detail view, change book summary headings to level-3.
  • Add clearer labels to pagination links and move them inside a list or other meaningful container.
  • Label controls in the story book player.
  • Add control types, keyboard navigation, and clearer labels to controls in the RA3 reader.
  • In the EPub Player, do not auto-hide navigation controls.
  • Fix missing control types and labels in the EPub player, including the control to open the navigation menu.
  • Add a keyboard shortcut for all book players to jump to the next or previous chapter.
  • Add more visual adjustment settings to the EPub player to align it with the HTML5 player.
  • Add titles to the alt text of book covers in the “You May Also Like” sections.
  • Add authors to all book cover alt text.
  • Fix popups in the HTML5 player so that only one can be activated at a time and its state is correctly indicated to screen readers.
  • Add higher quality cover images or add book titles below each cover to serve magnification users better.
  • Use consistent contrast on all pages depending on user settings.
  • Fix labels on carousel navigation buttons to use the word “page” instead of “slide”.
  • Simplify search and ensure text fields are labelled correctly.
  • Add visual adjustment settings to the RA3 reader to align with the HTML5 player.
  • Add dyslexic font to all reader interfaces.
  • Remove inaccurate announcement when typing an invalid search term (and indicate that no results are available instead).
  • Associate labels with search text fields and add more meaningful labels to the “Go” buttons.
  • Implement a site-wide search box and reserve the current search interface for advanced searches.
  • After adding a book to favourites, change the button to allow users to remove it from favourites.
  • Associate quiz answer choices with the corresponding radio button.
  • Label the “Close” and “Next” buttons more clearly in the quiz interface.
  • Label quiz links more clearly in the list of available quizzes.
  • Add labels to game controls where possible.
  • Add labels to the login fields, username and password.
  • Ensure that the TumbleBooks website scrolls properly when magnified.
  • Improve the contrast ratio of buttons that fail to meet WCAG 2.1 AA standards.
  • Follower proper heading hierarchy across the website (level-1 heading followed by a heading level-2).
  • Turn off auto-scroll on carousels.
  • Ensure that the “[more…]” text in carousels is clickable by screen readers.
  • Add headings to the cover view.
  • Fix the bug that reloads the page when Windows users try to change the sorting options with the arrow keys before opening the dropdown menu in detail and cover view.
  • The “Save” button in the detail view should work consistently, not forcing people to switch views manually.
  • Add the ability to save visual adjustments in book players.
  • Fix the feature that allows users to click or tap on each word to move the audio to that word in read-alongs so that screen reader users can read the books.

TeenBookCloud

The TeenBookCloud (or TBC) platform is available as a website and shares many design choices with TumbleBooks but has some notable differences. To avoid the duplication of identical or slightly different information, this section will highlight differences between the platforms and mention common components originating from TumbleBooks.

Signing In

When accessed through a library, TeenBookCloud does not require a login. Libraries provide a special link to the TBC website, and the website loads its main content immediately with no further prompting.

When accessing teenbookcloud.com directly, the user is presented with a login page instead. The login session from public libraries seems to expire after some time, so it is important to bookmark that link in order to access the platform repeatedly.

General

Compared to TumbleBooks, the site has a slightly more consistent heading structure, with a level-1 heading at the top of the homepage and book detail pages.

The two top navigation menus are meaningfully separated. For screen reader users, they are separate lists and separate landmarks, though the first navigation menu is contained in a main landmark instead of a nav. This separation makes navigation much easier and more consistent.

The search link is at the top of the page and is called “Advanced Search”, implying a basic search is available elsewhere, which is not the case. The search interface is the same as that of TumbleBooks, with the same multi-button design and accessibility barriers.

On home and browse pages, the carousels used are notably different from those on TumbleBooks. For screen reader users, the carousels display all of the relevant books at once. The navigation buttons—which are actually unlabelled links—will visually scroll the carousel, but nothing changes for screen reader users. These are not necessarily inaccessible, but the presence of navigation buttons and the lack of screen reader feedback could cause users to believe the buttons are non-functional and that there are additional titles that are not seen by the screen reader.

On every page that has an “Add to Favourites” button, the button is unlabelled despite having a label on TumbleBooks.

On book information and details view pages, the graphical action buttons such as “Read Online” and “Add to Favourites” do not correctly adapt to inverted colours, which causes poor visibility due to low contrast when colours are inverted.

While TumbleBooks can sometimes use a page title that reflects the current location on the site, every page on TeenBookCloud has a page title of “TBC: Read Watch Learn”.

Common Core Portal

The Common Core Portal seems to be an organized repository of links to resources on many external websites. The accessibility of these external sites is beyond the scope of this report.

On the main landing page for the portal, all categories are shown at once with a list of standards for each. This page is not well-organized for a screen reader user—the categories have no headings, and the standards within those categories are valid links but not contained in a list. This makes navigation with most screen readers very inefficient, as navigating past every link while exploring the page manually is necessary. Headings are a minimum requirement to make this page efficient for screen reader users.

After choosing a standard such as 8.RIT.3, a record page opens with a description and a list of materials used. Much like a book record page, a level-1 heading is placed before the main content, and the favourite button, the link to open lesson plans, and the link to open quizzes all have no label.

On the lesson plans page, the links to each resource have no label, with the description of the lesson after the link in a separate text block. It is necessary to read past the links to learn which lesson they are associated with, then navigate back to the link and activate it.

There is no indication of these links opening an external website—and most or all of them do. These websites have very different layouts and accessibility, so it is helpful to inform users about links which open external websites or new tabs. Each lesson’s description lists the source but does not specify that the link will actually lead to that source.

Item Details

The details page for books, videos, and common core standards is similar to the item details page on TumbleBooks but begins with a level-1 heading at the start of the main content. For this reason, screen reader users will more easily locate the “Read Online” links and other action buttons.

There is no “You May Also Like…” section on TBC resources, so there are no unlabelled book covers either.

The controls for starting a quiz, opening a common core lesson plan, and adding an item to favourites are all missing a label.

Occasionally, a book has multiple formats available, and both formats appear as a “Read Online” link. These links would benefit from clearer labels so users can tell which format they are about to open. An example of such a book is Last of the Mohicans, The (AP).

Audiobooks

Audiobooks without accompanying text are opened using the “AudioBookCloud player”, and the tab title changes to reflect this. AudioBookCloud is a separate Tumble product which was not tested for this report, but TeenBookCloud uses the same player for audio content. Changing the tab title to “TeenBookCloud Audio Player” would eliminate possible confusion when opening audiobooks.

The interface features a summary of the chosen book, a list of tracks, and standard playback controls. All controls are links—the media controls would make more sense as buttons and screen readers would be able to navigate to them more easily. The tracks in the track list have low contrast, and high magnification levels will cause the track names to be truncated.

On the tested titles, the tracks are not labelled with the names of chapters or sections; they are simply called “Track 1”, “Track 2”, etc. Activating the link for a specific track will immediately start playback from that track.

A “Show/Hide” button at the top of the track list will toggle its visibility; however, the method used for hiding the track list does not prevent keyboard users from reaching the tracks with the tab key, nor does it prevent screen readers from reading the tracks. To a screen reader user, this toggle appears to have no effect.

Notably, screen reader users could not locate controls for changing playback speed, volume, or position within a given track. If these controls exist, they are not accessible to screen readers.

The player seems to have no additional keyboard support beyond the ability to tab between buttons and tracks. Pressing space does not pause or unpause the book, and the arrow keys appear not to affect volume and playback position. Activating a link will shift keyboard focus away from the link, which forces keyboard users to tab and then shift+tab to reach the button again. This prevents users from leaving the keyboard focus on the “Play/Pause” button and pressing the enter key to toggle it, and it prevents repeated presses of the track navigation buttons.

Ebooks

For books that do not use the AudioBookCloud player, TeenBookCloud uses the same ebook viewers discussed in the TumbleBooks section of this report. In our testing, the most common player was the HTML5 player, which has the highest number of appearance options and the best screen reader accessibility. The site also features a small selection of enhanced ebooks, which use the newer (and less accessible) read-along player.

For books which use the HTML5 player and have accompanying audio, the interface differs from the TumbleBooks Read-Alongs interface in one notable way: There is no list of audio tracks to accompany the book text. In practice, this might be the more intuitive design choice, as there is no longer any way to accidentally play a chapter that does not match the one displayed, and the track names are not especially helpful.

When using the HTML5 ebook player to read a book that has no accompanying audio, the tab title remains “TBC: Read Watch Learn”; however, both the old and the new hybrid text/audio players will incorrectly use a tab title that refers to TumbleBooks.

Development Recommendations

  • Merge TumbleBooks changes, if applicable.
  • Change the main landmark at the top of the page to a nav landmark.
  • Label carousel navigation buttons and ensure the screen reader cannot navigate to content outside the visible carousel.
  • Add more meaningful labels for “Add to Favourites” and quiz buttons.
  • Improve page titles across the site to better reflect the current page.
  • Add headings for common core categories.
  • Add better labels to common core detail pages.
  • Fix keyboard focus loss in the AudioBookCloud player.
  • Hide tracks list from screen readers when it is hidden visually.
  • Improve the contrast of “Read Online”, “Add to Favourites”, and other action buttons.

TumbleMath

TumbleMath is a collection of story books and quizzes designed to teach math concepts to children.

Signing In

TumbleMath was tested through various public libraries. Signing in involves using a special link provided by the library, which will automatically authenticate to the TumbleMath website. When visiting tumblemath.com directly in a browser, a login page is displayed instead, so saving the special library link for repeated logins is important.

As with TeenBookCloud, TumbleMath shares many common design choices with TumbleBooks.

General

As seen in Tumble Books, the user is met with abundant colour on the Tumble Math home screen. While this can make math fun and exciting for younger audiences, it does introduce some difficulties for low-vision users. The following buttons do not meet the WCAG 2.1 AA colour contrast requirements:

  • Counting: 2.4:1
  • Geometry: 2.4:1
  • Measurements: 2.5:1
  • Probability: 2:1
  • Division: 1.9:1
  • Graphing: 1.5:1
  • Finance: 1.7:1
  • Time/temperature: 2.1:1

For screen reader users, the top navigation of every page begins with the TumbleMath logo, an “Advanced Search” button, and a navigation menu. When page zoom is set particularly high, the main navigation menu disappears and is replaced (both visually and non-visually) with the word “Menu” repeated two or three times. Nothing appears to happen when these “Menu” controls are clicked or activated in any other way.

The Quiz Portal pages use a single-column table for layout purposes. This is an incorrect use of a table, and the lack of other markup on this long page makes efficient screen reader navigation difficult.

Notably, unlike the other websites tested, TumbleMath does not appear to make use of landmarks at all. Landmarks were the best navigation method available given the inconsistent heading usage, and the absence of both landmarks and headings on various pages creates a less efficient navigation process for screen reader users.

Like other Tumble products, the tab title across various pages is not helpful. On TumbleMath pages, the tab title never changes from TumbleMath.

Home

Before the “New Books” heading and directly after the top navigation, the homepage contains seven images which are only labelled as “TumbleMath”. For screen reader users, this is confusing page clutter. These images should be given more descriptive labels, or the alt text should be removed entirely by setting it to an empty string.

The main content of the homepage consists of book lists displayed in carousel form. These include “Sir Cumference Books”, “TumbleMath Favorites”, and “New Books”. The carousels share the same characteristics as those used on TeenBookCloud. Each carousel has two navigation buttons below it, and these buttons are unlabelled and do not cause any meaningful change to the content seen by screen readers.

Browsing

The top navigation menu contains a list of links based on math fundamentals, such as “Counting”, “Addition”, and “Subtraction”. These links lead to a list of matching titles displayed in detail view. Similarly, activating the link above a carousel on the homepage will open a page containing the full list in detail view.

Details view is more accessible and informative than cover view, and was the preferred choice for most testers. Each title and summary is displayed with a heading separation, and quizzes and books can be opened directly from the books list. However, like other Tumble products, the heading for each book title is placed after the action links, so screen reader users need to navigate backwards from the title to find the relevant controls.

Most of the action buttons for books are not labelled well. Quizzes are labelled with their name, which usually corresponds with a common core standard, but this label is fairly meaningless without knowing that it belongs to a quiz. The links to open a book or view its lesson plan are not labelled, and some screen readers will read no text at all, whereas others will read part of the destination URL, which is sometimes helpful (BookLessonPlans ProductID=528) but often not (H5Player ProductID=528&book=/H…). These buttons need deliberate and clear labels regardless of whether the existing labels hint at their purpose.

These pages also include controls for switching to the cover view or changing sort options. These function much like the TumbleBooks equivalents, with automatic page refresh being the most noteworthy accessibility concern.

In cover view, each book cover has alt text that includes the book title and nothing more. Visual testers found that some of the cover images were low-quality and easily pixelated when magnified. With the inconsistent reliability of magnification and the lack of information available in the alt text of images, detail view is a more suitable alternative.

When multiple pages of results are available, the site does not add meaningful separation between pagination links and the rest of the page. The previous and next links are also labelled “«” and “»”, symbols which are not read by most screen readers automatically. Ideally, these links should be placed in a list and given clearer labels where necessary.

Searching

Searching is performed from the Advanced Search page linked at the top of every other page. The “Advanced Search” label implies the existence of a basic search, but this functionality is not available.

The search screen has slightly different criteria, but the functionality is identical to TumbleBooks search. Text fields are not associated with their labels, and each search field has a separate “Go” button, which is also not clearly labelled. The autocomplete functions well in the “Title” and “Author” fields unless searching for a term that doesn’t exist. In this case, screen readers will incorrectly claim that one result is available.

Search results pages are presented in detail view, with the same heading and labelling issues as noted in the Browsing section above. Notably, search results pages lack sorting options, so refining a search is not possible.

Item Details

Generally, book covers act as links which lead to a record page. This page contains a summary of the book, additional metadata, and action buttons similar to those found on the details view, with the same lack of labels. In the keywords section, each keyword acts as a link which searches for other books matching the same keyword. Headings are used well on this page, with a level-1 heading at the start of the main content and additional headings before the summary and book details.

Math Books

Math books are read in a custom interface not seen on other tested Tumble products. Most math books contain both audio and visual content. The audio consists of narration and sound effects, and the visuals consist of the same text with helpful or engaging pictures.

The audio player has basic controls for moving to the next or previous page, enabling or disabling autoplay, muting or unmuting the audio, and, of course, playing or pausing.

While the audio narration is helpful, users who cannot see the pictures will miss out on a great deal of information, some of which might be necessary for understanding the educational materials. Unfortunately, even the text of math books is not readable, suggesting it is stored as part of the image. This also prevents Braille users from reading the text and limits the availability of text adjustments beyond magnifying the entire interface. Because so much of the content is visual, a totally blind reader might find that the stories are engaging, but the educational component is lost.

The interface also has some labelling concerns for screen reader users: The “Play” button is mistakenly given a second “Previous” label, and some screen readers read the autoplay and help button states multiple times, leading to a confusing announcement that does not correctly indicate the state of the button.

Pressing the help button appears to have no effect, visually or non-visually, though the label for screen readers changes to indicate the help button is expanded.

Quizzes

Quizzes use a layout common to all Tumble products. When choosing the appropriate link from a book details page or the details view, a subpage opens with quiz choices. Each quiz link is missing a label, and users need to navigate past the link to read the name of the corresponding quiz.

Quiz controls lack clear labels. Answer choices are presented as radio buttons, but the text of each choice is not properly associated with the button, so navigating with a screen reader will produce frustrating results. The link to submit an answer is not labelled at all. When question pages are magnified or zoomed to 300% or higher, some of the answers and graphics scroll off the edges of the screen rather than reflowing correctly.

Due to the highly visual nature of this platform, many quizzes have a visual component as well. For instance, a user might be asked to identify shapes or name the position of one item in relation to another. These pictures do not have accompanying descriptions, so if the user cannot see the graphics and the question text is not adequate by itself, the user will not have enough information to answer correctly. However, many quizzes are not picture-based and can be completed successfully if one is willing to work around the labelling and styling problems.

On multiple occasions, a tester reported problems with the read-aloud functionality for quiz questions. This button sometimes reads the question text entirely wrong, and on one occasion, the narration of the question was simply wrong, having a different number than the text. This inconsistency can put quiz-takers at a serious disadvantage if they rely on this feature.

When a quiz is complete, a page displays the score and, if applicable, lists the questions that were answered incorrectly and the correct answers to those questions.

Development Recommendations

  • Merge TumbleBooks Changes, if applicable.
  • Add landmarks for top navigation and main content.
  • Remove alt text on images at the top of the home.
  • Ensure screen readers see only the content that is visually presented in carousels.
  • Label carousel navigation buttons and ensure the screen reader cannot navigate to content outside the visible carousel.
  • Label action buttons for books (quiz, open, lesson plans, favourite, etc.). Improve the contrast of these buttons.
  • Fix the zoom of the top navigation menu and quiz pages.
  • Fix the contrast of the math subjects’ top menu.
  • Fix missing labels and state on math player controls.
  • Adequately describe images within math quizzes.
  • Do not use tables in the “Quiz Portal” for layout purposes.
  • Improve page titles across the site to reflect the current page better.

TumbleBookLibrary – Mobile

The TumbleBooks mobile application was tested on Android and iOS by screen reader users and found to be completely unusable. On Android devices, the built-in TalkBack screen reader is unable to read any controls on any screen. On iOS, the VoiceOver screen reader is sometimes able to navigate the app by swiping left or right, but this navigation frequently stops functioning, and it is not possible to touch the screen and move the VoiceOver cursor back to a control within the app; VoiceOver indicates there are no controls on the screen even though the controls are visually present.

For testers who did not require a screen reader, the app was usable but not pleasant. Visually, the controls are very small, the contrast is low, and they often have no label and do not use familiar icons—a frustration expressed by multiple testers across the websites and mobile applications. The ebook viewer lacks a scrolling view, and pages do not turn with a horizontal swipe, making the reading process unnecessarily cumbersome. On Android, the system “Back” button frequently does not work as expected, requiring the use of the specific close button within the app.

Conclusion

Tumble products suffer from a lack of consistent design, an overcomplicated process for reading ebooks, and a general lack of consideration for visual and nonvisual accessibility. Many structural and labelling issues lead to inefficient screen reader navigation on all platforms, and contrast, colour consistency, and support for magnification are lacking. With children as the target audience, these websites will pose serious barriers for users with various accessibility needs.

On TumbleBooks and TeenBookCloud, the HTML5 ebook player offers the largest selection of adjustments and the highest level of screen reader accessibility, but this player is not used for all content, and there is often no way to predict which interface a particular book will use. The TumbleBooks mobile application is entirely unusable with screen readers on both mobile operating systems and magnification users found that the app had many visual accessibility barriers and did not provide a better experience compared to the website.

On TumbleMath, some content is only truly engaging for sighted users, and finding books and quizzes which are largely nonvisual is a matter of trial and error.

While some of the accessibility barriers are related to the content of books and quizzes, these websites would all benefit from more specific use of HTML to semantically link and identify controls. Many of the most serious barriers across all websites and apps are due to a lack of text labels–one of the easiest problems to solve on the development side. When a product is targeted toward children, it is especially important to ensure navigation and labels are consistent. By implementing this report’s feedback and developer recommendations, Tumble products could provide inclusive and engaging experiences for print-disabled learners.

Systems and Assistive Technology

  • Operating Systems
    • Windows 10
    • macOS 14
    • iOS 17
    • Android 13 and 14
  • Mobile Applications
    • TumbleBooks 4.0.33
  • Browsers
    • Chrome 120
    • Firefox 120
    • Edge 122
    • Safari 17.2
  • Screen Readers
    • NVDA 2023.3 (Windows)
    • JAWS 2023 (Windows)
    • Fusion 2024
    • Orca (Arch Linux)
    • VoiceOver (macOS)
    • VoiceOver Touch (iOS)
    • TalkBack (Android)
  • Magnification
    • Magnifier (Windows)
    • Fusion 2024 (Windows)
    • Zoom (MacOS)
    • Zoom (iOS)
    • Magnifier (Android)

Acknowledgements

The following testers and editors contributed to this report:

  • Patrick Bouchard
  • Tait Hoyem
  • Simon Jaeger (lead writer)
  • David Kopman
  • Michael Krupp
  • Riane LaPaire
  • Ka Li
  • Laetitia Mfamobani
  • Deanna Ng
  • Melody Shih
  • Megan Sellmer

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.