Accessibility Report for The Canadian Encyclopedia

PDF | DOCX

March 2023

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 Canadian Encyclopedia has several barriers which prevent it from being an efficient and easy-to-use resource for people with disabilities. Screen reader users encountered pages with confusing heading structures, menus which may not behave as expected, images lacking alternative descriptions, and links or buttons with little to no labelling. Text-based articles are generally readable, but content containing images, maps, or interactive elements has not been designed with accessibility in mind. Low-vision users may struggle with difficult-to-read fonts, small and difficult-to-see controls, and colour contrast schemes that are too low or frequently change.

Introduction

The Canadian Encyclopedia is a publicly available collection of stories and information about Canadian history and culture. Initially published in print, its availability has benefited from the emergence of technology. It was released as a CD before transitioning to an online format anybody can explore for free with a web browser. Several types of content are available, from articles to timelines to quizzes.

Our testers used screen-reading and magnification software to assess the usability of The Canadian Encyclopedia website. 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 The Canadian Encyclopedia 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 The Canadian Encyclopedia. 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, ORCA on Linux, 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 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 accessibility issues encountered while testing The Canadian Encyclopedia website. Below you will find the testing results and their related recommendations as they pertain to:

  • Sign-Up and Login
  • Layout and Navigation
  • Browsing and Searching
  • Encyclopedia Content
  • Public Participation and Support
  • Visual Adjustments

Finally, the Development Recommendations section contains suggestions for improving the interface on each platform. These suggestions will be relevant to any issues or observations noted above.

The Canadian Encyclopedia Website

Our testers encountered several difficulties while using the website and accessing information. Only some content is fully accessible, and the website’s layout and navigation are not always logical.

Sign-up and Login

All of our testers were able to create accounts and sign in. However, several issues were identified, which caused the process to be less intuitive than it should be.

When the “SIGN IN” link is activated, the sign-in form is dynamically loaded onto the current page. Screen readers do not announce this is happening, and a screen reader user’s focus is not moved to the form. The sign-in link does not have a label or attribute explaining that it expands the content or which state the expandable content is in when activated. Screen reader users may not be aware that this form is being expanded and may believe the link is not working.

VoiceOver has particular trouble accessing the sign-in link because VoiceOver completely ignores the portion of the menu it resides in on the homepage. A VoiceOver user has to navigate to a different page before being able to focus on and activate the link to sign in.

Once the form was located, screen reader testers found that the username and password fields were appropriately labelled and behaved as expected. The controls to login via social media platforms have two sets of labels, one that incorrectly reads that activating the control will share to that platform rather than login. TalkBack was reported as not reading the “Remember Me” label” when focused on the relevant checkbox, indicating the label may not be properly associated with the control.

The link to create an account is at the end of the sign-in form. Some testers found this was not ideal and suggested placing it in the navigation menu for quicker access. The signup form loads on a separate page, avoiding the issues with the dynamically-loaded sign-in form.

The signup form fields are labelled properly, but some are missing required attributes, so screen reader users may think they can be left blank. If the form is completed incorrectly, such as leaving a required field blank, there are no labels or instructions explaining the error. The user is silently returned to the form to try again without guidance. The form uses ReCAPTCHA to verify that those signing up are humans rather than bots, which is an accessible and user-friendly option.

Low-vision testers found the signup form difficult to see. The form fields have a low contrast ratio, causing them to appear faint and requiring some of our testers to use magnification as large as 300% together with a high-contrast extension to fill them out. The ReCAPTCHA checkbox and links to the privacy policy and other information are very small, requiring excessive magnification to read and activate. Multiple contrast schemes are used throughout the page, which is distracting and confusing.

Layout and Navigation

The website’s layout is consistent for the most part, with pages having the same header, footer, and general structure. However, several issues were identified, making navigation challenging for blind and low-vision users.

The heading structure used throughout the site is illogical and sometimes confusing. Many pages do not feature a level 1 heading at the start of their main content, depriving both users and search a way of determining the page’s topic or purpose. This also complicates navigation for screen reader users, who can use a keystroke to jump to a heading to bypass the header and locate the main content.

