Web accessibility is about creating websites, tools, and technologies that are usable by all people, regardless of any disabilities. Whether users have visual, motor, auditory, speech, or no disabilities at all, they should be able to access and get information online, especially with the way the web has progressed.
The common misconception is that making a website accessible requires extra time, can be expensive, and difficult. But that’s not necessarily the case. To avoid the time and costs of repairing an inaccessible website, building for accessibility should happen at the beginning of the development process.
There’s a strong business case for designing for accessibility: studies show that accessible websites reach a larger market, are SEO friendly, and demonstrate a brand’s commitment to an inclusive responsibility. Businesses who integrate accessible design patterns into their processes understand the need for equal access. Google and other market leaders have shown how designing for accessibility can give them a competitive advantage.
The following tips and guidelines can help bring your websites closer to the Web Content Accessibility Guidelines (WCAG).
Types of Disabilities
When thinking about the web and users with disabilities, we often mention users with “permanent” disabilities, like blindness or deafness. But there are two other disability groups to consider as well: “temporary” and “situational”. Microsoft’s design team outlines these as different personas. Consider an amputee (permanent) versus someone whose arm is in a sling (temporary) or a person who’s using one arm to carry five bags (situational). If we include temporary and situational disabilities, the amount of users that would benefit from accessible patterns goes up from 0.01% to 7%.
Driving a car is a good example of a situational disability. 10% of fatal crashes and 15% of injury-related crashes are caused by distracted drivers. If companies cannot prevent drivers from driving distracted, are there ways they can build their applications to promote safer driving habits? For example, Spotify has recently introduced what they call “Car Mode” in their mobile application when the user’s phone connects to their car via bluetooth. The result is an application with exaggerated button sizes, no images, large text, and less cognitive noise on the user.
By thinking with this perspective, Spotify has significantly improved a large pitfall with their application that has real-life implications.
We can better impact usability and reach a broader audience by simply being more inclusive and considering a wider range of disabilities.
IMAGES
Images are a big portion of many websites, and choosing the right formats and sizes are important to making sure your website is accessible. Page speed is a component of accessibility because it decides how long it takes for a website to become interactable, and websites need to consider that their visitors are accessing from a variety of networks. While it may take a second for a website to load on your laptop, it could take five times as long for someone to access the same site using 3G on their mobile device, and this loading speed could be the difference between keeping or losing a new customer. While there are many ways to increase page speed, optimizing images are the quickest and easiest way to make an improvement.
There are two types of images, raster and vector. Raster images are created using pixels, and cannot be scaled without either a loss in quality or poor optimization. An example of a raster image would be a photograph taken with a camera. Vector images are not composed of pixels but with shapes, and so they are easily scalable. They can even be altered and animated without having to re-export the image. The most popular image formats for the web would be JPEG and PNG, which are raster based, and SVG, which are vector based. We suggest PNG files only when you require a transparent background for your image, and defaulting to JPEG which typically has a smaller file size. SVG can be used for graphics based on shapes and text, such as icons, logos, and graphs.
Exporting your images to match the size they will be rendered will also help keep the images optimized. It is poor practice to export an image at 1920x1080 if it’s only going to be displayed in a section that is 500 pixels wide. While there is no limit to how big an image can be on a web page, we recommend keeping them all under 300kb for optimal load times. If you have an image heavy website, you may be surprised how big a difference image optimization can make.
For people who are unable to see the graphics or cannot load them on their device, it is important to give each image an Alt tag, which is a description of the image that will appear on screen readers or will display on the page in place of the image if it’s not loaded. Alt tags should give a very brief description of what is being depicted in the image so that the user has all the information they need to understand the content.
How to Measure Accessibility
Currently, there are various automatic tools that will provide information about how accessible a site is. One we like in particular is web.dev. Web.dev is a good resource developers and agencies can utilize to help build for the modern web. They provide a tool that will measure how well a site will support its users. Then, it will provide areas where to improve based on things like performance, accessibility, best practices, and SEO, and immediate steps to increase metrics. Simply visit their website, and enter the URL you want to test.
Conclusion
Web accessibility is a broad topic that may sound daunting to delve into, but we hope that this information will help you understand the effect that it has on your website. These stepping stones and resources we provided are a great way to analyze your websites and begin thinking about how users interact with them. There are always ways to improve a site to make it more accessible, and the better the user experience, the more likely users will want to return. ◆
Graphics from Icons8.
