1. About

Celebrating 100 years in 2018, the Canadian National Institute for the Blind (CNIB) Foundation is a non-profit organization driven to change what it is to be blind today. CNIB delivers innovative programs and powerful advocacy that empower people impacted by blindness to live their dreams and tear down barriers to inclusion. CNIB’s work as a blind foundation is powered by a network of volunteers, donors and partners from coast to coast to coast. The CNIB Foundation, Vision Loss Rehabilitation Canada and CNIB Deafblind Community Services make up the CNIB Group.

2. Facts

• CNIB Organization Size: Full Time (646), Part Time (306)
• Total Revenue: $ 93 Million CAD
• Locations: 56 throughout Canada
• Target Audience: People affected by blindness

3. Project Kickoff:

CNIB’s VP Marketing and Social Enterprise, Rob Hindley stated the following during our project kickoff:

“As we turn the corner on our first century and proceed with the development of a new strategic plan and our mission of Changing What it is to Be Blind Today, we need to develop a presence that effectively communicates our newly defined ambitions to our stakeholders and engages them to take action.

With this in mind, we have begun the process of developing a new website which will effectively act as a hub of communication, information and participation in the new defined foundation. The intention of the new website is to be a living resource that reflects the energy, vibrancy and immediacy of the brand moving forward. We have selected a web platform on which the new site will be developed that enables everyone in the organization to build and maintain their respective communication requirements in real time.”

Narrowing down the request into phases:

1. Website Redesign (Drupal 8)
2. Accessibility WCAG 2.0 AA Compatibility
3. Scalable Information Architecture
4. Continuous Support and Enhancements

4. OpenConcept Strategy:

The CNIB website was a very exciting and challenging project for OpenConcept. As we are advocates for Drupal and Accessibility, this project was our opportunity to push Drupal as client friendly tool. This would help meet the high accessibility standards of an organization dedicated to serving the visually impaired. The site visitor as well as the content authoring and management experience had to be completely accessible and a pleasure to use. This was very clear at the beginning of the project.

4.1 Understanding CNIB:

The CNIB was founded after the first world war to help veterans returning home with vision loss. The organization is now over 100 years old. In 2017, the CNIB went through an organizational evaluation. Part of this evaluation included a new branding/marketing campaign. We met with the client several times to get an understanding of the brand, as we deem it very important to reflect all the needs of our clients in our work. The CNIB had undertaken extensive research to find that the chosen typography and colour scheme was best suited for impaired people. The project entailed migration of aspects from their old Active Server Page (ASP) based website to a fresh Drupal installation.

The CNIB was unsure of what the solution would look like with respect to information architecture or functionality. OpenConcept helped them navigate through this uncertainty by making them comfortable with our Agile process and with constant feedback. There were two branding packages that the external marketing team provided the client - “Participate” and “Get Help”. These were vague in nature to the end-user, and upon discussion and mutual agreement, it changed to “Programs and Services” and “Support Us.” The goal was to construct a website that encompassed constant planning for accessibility before deploying features.

4.2 Tools and Project Process:

The project followed a waterfall approach when it came to Information Architecture (IA) and layout. It was because the CNIB had strict requirements and a firm deadline of their AGM meeting on Sept 8th, 2019. A tailored Agile approach to the iterative development work followed each approved IA instance. OpenConcept used Trello for task management to ensure that the client had full visibility and clarity of every aspect of the project. To ensure that there was both, client and end user validation on every step of the IA process, we used Treejack to test the IA.  To encourage participation in the Treejack study, OpenConcept offered gift certificates as incentives on CNIB’s social media channels. OpenConcept adhered to best practices by following Drupal Development Workflows.

4.3 The Solution:

OpenConcept wanted to guide the CNIB in understanding marketing and communication strategies that an external firm was driving for them. OpenConcept's guidance portfolio consisted of user centric design, scalable and adaptable IA; and conforming web accessibility standards.  

1. Here are a few key highlights from the project:
2. Taxonomy pages configured as landing pages;
3. A flat architecture developed for sitewide navigation. This approach works better on mobile and makes things easier to find.
4. Low fidelity mockups delivered via Adobe XD. High fidelity prototypes created using HTML, Javascript and CSS. Bootstrap 4 was used as a front-end framework.
5. Style guide developed in parallel using deployed HTML within Drupal;
6. User testing helped with user profiling and distinction from internal marketing strategies;
7. Accessibility testing performed by running screen readers (JAWS/NVDA) against the site and the text-to-speech results were analysed. We expected to hear the key elements of the site (main menu, footer, main content) with clarity and without any confusing text being generated from HTML snippets such as hidden heading tags or “title” attributes found on a few “<a>” tags.
8. Utilizing the Webform module so clients could manage their own forms;

Geolocation: This was a unique scope discovery item that enabled the ability to deliver localized content (region specific) based on a user’s province via automated location detection.

