Introduction to Web Accessibility
Web accessibility is about creating web content, design, and tools that can be used by everyone regardless of ability. Here is an introduction to the basics of web accessibility.
Table of Contents
- What Is Web Accessibility?
- The Types of Disability
- Why Is Web Accessibility Important?
- Your Free Guide to Web Accessibility!
- Accessibility Standards
- The Four Principles of Accessibility
- PDF Accessibility Scanner
- The Components of Web Accessibility
- Examples of Web Accessibility
- Compliance & Legislation
- How to Create an Accessible Website
- Check Out Our Content Library
- Testing for Web Accessibility
- Just Remember…
- Frequently Asked Questions
- Make Your Website Better With Monsido
What Is Web Accessibility?
We’ve all experienced it: the annoyance at a slow-loading website, the squinting at badly-designed font, or the despair of trying to navigate a mobile unfriendly page. While these problems may be a slight inconvenience to us, for people with disabilities, they can completely restrict their internet use.
Web accessibility is the need for websites to utilize tools and technologies developed to aid the perception, understanding, contribution, navigation, and interaction of a person with disabilities on the site. Integrating accessibility can seem intimidating to those that are just getting acquainted with it, but it is a vital element of user experience. Accessibility should be built into the web development and design process, rather than trying to retrofit it as an afterthought.
Web accessibility is the need for websites to utilize tools and technologies developed to aid the perception, understanding, contribution, navigation, and interaction of a person with disabilities on the site. Integrating accessibility can seem intimidating to those that are just getting acquainted with it, but it is a vital element of user experience. Accessibility should be built into the web development and design process, rather than trying to retrofit it as an afterthought.
The Types of Disability
Visual
Visual disabilities includes blindness, low vision and color blindness.
Hearing
Hearing disabilities includes hearing impairments and deafness.
Neurological
Conditions and disorders involving the central and peripheral nervous systems such as epilepsy, Alzheimer disease, Parkinson's disease, etc.
Cognitive
Cognitive disabilities includes attention, learning disabilities and logic.
Motor
Motor disabilities includes limited fine motor control, muscle slowness, difficulty or inability to use hands.
Why Is Web Accessibility Important?
According to the World Health Organization's (WHO) 2011 world report on disabilities, 15% of the world’s population possesses some sort of disability. This includes physical disabilities, as well as cognitive and neurological disabilities. Rates of disability are only set to increase due to population ageing and the increase in chronic health conditions.
1 Billion
Of the world’s population live with a disability
People with disabilities should be able to enjoy the same access to information as those without. Luckily, there are technologies available to reduce or remove the barriers to their digital access. The provision of these benefits ensures that everyone, regardless of age, physical or mental capabilities, can use the internet and have good web experience.
Besides making the internet a more inclusive place for everyone, a good accessibility strategy also has business benefits. Accessibility is a component of design and development that touches on almost every element of the website’s creation. It overlaps the aspects of mobile-friendly designs, device independence, multi-modal interaction, usability, search engine optimization (SEO) and more. Accessible websites can have better search results, reduced maintenance costs, increased audience reach, and demonstrate corporate social responsibility (CSR). Therefore, having a well-designed, accessible website doesn’t just make your website available to those with disabilities, but it can also significantly improve the user experience for all users of your site.
Read more about the importance of improving web accessibility.
Besides making the internet a more inclusive place for everyone, a good accessibility strategy also has business benefits. Accessibility is a component of design and development that touches on almost every element of the website’s creation. It overlaps the aspects of mobile-friendly designs, device independence, multi-modal interaction, usability, search engine optimization (SEO) and more. Accessible websites can have better search results, reduced maintenance costs, increased audience reach, and demonstrate corporate social responsibility (CSR). Therefore, having a well-designed, accessible website doesn’t just make your website available to those with disabilities, but it can also significantly improve the user experience for all users of your site.
Read more about the importance of improving web accessibility.
Your Free Guide to Web Accessibility!
The Monsido Accessibility Handbook will help you get started with web accessibility. It outlines why web accessibility is important for your business or organization and the responsibilities that website managers have in creating an accessible site.
Accessibility Standards
The Web Content Accessibility Guidelines (WCAG) was developed by the World Wide Web Consortium (W3C) with the purpose of setting a series of internationally shared guidelines governing the standards of web content accessibility to make websites, devices, and content accessible to users with disabilities. Content under the WCAG refers to web content which is the information on a web page or web application, which includes:
Natural information such as text, images and sounds
Code or markup that defines structure, presentation, etc.
There are two versions of WCAG applied currently: WCAG 2.0 and 2.1. WCAG 2.0 was published in 2008 and became an ISO standard in 2012. WCAG 2.1 was published in 2018. All requirements (“success criteria”) from 2.0 are included in 2.1, with a few additional success criteria in 2.1. However, the guidelines are backward-compatible, meaning that content that conforms to WCAG 2.1 also conforms to WCAG 2.0.
The WCAG forms the basis of most legislation on accessibility across the world. Legislation like the Title III of the Americans with Disabilities Act (ADA), the Accessibility for Ontarians with Disabilities Act (AODA), etc adopt the WCAG at level AA as the minimum standard of conformance. Some countries have indirect references to the WCAG. The European Standard EN 301 549 for the EU Web Accessibility Directive for example, does not explicitly state its adoption of the WCAG but includes all the requirements from the guidelines.
WCAG’s success criteria are categorized into three levels of conformance, Level A, AA, and AAA.
The WCAG forms the basis of most legislation on accessibility across the world. Legislation like the Title III of the Americans with Disabilities Act (ADA), the Accessibility for Ontarians with Disabilities Act (AODA), etc adopt the WCAG at level AA as the minimum standard of conformance. Some countries have indirect references to the WCAG. The European Standard EN 301 549 for the EU Web Accessibility Directive for example, does not explicitly state its adoption of the WCAG but includes all the requirements from the guidelines.
WCAG’s success criteria are categorized into three levels of conformance, Level A, AA, and AAA.
Level A
This covers the most basic requirements of accessibility features and is the minimum degree of accessibility that must be satisfied. Failure to conform to this level will result in a completely inaccessible website.
Level AA
This level addresses some of the more common barriers to entry for people with disabilities. This is the highest level of conformance required by most websites as it ensures that the biggest accessibility barriers are removed.
Level AAA
This is the highest level for accessibility under WCAG and it is more difficult to achieve by most sites. Achieving this level is desirable but not of the utmost necessity.
The Four Principles of Accessibility
The principles of web accessibility are the foundations of content produced for the web and for anyone who wants to use the web. These principles are known as POUR, which is an acronym that describes functional accessibility:
- Perceivable - Perceivability refers to the information and elements of user interface that must be presented in a manner that can be perceived by the senses and that nothing is left undetectable or invisible. To most web users, perceivability is based primarily on visuals, but for those that are unable to, sound and touch are used instead.
- Operable - Interactive interface elements such as controls, buttons, navigation and more should be operable. This means that a user must be able to operate interface elements by first identifying them, and for most by physically clicking, tapping, swiping, or rolling. For those that can’t interact in these ways, voice commands or the use of other assistive devices like head wands and eye trackers.
- Understandable - This means that technology should be clear and consistent in the presentation and format, with predictable patterns of usage and design. End users should have no issue in comprehending the meaning and purpose of the information presented in the content while discerning the user flow and operation of the interface.
- Robust - Robustness is the ability for content to function reliably by a wide variety of technologies, including assistive devices.
PDF Accessibility Scanner
Identify and remediate PDF accessibility issues on the Monsido platform.
The Components of Web Accessibility
Web accessibility is an aspect that covers every element of a website. The different components of the website should be interconnected and complementary to each other to create a site that is functional and available for the benefit of those with disabilities.
These components include:
Content
Content comprises the information on a web page or web applications, such as text, images, and sounds; or the code, script, or markup that defines the structure, presentation, etc. of the site.
User agents
User agents are the web browsers, mobile phone browsers, media players, plug-ins, assistive technology, and other software that acts on behalf of a user.
Authoring tools
This is the software that creates websites such as code editors, content management systems, blogs, etc.
Evaluation tools
Tools to help you review the effectiveness of your accessibility attributes and to help track your remediation efforts.
Examples of Web Accessibility
Add alternative text (alt text) for images: This can be done by adding a description of the text in the markup/code (img alt=”The Monsido logo”). Alt text is used by screen readers and other assistive technologies to read the information on the images aloud to people with visual disabilities. An alt text is also beneficial to web users who have their images turned off due to low bandwidth for example, as well as being another resource for search engine optimization. Alt text must be both short and descriptive.
Example of good and bad alt text
Bad: A photograph of puppies
Good: Three Labrador puppies sitting in a basket
For images that are purely for decorative purposes, use null alt text (img alt=””).
Ensure keyboard functionality: For people with mobility issues, fine motor issues, or even ones with temporary disabilities like broken fingers, using a mouse to navigate can be difficult. So they must be able to use a website through other means, like a keyboard. For accessible websites, all functionality is available through a keyboard. Users can tab through content or use assistive technology that mimics the keyboard navigation pattern.
Provide transcripts for audio: For those with hearing impairments, audio files like sound clips, podcasts, or even videos are inaccessible. Having a transcript of the audio content allows hearing-impaired people to consume the content.
Example of good and bad alt text
Bad: A photograph of puppies
Good: Three Labrador puppies sitting in a basket
For images that are purely for decorative purposes, use null alt text (img alt=””).
Ensure keyboard functionality: For people with mobility issues, fine motor issues, or even ones with temporary disabilities like broken fingers, using a mouse to navigate can be difficult. So they must be able to use a website through other means, like a keyboard. For accessible websites, all functionality is available through a keyboard. Users can tab through content or use assistive technology that mimics the keyboard navigation pattern.
Provide transcripts for audio: For those with hearing impairments, audio files like sound clips, podcasts, or even videos are inaccessible. Having a transcript of the audio content allows hearing-impaired people to consume the content.
Compliance & Legislation
There are different web accessibility standards and regulations across different countries. Here are some examples of the more prominent laws and guidelines across the globe.
Global
WCAG
The Web Content Accessibility Guidelines (WCAG) is the international accessibility standard established by the World Wide Web Consortium (W3C)
United States
ADA
Under Title III of the Americans with Disabilities Act, all areas of public accommodation, including websites, must be accessible for all users.
United States
Section 508
Section 508 of the Rehabilitation Act of 1973 requires federal agencies in the United States to ensure that their electronic and information technology is accessible.
Canada
AODA
The Accessibility for Ontarians with Disabilities Act (AODA) is enforced in Ontario to identify, remove, and prevent barriers for people with disabilities.
How to Create an Accessible Website
Accessibility relies on the collaboration of the components mentioned. Here are some basic guidelines on how to ensure that the interface and development of your site are created for accessibility.
The following principles that describe accessibility solutions are developed and benchmarked by the W3C Web Accessibility Initiative (WAI), in conformance to WCAG standards.
The following principles that describe accessibility solutions are developed and benchmarked by the W3C Web Accessibility Initiative (WAI), in conformance to WCAG standards.
- Text alternatives: Use text alternatives to convey the context and purpose of visual content. Text alternatives render the information of visual content into electronic text that can be presented in a form that best fits the requirements of the user. Examples of which include read-aloud recordings of text, enlargement of text sizes, or the option of text to be read on braille devices.
- Providing text transcripts and captions for audio content: Multimedia, while providing users with a richer and more diversified experience on the web, can be limiting to those with audio or visual impairments. Providing text transcripts and captions for audio content, such as recordings of a radio interview; or adding a sign language interpretation of audio content can help overcome these limiting factors.
- Presentation of content: Content should be presented in different formats and users should be able to change the presentation of content. Examples of multiple content presentations include allowing options for content to be read aloud, displaying content in custom color combinations, using correct color contrasts, or creating mobile-friendly content.
- Avoid content that flashes, is time-based, or that autoplays: Content perception and comprehension are not made equal. Some users may need more time to read instructions, type, or complete tasks on a website. Care should be taken to adjust time-sensitive elements on a website and to use dynamic content that does not interrupt, pause, blink or scroll. Content that is animated and that that flashes at certain rates can also be harmful to those with photosensitive disorders. Such content should be avoided or a warning of the nature of the content should be presented beforehand.
- Accessible navigation: Navigation is an essential element of user experience and creating a site with well-organized content can provide users with disabilities an equal opportunity to experience the website fully based on their needs. Some important aspects to consider regarding accessible navigation is to understand how users interact with site structures such as hierarchical menus, search boxes, site maps.
- Make text content readable and understandable: Text content should be readable and understandable in all the formats it is presented in. The level of comprehension of the text should be presented to cater to the broadest audience possible so that it is inclusive to those with learning disabilities and cognitive limitations. Providing measures to ensure that users are helped to avoid, and correct mistakes are also essential. This can help people who do not see or hear the content or may not recognize implicit relationships, sequences, and other cues on web elements such as forms.
- Have content appear and operate in predictable ways: Ensure that the content on your site follows a predictable and consistent pattern and interface. A consistent design can help users learn to navigate the site quickly and follow predictable patterns to achieve certain goals on a site.
- Display an accessibility statement: Demonstrate your commitment to your web accessibility efforts to your customers and stakeholders by including an accessibility statement on your site. An accessibility statement should include the accessibility guidelines and standards your website will be following including the intended level of accessibility, contact information in the event that visitors find issues with the accessibility of the site, and an acknowledgement of any exceptions to the standards based on limitations of the site. You can use an accessibility statement generator to quickly create a complete and compliant statement.
Check Out Our Content Library
The Monsido Accessibility Handbook will help you get started with web accessibility. It outlines why web accessibility.
Testing for Web Accessibility
Once you’ve implemented solutions to accessibility, you should review your site for compliance with the required standards. However, the process doesn’t end there. Your site should be evaluated throughout your website’s development or redesign process. This can ensure that issues are detected early and resolved easily. While there are many tools available to assist in the evaluation process, Monsido’s comprehensive governance and evaluation tools can determine if your site meets all the accessibility compliance requirements and provides a dashboard overview of issues to help you optimize your site’s accessibility.
Webinars
One-on-one webinars to help you navigate the Monsido solution effectively.
Product Training
Online training sessions to help your web team succeed with Monsido.
Just Remember…
...web accessibility isn’t the toughest nut to crack. All it takes is some commitment to learning the common issues and their solutions. A good rule of thumb is to never leave accessibility planning as the last project in designing a website. Rather, accessibility should be incorporated from the very beginning of the site planning and creation and subsequently to every project that follows.
Frequently Asked Questions
Who benefits from web accessibility?
Everyone benefits from accessibility. Besides allowing individuals with disabilities access to the web, many web accessibility standards overlap with good SEO practices. For example, Google Webmaster Guidelines describe practices like ensuring descriptive alt and title attributes, checking for correct HTML, and offering a site map to users. All of these (and many more) are also important for accessibility. Web accessibility also improves user experience and quality assurance. Accessibility means creating a website that provides a good experience for everyone, regardless of how they must access the internet. When you ensure a good experience for users with disabilities, you can rest assured that your overall website experience and quality will improve.
Is web accessibility a legal requirement?
Yes. Many countries have a web accessibility legislation in place, either referring to the WCAG or with standards that are built upon the WCAG, like the European web accessibility standard EN 301 549. Refer to our compliance and legislation section for more information.
How do I know if my website is ADA compliant?
Web accessibility falls under Title III of the ADA, which states that equal access to information and services must be provided to all areas of public accommodation (hotels, schools, restaurants, gyms, retailers, libraries, doctors, etc.). Websites are considered places of public accommodation and that any barriers to access on the website are in violation of this law. While the ADA does not have its own technical standards to define web accessibility compliance, the many court cases that arose from lawsuits filed under the ADA have referenced WCAG 2.0 level AA, and subsequently, WCAG 2.1, as their benchmark for compliance standards. So to have your website ADA compliant, it should also be at minimum WCAG 2.0 level AA compliant. To find out your web accessibility compliance levels, you can request a free website scan from Monsido. Learn more about ADA compliance
Can I be sued if my website is not accessible?
Yes, you can. If your country has specific legal guidelines for web accessibility, then failing to provide an accessible website can result in a lawsuit. In 2020, over 3000 lawsuits were filed in the US in violation of the ADA. Avoid any legal action to your website by implementing web accessibility early and properly. Read this blog about how to avoid a web accessibility lawsuit.
Everyone benefits from accessibility. Besides allowing individuals with disabilities access to the web, many web accessibility standards overlap with good SEO practices. For example, Google Webmaster Guidelines describe practices like ensuring descriptive alt and title attributes, checking for correct HTML, and offering a site map to users. All of these (and many more) are also important for accessibility. Web accessibility also improves user experience and quality assurance. Accessibility means creating a website that provides a good experience for everyone, regardless of how they must access the internet. When you ensure a good experience for users with disabilities, you can rest assured that your overall website experience and quality will improve.
Is web accessibility a legal requirement?
Yes. Many countries have a web accessibility legislation in place, either referring to the WCAG or with standards that are built upon the WCAG, like the European web accessibility standard EN 301 549. Refer to our compliance and legislation section for more information.
How do I know if my website is ADA compliant?
Web accessibility falls under Title III of the ADA, which states that equal access to information and services must be provided to all areas of public accommodation (hotels, schools, restaurants, gyms, retailers, libraries, doctors, etc.). Websites are considered places of public accommodation and that any barriers to access on the website are in violation of this law. While the ADA does not have its own technical standards to define web accessibility compliance, the many court cases that arose from lawsuits filed under the ADA have referenced WCAG 2.0 level AA, and subsequently, WCAG 2.1, as their benchmark for compliance standards. So to have your website ADA compliant, it should also be at minimum WCAG 2.0 level AA compliant. To find out your web accessibility compliance levels, you can request a free website scan from Monsido. Learn more about ADA compliance
Can I be sued if my website is not accessible?
Yes, you can. If your country has specific legal guidelines for web accessibility, then failing to provide an accessible website can result in a lawsuit. In 2020, over 3000 lawsuits were filed in the US in violation of the ADA. Avoid any legal action to your website by implementing web accessibility early and properly. Read this blog about how to avoid a web accessibility lawsuit.
Make Your Website Better With Monsido
Find out how Monsido’s tools can make your website optimization process efficient and effective.
