UX Design Graduate Karina Bershteyn designed Revive, an app for volunteers and environmental organizations to connect. See her design process.
Web Accessibility has garnered lots of attention in recent years, as most interactions between people, organizations, products, and services are increasingly occurring online. In fact, 77 percent of Americans are online on a daily basis, and 26 percent say they’re online almost constantly, meaning many of our day-to-day interactions take place on the internet.
Navigating this online space is no easy feat for many individuals around the world. Roughly 25 percent of adults in the U.S. have some form of disability, a number that is only expected to increase as the overall population ages. It’s important to be aware – particularly if you are an organization with an online presence – that one quarter of the market may struggle to access your services if you don’t incorporate inclusive design elements.
Why it Matters
Apart from fulfilling social responsibilities, web accessibility can provide many other benefits to an organization.
Early implementation of accessible elements limits redesign work, which in turn shortens delivery time, and lowers costs. Additionally, inclusive design helps to make your content accessible to a larger, more diverse group of potential customers – and growing your audience is never a bad thing.
Web Accessibility can seem daunting, but there are small changes that you can make now to start seeing a large shift towards a more accessible brand.
We’ve rounded up some of the easiest ways to make your content more accessible.
1. Alt Text
One change that you can make right away is to include alt text on all of your images. Alt text is used within HTML code to summarize the appearance of an image, and it’s also what screen readers use to describe images to visually impaired individuals.
Adding alt text can be as simple as entering a description of the image into a field on WordPress, but if you aren’t sure of how to incorporate alt text – find someone with knowledge of HTML to make the change for you. Not only can you add alt text to your website and blog content, but most social platforms have the option to add it to your content as well. For example, Instagram has an Advanced Settings menu which allows you to write your own alt text for every image posted.
Once you have the process down, make sure to conduct an audit of your site and add image descriptions to all the photo content. This one habit will improve your overall website accessibility.
2. Video Captioning
81 percent of businesses are now using video as part of their marketing strategy, an increase of 63 percent since 2018.
Videos have become a critical facet of content creation because, put simply, people love to watch them. In fact, 55 percent of people watch online videos every single day. And they not only look at them, but they much prefer watching to reading – 59 percent of executives would choose watching a video over reading an article.
One of the best ways to make your videos more inclusive is to create captions. This aids hearing impaired individuals by providing subtitles and context for the content of the video.
Most video-hosting platforms, including Facebook and Youtube, have automatic captions that can be turned on for your brand’s video. The only drawback with this strategy is that speech recognition software isn’t the most accurate. If you do opt for automatic captions rather than transcribing your own, make sure to review them for accuracy and grammar.
3. Build Accessible Forms
Forms are used for countless web interactions, and if they aren’t designed with accessibility in mind, they can be extremely difficult to navigate.
Any existing forms on your page should be audited for ease of use to make the experience and interaction easier. The keys to designing accessible forms is to ensure that fields are clearly labeled, in logical alignment, and keyboard accessible. There are resources available that take you through step-by-step techniques on how to build better forms using accessible form controls and advanced labeling.
4. Proper Page Flow
Structuring your page with clearly labelled headers is crucial to making your website easily navigable by screen readers and other assistive technologies.
Heading structure should be applied correctly, using <h1>, <h2>, etc. to indicate the order and flow of the page. Screen readers use the heading structure embedded in the code to navigate the content on each page. Avoid skipping headings, as it causes confusion, and ensure that the headers accurately reflect the content of the web page.
If you’re unsure of how to structure your headings for more accessible design, review these best practices.
5. Colors and Typeface
Perhaps one of the most commonly known principles of accessible design is the importance of using the right colors and typeface on your website.
Using easy-to-read fonts and an appealing color scheme not only increases readability, but makes your website more accessible to those who have varying degrees of color-blindness or vision impairment.
Color vision deficiency (CVD), or, color blindness, is more common than you might think. One in twelve men and one in two-hundred women around the world are color blind, and the most prevalent form of color blindness (red-green color deficiency) affects nearly 8 percent of the population. Design for these groups by using high contrast colors – a general rule of thumb is to use dark text on a light background. There are also tools that evaluate color contrast to help you determine if your design is on the right track.
Moving Forward With Accessible Design
While these tips are a great place to start, accessible design needs to be a priority for all businesses, from small startups to multinational enterprises. If you’re looking to learn more about accessibility and how your business can start recognizing the benefits, BrainStation offers a Web Accessibility course for individuals and entire teams.