The headings that are present are used inconsistently, particularly on the “Homepage,” “Timelines,” “Educators,” and other pages which feature a mix of resources. Articles are denoted by level 1, 3, or 6 headings, implying a hierarchical relationship between them which is not there. Heading levels are often skipped, such as having a level 6 heading after a level 3, which is against best practices. A page should have one level 1 heading at the start of its main content, level 2 headings denoting sections, level 3 headings denoting subsections, etc.

Many controls which expand or collapse menus or content are not labelled properly and have not been given attributes related to their current state. This makes it difficult for a screen reader user to know whether a navigation menu, filter options in a sidebar, or a feature of the homepage has been expanded. VoiceOver, in particular, struggles with these controls. Attempting to expand or collapse menus by using the keyboard to activate the unlabeled toggler buttons does nothing, leaving VoiceOver users unable to expand menus they want to access, forcing them to navigate through expanded menus they’d like to collapse.

The section of the navigation menu containing the “Sign In,” “Help,” “Donate,” and “Language” links was difficult for some screen reader testers to access. While on the homepage, this section sometimes appears to be collapsed, and they could not locate any means of expanding it. Navigating to a different page often caused the links to become accessible. This is inconvenient at best and, at worst, could cause a screen reader user to be unaware that these options exist.

Low-vision testers found the pages’ main content generally easy to navigate and read. The sans-serif font used for the menus and body content is a good choice for visual accessibility, and the Times New Roman font used for titles and headings was generally easy to see. However, one tester noted they would have preferred a sans-serif font here as well. The site uses a focus indicator which aids low-vision users with keeping track of where they are on the page.

The content could be resized appropriately with a magnification level of 150% combined with an operating system’s zoom settings. However, going beyond a magnification level of 150% started to cause elements to reflow in a way that disrupted the site’s layout. For example, the sidebar relocated to the header, causing it to enlarge and limit the room on the page for the main content.

Issues were encountered when using the navigation menu, sidebar menus, and the carousel on the homepage. Arrows to expand or control content are too small and difficult to focus and click. The arrow to expand the “Browse by Category” menu is particularly problematic on Android because it is located at the far-right edge of the screen. Any level of magnification pushes it beyond the edge and out of view. The “Browse” submenu sometimes disappears before a low-vision user can focus on the option they are looking for. The main navigation menu does not utilize inverted button colours or other methods of visually identifying the page the user is currently on. While the main menu and footer remain consistent across the site, the sidebar often changes, making navigation less intuitive the deeper one delves into the site.

Browsing and Searching

There are several methods for browsing content. Featured resources are presented on the homepage. Content can be browsed by type, including educator resources, quizzes, timelines, and collections. Articles can be browsed by the subject categories of “People,” “Places,” and “Things.” There is even an alphabetized list of every entry.

The homepage and the pages for browsing by resource type are similar in structure. Their heading hierarchy misuses level 1 headings, skips heading levels, and uses different heading levels to denote sections which should be at the same level within the structure. Many article links are accompanied by images with missing or placeholder alternative text. This does not tell a screen reader what the image contains and forces them to listen to image URLs or placeholder text while browsing. Many resource links are labelled with generic text such as “read more.” When encountered out of context, it does inform a screen reader user where they lead. The sidebar of browse-by-type pages includes a search field, but TalkBack does not recognize the submit button, and users of other screen readers may struggle to identify it because it is unlabeled.

The content of the browse-by-type pages was relatively easy and comfortable for low-vision testers to read. However, a combination of browser magnification, a high-contrast extension, and OS zoom features was sometimes required to enlarge the page suitably. Significant magnification causing pages to reflow to a layout which does not allow much room for content remains a problem, and arrows to expand or collapse parts of the sidebar are small and difficult to see.

The browse by “People,” “Places,” and “Things” pages can be difficult and confusing for screen reader users to access. The links to them are listed in a submenu within the main navigation menu. The “Browse” link, which expands them, does not expand when activated using a keyboard nor informs screen readers of when its submenu is expanded. When pressed using a keyboard, a separate button expands this menu, but it is unlabeled and does not report its expanded/collapsed state to screen reader users. The submenu appears to automatically expand when using VoiceOver, possibly due to a setting which causes the mouse position to follow the VoiceOver cursor. Users of other screen readers may have to use trial and error to determine how to reach these pages.

