The process of designing and developing a website to be accessible to as many users as possible involves a few simple choices, as well as some potentially more complex actions.
In this article, we’ll share some practical steps and answer some important questions.
- What is web accessibility?
- Why is accessibility important?
- What are some additional benefits of an accessible website?
- What are the guidelines and standards for accessibility?
- What are the levels of compliance?
- What are some specific ways to make a website accessible?
- What tools are available to help with accessibility and compliance?
- Accessibility Matters
What is web accessibility?
The Web Content Accessibility Guidelines (WCAG) were developed by the World Wide Web Consortium (W3C) with the purpose of setting shared guidelines to make websites, devices and content accessible to users with disabilities.
Why is accessibility important?
W3C’s Web Accessibility Initiative points out that the web has become an extraordinarily important part of everyday life. Making sure everyone can access this critical tool benefits individuals, businesses, and society as a whole. For many years, im电竞竞猜靠谱么 companies felt that accessibility wasn’t a concern— that it was more important for B2C brands. While this is true to an extent, accessibility is an increasingly important facet of any well-built website, and it’s important to note that accessibility benefits those without disabilities as well as those with disabilities. For example, accessible design improves user experience for older adults, those with temporary disabilities or situational limitations, and anyone using a slow internet connection or a small screen. In general, building a website to be accessible goes hand-in-hand with building a website that’s easily crawlable by search engines. And at the end of the day, it’s in everyone’s best interests to build websites that don’t create frustrations for any of their potential users.
What are some additional benefits of an accessible website?
Building a stronger user experience will support longer engagement for a larger audience on your website, and thus support an increase in conversions.
Accessible design will also help improve your organic Search Engine Optimization (SEO). Making your web content easier for people to understand will make it easier for Google’s robots to crawl and properly index your site.
What are the guidelines and standards for accessibility?
Accessibility issues are categorized into four distinct groups under WCAG guidelines. These can be summed up with the acronym P.O.U.R.
Perceivable – Can all users perceive the content on the page? Perceivability refers to presenting the content and user interface of a web page in a manner that can be perceived by a sense or senses, so that nothing is left undetectable or invisible. To most web users, perceivability is based primarily on seeing the visual elements of a page, but for those that are unable to see, sound and touch are used instead.
Operable – Can all users interact with the page? Interactive interface elements such as controls, buttons, navigation and more should be operable. This means that a user must be able to, first, identify interface elements, and then operate them, either by physically clicking, tapping, swiping or rolling, or by using voice commands or assistive devices, such as head wands and eye trackers.
Understandable – Can all users understand the content on the page? 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 – Can the content be interpreted by a wide variety of programs and devices, including screen readers?
What are the levels of compliance?
The WCAG guidelines break down accessibility issues and recommendations into three levels:
A – At Level A, a website meets the minimum requirements for accessibility, addressing the most urgent issues and problems that can severely limit a disabled visitor’s ability to navigate or use the website.
AA – The intermediate Level AA compliance addresses some more complex functionality issues to help ensure the full user experience will accommodate the needs of those with a wider range of disabilities, by providing guidance on color contrast ratios, error identification and other elements. (Level AA is the typical standard for most commercial websites.)
AAA – Level AAA is the highest standard, which requires refining and expanding on issues identified as Level A and AA to meet all of the accessibility requirements. This advanced level of compliance can be a challenging, costly endeavor for some organizations.
What are some specific ways to make a website accessible?
Make sure your site is keyboard-friendly
For a website to be accessible, it must be able to work without the use of a mouse. This is because many assistive technologies rely on keyboard-only navigation. This includes accessing all pages, links, content and so on.
The most common way of navigating using a keyboard is with the Tab key, which can jump between areas on a page that have “keyboard focus,” including links, buttons and forms. Therefore, your goal should be to ensure that all web content and navigation can be accessed using Tab.
Use headings correctly to organize the structure of your content.
Screen reader users can use heading structure to navigate content. By using headings (
, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.
Include proper alt text for images.
Include proper alt text for images.
Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page. This is especially important for informative images, such as infographics. When creating the alt text, make sure it contains the message you wish to convey through that image; if the image itself includes text, it should also be included in the alt text.
Make sure the colors you select for your site contrast well, to ensure that everyone can distinguish between various elements on the page. The most pressing issue is the contrast ratio of text against the background. Ideally, you will set a dark color against a light one, making sure that they don’t bleed into each other.
Allow users to enlarge font sizes and zoom in up to 400%
People with low vision often can’t read small text sizes. They will want to use specific font settings when browsing your website. Offering an alternate style sheet with the ability to enlarge the font size, or making sure content reflows at zoom up to 400% without breaking your page layout, should make it easier for everyone to read your content.
Design your forms for accessibility
Label form fields precisely. When form fields are not labeled appropriately, the screen reader user does not have the same cues available as the sighted user. Without useful labels, it may be impossible to tell what type of content should be entered into a form field.
Make video and multimedia accessible
Videos and other multimedia elements on your website play a critical role in increasing user engagement on your website. While blind and visually impaired users can’t see visuals, deaf and hard-of-hearing users can’t hear audio. One solution is to offer a transcript or captions of the video for screen readers to interpret.
Presentation of content
Avoid content that flashes, is time-based or that auto-interacts. If using time-limited content (and the time limit is not absolutely necessary), include adjustability controls for those who need more time.
Use predictive and consistent patterns
Make sure 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.
Display an accessibility statement
Accessibility statements can vary. The most basic example of an Accessibility Policy states your commitment to accessibility, describes the standard applied to the website, and includes contact information in case users run into problems.
What tools are available to help with accessibility and compliance?
This is a totally automated solution to gain compliance on your website. Through a subscription, you’ll get a script to embed in your website. The tooling will adjust the website’s visual and functional tooling to fit the needs of the user.
TPGI ARC Toolkit Chrome extension
At Windmill, we recently built a website for the accessibility company TPGI . Use their ARC Toolkit to test web pages before you commit them to production, or on live pages as part of your remediation process. It’s also a great tool to help you learn about accessibility techniques, and you can use it to improve your accessibility knowledge for future content considerations.
TPGI Color Contrast Analyzer
The Color Contrast Analyzer (CCA) is an intuitive, effortless way to measure color contrast on all types of digital and printed media.
WAVE Evaluation Tool
WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors. There is an in-browser scanner, and there are Firefox and Chrome extensions.
This is a customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques.
Maintaining accessibility is an ongoing process. Once you have reached a level of compliance, continue to check your site’s accessibility as it evolves. If you’re redesigning a website, accessibility might not initially be top of mind, but be sure to include it in your list of considerations. An accessible website ensures the best user experience for the largest number of potential customers.