Accessibility Testing of PressReader Website – 2020

DOCX | PDF

Prepared by NNELS’ team of Accessibility Testers, July 2020

This document provides feedback about the PressReader website, with “accessibility mode” activated.

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 authors and do not necessarily reflect those of the Government of Canada.

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

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 books for Canadians with print disabilities, and an advocate for an accessible and equitable reading ecosystem for Canadians with print disabilities. 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.

Configurations

  • Windows 10 with the following screen readers and browsers:
    • Screen readers: NVDA 2019.2.1; JAWS 2020, 2019; Narrator.
    • Browsers: Microsoft Edge 83.0; Chrome 83.0.4103
  • Mac OS Catalina 10.15.5 with Firefox 77.0.1
  • iOS 13.5.1 with magnification and VoiceOver screen reader, using Safari browser
  • Android 10 with TalkBack screen reader

Most of the comments below are relevant to all platforms. Any issues specific to one operating system are highlighted as such.

Signing In

Our testers signed into the PressReader website using a testing account in order to evaluate the accessibility mode, which at the time of testing was in beta. Some of the testers found it challenging to find the accessibility mode toggle as it was located within the settings, which is behind a navigation menu. The settings option does not seem to appear for the testers before they are signed in, so they must do so in order to turn on accessible mode using this method. When one of the testers turned the feature off, they noticed a link at the top of the page called “Turn On accessible mode (beta)”, which did not appear the first time they signed in. This will no longer be an issue once the “accessible mode” becomes the standard accessible website.

Homepage

The main section of the homepage shows a selection of magazines and newspapers, as well as categories such as Computers & Technology, Fashion, and Animals. These three carousels have a number of accessible navigation options including headings and skip links. There is also an image with alt-text to indicate whether an item is a newspaper or a magazine.

When the tester scrolls down with their arrow keys to go over the lists, both NVDA and JAWS screen readers read each publication as three separate lines of text because of the way it is structured: Line 1 is the newspaper or magazine graphic, line 2 is the name, and line 3 is the date. In reality, all of this information is contained in a single link, so using the next / previous link command will scroll through listings. If it makes visual sense, the three lines of text may be better off contained in a table with columns for each of these pieces of information.

Another effective way to separate listings in an accessible way would be to add headings for different categories. For this approach to work well, however, it is important that the heading structure is hierarchical in order, to facilitate orientation in the content. In this case, the heading structure of the current page must be considered, to ensure that the heading order makes sense and cascades logically, since there are multiple categories of listings on the page. If not done in logical and cascading order, having headings for the categories and headings for each listing within that category could end up creating more problems than it solves.

If headings are added to provide structure, a message perhaps only visible to screen readers indicating how many levels of headings there are and how they relate to the categories and subcategories can be very helpful for orientation to the content on the page. For example, a message at the beginning of the content to indicate that main headings are categories and they have lower level subheadings for lists and subcategories.

On the category specific pages, such as the one that comes up when clicking “see all newspapers”, headings would be a logical choice.

Carousel

The carousel scrolls automatically as the user moves through it. Some users may prefer to scroll manually so that their keyboard focus doesn’t get trapped in a never-ending list, but this is mostly negated by the headings separating the important parts of the page. Both directional scrolling buttons for the carousel are called “Carousel next”, so they are ambiguous; testers were not always entirely clear about which direction it will scroll after they press them.

This can create confusion for users. For example, as one tester noted, “as I was navigating the website, I sometimes got stuck; it is almost like I was stuck in a circuit and could get out of it. I had to either go to the very top or bottom of the page in order to begin to once againg move throughout the page.”

The skip carousel links are slightly confusing. The ones below magazines and newspapers simply move to the next “skip carousel” link. The result is that pressing the skip link immediately announces an identical link, likely making the user believe they haven’t moved at all. Skipping to the next heading instead should fix this, but changing the names of these skip links to something like “skip magazines carousel” is also easy. That being said, these links don’t do anything the user can’t accomplish with heading navigation. Lastly, pressing the skip link on the categories carousel confusingly moved the tester who was using NVDA and Chrome to the very top of the page, before the navigation section and well before any of the carousels.

