Prioritizing website accessibility isn’t an option these days.
More and more, businesses are being dragged into court by attorneys trying to make a quick buck and sue business owners for NOT having an accessible website, so this is important to take action on.
It’s vital to make sure that ALL of your website visitors have as seamless an experience as possible while visiting your website.
While it’s near impossible to achieve full accessibility and still have a website that has any design to it at all (at least in my opinion), it’s important to do what you can while maintaining your branding and design integrity for your intended audience.
What is Website Accessibility?
Web accessibility is the practice of building websites that provide equal access for all website visitors regardless of any disability or impairment they may have.
To fulfill this goal, your website needs to comply with certain design and development guidelines that ensure your site is created to accommodate users with disabilities.
The WCAG states that there are four main principles to follow to create an accessible website: Your site needs to be perceivable, operable, understandable, and robust.
Within that, here are some recommended steps you can take to begin the process of making sure your website accessible for all users:
Avoid low contrast on text.
Avoid using light text even on a white background, as the contrast is not as noticeable. I also prefer to never use white text on a dark background for paragraph text, simply because it’s harder to see for visually impaired users, even though the contrast is high. At times, light text on a dark background is acceptable for call outs or other areas that you want to highlight.
Use headings properly.
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important heading.
Use headings and subheadings to form an obvious outline and structure to the page. It’s recommended to not skip heading levels, as they help non-visual users (and search engines) to understand how your page is organized, and make it easy for screen reader users to navigate.
Text size and spacing.
While this can vary depending on your audience, internet users are getting older and small text can make it difficult for them to read your content. While some visually impaired users will use a screen reader, some users just have trouble seeing small text so a font size of 18px or 1.25rem is what I recommend, as a rule.
Line spacing is generally recommended to be slightly larger than the font size, so 24px or 1.4rem.
Use ALT text on all images.
ALT text is easy to add to your images, and will provide those using screen readers the ability to read what the image is depicting. There can be added SEO benefit here, but do not add ALT text only for SEO, if it doesn’t describe the image.
Add captions to videos.
Be sure to add a transcript or caption for videos, so that hearing impaired users can read the transcript and know what your message is. This also has an added SEO benefit for your website.
Add ARIA labels to buttons or linked anchor text.
The aria-label attribute defines a value that labels an interactive element. The aria label is important for accessibility, so that screen readers can read out the aria label for your users.
If your element already has a clear value such as “Schedule a call now”, you don’t need to add an aria label. If, however, you have a button or link that says “Learn More” or “Click Here”, it’s recommended to create an aria label that further describes that, such as “Learn more about our horse training program”, that defines where the button will take users.
Ensure Keyboard Accessibility
Users with any motor disabilities may not be able to use a standard computer mouse or laptop touchpad, therefore require a keyboard to navigate. Make sure your website can be access and navigated using the tab and/or arrow keys of a keyboard and be sure to test your website to identify and resolve any issues.
Create accessible PDF files.
If you provide any content on your site in the form of PDF files, use a “tagged PDF”, which supports headings and alt text for images. Use the PDF Accessibility Checker that’s provided by Adobe Acrobat.
