Accessibility is an important aspect of running any sort of organization – from employees, to clients, to customers, it is key to ensure that all people are able to access your products and services. But what is often forgotten and overlooked is the accessibility of websites, social media, and email marketing.
This guide will walk you through the importance of accessibility, definitions of key accessibility aspects, and areas to focus on. Look no further – Village Oak Creative will explain it all.
Why accessibility is important
Accessibility allows everybody to examine your content. It ensures that no person is left behind. For example, accessibility gives those with little to no vision the ability to gain access to your website, emails, and social media, so that they may also interact with your organization or business. These individuals often use screen readers, which read text embedded in your images (called alternative text), to understand what is happening in an image.
It is important to remain inclusive. By doing so, the world becomes easier to navigate for those with disabilities. Additionally, it will allow you to gain new followers, customers, clients, employees, donors, and more, all by being more inclusive.
An easy way to remain inclusive to those with disabilities is by following the Web Content Accessibility Guidelines (WCAG), developed by the World Wide Web Consortium (W3C). These guidelines are not legally required, but highly recommended.
There are 3 key areas to focus on in accessibility: color contrast, alt images, and heading hierarchy.
Color Contrast
High color contrast is important. Those with low vision often struggle to see text that has low contrast, especially if they have a color vision deficiency. By creating a minimum luminance contrast ratio, those individuals can better see the text. It additionally works for individuals who see no color at all.
According to the WCAG, people with low vision require sufficient contrast for text and background, graphical objects, user interface components and states.
Graphical objects include icons and font icons. Components are the boundary or borders between buttons, menu items, form controls and inputs. Lastly, states are selected elements, elements with keyboard focus (expanded vs. collapsed, active vs. inactive).
A commonly used tool to decide what color contrast works best is Adobe’s Color Contrast Checker. This checker will allow you to see if your text and background colors are accepted by the WCAG guidelines.
Alt images
Using images is fun. They spice up content and often makes interacting more engaging for users. Images and graphics are often useful to those with cognitive and learning disabilities, and can serve as an orientation point for those with visual impairments.
However, this does not mean images are fully accessible. In fact, they can create major barriers. Accessible images are useful to those who use screen readers, speech input software, speech-enabled websites, and mobile devices. It additionally assists with search engine optimization.
Those using screen readers use alternative text that can be read aloud or rendered as Braille. Speech enabled websites similarly read aloud text alternatives. Speech input software can put the focus onto a button or linked image with a single voice command. For those on mobile devices, images can be turned off for data roaming, allowing the text alternative to show instead.
A helpful tool to create alternative text is the AI Alt Text Generator. First, upload an image to the program. The program will generate alternative text within a matter of seconds, and allows you to integrate the text into your image! Easy as pie.
Headings
The purpose behind headings is to communicate the organization of a page. Additionally, assistive technologies, which create accessibility, use headings to provide navigation. Headings are ranked – the most important heading has the rank 1 (<h1>), and the least important heading has the rank 6 (<h6>).
Skipping heading ranks can create confusion. For example, <h1> should not be followed by <h5>. It is ok, however, to skip ranks when closing subsections. An example of this is <h2> beginning a new section, so <h4> can follow, as it closes the previous section.
Use only one <h1> for a page, and use it to summarize the page. Similarly, headings should only be used to describe content – never to make text appear bigger. Choose a heading based on the context of its content, rather than the size.
Common mistakes to avoid include using more than one <h1> for a page, using an <h4> for the first paragraph of text, and exclusively using <h2> on a webpage.
But why should we use headings? Headings make it easier for users to find the information they are looking for. It will make scouring the internet easier for those who cannot simply scroll through content quickly.
Conclusion
We have covered the importance of accessibility and how to implement it into your content. Now, it is time for you to use it! Remember, this guide is here to help you. Do not worry if you have to come back to it for reference.
Looking for more tips and tricks! Check out our other guides at Village Oak Creative.