For example, if a user was browsing the CNIB website (https://cnib.ca/) for the first time, from Ottawa, Ontario, the website detects the user’s location and redirects the user to https://cnib.ca/en?region=on as this new page would display events, job postings and news articles relevant to the Ontario region.

OpenConcept created a custom module for this special functionality: oc_regional_settings. This is how the module works:

It implements the HttpKernelInterface (StackMiddleware namespace) class, this class has a method, handle(), which executes on every page, even pages cached by Drupal, this method reads the IP address from the incoming user’s request, calls an external service (ipstack.com) which returns user information (province, city, postal code etc.) based on the user's ip address.The method reads the province information (ON, BC, QC, SK etc.), then proceeds to create a redirect to the same original URL, while appending ?region=ProvinceCode at the end of the URL.This method also sets a cookie including provincial information, so if the user returns to the CNIB website at a later time, upon reading the cookie information, it will create the redirect; thus, avoiding extra calls to the external API service and providing a much faster response time.

For the views displaying events, news, job postings and volunteer opportunities, the module provides custom views filter settings in order to make the view to display nodes created for the specific province the user is browsing from. Say for example, if a user from Winnipeg goes to the calendar page (https://cnib.ca/en/event?region=mb), this page view will display events that are going to take place only in Manitoba.This achievement is a mixture of views configuration, and custom calls to the hooks_views_query_alter() and hook_views_pre_view() functions. Although not the best approach (changing parameters on the SQL query views) at the time, this result generates via a handler that inherits from the search filter that the views are using.

4.4 Achieving Accessibility Standards:

The Drupal accessibility group ensures that Drupal 8 core conforms with the World Wide Web Consortium (W3C) guidelines: WCAG 2.0 AA and ATAG 2.0 where possible, i.e. if you rely on a screen reader or an assistive technology, Drupal supports proper use of semantic markup. As an example, a user can use headings for page-level navigation.

As the project was nearing completion, CNIB requested significant changes to be done on the menus, site layout and content of the website, meaning the introduction of new accessibility features.

Prior to the website launch date, OpenConcept conducted an initial accessibility review of the website using tools such as the WAVE Evaluation Tool and Tenon.io. The review outlined basic accessibility issues that we fixed on the spot. Some of them were:

• Usage of vague directives for a link text, such as “Click here”, “Learn more” or “Contact us”;
• Images missing alt text or non descriptive alt text;
• No closed captioning on Youtube videos by default; and
• No header tags on HTML tables.

The CNIB staff were also advised to perform an in-depth accessibility review by using JAWS. This review outlined interesting results such as:

• Hidden block titles that were confusing to the user;
• Multilingual search results not having the “lang” attribute;
• Skip to content on search results navigated us to the breadcrumb. The expectation was for it to have taken the user to the H1 of the content;
• Our programs (a page view) displayed as a list of links, but not described semantically as a list; and
• Social media icons were not reading well in JAWS.

Given below is a sample of the changes done to improve the user experience and enhance accessibility:

• Changes on the twig files to get rid of unnecessary block titles (<h2> elements);
• Add lang=”{{ langcode }}” in the HTML search result snippet (search-result.html.twig);
• We created a custom module for displaying screen-reader friendly social media icons. This did not use any contrib modules such as AddtoAny or Easy Social, as the social icons these services provide are hard to read by screen readers; and
• Getting rid of the unnecessary “title” attribute in the <a> element wrapping the logo:

  <a class="site-logo" href="{{ path('<front>') }}" rel="home" title="{{ 'Home'|t }}"><img alt="{{ 'Home'|t }}" src="{{ site_logo }}" /></a>
  The <img> element has the “alt” attribute having the same value, so the screen reader will read out “Home” twice, confusing the user.

A priority for the CNIB was an accessible authoring experience. We ran all the same tests on the administrator segment of the website that we conducted on the public facing side. In the Ckeditor, while the text area provided no issues, controlling the structure of the content authored in the WYSIWYG was difficult. This was due to so much of the markup relying on the GUI to apply tags to content. OpenConcept’s solution was to use the Markdown (https://www.drupal.org/project/markdown) module to create a markdown input type. This was then set as the default input type for Ckeditor. This allowed visually impaired authors to add structure to their content. This also allowed sighted users to switch to the GUI, if desired.

Giving back: OpenConcept contributed a Drupal 8 release of the Fluidproject UI Options module. This is currently used on the CNIB website. This module provides accessibility options for users to modify a page's font size, line height, font style, contrast, and link style. The changes made are retained using cookies.

5. Result

We received positive feedback from the CNIB and CNIB end users with regards to the overall website’s user experience. A few highlights include:

• Efficient optimization for smaller devices;
• Easy navigation through all the sections and the ability to display localized content.
• Positive feedback from Bob Dodd, the Library Web Developer at CNIB, and an industry expert on making websites accessible.