The “People,” “Places,” and “Things” pages are largely accessible using screen readers. No images are missing alt text, and each article tag only includes one resource. The filter-by-type combo box reads and behaves correctly, and the apply button is properly labelled. The heading structure is suboptimal, skipping heading levels and missing headings in places where they would be useful, such as at the start of the pagination controls. The previous and next page links are labelled only with symbols whose meaning might be unclear. The sidebar section requires the most work, as it features submenu links and toggler buttons with the same issues as those used to access these pages.

Low-vision testers reported that the “Browse” menu and sidebars are finicky to operate. The hover area for the main “Browse” menu is too small and closes too quickly if the mouse pointer strays from it. It was also found to sometimes not expand when hovered over, using the mouse. One tester experienced the sidebar menus automatically scrolling even while their mouse position remained stationary, making the menus cumbersome to use.

While browsing the main content of the “People,” “Places,” and “Things” pages, low-vision testers identified the filter combo box as too small and requiring magnification beyond what was needed to read the rest of the page. Article links and headings were visually indistinguishable from other text on Android, making it difficult to recognize that they were clickable.

The “Sitemap” link in the footer leads to a page which lists every article alphabetically. This page is cumbersome for a screen reader user to navigate, as it does not have any headings to mark the first letter filters, a list of results, or pagination sections. The previous and next page links are labelled only with symbols and not screen reader friendly text. The links to pages are labelled correctly with their titles.

The links on the sitemap are small, requiring up to 200% magnification for some low-vision users to read comfortably. However, when the page is magnified by 200%, one of the results columns can be pushed off the screen.

Accessibility aside, the sitemap is not a user-friendly page. A sitemap contains links to the website pages, organized in a logical hierarchy to orientate users. An alphabetized list of every article in the encyclopedia does not accomplish this.

The search field is located in the website’s header. The buttons to expand it and to submit a search are properly labelled and work when activated using a keyboard. All screen readers can focus on and type into the search field. However, search suggestions are not very screen reader friendly, as there is no announcement when they are displayed, and pressing the up or down arrow while in the search field (a common method of allowing screen reader users to access suggestions quickly) does not work. None of our screen reader testers mentioned search suggestions in our reporting, which indicates that a screen reader user would not even know they are there.

Low-vision testers found the search field easy to see and type into. The search suggestions are much smaller and require considerable magnification to read. However, magnifying the screen too much causes the search field to move to the bottom of the window, pushing the search suggestions off the screen. If the browse menu is expanded, it completely obscures the search field if the page is magnified.

Search results are presented in a similar format to the “People,” “Places,” and “Things” browse pages. The page contains the same sidebar, heading structure, filter combo box, and pagination links as above.  They all have the same accessibility features and shortcomings for screen reader and low-vision users, as discussed previously.

Encyclopedia Content

The accessibility of articles and resources varies widely and depends on the format of the individual resource. Articles which only contained text and links were readable by all testers. Screen reader testers encountered no difficulty with the contents, and low-vision testers did not encounter any problems that are not site-wide and thus already covered.

Primary resources and education guides were difficult for our testers to access. Many are presented in image formats, including maps and scans of documents. These do not contain alt text; more than an alt text attribute would be needed to provide adequate information to someone who cannot see the image. Low-vision testers found a combination of browser magnification and OS zoom sufficient to view most resources but encountered difficulty with images that contained a lot of text.

Timelines are readable by screen reader users, but the information is presented in a plain format that does not offer convenient navigation options. Using HTML elements such as lists, tables, or headings would provide logical separation between events and enable users to browse the timeline efficiently.

Screen reader users can complete quizzes, but several improvements could make the process more intuitive. Questions are answered by activating links. While these are labelled correctly, controls such as buttons or radio buttons would be more appropriate because a new page is not being loaded. A message appears informing the user if they answered a question correctly or incorrectly, but screen readers do not announce this automatically, so a user has to locate the text manually. Information about how many questions have been answered is available, but it should be moved to a more logical spot, such as near the control, to advance to the next question. Lastly, the screen reader focus is not moved to the text of a new question, which makes answering each question less efficient.

Collections are arranged logically, with links to different types of resources in sections denoted by headings. The heading structure is not optimal, but it is less confusing here than on the homepage or browse-by-type pages. Links are labelled with the title of the resource they link to and can be activated.

