At Lightning Fruit we are committed to an accessible web. We recently made updates to our own site to get as close as possible to international standards set by the ADA and WCAG 2.1, and we want to encourage others to do the same. Not sure what that means? Web accessibility is simply designing and coding to make sure your site takes into account users with disabilities, making it easier for them to read and navigate your site with ease.
This can make a huge difference–easiest to show with a couple of examples! One of the most visually noticeable errors you could be making is not having enough color contrast. Folks with partial blindness or color blindness can struggle to discern text when it’s either too light, too dark, or similar in color to its background. Most of the time, these are simple fixes, while other times, we may need to rethink your color palette.
However, not all accessibility is visible to the naked eye. Take for example screen readers. Over 7 million people use screen readers to access the web! From navigating a menu to following links throughout a site, navigation may be confusing to a screen-reader user and causing them to drop off (hello higher bounce rate for you following your analytics). Again, these updates can be easy if you know what’s going on – some will require code updates but others may just require you to edit the text associated with your links (we call this discernible text).
There are a number of things you can do right now to immediately improve accessibility:
- Give Your Images Alt. Text – Take a look at your image library. Do all your images have alternative text? No? Add it now, and make sure it describes the image so that someone who can’t see it would understand and see how it fits the narrative on the page.
- Name Your Links – Does your link say “click here”? It’s time for a creative refresh so that your links make sense in and out of context. Additionally, if your link is an image/icon, make sure the image has alt text and/or that the link is labeled by another element.
- Make Sure Your Header Levels Make Sense – Most sites have 6 header styles, referred to as H1-H6. When using headers on pages or blog posts, you should always try to go in order of 1 to 6. Starting with an H4 and then going to an H1 is confusing for screen readers (and SEO, too.)
Want to get even more accessible? There are a few things you’re going to need help with:
- ARIA – It stands for Accessible Rich Internet Applications. Basically it’s a way to make sure our code plays nice with screen readers.
- Discernable Text – Screen reader users are not able to discern the purpose of links, menu items, or buttons that don’t have text that clearly describes the destination, purpose, function, or action for screen reader users.
- Tab Index – Your site has tab-stops on a page – when navigating using a keyboard, you can tab-through focusable elements of the page. You add, remove, or change any element’s “tab order” by giving it a numerical tab index, therefore making it more navigable.
- Id Attributes – These are unique attributes that are used to identify HTML elements, and having more than one element with the same ID will cause unexpected behavior.
- Page Content Landmarks – To effectively use HTML5 elements and accessibility-related attributes (e.g. aria-role), sites use landmarks to identify regions of content on a web page.
- Header Levels that Don’t Affect Your Design – Sometimes your design looks so damn good, you don’t want to rearrange header levels. Well don’t worry, we got you covered with some fancy coding to make sure it all still makes sense to a screen reader.
Feeling overwhelmed? We got you, and it starts with a simple audit. We’ll run tests on your full sight and identify critical errors and smaller opportunities that could make your site better accessible to users with disabilities. From there, we can talk about priority items and make a plan.
Web accessibility is a huge focus for us in 2022 – call it a New Year’s goal – so we want to share the knowledge and make the web more accessible for all. We’re already underway auditing and updating a few client websites and we’re ready to help any and everyone else to do the same!
Reach out and let’s get started making the web a better place for all!