At its most fundamental, the internet removes many of the common barriers that people with disabilities face in the physical world. People with a diverse range of hearing, sight, cognitive, and movement abilities can access the internet for work, education, entertainment, and purchases, and more. At least, they should be able to.
Unfortunately, many internet-related technologies are still inaccessible, despite comprehensive internet accessibility guidelines. For example, studies show that at least 90% of US government websites have major access barriers, with the levels of accessibility being even worse for educational and commerce sites.
Of course, you don’t want to exclude anyone from your brand. You don’t want to create barriers for anyone to use your services or buy your products. However, the design and development of your website could be doing just that.
Bringing Down Barriers with Digital Accessibility
At 18.7% of the population, people with disabilities make up the largest minority group in the United States. Digital accessibility helps ensure your website and digital products are inclusive and accessible for everyone, including those 54.5 million Americans with disabilities. It includes accessible design, writing, and development, as well as the implementation of additional tools to make websites more accessible.
Web accessibility should encompass all types of abilities that would affect a person’s access to your website, including:
Digital accessibility is also great for the user experience since it makes your website more accessible for:
- Those accessing your website from small screens (phone, tablet, smart TV) and using different input modes
- Older adults
- People with temporary disabilities, such as a broken arm
- People with situational limitations, such as glare or broken speakers
- People with limited bandwidth or a slow internet connection
Web accessibility improves the overall user experience and satisfaction in a variety of situations, across different devices, and for older users. Accessibility can enhance your brand, drive innovation, and extend your market reach.
3 Levels of Accessibility
While digital accessibility is especially important for certain industries and sectors, including healthcare and governments, more businesses in the private sector are prioritizing digital accessibility as part of their social responsibility to provide equal access and equal opportunity to people with diverse abilities.
For some organizations, it’s a necessity to comply with the highest accessibility standards; for others, it’s just the right thing to do.
W3C sets the global standards for website accessibility using technology to help assist those with impairments. Websites can be built as Level A, Level AA, and Level AAA.
Levels of conformance:
- Level A – minimal compliance
- All websites should strive to meet at least Level A compliance
- Level AA – added support for accessible users
- Level AA may better support an organization’s social responsibility to web accessibility
- Level AAA – the highest level of conformance, supports a wide variety of accessible technologies
- A standard for governments, educational institutions, and other public organizations
There are 4 key areas that W3C conformance looks at:
- Perceivable – Addresses the site structure and media
- Operable – Accessibility features of operation include keyboard accessible, enough time, seizures and physical reactions, navigable, and input modalities (point to click)
- Understandable – Readable, predictable, input assistance
- Robust – Assistive-technology compatibility
What Do Accessible Sites Have? Digital Accessibility Checklist
To make your website more accessible, it’s a good idea to first audit your web pages to determine where you’re falling short based on the level of accessibility you’re striving for. At its core, digital accessibility can be broken down into designing, writing, and developing for accessibility.
Designing for accessibility
- Choose an accessible color palette: Certain color combinations are not accessible. You may need to update your existing color palette.
- Provide sufficient contrast between foreground and background: A minimum contrast ratio is necessary for all readers of all abilities, but it’s very necessary if they are color blind, near-sighted, far-sighted, or have degenerative vision conditions
- Don’t use color alone to convey information: Because certain colors can be difficult to see for those with visual impairments, such as color blindness, ensure information is conveyed with words as well as color.
- Ensure that interactive elements are easy to identify: Interactive elements, such as buttons and links, should have a distinct style. For example, they could change appearance when the mouse hovers over them.
- Provide clear and consistent navigation options: Make it easy for everyone to navigate your website in a way that works for them. Include multiple navigation options, such as a site map and site search. Add clear headings and orientation cues.
- Ensure that form elements include clearly associated labels: Add a descriptive label adjacent to the field for all form elements.
- Use headings and spacing to group related content: Make it easy for people to navigate and understand your website content by using style headings, proximity, and whitespace to group similar content.
- Create designs for different viewport sizes: Users should be able to view your site content effectively whether they’re using a zoomed-in browser, a mobile phone, or any different type of screen size.
- Include image and media alternatives in your design: To make your content inclusive, all non-text content should include alternatives, including links to transcripts for audio content and captions for tables and graphs.
- Provide controls for content that starts automatically: Users should be able to stop auto-playing sounds and videos.
Writing for accessibility
- Provide unique page titles for all web pages: Make your content easier to understand and navigate with short, unique page titles that help users distinguish each web page from the others.
- Use headings to convey meaning and structure: Headings also allow all users of varying abilities to navigate your website efficiently.
- Make link text meaningful: Avoid vague link text like “click here” or “learn more.” Rather, add descriptive text that provides relevant information about the link.
- Write meaningful text alternatives for images: For those who cannot view images, descriptive text alternatives can help them understand your content.
- Create transcripts and captions for multimedia: Any non-text content, including audio and video should include captions and transcripts to make the content accessible to all.
- Provide clear on-screen instructions: Instructions and error messages should avoid technical language and be easily understood by all users. It’s a good idea to identify elements by multiple characteristics, such as the label and color (e.g., “the green button ‘Next’).
- Do not use directional copy that relies on visuals: When a page is being read out loud or the user is navigating your website with tab keys on a keyboard to move from one page element to the next, these orientation clues can be lost. Examples of what NOT to say: “the button on the right,” “the left-hand sidebar,” or “the round button.”
Developing for accessibility
- Associate a label with every form control: Help all users understand the required input by using WAI-ARIA attributes or a for attribute on the <label> element linked to the id attribute of form elements
- Identify page language and language changes: Use the lang attribute in the html tag to indicate the primary language of every web page.
- Use mark-up to convey meaning and structure: All headings, lists, tables, etc. should include consistent mark-up to better structure content and provide additional meaning.
- Help users avoid and correct mistakes: When completing forms, users should be able to quickly and easily identify errors and rectify them. Provide specific explanations, suggest corrections, and be forgiving of format when processing user input.
- Reflect the reading order in the code order: The logical order of the information presented should match the order of the code elements.
- Write code that adapts: Use responsive design and progressive enhancement to ensure that core content and functionality are available, regardless of zoom state, font size, or technology used.
- Provide meaning for non-standard interactive elements: Custom elements, like widgets, buttons, and accordions, should include WAI-ARIA to provide information on their state and function.
- Ensure that all interactive elements are keyboard accessible: Keyboard access should be considered when developing collapsible accordions, mouseover information, menus, media players, and other interactive elements.
- Avoid CAPTCHA: Where possible, use interface interactions or automatic detection to verify user input. Otherwise, include CAPTCHA alternatives so they can be understood by users with disabilities.
A Word on Accessibility Widget
An accessibility widget can handle ongoing compliance for websites by providing the user with the ability to turn on accessible features as they need. While accessibility widgets will take care of most requirements to get to Level AA, they will not address media conformance like alt text on images, media transcripts, or closed captioning.
Break down barriers to accessibility and make your website more inclusive for everyone, regardless of ability. GreenLit Marketing can audit your website and help you meet your desired accessibility standards. Contact us for a free consultation.