Video resources are played using a standard YouTube widget. The widget is accessible to screen reader and low-vision users, but screen readers do not announce that the widget has appeared, and the focus is not moved to it. This leaves a screen reader user to locate it manually or assume the link does not work. Videos do not offer transcripts or audio descriptions.

Public Participation and Support

Members of the public can contribute to The Canadian Encyclopedia by contributing articles, donating, or providing feedback via a survey. The contact form used to recommend oneself as a contributor is missing attributes for required fields but otherwise poses no accessibility challenges for screen reader users. Some low-vision testers found the form fields small and difficult to read, recommending a larger font for all fields and a more prominent background or borders for the currently focused field.

Screen reader testers encountered no major issues on the “Donation” page. A few unnecessary headings and redundant tables should be removed to ease navigation, but users of all screen reader users can fill out the donation form. The font size and colour contrast are very poor for low-vision users, requiring high-contrast extensions and excessive magnification.

The survey is difficult for screen reader users to complete. The set of questions regarding how interesting the user finds a variety of topics is the culprit, as some screen readers cannot focus on or select the answer, and others do not identify which answers were selected. Other questions are presented in a format all screen readers can read and operate efficiently. Low-vision testers reported that the colour contrast was too low, although high-contrast browser extensions helped to improve readability.

It is important to note that the “Donation” and “Survey” pages are hosted on external websites and, thus, are not under The Canadian Encyclopedia’s direct control. Short of accessibility improvements being made by third parties, the only remedy would be switching providers for these services.

Visual Adjustment

The Canadian Encyclopedia website does not offer any visual adjustment settings. Any modifications and accommodations must be made in the user’s browser or operating system. This creates a subpar experience in situations where images do not enlarge as cleanly as text, and significantly magnifying the window causes the site to switch to its mobile layout and reflow poorly.

Development Recommendations

  • Add attributes to links and buttons which expand menus or other content so screen readers can identify their state.
  • Label toggler buttons in the header and sidebars, so screen reader users know what each button does.
  • Add alternative text to images which describe their contents or purpose.
  • Adjust the heading structure, so each page’s main content starts with a level 1 heading, sections begin with a level 2 heading, subsections with a level 3 heading, etc. Do not use headings to style text.
  • Expand the text of or add ARIA labels to links with insufficient or generic text, so all users understand their purpose without needing additional context.
  • Add a required attribute to all mandatory form fields and display error messages if a form is completed incorrectly.
  • Have screen readers announce changes such as search suggestions populating or quiz feedback appearing.
  • Implement options to adjust font, size, contrast, and layout so low-vision users can improve readability without unexpected behaviour.
  • Enlarge controls which expand content so they are easier to see without significant magnification, which may cause them to be moved off the screen.
  • Use a consistent contrast scheme across pages to reduce distraction and confusion.
  • Convert scanned images of documents into a text version screen readers can interpret.
  • Format the “Site Map” so that headers organize the content (e.g., by topic or the first letter).
  • Video content should have audio descriptions and a transcript available.

Conclusion

The Canadian Encyclopedia does not provide an optimal experience for users with disabilities. Both the structure and the content of the website contain barriers which may delay or prevent access by screen reader and magnification users. Addressing the issues listed in this report will ensure the encyclopedia is accessible to a population as diverse as the people throughout Canadian history whose stories the encyclopedia tells.

Systems and Assistive Technology

  • Operating Systems
    • Windows 10 and 11
    • macOS 12.6.1 and 13.1
    • Linux
    • Android 12 and 13
  • Browsers
    • Chrome (Windows, MacOS, Android)
    • Safari (MacOS)
    • Firefox (Windows, Linux)
  • Screen-readers
    • NVDA (Windows)
    • JAWS 2022 and 2023 (Windows)
    • Narrator (Windows)
    • VoiceOver (macOS)
    • ORCA (Linux)
    • TalkBack (Android)
  • Magnification
    • Magnifier (Windows)
    • ZoomText 2022 (Windows)
    • Zoom (MacOS)

Acknowledgements

The following testers and editors contributed to this report:

  • Patrick Bouchard (Lead Writer)
  • Tobe Duggan
  • Maryse Glaude-Beaulieu
  • Simon Jaeger
  • David Kopman
  • Riane LaPaire
  • Ka Li
  • Laetitia Mfamobani
  • Deanna Ng
  • Megan Sellmer
  • Melody Shih

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

 

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