Website Accessibility 101
Your website is your calling card. Much like the signs we see in shop windows saying "all people are welcome here", you want your website to say the same. In order to truly make all people feel welcome on your homepage, you need to implement accessibility strategies in the design of your website.
There are lots of different tools, rules, and abilities to consider. We're here to help make it easy to implement accessibility throughout your website.
who's in charge of web accessibility?
W3C (The World Wide Web Consortium), is the authority on web accessibility. Designers and developers reference the WCAG (Web Content Accessibility Guidelines) to make sure the websites they create meet the latest accessibility standards.
This document is quite dense and a tad overwhelming, so I've distilled it down to the top 5 simplest actions you can take to get your site to meet accessibility standards. This is a great starting point but it's by no means an exhaustive list. Once you've mastered these 5 things, make sure to audit your website again and see where you can keep improving.
1. alt tags
What are they:
Alt-tags are "image text alternatives". These are the descriptions a screen reader will read to a visually impaired visitor in place of an image when they're scrolling through your site. Imagine if you go through all this time, effort, and energy to create stunning images for your website that help tell your brand story powerfully but only some of your site visitors could see them? Alt-tags are the tool you can use so everyone can appreciate your brand imagery.
How to write them:
Alt-tags should be clear, descriptive, and to the point. Respect your site visitors’ time by keeping tags relatively short, using specific, descriptive language. No need to add in "image of" or "picture of", it's already assumed the alt-text is referring to an image.
Bonus: Alt-tags are great for SEO. If your keywords happen to work well for describing an image use them. The goal and main focus should still be on the user so be careful not to stuff in keywords that don't contribute to the description.
2. keyboard friendly
Since most assistive technologies use keyboard-only navigation, your website needs to work without a mouse. This means that you must be able to access all major features and content on your website using only a keyboard. The most common keyboard-only navigation relies on the tab key. Make it your goal to ensure that your website is fully accessible via the tab key.
Testing your site for keyboard accessibility is easy, just head to your site and see if you can navigate to and use all-important content and features with only your keyboard. You'll get first-hand knowledge of how easy or difficult your site is to use and then you can address any issues.
3. clear call to actions
Call to actions are the buttons and links you use to direct a user's journey through your site. Make sure they are distinct and clearly labeled. Choose a color that draws attention and stands out against the rest of your site (make sure it fits color accessibility guidelines).
When adding text to a call to action be descriptive. Instead of saying "click here" say "schedule a call with us". Make sure you don't use text as an image, especially for call to actions, screen readers won't be able to read them.
4. form accessibility
Users should be able to go through a form on your website using their keyboard, using the tab key to move from field to field. Make sure the tab order follows the same visual order so no form fields are missed before submitting.
Additionally, fields need to be labeled clearly with straightforward language and placed adjacent to each field. This is not the place to get cheeky with language. Use plain language like "full name" or "first name". Fields that are required should be labeled accordingly and formatted to alert screen readers, an asterisk won't be sufficient (although should still be used for sighted users).
5. use tables wisely
Tables are great for communicating large amounts of data to all users, including those using assistive technology. When implementing tables into your site, keep them as simple and straightforward as you can.
Tables should not be used for things like layouts, lists, or really anything other than tabular data. When using a screen reader to browse a website, tables used as a layout make the information incredibly difficult to understand. Use CSS instead to create the desired effect with columns and rows.
take action
If you're looking to update your website accessibility quickly, I recommend using the User Way Accessibility Widget. The beauty of this widget is each user can customize their own experience, changing settings like font size and spacing, link highlights, and contrast to fit their individual needs. They even have a free version that you can customize to fit your branding.
Web accessibility goes much further than what we've discussed here. If you'd like to make sure your website is optimized for accessibility and want help doing it, we're here for you. Click this link to schedule a free consultation call.
For color + typography accessibility
The Accessible Design Checklist: Typography
Color Accessibility: The Basics to Creating a Brand Experience For All
References
10 Ways to Make Your Website Accessible - DreamHost
Top 10 Tips for Making Your Website Accessible
Making your Squarespace site more accessible