In this course, you will find the fundamentals of accessibility, synthesize and organize to help you understand the ins and outs of this discipline that many people do not yet know how to use to its full potential.
The topics covered in this course are as follows:
Today, Capian would like to offer you a course dealing with web accessibility. First of all, what is web accessibility? Then, a digital content is said to be accessible when any person (regardless of his or her handicap or disability) can interact with and understand this content. The digitization of society has highlighted the importance of the web in social integration and in the participation of collective life, that's why some accessibility standards that we will see in this course exist. Each email in this course will be an opportunity for you to learn a little more about accessibility and find ways to apply these standards to each of your websites.
This course is intended for anyone who wants to deepen their knowledge in e-commerce whether you are a project manager who is not yet completely familiar with the notions of accessibility, a freelancer who needs to update their knowledge or a web technician who wants to learn more this course is for you.
Below is a summary of the content plan you will be studying:
The first lesson is an appetizer and allows you to understand what accessibility is and where this notion was born, we will answer the following questions in this lesson:
In addition to being important for characters who don't know or can't use common digital tools, accessibility is also a significant asset for your content. We will answer the following questions in this lesson :
There is nothing better than a case study to discover and understand certain terms, here we will study Barclay Bank and the supermarket chain Tesco, we will answer the following questions in this lesson :
Here we will look at the main issues that need to be addressed in updating your sites to make them accessible, we will answer the following questions in this lesson :
In this final lesson, we will discuss the standards that any site must meet in order to be considered accessible, they are listed in the WCAG, we will answer the following questions in this lesson:
Tim Berners Lee, W3C President, sums up web accessibility in the following way: "Making the Web and its services available to all individuals, regardless of their hardware or software, network infrastructure, native language, culture, geographic location, or physical or mental abilities.
Accessibility or Universal Design is designing things so that everyone, no matter their abilities, can use them.
Recently, universal design for learning has become more popular, but the path to accessibility began much earlier. Specific laws regarding disabilities started to emerge worldwide in the 1990s. The first one was the ADA, an American law that certifies rights for people with disabilities.
The ADA requires that “places of public accommodation” be accessible to all people. What does this mean? Well things that have become commonplace now, ramps, handrails, a handicap accessible bathroom stall in public restrooms, automatic door openers are all required under the ADA. In 1996, the American Department of Justice announced that the internet was part of the public domain and therefore had to be accessible.
While interpretations of the ADA have included the internet, an earlier act, the Rehabilitation Act of 1973, was the first federal legislation to address disability and accessibility. It prohibited the discrimination of persons with disabilities from employment, financial assistance, and technology. Like the ADA, the Rehabilitation Act is vague on its term “technology” and leaves it open to interpretation. This act has now led to the expectation that all government websites should be accessible.
However, neither the Rehabilitation Act or the ADA give any indication of how the internet should be made accessible. That was left to the internet standards group, the World Wide Web Consortium (W3C). In 1996, shortly after the Department of Justice Announcement, the W3C created their Web Accessibility Initiative (WAI). Following meetings with the US government and different academic institutions, it was decided that the W3C was the best incubator for this new concept of Web Accessibility. After 3 years of development, WCAG 1.0 was released. The Web Content Accessibility Guidelines (WCAG) features 14 guidelines and 65 “checkpoints”; that have become the international standard for Web Accessibility. In 2008, WCAG 2.0 was released followed by WCAG 2.1 in 2018.
On Capian, it is possible to have personalized criteria and therefore to carry out audits on all subjects. Accessibility is not an exception. You can enter your WCAG criteria or any other criteria you deem relevant. Capian adapts above all to you..
The number of people who have a disability is unknown. It’s believed that around 15% of the world’s population have a recognized disability. While an aging population provides those who may not recognize their disability as they lose their hearing, sight, and mobility. Thousands of products and softwares have been created to help this population, yet businesses who aren’t in this market can still benefit from being accessible.
Inventions, like the typewriter, telephone, punch cards, text to speech, email, and voice controls were initially meant to include those with a disability, but have found a place in the business world (https://www.w3.org/WAI/business-case/). Tools that improve productivity are always welcomed in business; businesses are also motivated to be accessible to avoid fines. Those who willingly become accessible without the motivation of government legislation might see it as part of their corporate social responsibility (CSR) or as a step in innovation.
Global companies face even more pressure to be accessible, while the United Nations has signed the Convention on the rights of people with disabilities, in each country there are different legislative acts that apply.
For those who are accessible whatever the reasoning, the World Wide Web Consortium reports that “businesses that integrate accessibility are more likely to be innovative, inclusive enterprises that reach more people with positive brand messaging that meet emerging global legal requirements.” Some businesses might see it as a part of their corporate social responsibility. CSR has been linked to a positive increase in brand image, company reputation, and customer loyalty.
Although there is overlap for several countries such as the United States, Germany, China, India, Australia and New Zealand, expectations are different around the world. For 16 countries and the European Union, they require websites to be compliant with WCAG 2.1, which is the latest website accessibility guidelines published by the WAI.
For all businesses the future is accessibility, as Eve Anderson the director of Accessibility Engineering at Google states, “the accessibility problems of today are the mainstream breakthroughs of tomorrow.”
Capian allows you, thanks to its Chrome extension to be able to see and note accessibility problems at the same time, without having to go through other tabs or other usage problems. Annotating and creating an audit has never been easier.
In this lesson we will go over the basic outline of a web accessibility business case. The basic outline has five key points:
Below we will provide you with some examples that can get you started on creating your own business case.
Two of the most popular case studies involving web accessibility involve two British companies, Tesco and Barclay’s bank.
In 2001, Tesco rolled out a new accessible website. While it is not suggested anymore to create a separate accessible website, that is what Tesco did. It reported later that year that for 35,000 pounds they had created the website, they reported 13 million pounds more revenue as a result. (https://www.sean.co.uk/a/webdesign/accessibility.shtm)
To learn more about Barclay’s Bank, watch Paul Smyth, the head of IT Accessibility, talk about their changes here.
Georgia’s department of Digital Services created their own case study that shows how accessibility upgrades don’t always mean big changes. Their most recent updates to the state government’s websites included making subtle changes to the color themes on different websites to create higher contrasting text and background.
Capian allows you to set up case studies and involve all the people who need access to them, you will also be able to share it and extract it into different file types.
A more general summary of benefits can include: drive innovation, brand enhancement, extend market reach, and minimization of legal risk
(https://www.sean.co.uk/a/webdesign/accessibility.shtm)
You can manipulate this to fit your own business, examples provided below.
Money is an important motivator for businesses. So for many the question of return on investment like for Tesco is important. Karl Groves, considered one of the fathers of web accessibility, has several blog posts about Accessibility and Return on investment that you can find here. He will walk you through different equations to determine the monetary value of web accessibility.
The United States has the Americans with Disabilities Act , but for Europe it’s the European Accessibility Act. In the United Kingdom and the Commonwealth it’s the Commonwealth Disability Discrimination Act of 1992. Nonconformance in countries can vary, especially within different states or provinces, for some it might just result in the potential of litigation or it could result in steep fines.
In Ontario, Canada, businesses with 50 or more employees or those in the public sector must have an accessible website or face fines of $50,000 to $100,000 daily depending on the size of the corporation
In the United States California and New York are the two strictest states on accessibility while businesses located in other states face the threat of potential litigation if they are not accessible.
This is the first exercise of our course on accessibility, here you can practice the terms and theory previously discussed in the last few courses.
Now that we all have what we need, we can begin our accessibility audit: Today we will focus on the Yale School of Art’s website which is known to be one of the least accessible websites, even though it is designed to share information.
After logging in you will arrive on the page where you will find the list of all your projects. We are going to proceed to the creation of a project, to do this you have to click on "create a new project".
When you click Create Project, you get a list of all the criteria that Capian offers for UX audits.
Select "Accessibility - WCAG 2.1": As we stated in the course you just had, the WCAG 2.1 standards are the most recent standards and those used by the most people around the world.
This is what your project will look like before we add photos.
To add a screenshot: You must press the Capian extension on your taskbar, which will allow you to delimit what you want to capture with a box.
The gif below shows you how to do this.
Once you have finished drawing the box, this pop up box comes up. Here you’re able to edit the title of the snapshot. Select the criteria that it’s going with or against and fill in the description. If something’s wrong then you can fill in a recommendation and tag the severity of the problem. You can also add tags within the project.
As you browse the Yale website, keep in mind the colors, fonts and click order. Don't forget to explore all pages and when you're done, check out all your Capian screenshots!
Keep in mind all your lessons learned throughout this course, which will allow you to judge the web accessibility of this website with great professionalism, do not hesitate to consult all the resources we provide in the lessons.
The concept of accessibility has been established for several years already in the digital world, however it must always be taken into account that more and more users are using the Internet and therefore some problems that were not before arise and need to be addressed, we can quote for example:
While many may think of disabilities as permanent; they can also be temporary or situational. They can include being born without a limb, breaking a bone, or being unable to see your phone in the sunlight. The four categories of disability are visual, motor, cognitive, and hearing disabilities. There are spectrums for how these affect people and the internet must be accessible to them all. However, accessibility aids are not only used by those who need them. Siri, Alexa, and Ok Google began as an accessibility aid that has become a mainstream product or feature for all users. Overall, making an accessible website leads to better user experience.
Below, we see Google’s Premier League Table for the 2018-2019 season. On the left is how the website normally appears to those who are able to distinguish color properly. On the right, is how it appears to those who cannot distinguish between red and green.
In order for the colorblind to know what the table is saying, Google cannot rely on color to show the wins and losses for each team. If you look closely, they don’t. The wins have a checkmark within the green circle and the losses have an x. draws which are gray on either side, have a dash to indicate it.
Part of checking for web accessibility is to make sure that your website is still understandable without color. You can do this by using color filters, like the Toptal feature, we used here. With it, we can verify that while the color choice is not the best for some, with the added symbols, all can understand.
Another popular tool that some might not realize is an accessibility aid is magnification. It’s available for internet browsers like Google and software like Microsoft Word. Some apps, such as Overdrive, an online library for ebooks, have the feature built in so users can adjust how the text looks to best suit their needs.
The images above show what the font size setting looks like on different platforms such as android phones, Apple products, and Windows phones. While this feature was designed for those with hard of sight, which can include those who were born with it or those who developed it such as an aging population, it can also be used by others who may prefer to read in a different font or who prefer a different color scheme. Having the feature built in allows users to read without using another accessibility aid such as a physical magnifier or a text to speech reader.
Finally, we have Siri, a virtual assistant who has been an Apple feature since 2011. It also led to the development of other virtual assistants such as Amazon’s Alexa and Ok Google.
With the command “Hey Siri,” Siri can perform tasks such as answering questions, sending texts, and giving directions. The development of Siri coincides with the development of Apple’s own in house voice to text reader for its own products, Siri has now become part of most people’s lives
Between now and our next lesson, go ahead and look at your phone. Under Settings you should find a tab that says “Accessibility” and give some of the features a try to better understand the tools that are out there to make more products accessible to everyone. Maybe you’ll find one that improves your daily life.
With a tool like Capian, you will be able to put the ascendancy on accessibility issues, we propose a web application as well as a mobile application with the same functionalities, so each person can use Capian on the tool where he or she is most comfortable.
The Web Content Accessibility Guide (WCAG) lists the necessary rules to make an accessible website or app. However, it is mainly intended for web developers, but there are other simplified versions at
Below are the basic standards that you can check without using any software.
If your website has any non-text content, such as videos, audio files or images, make sure you have:
NPR, America’s National Public Radio, is best known for providing free Transcripts of its interviews and shows since 2009. Within a few weeks, NPR reported that 20,000 people had gone online specifically for their free transcripts in 2009
In order to navigate your website, make sure you can :
For a more in depth check, you add extensions to your web browser, to make sure:
For a more in depth look at your website, you can use Capian's software to go through your website and mark changes. The next lesson will include a brief tutorial on how to use Capian for your website’s accessibility.
For this second exercise, we will go to a big supermarket's website and go shopping! Since March 2020, more and more people are shopping online. So we're going to go to the Target website.
For Windows users, you will find the procedure by clicking here. As long as the narration window is open, it will read everything on your screen.
For Mac users, "Voiceover" can be enabled in the "Accessibility" section. Just follow this tutorial to get it right.
We will divide our exercise in two parts :
When you have completed the two questions above, ask yourself if it would not be necessary to add this voice-over process to your website and optimize it.
Thank you to all of you for being with us for this course on accessibility, we have tried to address the most important points, but learning about accessibility is a learning process that happens all the time.
Attached is a summary of all the resources used during the course as well as supplements that we feel are relevant.
You will also find tools and applications that will help you in the evaluation and implementation of the accessibility of your website.
All these tools can be used in addition to Capian to help you better manage your web audits.
Digital Resources :
Digital Tools :