This article was first published in the blog of the ethical move.
Thinking about accessibility and taking the necessary steps to make the Ethical Move website accessible is especially important for making our content truly inclusive.
However, the task itself can seem incredibly daunting. There are many resources that outline the principles of web accessibility, but most of them are so technical and comprehensive, they make it challenging to figure out what exactly you can do.
If you add to that the fact that many of us run our websites over platforms such as Wix, Squarespace and WordPress, with themes and plugins layered on top, it feels like the actions we need to take are not even in our own hands.
This is a misconception that might be holding people back from starting to tackle their web accessibility project.
I have put together a list of three things which require no platform control or technical knowledge, and which can help improve the usability of your site both for accessibility and a better user experience overall.
Organize your content with headers
What headers are
Headers are the main structure of your page. They go in descending order from H1-H6, and they identify what the page is about (H1), the main sections of your content (H2) and the sections within those subsections (H3).
Common problems
Page builders, themes and platforms often confuse users because they make it look like the heading tags are mainly for design and visual interest. However, their main function is that they convey meaning about your content. Used incorrectly, heading tags make content unorganized and, at worst, completely inaccessible.
What to look for
To ensure your site can be accessed and used by the largest possible number of users, check that:
Each page only has one H1 tag: the main header or page title.
H2 headers are the top-level sections of content on a page. Think of them as chapters.
H3 headers are sub sections, nested inside your H2 sections.
You are not skipping headers, for example, going from H1 directly to H3.
Your headers visually show the hierarchy of the markup (for example, through making the font size of H1 text larger than H2).
Why it matters
Usability research has shown many times that people don’t read websites like they do books. Normally, users scan through site content looking for the information they need.
Headers help break up your content into understandable sections. Headers also make content easy to navigate for users of all cognitive capabilities, including people using a screen reader, keyboard navigation, or Braille interface. It also makes it clear to Google’s SEO crawling bots what the page is about.
Use accessible language
What accessible language is
Accessible language is meant to convey your message concisely to the largest possible audience. A single means of communication cannot achieve that, considering how diverse audiences might interact with your content.
Common problems
We often write, assuming everyone who reads our content is like us. It’s easy to think our audiences will read like we do: that they know the terminology we do and experience our site in the same we that we do.
In reality, some of our audiences might interact with our content in completely unexpected ways, for example, with screen reading technologies that are agnostic to the visual elements of your website.
What to look for
Here’s how to keep the language on your website accessible.
Avoid instructions that require the reader to see the layout or design, for example: “Select an option below” or “The links on the left sidebar” or “Click the green button”.
Make sure your links give a good overview of what will happen when you click them. Retire generic text such as “click here” or “read more”.
Use plain language, avoiding jargon and slang.
Put important information first, and group similar ideas together in one paragraph.
Why it matters
Accessible language is important for your entire audience. It allows you to communicate your message to people regardless of their native language, literacy level, and their technological setup. Screen readers, mobile phones and other devices might alter the layout and other visual aspects of your website.
Use colors with good contrast
What good contrast is
Contrast is defined as the difference in brightness between two colors, and it has a big impact on how readable and understandable the text on your website is. We all know the basics of contrast and we know to not use very light colors on a white background, but there is a bit more to contrast when it comes to making your website usable for a wide audience.
Common problems
When we build our website, we rarely start from scratch. Usually, the starting point is our visual identity and colors, so we think about brand consistency. It’s easy to forget our audiences, who may be struggling to read the beautiful content we have put on the page.
What to look for
The best way to look for good contrast on your website is to make use of a tool such as colorsafe and test your color combinations in texts, buttons and images.
Things to consider:
Smaller text (18px and lower) needs to have the highest contrast to be readable.
Large or bold text can be accessible in lower contrast ratios.
Use sufficient contrast in your buttons in all states: unclicked, on hover, and once they are clicked.
Text in images, for example, your logo, should also provide enough contrast to be accessible.
Why it matters
Around one in 10 people are estimated to have some form of color blindness, and our visual acuity diminishes with age. For people with visual disabilities, color contrast can make the difference between a clear and easy-to-use website, and one that is completely illegible.
Hopefully, the three tips laid out in this article can offer some insight about website accessibility. They are only the tip of the iceberg in a topic that is complex and demanding in terms of research, understanding, and questioning our own assumptions; but often, dipping your toes in the water is all it takes to convince yourself to dive in.
This month we are digging deeper into accessibility and what that means for us at the Ethical Move. We would love to hear what you are learning and finding challenging about accessibility.