Menus and Buttons

The options button, which currently only has the accessibility mode toggle, correctly refocuses the user to the popup and correctly drops focus back on the options button when the popup is closed. The “My Channel” button has a multiline label that starts with the letter P, so this can appear as two separate buttons (“P”, and “My Channel”).

Several icons, such as the icon to sign in, the menu button, and the toggle for the “accessibility mode”, are not read by screen readers consistently; but Settings, My Channel, and Help are read correctly.

Searching

Searching is an intuitive process and works exactly as one would expect it to work. The search results are under a top level heading; each category (news, magazines, and articles) is under a level 2 heading. The only notable inconsistency is the presence of a level 1 heading on each article title. Since the results are under a level 2 heading and level 1 is typically reserved for important sections of the page, the heading level of search results should be at least level 3.

Searches can’t be refined until the tester clicks “see all” below any of these three categories, but the filters are very intuitive and well-designed. Each refinement filter is under a level 3 heading and hidden behind an expandable button, and the options that appear for that filter are part of their own region. This makes it very easy to set the necessary options and jump to the next filter.

The only issue noted by one of the testers regarding the search engine concerns the difficulty finding a specific newspaper or magazine by its name. For instance, typing “Le devoir” into the search box returns search results with all the articles that mention these words. That makes it difficult to search for a specific publication. It would be useful to have a search filter that allows you to search for only publication names.

Reading Articles

In general, selecting an article loads a simple page view with a level 1 heading before the article text. It’s delightfully free of clutter and works well. The testers did not find a text-to-speech option, and were not sure if the web version of PressReader includes this feature.

Screen reader users reported that when they were in an article, their screen readers read words in a very unusual manner: cutting them into syllables, almost as if it was a child struggling to read. We looked into this more and found that in all the instances in which words are separated when read that there are “optional hyphens” separating the syllables in each word. These “optional hyphens” are not visible, but they significantly impact the readability of the articles. This is the same case for all three screen reading softwares tested in Windows (JAWS, NVDA and Narrator). Since totally blind testers could not activate accessibility mode in mobile browsers to use with their screen readers, we are not clear if the “optional hyphens” also disrupt readability on mobile.

Some testers reported issues reading some articles in which there was apparently no text, but not in the page view version of the article, for example: The heading, date, and author show up, but there is no text in the article. They performed optical character recognition (OCR) on the window and didn’t find any text either, so they were not sure whether this is a bug or an accessibility issue.

Since the article titles are links, we recommend making the options menu into a button which would allow a screen-reader user to navigate to the menu directly; this would remove clutter when navigating by links.

In Windows, when an article is open, testers had difficulty getting back to the index within the current publication, it seems that the only way they could go back is to choose the “Home” link and return to the main page with all the magazine or newspaper choices.

In iOS, with Safari, using magnification, the tester was able to go back to the list of articles page with a right swipe. When on the first article, however, the arrows at the bottom of the page did not take them back to the list of articles. “In fact, I could not figure out exactly where the left “back” arrow was taking me, since the title of the articles did not match those on the articles list (or index), page.”

On mobile devices, testers with low vision reported that the swiping must be done from the margin or very close to the visible screen’s edge or it will not work.

Testers could not save or bookmark a currently displayed article unless they go back to the list of article titles within a magazine or newspaper. Screen readers do not read the three dots beneath and to the right, which is meant to signify the menu which has the options to save the article, as a menu.

The Channel Page

Once the tester activated the “My Channel” button and clicked the corresponding link to go to the My Channel page, they were dropped out of accessibility mode. They still had the “Switch To Accessibility Mode” link at the top of the page, but clicking it just reloaded the “Normal Mode” version of the page. This suggests that the Channel Page hasn’t been added to the beta yet.

