What is web accessibility? And why should you care? Last year, the United States saw over 2,000 federal lawsuits over web accessibility, a 181% jump from 2017. Ensuring accessibility is an emerging trend in the digital world, but what exactly is web accessibility and why is it important? Source: UsableNet Web accessibility, also known as a11y, is the inclusive practice of making sites and apps available to everyone. As the internet becomes an increasingly more important aspect of our daily lives, it is crucial for all audiences to have access to its content. Web accessibility affects everyone A Centers for Disease Control and Prevention (CDC) shows that one in four adults in the U.S., or 61 million people, live with a disability. According to Coleen Boyle, Director of CDC’s National Center on Birth Defects and Developmental Disabilities: report “At some point in their lives, most people will either have a disability or know someone who has one.” lists four major categories of disabilities: WebAIM — blindness, low vision, color-blindness. Visual — deafness and hard-of-hearing. Hearing — inability to use a mouse, slow response time, limited fine motor control. Motor — learning disabilities, distractibility, inability to remember or focus on large amounts of information. Cognitive Designing and developing web content with these categories in mind usually provide benefits beyond aiding those with disabilities. Captions, for instance, are as helpful for someone watching the video in a loud environment as they are to a deaf user. Alternative text describes image information to blind users, but can also help those who use a text-only browser or can’t load pictures due to enhanced security. Moreover, the reported that web accessibility helps mobile users, elderly users, and users with low-bandwidth connections. W3C Web Accessibility Initiative (WAI) Regulations and standards The are a set of international guidelines on making web content more accessible. Developed by the World Wide Web Consortium (W3C), the governing body of the web, WCAG is the basis of most web accessibility regulations around the world. In December 2008, W3C published , which is based on four principles: Web Content Accessibility Guidelines (WCAG) WCAG2.0 — information must be presented in a perceivable way, either through the browser or through assistive technologies, such as screen readers or screen enlargers, etc. Perceivable — controls and interactive elements must be operable via either the mouse, keyboard, or an assistive device. Operable — information must be clear with minimal confusion or ambiguity. Understandable — content must be robust enough so that it could be interpreted reliably by a wide variety of user agents, including assistive technologies. Robust Built on these principles are that aim to present information in ways that match various sensory, physical, and cognitive abilities. 12 guidelines Benefits to making content accessible Abiding by a11y guidelines can help organizations avoid legal fees and fines. reported that companies have also seen noticeable cost savings in the form of reduced maintenance costs. Sitepoint More importantly, having a more accessible site or app means having a larger audience and a consequently larger consumer base. When implemented correctly, a11y could also boost search engine optimization (SEO) efforts. Better experience for all users means lower bounce rates, higher conversion, and less negative feedback, all of which are taken into account by search engines when ranking a site. Web accessibility testing tools There are a number of a11y browser extensions that audit websites and help developers improve the accessibility of their content. Below are a few of my favorites for the Chrome browser. : Google’s open-source, automated tool that evaluates, among other things, accessibility. Under the hood, it uses the library as the accessibility checker. Lighthouse now comes built into Chrome, so testing a web page is as easy as opening developer’s console, selecting “Audits”, choosing the “Accessibility” audit, and running the test. Lighthouse axe-core I find Lighthouse tests relatively extensive and very easy to use. I like that it allows for testing in both mobile and desktop views. Make sure to run devtools docked to the bottom or in a separate window so as not to affect the viewport size. : A tool that provides visual feedback about the content by highlighting detected issues right on the page. As a visual person, I find this extension most helpful in showing where on the page the accessibility test failed. I also like that it provides recommendations on how to fix the errors. Siteimprove Accessibility Checker : A Chrome extension that simulates the web page as how someone with colorblindness would see it. This is a great way to gain some perspective on how things may appear to others. Colorblinding Summary Web accessibility matters. The internet has grown to become a critical part of our lives, and everyone should have equal access to digital content. As web designers and developers we have a responsibility to make our content as accessible as possible, and there are so many tools to help us achieve this. In my next post, I will cover how to automate a11y testing and integrate it into the development process. If you’d like more information on web accessibility, here are some additional resources: WebAim Articles: https://webaim.org/articles/ WebAim Resources: https://webaim.org/resources/ WCAG2.0 Documentation: https://www.w3.org/TR/WCAG20/
