Most people today can hardly conceive of life without the Internet. The Internet has revolutionized our communications, to the extent it is now our preferred medium of everyday communication. At the click of a mouse – or touch on a screen – the world is at your fingertips. That is, as long as you can use a mouse, and see a screen, and hear the audio. In other words, the world is available to you as long as you don’t have a disability that limits your access to the Internet.
In truth, the Internet is one of the best things to happen to people with disabilities. For example, before the Internet people who were visually-impaired couldn’t read the newspaper because Braille versions were expensive, very bulky and not feasible for daily publications. They could ask someone to read it to them, but reading out loud was time-consuming and meant the visually-impaired person was dependent on others.
Today, most newspapers publish their content online and can be read by screen readers. Screen readers are software programs that read electronic text out loud so blind people can use computers and access any text content they want.
Similarly, people with other disabilities – such as motor functioning – can use certain assistive technologies that adapt the computer interface to their own disabilities. People who are hearing-impaired may need online transcripts or captions for multimedia content (i.e. videos). People with cognitive disabilities can also greatly benefit from the structure and flexibility of web content.
Despite the Internet’s potential for people with disabilities, many sites are still inaccessible to them. Some sites can only be navigated by a mouse and only a very small percentage of video or multimedia content has been captioned for people who are deaf. If content is only accessible using a mouse and someone can’t use a mouse, they can’t access it. If web developers use graphics instead of text without using alt tags, how can screen readers read what the graphic portrays to people who are visually-impaired?
The Internet has the potential to revolutionize access to information for those with disabilities, as long as website developers don’t place obstacles in the way, leaving people with disabilities discouraged and as dependent on others as they were before the Internet was invented.
How Many People Struggle with Accessibility?
Though estimates vary, most studies report about one-fifth (20 percent) of the population has some type of disability. Not all people with a disability find it difficult to access the Internet, but it is still a significant number of people. It is unwise to purposely exclude a percentage of potential families from your website.
Why Your Website Needs to Be Accessible
The Web needs to be accessible to provide equal access and equal opportunity to people with diverse abilities. The UN Convention on The Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.
Accessibility supports social inclusion for people with disabilities as well as other people, such as older people (i.e. grandparents raising grandchildren), people in rural areas and people in developing countries.
Accessibility also benefits people without disabilities. For example, sometimes people need (or prefer) to watch a video without the sound turned on. Accessibility is essential for people with disabilities and useful for everyone in a variety of situations.
There is also a strong marketing and financial case for accessibility. Accessibility overlaps with other best practices, such as:
- Mobile web design
- Device dependence
- Multi-modal interaction
- Design for older users
- Search engine optimization (SEO)
Case studies show that accessible websites have better search results, reduced maintenance costs and increased audience reach, among other benefits.
Major Categories of Disabilities
The major categories of disabilities include:
Blindness, low vision, color-blindness
Deafness and hearing-impaired
Inability to use a mouse, slow response time, limited fine motor control
Learning disabilities, distractibility, inability to remember or focus on large amounts of information
Each of these major categories of disabilities requires certain types of adaptations. Most of the time, these adaptations benefit nearly everyone as well as your school, not just people with disabilities. Almost everyone benefits from helpful illustrations, properly-organized content and clear navigation. Similarly, while captions are for hearing-impaired users, they can be helpful for anyone, especially someone who views a video without the audio turned on.
Accessibility Laws and Standards
Applicable laws in the United States include;
- The Americans with Disabilities Act (ADA)
- The Rehabilitation Act of 1973 (Section 504 and Section 508)
There are many international laws that address accessibility as well.
The Web Content Accessibility Guidelines (WCAG) provide an international set of guidelines. They were developed (and are continually updated) by the Worldwide Web Consortium (W3C), the governing body of the web. These guidelines are the basis of the most web accessibility laws in the world. The most recent version of these guidelines was published in 2008. They are based on four principles:
Available to the senses (vision and hearing primarily), either through a browser or assistive technologies (e.g. screen readers, screen enlargers, etc.)
Users have the ability to interact with all controls and interactive elements using either a mouse, keyboard or assistive device.
Content is clear, limits confusion and ambiguity.
A wide range of technologies (including old and new user agents and assistive technologies) can access the content.
The first four letters of the WCAG principles spell POUR. This may make it easier for you to remember them.
Principles of Accessible Design
Here is a list of key principles you can use to implement accessible design. Most accessibility principles can be applied very easily and will not impact the overall look or feel of your website.
Use heading tags
Don’t denote important sections of a post with bold or italics. Screen readers do not distinguish bold or italicized text. Use traditional XML heading tags allows users with screen readers to skip to important sections and allows for quick transition should you ever decide to transfer your site.
Include alternative text
Alternative text provides a textural alternative to non-text content in web pages. Images should include equivalent alternative text (alt text) in the markup/code. If alt text isn’t provided for images, the image information is inaccessible. It is especially helpful for people who are blind and rely on a screen reader to read content to them.
Appropriate document structure
Headings, lists and other structural elements provide meaning and structure to web pages. They can facilitate keyboard navigation within the page.
If you are using a CAPTCHA to prevent spam on your site, make sure it is accessible. Visual only CAPTCHAs make it impossible vision-impaired users to register or leave comments on your site without assistance. A simple way to fix this is to use the free reCAPTCHA from captcha.net or implement better spam filters and do away with CAPTCHAs altogether.
Headers for data tables
Tables are used online for layout and to organize data. Tables used to organize tabular data should include appropriate table headers (<th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.
Ensure users can complete and submit all forms
Every form element (text field, checkbox, drop-down list, etc.) needs a label associated with the correct form element. Use the <label> element. Also, make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.
Links make sense out of context
Every link should make sense if the link text is read by itself. A user can choose for their screen reader to only read links on a page. Certain phrases like “click here” and “more” must be avoided.
Caption and/or provide transcripts for media
Videos and live audio must have captions and a transcript. A transcript only may be sufficient for archived audio (i.e. podcasts).
Ensure accessibility of non-HTML content
PDF documents and other non-HTML content, such as Microsoft Word documents, PowerPoint presentations and Adobe Flash content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should include a series of tags to make it more accessible. A tagged PDF file looks the same but is almost always more accessible to a person using a screen reader.
Allow users to skip repetitive elements on the page
Provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a “Skip to Main Content” or “Skip Navigation” link at the top of each page that skips to the main content of the page.
Don’t rely on color alone to convey meaning
The use of color can enhance comprehension, but do not use color alone to convey information. A person who is colorblind will not be able discern the difference and it will be unavailable to screen reader users.
Make sure content is written clearly and is easy to read
There are many ways to make your content easier to read.
- Aim for a Flesch Reading Ease score of 60 or higher. This is acceptable and normal for web copy. Most word processing software (Microsoft Word) offer a readability score as part of their Spelling and Grammar review feature.
- Aim for a Flesch-Kincaid Grade Level score of 8th grade or lower. This is considered “plain English” and is easily understood by 13 to 15 year old students.
- Use clear, easy-to-read fonts
- Use headings and lists appropriately
- Design to standards. HTML compliant and accessible pages are more robust and provide better search engine optimization (SEO). Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility to your content.
Best Tools for Website Accessibility
Most of the basics of accessibility are fairly easy to implement. However, if you are new to accessibility, it takes some time and effort to learn the common issues and solutions.
Places to Start
- Accessibility principles – introduces accessibility requirements and international standards.
- Easy Checks – A First Review – helps you start testing the accessibility of a web page and understand some common accessibility barriers.
- Tips for Getting Started – provides some basic considerations for designing, writing and developing.
- Authoring tools – using authoring tools that support accessibility makes it easier for web developers. Browsers also play a role in accessibility. These roles are explained in Essential Components of Web Accessibility.
- WP Accessibility Plugin – if your website is a WordPress site, you can install and activate the WP Accessibility plugin to improve the accessibility of your site.
- User Way Widget – available for all leading CMS platforms as well as plain HTML/CSS/JS sites. This widget uses AI-based auto-remediation technology to detect, monitor and fix accessibility issues on your site.
- Accessibility-ready themes – if you are creating or redesigning your website, consider using an accessibility-ready theme. These will come designed for visibility and simplicity and adhere to Web Content Accessibility Guidelines (WCAG 2.0). Just search for “accessibility” in the WordPress theme repository or through your favorite WordPress Theme merchant site (i.e. Elegant Themes, Envato Elements WordPress Themes, Theme Forest, etc.)
- Developer Tools – Chrome Developer Tools Audit has a clean interface and helps with issues. Available through any major browser, the Developer Audit Tool is a good starter for checking your site’s accessibility. It will scan for:
- Best practices
- Progressive Web App (PWA)
- WAVE Web Accessibility Evaluation Tool
The WAVE Web Accessibility Evaluation Tool is a widely-used and respected tool with forthright graphical presentation of a number of issues.
WAVE scans for:
- Structural Elements
- HTML5 and ARIA
- Contrast Colors
Go to the Details list and click on each issue icon and the issue will be highlighted on the page. It’s a great way to take in all the elements on a page.
Making sure your website is welcoming to as many people as possible should be a top priority. There’s no reason to exclude anyone, especially since there are many tools to make it relatively easy to avoid doing so. Not only will your readers thank you, but you’ll also likely see benefit in the form of increased traffic and conversions. Take the time to understand the possible flaws in your design and content and then you can make sure your site is optimized for accessibility.
There are many resources on the Web on different aspects of accessibility, including:
- Training and advocacy
- Testing and evaluation
- Planning and policy
- Making the Web Accessible
- WAI resources
- Understanding WCAG 2.0: A Guide to Understanding and Implementing Web Content Accessibility Guidelines 2.0
- GSA Section 508 IT Accessibility Program
- United Nations Convention on the Rights of Persons with Disabilities – Accessibility
- HHS Section 508 Compliance
What tools or resources have you used to ensure your website is accessible to people with disabilities? Please share in the comments below…