Text to Speech

Blind testers could not enable the text-to-speech function. According to the help article called How to Listen (enabling text-to-speech):

It is possible to enable text to speech, both in text view and full page view: 1) Click the left mouse key and hold anywhere on the article in full page, to start listening to that article. 2) Enable text to speech in text view, using the menu (three dots at the end of the article) select ‘Listen’

This feature was completely inaccessible to testers who are totally blind. They could not find this feature and were unclear if this is because it is not available in the accessibility mode, or because of the visual nature of the method for enabling it.

For dyslexic readers that benefit from having text synchronized with audio, there are three issues with this feature:

  1. “As a dyslexic reader, the feature does not give me access to the print/text article at the same time. When I activate the « read » feature, I can see the title and a little extract of the text. The feature would go read the whole article, but I can’t simultaneously see the text and the images that come with it. It would be good to have the « read » feature on the side and still be able to navigate and look at the paper.”
  2. Secondly, the tester also noted “the article that is being open with the « read » feature is not always in a logical order. Example: the Newspaper First page of Deccan Chronicle (23 June 2020). Go in the « read » feature” and click “next”, “next”, and so on… notice that the feature chose to read issue from the top, the bottom, and back, in a pretty random manner. It does not read the issues logically. Also, the first thing to be read would be one of the issues and the feature does not read the headline and the name of the Newspaper.”
    “The same happens with magazines. Vogue Paris (11 May 2020) is another good example of random reading order. As an example, if you go to the table of contents, you’ll notice that the “read” feature will start from page 154 to 84, to 56, 76, 50, etc…”
  3. Another issue with the read-aloud feature is that it does not start where the tester activated it.
    “If I am at Page 5 of a newspaper, and I activate the text to speech (TTS) feature, I will be brought back to the first article, and I will have to try to find my section by clicking on the next button repeatedly. The TTS should start where you are at in the newspaper. As a dyslexic reader, you would normally be reading the headlines visually, and scanning the newspaper, and would want to utilize the TTS when it comes to reading more substantial content.”

Visual preferences

Mac OS with Firefox

There are a few visual preference options, and no dyslexic font available. The font colour, background colour, and brightness can’t be changed. Line spacing alignment and margins are not changeable. The font size and type can be changed according to the kind of publication (magazine or newspaper, or view page or text view). More details below.

Newspapers and magazines do not respond in the same way with font adjustment which leads to two separate experiences, one with Newspapers and one with Magazines.

Newspapers: It was possible to change the font in the “Text View Mode”. This mode shows the article in an easy-to-read horizontal stream. To better accommodate low vision users, the font enlargement should offer a much bigger font.

Magazines: There are options for changing font size and type but activating them did not have any impact on the content. It is possible to change size and type of font in text view mode. However, when the font is enlarged, the text does not reflow well, and the text will eventually overlap with each other, making the text impossible to read. Note, that this tester (using Firefox in Mac OS) encountered this issue only with magazines.

iOS – Safari with magnification

There is a wide range of font sizes, but some problems occurred when adjusting to the larger sizes. The page did not display properly until it was scrolled or moved in some way to re-centre it. One issue we found was that the choices of font type did not work for the tester. There are at least two places to change the font size: one is on the top bar of the website page, and the other is from a dropdown menu at the top left of all articles. The choice of font type is only available from the latter. Being able to make a global change would be a major accessibility improvement.

Conclusion

PressReader has made a considerable effort to make the website flexible and to make it work for as many people as possible. This is a big step forward for PressReader and using it with a screen reader is likely to be an enjoyable experience for many users, especially when the remaining accessibility issues are addressed. In a world of bloated and cluttered news sites that never quite seem to manage consistent navigation or heading structure, PressReader’s accessibility mode offers a much smoother experience, and easy access to many publications in one place. We look forward to all the accessible improvements being integrated into the main PressReader website.