Today, more than half of the world’s population has Internet access – almost 4.4 billion people. This population consists of a variety of users, including largely diverse demographics, languages, and abilities. These include various degrees of auditory, cognitive, physical, speech and visual abilities and disabilities.
Disabilities are as unique as the individuals who have them. They range in abilities, skills, preferences and expectations that can impact how they live life day to day, including how they use the Internet. By developing websites and tools designed for people with a broad range of abilities, you can make your brand, products and services more attractive and accessible to a wider range of individuals. Search engines such as Google also recommend making accessible websites. If it doesn’t affect SEO yet, it likely will one day.
It’s important to consider the diversity of consumer needs when designing your website – not just for the users, but also to align with the World Wide Web Consortium’s (W3C) Web Accessibility Initiative. In this article, you’ll find examples of disabilities you should cater to, learn how to make your website accessible to various abilities, and understand tools and techniques for your site to make it as interactive and easy-to-use as possible.
What is the Web Accessibility Initiative?
Why is Web Accessibility Important?
Abilities and Barriers
Tools and Preferences
How to Make Your Website Accessible
Easy Way to Check Your Web Accessibility
What is the Web Accessibility Initiative?
Web accessibility means that websites, tools and technologies are designed and developed so that people with disabilities can use them. They should not only be able to perceive, understand, navigate and interact with the web, but also contribute through comments, blogs, forms, etc.
Web accessibility encompasses all disabilities, as well as people without disabilities but limited function due to different circumstances. Examples of this include:
● People with mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
● Older people with changing abilities due to age
● People with “temporary disabilities” such as a broken arm
● People with “situational limitations” such as being in an environment where they can’t listen to audio
● People using slow internet connection, such as those in rural areas
● People in developing countries
People use the web for infinite reasons, including education, employment, government, commerce, health care, recreation and more. It’s essential that websites be accessible to all to provide equal access and opportunity. It’s especially important because, according to the United Nations Convention on the Rights of Persons with Disabilities, access to information and communication technologies, including the internet, is defined as a basic human right.
Why is Web Accessibility Important?
The good news is many aspects of accessibility are relatively easy to understand and implement on your site. First, keep in mind the three primary web accessibility components that revolve around:
● Web content – any part of the website including text, images, forms and multimedia, markup code, scripting, applications, etc.
● User agents – software people use to access the web, like desktop and mobile browsers, multimedia players, plugins, assistive technology (screen readers, alternative keyboards, etc.).
● Authoring tools – services people use to produce web content, including code editors, document conversion tools, blogs, content management systems, evaluation tools, etc.
It’s critical that all three of these components be made accessible and work together in order for those with disabilities to properly access and interact with your site. Web developers generally use authoring tools in order to make the web accessible. People then use the user agents to interact with the content.
● When user agents support accessibility, users will be more likely to use them and developers are more likely to implement them into their site and content.
● When developers are implementing accessibility features into their site and content, they will use authoring tools to make it easier. When authoring tools make it easy to make sites accessible, developers are more likely to use it.
● When accessibility features are implemented in content, developers and users are more likely to use user agents to support it.
If these components don’t work together, the result is most likely a non-accessible website that’s difficult to use for those with disabilities.
In many situations, web accessibility is required by law. The W3C initiative develops web accessibility standards for the three components we’ve explained here.
● The Authoring Tool Accessibility Guidelines (ATAG) addresses authoring tools.
● The Web Content Accessibility Guidelines (WCAG) Overview addresses web content, and is used by developers, authoring tools, and accessibility evaluation tools.
● The User Agent Accessibility Guidelines (UAAG) addresses web browsers and media players, including some aspects of assistive technologies.
These guidelines are based on the technical specifications of the web to ensure proper web accessibility development, and are developed in coordination with all W3C technical specifications.
Abilities & Barriers
There are a variety of auditory, cognitive, physical, speech and visual disabilities your users may experience. Some may have had the disability from birth, while others may be caused by an illness, accident, or impairments that develop with age (such as lower vision and hearing). The degree of disability could be very mild, or it could be severe. Every individual is unique, which is why you must make your site accessible for the varying abilities of your users. When planning your site, consider the following:
● Age related impairments: Many people develop impairments or disabilities with age. There can be significant differences in the way they use assistive technologies, the level of computer skills they have, and their use of the web in general.
● Multiple disabilities: Some people have a combination of disabilities which can even further limit their interaction with the web. For example, someone may have low vision and deafness, so they cannot interact with audio but also have challenges reading the captions.
● Health conditions: Some disabilities could be due to health conditions. For example, pain, fatigue, or other symptoms experienced can affect their physical use of the computer or limit the duration they can use the web.
● Changing abilities: Some users experience changing abilities, such as progressing or recurring disabilities. Their use may change day-to-day depending on these abilities.
● Temporary impairments: Accidents, surgery or medications can sometimes affect the way a user accesses the web. In this case, the user may not know how to use accessibility features, so your site should help them through their experience.
● Situational limitations: Perhaps the user cannot listen to a video with sound, or they are outside in sunlight that affects their ability to see the screen.
Your website and tools must be designed for people with a variety of abilities and disabilities. The inclusion of accessible design should not negatively affect the use of your site, but instead make it inclusive for all users. There are a number of specific abilities and/or disabilities you should be aware of when planning the accessibility of your site. Here, they are broken into categories with examples of the disability, barriers users may come across on your site and how to combat them.
Auditory
These disabilities include hearing loss in one or both ears. It can range from more mild, such as hard of hearing, to total deafness. It includes those who cannot hear at all, those who can hear sounds but sometimes not clearly, and people who use hearing aids.
To use the web, people with auditory impairments often rely on transcripts and captions, options to stop/pause/adjust volume of audio content, and high-quality audio that is distinguishable from background noise. Web applications that rely on interaction using voice-only can be very challenging for auditory disabilities.
Also keep in mind for some with more severe auditory disabilities, their primary communication is sign language so they may not understand the written language as well as others. To help provide context, include a variety of images, graphics and other illustrations.
Cognitive, learning, and neurological
These disabilities can range from physical to behavioral to mental health disorders. While they may affect any part of the nervous system including how people hear, move, see, speak and understand information, they do not necessarily affect the intelligence of a person.
Examples of these disabilities include: attention deficit hyperactivity disorder (ADHD); autism; learning disabilities; mental health disabilities such as anxiety, depression, paranoia, schizophrenia, etc.; multiple sclerosis; memory impairments; seizure disorders; migraines; etc.
These individuals often rely on:
● Clearly structured content
● Consistent labeling of forms, buttons and other content
● Predictable link targets, functionality and overall interaction
● Different forms of navigation, such as menus and search bars
● Options to suppress distracting content
● Simple text that is supplemented by images, graphics, etc.
People with these disabilities often rely on a variety of web use methods, such as text-to-speech software, resizing and spacing tools, grammar and spelling tools, and more. That’s why it’s critical for your web developers to consider accessibility requirements for people with hearing, physical, speech and visual disabilities.
Make sure your page layouts, sentences and other texts are simple and easy to understand. Include a variety of images and illustrations to help explain the content. Avoid moving or flickering content, and background audio that cannot be silenced.
Physical
Physical disabilities include weakness and limitations of muscular control, limitations of sensation, joint disorders, pain and missing limbs. Examples include amputation, arthritis, fibromyalgia, muscular dystrophy, repetitive stress injury, tremors or spasms, and quadriplegia.
People with physical disabilities may use a specially designed keyboard or mouse; headpointer, mouth stick or other aids to typing; on-screen keyboard with a trackball, joystick or other pointing device; switches operated by foot, shoulder or other movements; and voice recognition, eye tracking or other hands-free interaction.
These disabilities may cause challenges clicking small areas. Providing large, clickable areas, time to complete a task, and error correction options for forms are important for your designers to include. You may also want to develop a site that provides full keyboard support, controls with equivalent text alternative, visual and non-visual orientation cues and page structure, and consistent and predictable navigation.
Speech
Apraxia of speech, cluttering, dysarthria, speech sound disorder, stuttering and muteness are all examples of speech disabilities, which can make producing speech recognizable by others or voice recognition software difficult. To use services that rely on voice, people with speech disabilities need alternative models of interaction such as text chat, email and feedback forms. Be sure to include other forms to communicate other than a phone number, and have alternative web applications that do not rely on voice-only interaction.
Visual
Visual disabilities, such as color blindness, low vision, blindness and deaf-blindness force users to rely on changing the presentation of web content into forms or apps more usable for their needs. Your developers should ensure the presentation of the content is independent of the site structure, and the structure is coded so it can be processed and presented in different ways.
For example, some people cannot see the content and rely on lists, headings and tables to understand. Others can only see small portions of content at a time, or use customized fonts, colors and spacing to make the copy more readable.
Make sure your site’s images, controls and other structural elements have equivalent text alternatives. Your text and layout should be able to be resized without losing information. Visual and non-visual orientation tools, page structure and other navigational aids should be present. Text and images should have sufficient contrast, and the pages should be consistent, predictable and have simple navigation.
Tools & Preferences
People with disabilities use many tools and techniques to interact with the web, depending on their needs and preferences. Sometimes people can configure standard software to meet their needs, while others need special software and hardware to help them perform tasks.
There are two common approaches for interacting with the web: assistive technologies and adaptive strategies.
● Assistive technologies include screen readers that read web pages out loud, screen magnifiers, voice recognition software and selection switches.
● Adaptive strategies help people with disabilities interact with the web, such as increasing text size, reducing mouse speed, and turning on captions. These techniques can be used with standard software, as well as assistive technologies.
In some cases, individuals are unaware of the accessibility features available to them. That’s why it’s critical to make your site accessible for all abilities and strategies, including for those who do not have access to assistive technologies.
These preferences can be split into four categories, each with examples of technologies or strategies used to help with using the web: Perception, Presentation, Input and Interaction.
Perception – hearing, feeling, seeing
People perceive content through different senses, such as auditory, tactile, and visual. They may hear speech, music and sound. Or, they may feel dots, bars and vibrations. They could also see images, text and video.
Some people may need to convert content from one form to another in order to perceive it. For example, a blind person may need to convert it to Braille. Or someone who is deaf may need to convert audio or video to text. Some accessibility features you can include on your site to support different perceptions are audio descriptions; auditory, tactile and visual notifications; captions; text-to-speech; and transcripts.
Some assistive technologies and adaptive strategies people may use include:
● Refreshable Braille Display – this is a mechanical terminal that displays a line of braille characters by raising and lowering dots. Braille devices with capabilities of small computers incorporate Braille displays. They can be used to take notes, calculate numbers, or interface with other devices.
● Screen Reader – a software that processes content and converts it to other forms such as text-to-speech or Braille. They provide other functions as well, such as shortcut keys, different modes for processing and interacting with content, and highlighting text that’s being read.
● Voice Browser – this software processes web content and is developed as assistive tools and alternative web browsers for mobile devices.
Presentation – distinguishing and understanding
By adjusting presentation of content, people are able to make it easier to understand. For example, they may need larger text and images sizes, or higher contrast. Some people need louder and clearer audio. Changing font colors, type, spacing and line width may be necessary. They perhaps need screen magnification, easy-to-read text, a document outline or symbols to understand the content.
Your site should provide as many solutions as possible to make the content distinguished and easy to understand. Some assistive technologies that may be used include:
● Pop-up and animations blockers
● Reading assistants that change the presentation of content and provide other functionality to make it more readable, like customizing font type and size, spacing, scanning the text for complex words, providing outlines of page headings, and reading content aloud.
● Screen magnifier to enlarge content and make it easier to see.
● Volume control to adjust audio being played.
Input – typing, writing and clicking
Some people use software and customized settings to enhance their ability to type, write and click. For instance, some may not use a keyboard, mouse or either, while others have specific configurations for their keyboards or mouse. Some use a touch screen, or prediction software to complete words and sentences with minimal typing, tools to help click or select text with minimal movement, or tools to help correct text.
Your site should be designed to support these approaches. For example, all forms, links and other functionality should be able to be used with a keyboard only. Media players should also provide full keyboard support. You may need to allow more time for those typing, writing or clicking, as well as a clear and helpful error message and options for correcting inputs.
Examples of assistive technologies and adaptive strategies for inputs include:
● Accelerators that reduce the effort needed to type or click.
● Alternative keyboard and/or mouse like larger keys, on-screen keyboards/touch-screens, trackballs, joysticks, touch pads, or other custom layouts.
● Eye tracking that monitors eye movement to control the mouse pointer and uses blinking to initiate mouse clicks.
● Keyboard customization such as sticky keys to support single handed typing.
● Keyboard and mouse filters that compensate for involuntary movements like tremors and spasms.
● Mouse customization that includes changing the sensitivity of the mouse toward movement, filters, and changing the size of the mouse pointer.
● On-screen keyboard
● Spelling and grammar tools
● Voice recognition that can be used to dictate text or issue operational commands
● Word prediction software that presents selections of matching words, phrases or sentences based on current input and context.
Interaction – navigation and finding
The ability to navigate your site and find useful content depends on the user’s preferences, skills and abilities, which varies person-to-person. For example, some people may only see portions of the screen and must orient themselves using visual cues, so the visual design needs to support this. Or, some people only use the keyboard to navigate so all pages should be designed this way. Other examples include building functionality that is easy to use and remember, as well as simple and alternative ways for navigation.
Keep in mind these functionalities affect people both with and without disabilities, so your site should be designed to easily navigate and find content. Features include consistency of content and design, descriptive titles and headlines, helpful errors and success messages, various forms of navigation, and visual orientation cues.
To assist with these functions, some may use:
● Bookmarks and history to remember pages or find pages quickly.
● Keyword search to quickly find text within a page or site.
● Keyboard navigation to move through the site using a keyboard, typically by using the tab key.
● Page maps to display the whole web page with an indicator highlighting the portion that’s currently being viewed.
● Pictorial links showing small images of the target links in web browsers or on web pages.
How to Make Your Website Accessible
Making your website accessible according to the W3C guidelines can be a serious undertaking; however, by following these tips outlined by the Web Accessibility Initiative, you can take the first steps. These tips are broken into three categories:
● Design – tips for user interface and visual design
● Writing – tips for writing and presenting content
● Development – tips for markup and coding
Here’s a quick reference guide to Web Content Accessibility Guidelines requirements and techniques from the Web Accessibility Initiative, but we will summarize the key points here.
Web Accessibility Design
These 10 considerations can help make your site’s user interface and visual design more accessible to people with disabilities.
1. Provide sufficient contrast between foreground and background.
This includes text, text on images, backgrounds, buttons and other elements on the page. For example, some people cannot read the text if there isn’t sufficient contrast between the text and background, like a light grey text against a white background or light text on a dark background. For others, bright colors are not readable.
According to the W3C, the visual presentation of text and images of text has to have a contrast ratio of at least 4.5:1, except for large text, incidental text, and logos.
Most web browsers allow people to change the color of text and background, so your page should work if someone changes the colors.
There are essentially three ways to check contrast of your page:
● Table with contrast ratio – this tool displays a ratio with all of the possible contrast ratios in the web page. It allows you to click in the table and it will show you where that color combination is in the web page. While it can be a comprehensive review, it can sometimes be inaccurate.
● Eye-dropper tool – this tool lets you select a text or background color, and then shows you the contrast ratio. While this is an accurate way to test contrast, you can only test one item at a time.
● Turn off color – this tool shows you the page in grayscale, so it gives you a direct experience but does not provide a contrast ratio value.
2. Don’t use only color alone to convey information.
Using color to convey information and differentiate elements can be helpful, but should not be the only way information is shown.
For example, instead of using only color to indicate required form fields, also use an asterisk. Or, instead of referring to something using color alone, also use numbers or letters to identify objects.
3. Ensure that interactive elements are easy to identify.
If you have interactive elements on your site, such as links and buttons, make sure they are easily identifiable. For example, change the color or style of the links on mouse hover, keyboard focus, and touch-screen activation. Some people cannot use a mouse, so instead they use a keyboard to navigate. It’s critical that a user can reach all interactive elements using a keyboard.
However you choose to make them easy to identify, use the styles and naming consistently throughout your site. It could be a border, highlight, or other style that moves as you tab through the web page.
4. Provide clear and consistent navigation options.
As a user navigates through the pages of your site, they should see consistent naming, styling and positioning of elements. One consistent method should be ways to navigate your site, such as site search, site map or drop-down navigation. Help the user understand where they are in your site and how to get from one page to another, such as providing orientation cues and clear headings.
5. Ensure that all form elements include clear labels.
This is particularly important for form fields that require input. Make sure all fields have a descriptive label next to the field, typically to the left or directly above the field. For checkboxes and radio buttons, the description should be to the right.
Headings and labels should accurately describe the topic or purpose of the field. The description should be direct, and there shouldn’t be too much space between labels and fields to avoid confusion.
6. Provide easily identifiable feedback.
This also relates to interactions, such as confirming form submissions, alerting the user when something goes wrong with a form, or notifying the user of changes made on the page. All instructions should be obvious and easy to identify, and feedback that requires action should be prominent.
For example, if there are errors within a submission form, you can use an error list, icon and/or background color. Using multiple notifications can make the error easier to locate and solve. When you identify the error, you should also describe the error in text form. It should be obvious where the error is, what it is, and how to correct it.
7. Use headings and spacing to group related content.
Throughout each page, make sure relationships between text, images and other design elements are apparent. You can do this using white space, style headings, colors, and other elements. This can help make the page easier to scan and understand while reducing clutter.
Headings should describe the topic or purpose, and accurately depict what content will follow the heading.
8. Create designs for different viewport sizes.
When designing your site, consider how it looks on mobile phones, tablets, and zoomed in or out of browser windows. The main elements, such as headers and navigation, can be changed in design to make the best use of the space on different sized viewports. Position and present the elements in a way that makes sense to the user. Ensure that text size and line width are set to maximum readability and legibility, no matter what size the screen.
If displaying in a wide window with small text, use multiple columns for primary content, visible navigation options, and accessible secondary information.
If displaying in a small window, use large text in a single column for primary content, and show navigation icons and secondary information via icons. This is called mobile responsiveness. Minimize the amount of information put on the page, provide a reasonable default size for content and touch controls, adapt the length of link text to the window size, and position form fields below (instead of beside) their labels.
The pages should also be viewed and supported in portrait and landscape orientation.
9. Include image and media alternatives.
It may not be easy, or even possible, for people to watch a video with sound, view images, or understand graphic elements. For example, you may need a link to transcripts of audio, or have audio-described versions of video. You could place subtitles on videos. You may also provide captions, descriptions, and/or icons with graphics, tables or charts.
All non-text content should be presented with a text alternative that serves an equal purpose to ensure all users, particularly those who cannot hear, can still experience your content. We will describe this in a later section.
10. Provide controls for content that starts automatically.
For example, if you have animations or auto-start videos, you should provide controls to allow users to silence the sound or stop playing it. This applies to carousels, image sliders, background sound, and videos.
Specifically, if audio on a page plays automatically for more than three seconds, there must be a clearly visible audio control to pause or stop the sound. For any moving, binking or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, the user should be able to easily pause, stop or hide it.
Writing
While writing web content, remember you’re writing for people with a variety of abilities. These seven tips are important to keep in mind in order to meet the WCAG requirements for content accessibility.
1. Provide informative, unique page titles.
Each web page should have a short title that describes the page content and identifies it from other pages, often the same thing as the heading of the page. The unique and most relevant information should be first, and for pages that are part of a multi-step process (such as a form), include the current step in the page title.
For example, the home page title would be Dragonfly Digital Marketing. Then, the page name would be Blog – Dragonfly Digital Marketing. In a step process, the page name should include the step in the process, such as Contact Me (Step 1 of 2) – Dragonfly Digital Marketing.
2. Use headings to convey meaning and structure.
Short headings can be used to group related paragraphs and text, as well as clearly describe sections and outline and organize content.
Different HTML code elements can provide information on the structure of the page content. Elements can help convey additional meaning to assistive technology and make your document easier to read and understand, such as treatments, indents and bullets.
If your document is more than three or four paragraphs, headings and subheadings are important for accessibility. This article is a good example of using headings, subheadings and visual identifiers.
Headings help readers determine the outline of the document and navigate to specific information they are looking for. Headings are classified into levels from one to six. The highest, level 1, often is the title for the page or major content section. Subheaders are levels 2-6. The lower the number, the smaller and more detailed a section.
Assistive technology like visual readers identify headers by scanning pages for text of larger size or different style. Just changing the style is not sufficient for assistive technology users, so you must also consider the size and other context changes. By “tagging” headings, they can be presented more easily to navigation aids.
3. Make link text meaningful.
When writing link text (text that links somewhere else), make sure it describes the content of where the link is going. Avoid using phrases like “click here” or “read more” because that type of link text isn’t easily identifiable for assistive technology. Instead, indicate relevant content about the link target. The purpose of the link text should be determined by the copy.
For example, instead of “For more information about link text, click here” you may say “Read more about meaningful link text.”
4. Write meaningful text alternatives for images.
When you have images on your site, you should always provide alternative text that describes the information or function of the image. This is in case the image does not load, or to help assistive technology which reads the alternate text.
The alternative text is usually not visible, but instead built in the design of the site. For example, it can be used to communicate important information. If you’re explaining to someone how to use a remote with an image of a remote control, instead of the alternative text saying “remote” it should say “press the red power button to turn on TV.”
All of the non-text content (images, videos, etc.) should have a text alternative built into the site that serves the same purpose of the image.
Images and graphics make content more pleasant and easy to read and understand, especially for those with learning disabilities. They can help people with low vision orient themselves with the content. However, when images are used extensively on the site, it can be a barrier when they are not accessible. Accessible images makes it easier for those using screen readers, speech input software, speech-enabled websites, and mobile users, and it also helps with your site’s search engine optimization ranking.
5. Create transcripts and captions for multimedia.
A common rule of thumb is to provide a transcript for all audio-only content, such as a podcast or radio piece. The transcripts and captions should include the spoken information and sounds that are important for understanding the content.
For video content, transcripts should also include a description of the important visual content. It may be helpful to include subtitles on all video content as well.
This allows those who cannot listen to the audio or who are using assistive technology to read the page the ability to still experience the audio or video content.
6. Provide clear instructions.
Similar to design section 6, ensure that instructions, guidance, and error messages are clear, easily identified and understood. Describe all form input requirements, such as date formats or password requirements. For errors, indicate what the problem is, where it is and how to fix it. Instructions should simply communicate what information the user should provide, and how to provide it.
It’s important to keep instructions simple, so those with learning difficulties can understand what to do.
7. Keep content clear and concise.
Use simple language and formatting. Write in short, clear sentences and paragraphs. Avoid using unnecessary words or complex jargon, and if you must, provide a glossary of terms to help the user understand. Your text should require a reading ability no more than lower secondary education level if possible.
If you use acronyms, expand the acronym first with the letters in parentheses to follow. For example, “Web Content Accessibility Guidelines (WCAG).”
Another tip is to use images, video, audio, graphics, and symbols to clarify meaning and provide additional context to the content. Bullets or numbered lists can break up content and make it easier to read.
Development
These tips and direction can be used by your site developer to make your site and content more accessible to people with disabilities. Some of these tips overlap with tips in the design and writing sections, and all should be taken into consideration throughout each of the three stages, including development.
1. Associate a label with every form control.
Use an attribute on the
For example, if you have a form field requiring a username, the code snippet may look like
2. Include alternative text for images.
Alternative text for images should be added to all informational and functional images. The alternative text, alt=” “, can be used for decorative images. Also include text alternatives for images, as outlined in Writing section 4.
3. Identify page language and language changes.
Indicate the primary language of every page by using the lang attribute in the HTML tag. For example, for English language. Also use this attribute on specific elements when the language of the elements is different than the language on the rest of the page.
The language of the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the surrounding text.
4. Use mark-up to convey meaning and structure.
This includes for headings, lists, tables, etc. HTML5 provides additional elements to better structure your content. Your developers, designers and writers should all work together to understand the meaning and use them consistently throughout the site.
5. Help users avoid and correct mistakes.
As explained previously, your HTML code should provide clear instructions, error messages, and notifications to help users complete forms on the site. When an error occurs, your code should help users identify where the problem is, provide specific explanations of the error, and suggest corrections.
When programming, be as flexible with the formatting as possible. For example, accept phone numbers that include spaces, parentheses and hyphens, or dates with either hyphens or slashes.
Here’s a tutorial for validating input and helping users avoid and fix mistakes.
6. Reflect the reading order in the code order.
The order of elements in the code should match the order of the information presented on each page. To check this, you can remove the CSS styling and review the order of the content. When the sequence of the content presentation affects its meaning (such as headings, subheadings, images placement, etc.), a correct reading sequence is programmatically important.
7. Write code that adapts to the user’s technology.
As previously referenced, it’s important to make your site responsive and accessible on multiple devices at different sizes. A common rule of thumb is when the font is increased by at least 200%, the user shouldn’t have to horizontally scroll. This would apply to all text except captions and images of text.
Use enhancements to ensure the core functionality of the page and its content is available regardless of the technology being used by the audience.
8. Provide meaning for non-standard interactive elements.
This includes the function and state for custom widgets. Additional code is required to implement the behavior of widgets, such as expanding and collapsing content, how the widget responds to keyboard events, or custom-made buttons.
The name and role can be programmatically determined, and the values that can be set by the users can be programmatically set as well. Notification of changes to these items is available to user agents, such as assistive technology.
Standard HTML controls already meet the criteria.
9. Ensure that all interactive elements are keyboard accessible.
Some users use keyboard technology to navigate your site, so when developing elements, especially interactive elements such as menus, mouseover information, collapsible and expandable content, or media players, add code into the navigation order when it’s being used for interaction. Scripting can be used to capture and respond to keyboard events.
10. Avoid CAPTCHA where possible.
CAPTCHA is used to verify that the user is an actual person; however, they can often be stumbling blocks for those using assistive technology or with other learning disabilities. Other ways to verify the user is human can be automatic detection or interface interactions.
If you must include a CAPTCHA, make sure it’s simple to understand and includes alternatives, such as providing more than two ways to solve, providing access to a human representative, or not requiring them for authorized users.
Easy Way to Check Your Web Accessibility
There are a lot of elements at play when it comes to making your website accessible. While it’s important to consider all of the above listed tips when designing, developing and writing for your site, there are a few easy ways to check if your site is accessible or not.
Keep in mind your page may check these boxes listed here, but you may still have accessibility barriers. It’s best to follow the process outlined above, but this check can also help you understand how much work you’ll need to put in to your site’s accessibility.
Download the below checklist here.
Page titles
❏ Shown in the window title bar
❏ Shown in browsers’ tabs when there are multiple pages open
❏ Shown in search engine results
❏ Used for browser bookmarks/favorites
❏ Can be read by screen readers
Good page titles help people understand where they are on the site and move from page to page. For users with a screen reader, the page title is the first thing it will say when it goes to a different web page with a title.
To check the titles, look at and listen to all of the titles within your site. Check that the title describes the content on the page, and that all page titles are different from other pages on the site. Put the important and identifying information in the front of the title rather than the end.
Image Text Alternatives
❏ Every applicable image has alt with appropriate alternative text
Text alternatives, or “alt text,” tells the purpose of an image. They are used by people who do not see the image, for example if they are blind or have turned off images to increase download speed. The text should provide an equivalent user experience, whether that means describing the image or explaining the function of an image (such as a search magnifying glass or a submit button).
Your image must have alternate text if it conveys information useful for or essential to interacting with or understanding page content. The text needs to have the same meaning as the image so if a person cannot see the image, they can still get the important information. If the image is an infographic, it should have short alt text to briefly tell what the image is, and then have a detailed description of the graphic provided elsewhere (in text).
If it is just decorative and people don’t need to know anything about the image, you can use “null alt.”
Here is a link to an alt text decision tree from W3C to help you determine if you need alt text and what it should say.
Headings
❏ Most of your pages should have at least one heading.
❏ All text that looks like a heading has HTML code markup as a heading.
❏ All text marked up as a heading is actually a section heading.
❏ The heading hierarchy is meaningful (the headings and subheadings make sense throughout the copy and break it up in a meaningful way).
Many of your site pages will have headings and subheadings to tell a story through the copy. You may use different sizes, colors, or styles (bold, italics, underlined) to identify the headings. In order for headings to be accessible, they must be ‘marked up,’ or HTML coded.
An example of meaningful hierarchy is:
● Heading Level 1
○ Heading Level 2
■ Heading Level 3
● Heading Level 4
○ Heading Level 5
Color Contrast
❏ Site has a minimum contrast by default set at at least 4.5:1 for normal text
As previously referenced, some people have difficulty reading text if there isn’t sufficient contrast between the text and background, such as light grey text on a white background, or bright colored text on a black background. This makes reading your site difficult for many people with visual impairments, including older people who lose contrast sensitivity from age. People with dyslexia also have a hard time reading bright colors.
Most web browsers allow users to change the color of text and background on a site, so your site should still work if users do change the colors.
There are three ways you can check color contrast explained in depth above, including:
● Table with contrast ratio
● Eye-dropper to select color
● Turn off color
Resize Text
❏ All text can be made larger.
❏ Text doesn’t disappear or get cut off when text is made larger.
❏ Text, images and other content don’t overlap when text is made larger.
❏ All buttons, form fields and other controls are visible and usable when text is made larger.
❏ Horizontal scrolling isn’t required to read when text is made larger.
Resizing text can mean zooming in on the page, text-zoom, or changing the font size through Options or Preferences. Some people must enlarge the text in order to read it, and others may need to adjust the font, space between lines, etc.
If pages are unusable or unable to be seen if the text size is changed or page is zoomed, the page is not accessible. Ensure columns and sections don’t overlap, the space between the lines doesn’t disappear, and lines of text don’t become too long. Also make sure text doesn’t disappear all together. Users should not have to scroll to read a sentence.
Keyboard Access and Visual Focus
❏ You can tab to all the elements on each page of your site, including links, form fields, buttons, etc.
❏ You can tab away from all elements you can tab to. For example, if you have a media player, you’re able to tab away from the navigation controls.
❏ As you tab, it follows a logical reading order. For example, left to right and top to bottom.
❏ You can visually see where the tab is, i.e. with an outline or highlight.
❏ You can do everything on your site through a keyboard, such as move through the page, click, etc.
❏ If you tab into a drop down list, you can use the arrow keys to move through the options. Ensure it doesn’t automatically select the first item in the list and take you to a new page or action.
❏ When images or words are links, they have clear visual focus and can be navigated to through a keyboard.
As we’ve mentioned, many people cannot use a mouse to navigate a computer, and instead rely on the keyboard to interact. This can be people who are blind, have mobile impairments, or have other disabilities that mean they must rely on the keyboard or assistive technologies, such as voice input.
All links, forms, media, etc. must be able to be accessed through a keyboard. The keyboard focus should be visible and follow a logical order through the page. This could be through a border, highlight, or other format that moves through the page as you tab.
Forms, Labels and Errors
❏ All form controls are keyboard accessible, as well as drop-down lists.
❏ Every form control has a label associated with it.
❏ Labels are correctly positioned, such as to the left of text boxes and right of radio buttons and checkboxes.
❏ Any required/mandatory fields are clearly indicated. (This can’t be color alone for those who cannot differentiate color.)
❏ Field indicators (such as an asterisk) is included in the marked up field label for text boxes and drop down lists.
❏ Instructions for completing the forms are located in a proper, logical place such as at the top of the form or in the section they relate to.
❏ Required formats, such as for dates and phone numbers, are included in the marked up label.
❏ Clear and specific guidance is provided in the event of an error, and helps people easily understand how to fix the error.
❏ Errors are easily findable, such as highlighted within the form or listed before the form.
❏ People do not have to re-enter all information in the form, and fields without errors are still populated with the data entered.
If you have forms on your site, such as a place to enter an email address or input contact information, the forms should have labels, keyboard access and clear instructions. People should be able to interact with the forms using only the keyboard, voice input, and screen readers. Also, the label should be clickable, increasing the size and making it easier to select buttons or check boxes.
Forms include a single text box, such as search or email address input box, text fields, radio buttons, check boxes, drop-down lists and other buttons.
Moving, Flashing, or Blinking Content
❏ If there is moving, blinking or scrolling information on your site that starts automatically and lasts more than five seconds, there is a way to pause, stop or hide the movement.
❏ If there is any automatically-updated information, there is a way to pause, stop or hide the updated information, or for the user to control the frequency of the update.
❏ Content that flashes or blinks does not do so more than three times in one second.
Moving, flashing or blinking content includes carousels, ads, videos, auto-updating information, scrolling news feeds, etc. You must give users ability to control the moving content because it can cause difficulty understanding the information, or distraction.
Also, flashing or blinking content can cause seizures in people with epilepsy, especially if it flashes more than three times in one second, covers a large area of the screen, and/or is bright.
Multimedia Alternatives
❏ Audio does not start automatically. If it does, it stops after three seconds, includes controls to pause or stop the audio, and includes controls to turn down the volume.
❏ Videos have captions, or the ability to turn captions on.
❏ Captions are in sync with spoken content.
❏ Captions are available in multiple languages
❏ People who are speaking are identified when they speak throughout the captions.
❏ Important sound other than dialogue is included in captions.
❏ It’s not required, but may be helpful to include a full transcript in addition to captions.
❏ They are easy to find near the audio/video.
❏ They include all information, including dialogue and important sound.
❏ All audio and visual information is included, so if the person only reads the transcripts, they get all of the content of the video.
❏ If you have an audio description of the video, it describes all important visual information in the video (to make it accessible for people who can’t see it).
Information in podcasts, video or other audio is not available to people who are deaf and/or blind. Multimedia should have alternatives including visual, audio or text. Text should be able to be read by a screen reader or Braille display.
Once you’ve implemented your W3C compliant updates, run your site through the W3C validator.
