Designing Your Counseling Website for Accessibility
July 26th marks the 31st anniversary of the Americans with Disabilities Act (ADA). With that, I thought it would be the perfect time to touch on accessibility as it relates to website design.
As therapists, you work hard to provide affirming and inclusive services and spaces for your clients; the same inclusive intention needs to be made on your website. One way to make your website more accessible is to follow some essential design best practices.
Before I get into it, I want to be clear:
I’m not an ADA expert. This blog post is available as a resource to help you start thinking about website accessibility, but shouldn't be taken as legal advice. Hold Space Creative can't provide guidance about making your site compliant with any specific accessibility laws, regulations, or standards.
While I can’t help with ADA compliance, I can help clarify design principles that support accessibility.
What is website accessibility?
To put it simply, website accessibility is the practice of ensuring that those with disabilities have access to, and can interact with, your website.
If you have a physical office space for your therapy practice, there are a number of things that you can do to make your office more accessible, such as having a wheelchair ramp and handrails, offering braille signage, etc. The same idea holds true for your website; there are certain practices that you can implement to make sure that the information and services on your site are accessible to all.
Though the specific needs of your website visitors/potential clients may vary, I’ll be touching on how elements of your website design can support some of these needs.
Use your website colors in accessible ways
A great place to start when it comes to making sure your website design is in alignment with accessibility best practices is with your website color palette. The way you use your brand colors impacts how easily your website can be read - regardless of how people are reading it.
UTILIZE GOOD COLOR CONTRAST
Color contrast can be a big player in how accessible your website is to those who are visually impaired.
In short, color contrast is the difference between two adjoining colors. The more difference between colors, the more contrast. Higher color contrast (ex: black text on a white background) means easier readability. Lower color contrast, on the other hand (ex: grey font on a white background) means harder readability.
Here are two examples of high versus low color contrast:
DON’T USE COLOR ALONE TO CONVEY MEANING
In addition to making sure that you’re using appropriate color contrast on your site, another important tip for making your website accessible is not using color alone to convey meaning.
*Gasp!* But Monica, you’re the queen of using color to convey meaning!
Yes, color can communicate in ways that words can’t (hello, Art Therapy!), but for folks who have visual impairments, aspects of a website that rely solely on color (without using words) will be difficult to understand.
That’s why I offer copywriting support and SEO help; because design, copy, and SEO work together to create more accessible websites.
A great example of this is hyperlinks. Don’t rely on only using a different font color to convey to readers that one word is a link while another is part of the regular text. People with certain visual impairments may not be able to distinguish between the two colors. Instead, use indicators (such as underlining hyperlinked text) that can be distinguished without a change in color.
START WHERE YOU ARE
If you’re looking for a good place to get started when it comes to making sure your website color palette supports accessibility, I’d recommend checking out these tools:
Structure your website content for accessibility
Another easy way to make your website more accessible is by structuring your site’s content appropriately. Headings, for example, are for more than aesthetic purposes. In fact, they are key for structuring your content and improving your website’s readability.
Walls of text (think lines upon lines with the same size text with no variety in size, bolding, etc.) are very hard to read for a lot of people and can be particularly difficult for those with certain visual or cognitive impairments. Headings help to guide the eye around the page and give readers an idea of the page’s structure and what’s important to know.
Additionally, headings can improve the experience for those using screen readers or eye-gazing devices to “hear” your website too. For example, if someone is using a screen reader on a page with appropriate headings, the screen reader user can listen to a list of all headings and navigate to the desired section as opposed to having to spend time listening to irrelevant information/content.
HOW TO UTILIZE HEADINGS FOR READABILITY
Whether you’re writing page copy or blog posts, remember to break up your areas of text with headings. Write helpful headings that describe the content in the paragraphs below to make it easier for everyone to understand your site.
Squarespace’s on-page text editor has built-in heading styles (H1, H2, and H3) and paragraph text settings, and you can format your heading styles in the Site Styles panel. A good general rule of thumb is to use H1/H2 for your main headings, H2/H3 for subheadings, and Normal for your body text.
Don’t forget to pay attention to mobile-view too! When screens adjust, sometimes large areas of text are unintentionally created, so you’ll want to be sure that the mobile version of your site is appropriately structured as well.
Write alt-text for images and non-text content
Alt-text is the text that is embedded into an image on your website and offers a description of the image itself. Folks who use screen readers or other assistive devices need this written image description in order to understand any non-text content.
If you’ve taken my SEO workshops, you may be familiar with alt-text already. Google and other search engines use the alt-text from your images/graphics to understand and categorize your website’s content, so if you’re already using alt-text for SEO, chances are it’s helping folks with disabilities too.
How to add alt-text to images on Squarespace (7.0 and 7.1)
For those of you using Squarespace for your private practice website, adding alt-text is simple. Watch this quick video tutorial to learn how:
ADD CLOSED CAPTIONING TO VIDEO
As I’ve mentioned in previous posts, adding an introduction video to your website is a great way for potential clients to get to know you. If you’re including an introduction video or any other videos on your website, make sure to add closed captioning. Like alt-text, this will allow those using screen readers and other devices to have access to information included in non-text content.
Write clear page titles
Page titles (i.e. Individual Therapy, Coaching, About, etc.) are often the first thing screen readers and other assistive technologies communicate when visitors go to a new webpage. Therefore, page titles are key for understanding your website and helping visitors navigate to important information and content quickly and easily.
As a simple rule of thumb: the more straightforward the page title, the better. Page titles are meant to communicate clearly and succinctly what website visitors can expect to find on your page.
This is why I don’t advocate for putting on your creative writing hat when setting up your site structure. “Blog” is more clear, effective, and accessible than “musings.”
Additional Resources
Want to get a sense of how you’re doing in terms of website accessibility? These tools allow you to put in your URL and then provide you with an accessibility evaluation and rating:
If you’re using one of my Squarespace Website Templates or another Squarespace-based site, you can also check out this support article for further reading.
Last but not least, there are several plugins available that help websites meet accessibility standards. Again, I’m not an ADA expert, so I can’t speak to the compliance standards of these plugins. Feel free to do your own research:
Have you found any website accessibility tools or resources that your fellow therapists should know about?
Comment below and let us know! I’m happy to add more tools to my toolbox when it comes to making therapy sites more accessible, and I’m sure your fellow readers are as well.
Disclaimer: Some of the links contained in this article are affiliate links. This means that I may receive a commission if you click on the link and make a purchase from the affiliate. I only recommend products and services that I know or trust to be of high quality, whether an affiliate relationship is in place or not.
