Editor’s Note: In honour of Global Accessibility Awareness Day 2020, Heidi Propp, now a staff member here at COBD, has graciously agreed to update the following article she originally wrote back in 2014 to take into account changes in technology over the past seven years. Heidi’s original version of this article appeared in Volume 8 of the Blind Canadian magazine in July 2014. It is being reprinted in the updated form with permission of the Canadian Federation of the Blind.
The Covid19 pandemic has upended countless facets of our lives. Most of us have increasingly relied upon the Internet to accomplish everyday tasks as we stick closer to home. Many of us virtually work from home, using a plethora of online services to accomplish tasks and meet with colleagues. Numerous colleges and universities run classes online rather than in-person lectures. Millions of children have received schooling online. We can now peruse stores, make purchases, pay bills and complete all kinds of financial transactions online. The Internet has become a lifeline for those seeking pandemic-related health and safety information, book vaccination appointments and obtain medical care. Blind Canadians are completely capable of participating in the rich tapestry of online life, so long as sites and services have been inclusively built with Web accessibility in mind. Blind people have valuable services to offer, money to spend and life dreams to follow.
As do most Canadians, millions of blind and visually-impaired people integrate the World Wide Web into their daily lives: shopping, banking, doing business, learning, socializing, seeking health care, and so much more. Because we cannot read print, we rely on the Internet to obtain that same information which can be spoken to us using a screen reader, read on our Braille displays, or enlarged using magnification software.
Blind Canadians are fully deserving of the same rights, freedoms and opportunity as their sighted peers. We can accomplish great things, as long as the online world is built with accessibility in mind. The Canadian Organization of the Blind and Deafblind estimates that, as of 2020, 1.55 million Canadians (about 4% of the Canadian population or one in every twenty-five Canadians) has experienced vision loss. Nationally, the organization estimates that there is an additional 5.78 million Canadians (about 15% of the total Canadian population) who have eye conditions that can lead to vision loss (COBD website).
According to the World Health Organization, an estimated 2.2 billion people worldwide have some kind of visual impairment and a further 285 million experience blindness or severe visual impairment. As our population ages, these figures are projected to increase in the future due to age-related eye conditions such as macular degeneration, diabetic retinopathy and glaucoma.
It is now more vital than ever that blind people are not shut out of opportunity and the basic necessities of life simply because we cannot see a computer screen. By learning and implementing key Web accessibility principles on your website, you can open yourself or your organization up to a huge new audience or customer base and show that you care about justice and equality. When you incorporate Web accessibility principles into your site’s design, how it performs for your sighted audience will not change. Accessible websites look good and can be highly interactive. As an example, Google’s Gmail website is immersive, interactive and highly accessible to blind visitors. The Web accessibility principles I will discuss in this article are drawn from the Worldwide Web Consortium’s Web Content Accessibility Guidelines (WCAG). These guidelines are well respected and have been incorporated into the Web accessibility laws of many nations. For an introductory overview of the WCAG standards, please visit the Worldwide Web Consortium’s website
Perusing the Web with Low Vision
Those with low vision have an extensive array of tools to make reading text on the computer easier. These packages can enlarge text or images on the screen, enhance colour contrast to help make foreground text stand out more clearly, or speak text aloud with a synthetic voice. Additionally, some people with low vision or reading disabilities struggle to read if the computer screen is emitting bright lights. Bright or strobing lights may cause pain for some people with photosensitivity. Most assistive technology for low vision can be customized to best meet an individual user’s needs. Popular options include dedicated software magnifiers such as ZoomText, customizable cascading style sheets that provide improved colour contrast, enlarged fonts, and zoom features built into many Web browsers. Many hardware and operating system manufacturers such as Apple and Microsoft provide basic, built-in options to enhance low vision accessibility. The main takeaway here is that your site’s design should not appear broken if low vision users need to expand the size of text or images, change the background and foreground colour contrast, make the text darker or change the font to make reading easier. For more information on common eye conditions that cause low vision and various adaptation strategies, please visit webaim.org.
To enhance the accessibility of your site for low vision visitors, please keep the following accessibility best practices in mind. As stated above, people with low vision may wish to enlarge your text and images on their computer’s display. However, not all text or images enlarge well and can appear broken, unclear or blurry. Enlarged graphics can become blocky and pixilated. To help ensure that text is still legible when enlarged, avoid embedding text in graphical images. Alternatively, please consider providing true text versions with that same information shown within your graphics. If you use responsive design principles to ensure your site remains attractive on mobile screens, you can make use of these same techniques to ensure that text remains readable if it is enlarged. As a rule, please avoid sizing elements and text using pixels or a specific numerical measurement.
Sites designed with low contrasting colours, such as blue links on a black background, are very difficult to read, making it unclear as to which text is a link and what is not. When choosing your colour pallet, please ensure that you maintain a contrast ratio of at least 4.5 to one, excluding text in a large font (use 3 to 1), logotype or decoration,. Below are a few example background and text colours and the type of contrast they provide:
Black text on white background: Very high contrast and easily readable. Colour contrast ratio is 21:1
Blue text on white background. High contrast, 8.6:1
Red text on white: moderate with a ratio of 4:1
Green text on white: very low, difficult to read, ratio of 1.4:1
When choosing your colour scheme, there are numerous contrast checkers that can be used free of charge. As an example, please visit contrastchecker.com.
If your site’s colour scheme cannot be changed, please consider providing a navbar link to a high contrast cascading style sheet.
Because people with low vision may have a small text area enlarged and displayed on screen, a few basic techniques can be employed to make content easier to find. Avoid very small buttons, links and other interface elements. Consider keeping related information or links close together. If your page incorporates dynamic changes or form submission error messages, consider placing important changes near to the users cursor focus. As an example, avoid placing form submission errors near the bottom of the screen. A low vision reader would not notice the change and would have to spend precious time scrolling through your content, wondering if the information they sent was received.
To maximize useability for colour blind users, it is important not to use colour as the sole means of communicating information in an image, Web page element, or a block of text. Although colour blindness is a very complex topic, the most common colours affected are red and green.
How Blind People Navigate the Web
Blind and very low-vision computer users take advantage of free and commercial screen readers, software applications that can identify text output, window elements and controls, documents, Web pages and more, then present that information via synthesized speech or Braille to the user. Common examples include Jaws for Windows, NVDA, Microsoft’s Narrator and Apple’s VoiceOver for the Mac, iPhone and iPad.
Screen readers and Braille displays give blind people unprecedented access to information, shopping and business opportunities. However, many barriers, such as unlabeled images, inaccessible captchas, image maps with poorly named links (or links with no associated text at all) can quickly make a website difficult or impossible to use.
These barriers to access, and others like them, may be overcome by implementing a few key website design changes that will make your site more accessible to a substantially greater global audience. Equal access to the Web gives blind and visually-impaired Canadians the keys they need to participate in the social and economic life of a society on an equal footing with their sighted peers.
To a great extent, blind Canadians use the Web as their main portal for accessing all kinds of information unavailable to them in the physical world, such as reading books, news, travel information, research, looking up phone numbers or recipes, learning about new hobbies, and so much more. In many instances, shopping on the Web is much easier than visiting a local store and shopping with the assistance of a sighted person. The UN Convention on the Rights of Persons with Disabilities (2006) recognizes Web accessibility as a basic human right.
Increasing your website’s accessibility has benefits outside of the visually-impaired demographic. As an example, search engines cannot interpret graphical images and rely on alt text provided in the <img> tag to help make sense of your website. Increasing your content’s accessibility makes it easier to find with a search engine. As our population ages, many people will develop age-related impairments such as reduced contrast sensitivity and colour perception, difficulty reading Web pages, and fine motor control that makes it more difficult to use a mouse or touchscreen. Most of us are likely to acquire a temporary or permanent disability at some point during our lives.
Businesses that provide shopping or other paid services will benefit financially from increased accessibility, as conducting business online can be easier than doing the same thing in the physical world. If a blind shopper visits a retail store or business, he or she may first browse the site to get an idea of what is available before coming into the store to make a purchase.
Accessibility is even more critical to governmental or financial agencies as more and more citizen participation and financial management is done online. In many cases, blind or visually-impaired individuals may prefer electronic financial information, as it is easier to read and keep records.
How Screen Readers Work And What They Cannot Do
Screen readers render an HTML page into a text-like document we can peruse with the keyboard. We can scroll through text using the arrow keys, jump from link to link using Tab and Shift+Tab, activate a link or interface element with the Enter key, and so much more. Blind readers cannot take in a page’s layout at a glance. We can familiarize ourselves with a page’s layout by reading down the page line by line, searching for what we are looking for with a few key words, or using quick navigation keys to easily jump to a specific element type. For example, if we have found an article on the CBC website we wish to read, we activate the link taking us to that article. From here, we can jump from one heading to another on the page by pressing the letter H. We repeatedly press this letter until we’ve found the article title, then resume reading the content using the keyboard. We can quickly jump from one form element to the next by pressing the letter F. Screen readers such as NVDA and Jaws provide dozens of keyboard shortcuts we can use to jump between specific types of elements on a page such as links, visited links, regions, radio buttons, edit fields, graphics, lists and so much more. Alternatively, we can bring up a listbox containing all the links on a webpage which can be scrolled through using the up and down arrow keys. If we know the first letter of the link we are looking for, we can type it in and be directly moved to the first link beginning with that letter.
Screen readers cannot do the following things:
- Screen readers do not Describe images
- Screen readers ignore colours
- Screen readers ignore nearly all styles presented inline or within Cascading Style Sheets. Please do not rely on styles alone to make sense of your content.
- Screen readers present content in a linear fashion. Information appears in the same order it does in a page’s HTML code.
- Screen readers will not describe the visual components of a video, animation or other visual media
Accessibility Tips
The following design tips will be especially helpful to blind screen reader users. All images should be tagged with an alt attribute, containing a brief description of what the picture looks like. This is not necessary for purely decorative imagery.
- When you create links, describe what they are and where visitors will be taken. If a link is described simply as “Click here” or simply “here”, blind readers won’t have an idea of where it goes. Do not use surrounding text to describe a link. Good example<a href=”http://www.cbc.ca”> CBC </a> Bad example: <p> To view the latest Canadian news, go <a href=http://www.cbc.ca”> here</a>
- Screen readers use semantic page elements provided by the page author to describe content. Here are a few common examples. If your site has a navigation bar near the top of each page, enclosing it within the <nav> tag allows screen readers to describe it as a “Navigation bar”. Otherwise, no information would indicate the purpose of these links. Similarly, many developers enclose a page’s important content within the <main> tag, which screen readers speak as “main region” or “main landmark”. Blind readers would be able to quickly jump from the nav bar at the top to the main content region with just a simple keystroke. HTML5 includes a variety of these types of elements, most of which are correctly interpreted by screen readers. Such tags include <article>, <figcaption>, <aside>, <nav>, <main>, <footer> and <section>
- Mark all article titles, informational sections, or types of goods with heading tags. To make captchas useable, consider providing an audio captcha alternative. For example, the reCaptcha service provided by Google supports dual audio and image captcha formats or completely eliminates captcha checks altogether. For an introduction to ReCapcha, please see this article on medium.com.
- To find out more, visit recaptcha on code.google.com.
- If your site uses the new HTML5 canvas tag or contains custom coded interface elements , either clearly label all controls and elements with ARIA markup or provide an optional basic HTML alternative.
- If your site contains tables, please use the summary attribute to give an overview of the table to make it easier for screen readers to interpret. Associating the header cells with relevant data cells with either the scope or ID attribute will enable a screen reader to read the appropriate header before text within a cell is spoken.
- Avoid using colour and visual styles as the sole means to convey information. As an example, screen readers do not speak italicized text differently than regular text. If you wish to convey emphasis, use the <em> tag in addition to italicized visual styles.
- Ensure the reading order remains logical when styles are turned off.
- Consider providing synchronized audio descriptions of your videos’ visual content.
- In regard to HTML forms, it is helpful to describe the purpose of the form, specifying necessary input. If descriptive labels are associated with each form control, a screen reader will speak the type of information being asked for, followed by the type of form control. For example, a well labeled edit field asking users for their postal code will sound like this: “Postal code, edit”. A form control may be labeled using the tag containing the form “control name” attribute and matching ID attribute inside the relevant form control tag. Alternatively, consider using the newer <label> tag. If information for a field is required to be in a specific format, provide a text description when user format falls outside this format. After a form is submitted, please make validation error messages and success messages easy to locate, preferably near the user’s current cursor position.
- Typically, the main content is not the first thing a screen reader finds on a Web page. To avoid having to navigate through a long list of links, form fields, and social media widgets before the main content is found, it is helpful to use a “skip navigation” link that takes visitors directly to the page’s main content, typically located near the top of the page where it can be easily found. To minimize the aesthetic impact to your page, this link may be hidden until it receives keyboard focus. Please visit this page on webaim.org to learn techniques for providing information to screen readers that is invisible to the sighted public.
- Visitors should be able to interact with your content by tapping on touchscreens, keyboard controls, laptop trackpads in addition to the mouse. Some blind or low vision users may have additional motor disabilities that requires them to interact with the Web using more specialized devices or even voice recognition. Many blind and visually-impaired users appreciate interactivity features found on many modern Web pages that use JavaScript. With a few simple techniques, your JavaScript-enabled elements can be very accessible. Difficulties arise when events do not trigger because the event handler is expecting mouse input rather than keyboard. Therefore, it is important to use device independent event handlers for scripts that modify content. Examples include: onFocus, onBlur, onSelect, onChange, and onClick. Alternatively, simultaneous device event handler types, such as keyboard and mouse may be used to maximize useability for all audience demographics.
- If using expandable widgets or complex menus, please take advantage of the <summary> and <details> tags. Menus encoded with these tags are accessible to screen readers by default.
- Websites containing Rich Internet applications and dynamic content developed using JavaScript can be difficult, if not impossible to navigate with screen readers for a variety of reasons. Screen readers cannot determine the purpose of custom interface elements and controls. Pages may not automatically update as content changes. A solution to these issues was devised by the Web Accessibility Initiative called Accessible Rich Internet Applications, or ARIA for short. Developers can mark regions of a page with attributes such as menus, regions, tree views, calendar functions, allowing screen readers to present this information in an accessible format that sometimes mimics the look and feel of desktop applications. ARIA can cause screen readers to announce live content updates and dynamic feedback based on user input. The latest release of the ARIA specifications may be found at w3.org.
For examples of ARIA in action, Google has made great efforts to make G-Suite applications accessible to blind users. We can visit the Google Docs site or any other Google app and use it in nearly the same way we use a desktop application. ARIA is used to describe what complex interface elements do, how to interact with them, and announce changes as they are written if they take place in a collaborative environment.
Making Your Page Accessible for Deafblind Visitors
The needs of your deafblind visitors may vary from one person to the next. Some may have residual hearing or vision or can be completely deaf and blind. Most of your deafblind visitors will rely upon Braille displays to convey your content. These devices are paired with screen readers. Screen reading software interprets text and converts it into speech or sends the output to the Braille display Most display one line of text at a time and automatically refresh as the user scrolls from one line to the next. All of the accessibility tips given above for blind visitors also apply to those who are deafblind. There are a few additional considerations:
Audio content, either in straight audio recordings or in videos is not accessible to those with severe hearing loss. Consider providing a text-based transcript of the audio recording. This transcript is also searchable using Google or other search engines, making your content easier to discover.
For your videos, consider providing a text-based description of both audio and visual components.
Do not use sound alone to convey information
If possible, provide sign language interpretation services during a virtual meeting or conference
With your help, we can make the dream of equal opportunity and equal access to information on the Web a reality. To get started, online validation tools exist to test your site’s accessibility and in some cases may suggest improvements. Please visit webaim.org for more details.
For a complete overview of the WCAG 2.1 Web accessibility standard, please visit w3.org
If you wish to take your learning to the next level, there are countless free and paid workshops, webinars and workshops available online. Deque University offers a variety of in-depth courses including Web accessibility basics, using ARIA markup, implementing accessible JavaScript and mobile accessibility principles.
Through technology classes and the Teen TECH summer independence camp, the Bowen Island Recreation, Training, and Meeting Centre project will connect Canadians who are blind and Deafblind with the tools they need to successfully navigate the World Wide Web. If developers do their part to make their websites and web apps accessible, there is no reason they cannot be used by a person who is blind or Deafblind.
