The steps I personally followed to make my website more accessible (Part 1 of ??)

(I had this article on drafts for a long while as I tried different things, but it’s time to just post what I have so far as a part 1 and add further things into future parts!)

Photo by Tianyi Ma on Unsplash — I needed a cover photo, apparently

Hello and welcome! I’m Ártemis. I care very deeply about accessibility, both in my everyday life and in my professional life. I’m a non-binary translator, interpreter and linguist, and I think progress for one oppressed group can’t come at the cost of another oppressed group. I usually speak about this regarding non-binary language, as some approaches aren’t accessible, but in 2020 I decided I should walk the walk in all aspects of my life. That meant asking that videos of my talks only be posted with captions (although this isn’t always honored), transcribing podcast episodes I appear in, and installing a cool Chrome extension, Twitter Required Alt Text, to ensure I don’t accidentally forget to add alt text to images.

This resolution also meant updating my professional website for accessibility. At this moment, I must mention that I manage my own website (through Squarespace version 7.0), but my web design experience can mostly be traced back to messing with HTML marquees and special cursors for my blog in the early 00s. I had to learn a lot, and I’m sure some things could be accomplished far easier than my roundabout ways. There may also be ways to further make my site accessible, and I’m interested in hearing about them. However, I thought I’d put my “journey” in writing in case it’s useful to other people who, similarly, want their content to be accessible by anyone who’s interested.

If you have the budget for it, there are a few companies out there that specialize in accessible websites, and there’s even one specifically for Squarespace! However, while I would love to hand this problem over to someone else, I simply can’t afford any of these companies’ services so I’ll have to figure it out on my own.

What do you mean “accessible?”

Let’s talk a little bit about accessibility. When we talk about accessibility, we tend to envision the icon with the wheelchair and that’s about it. However, accessibility means a lot more than that. A wheelchair itself wouldn’t affect a person’s online behavior much, but mobility issues might. If someone has a disability that affects their fine motor system, for example, they might struggle to click small buttons. Of course, if someone is blind they may use a screen reader or a braille terminal, so if a website relies on images for its titles or even content, they won’t be able to access it, but alt text is also useful for people with low internet bandwidth. This is what’s known as the curb cut effect: when a curb cut (that little ramp in the sidewalk frequently near crosswalks) is installed, it’s not only useful to people with mobility aids, but also by people pushing baby strollers, bicyclists, and even people carrying suitcases with wheels. Sites also need to be accessible to Deaf users, since they can read the text but any audio links or uncaptioned videos would leave them out of the conversation.

Two important things to keep in mind: first, disabilities generally aren’t zero-sum; for example, there’s an entire spectrum of blindness and most blind people don’t see black all the time. So, in keeping your site accessible for blind people, you need to keep in mind both those who can’t see at all (you can turn your monitor off for a while to test it out!) and those who have trouble seeing (like if your screen was really blurry, or if there were a lot of dead pixels and lines across the screen).

Second, it’s also common for people to have multiple disabilities, whether they’re related (comorbid) or unrelated. So an idea like keeping images as headers but playing a recording of the words on mouseover would leave out Deaf-blind people, who would neither see the text in the image nor hear the audio. The point here is that there is a lot to take into consideration!

How I did it and other tips

Let me link you to my website (it’s live here), in case you want to look at it as you follow along. It was crawled by the Wayback Machine a few times before I started on this project, so you can see how it looked before (for example, on November 1st, 2020). There’s also a great website accessibility checklist by WebAIM that can help you identify items to fix in your website, and I’ve included some helpful resources at the end of this post.

Squarespace-specific (important and fast!)

Squarespace has an escape key shortcut enabled by default so that, when you press escape, it prompts you to log into Squarespace. Not only does this look unprofessional (to me, anyway) when you accidentally press it, but it can also interact with accessibility software. Let’s turn it off!

Instructions from Squarespace themselves:

1. In the Home Menu, click Settings, then click Advanced.
2. Click Escape Key.
3. Uncheck Enable Login with Escape Key.
4. Click Save.

Keyboard focus

One of the quickest things you can do for accessibility purposes is make sure your site is keyboard-friendly. It’s common for both blind people and people with mobility disabilities to use the tab key to navigate websites rather than the mouse. So head on over to your site right now and, before doing anything else, hit the “tab” key (that one with the two arrows facing away from each other) in your keyboard. Tap it a few times, and see what happens. Ideally, a little box outline will come up on one first item, and then move to different items as you keep tapping it to signal that item is selected. If you hit the “enter” key, that item should activate. These will most frequently be links to different pages and, in that case, hitting “enter” should take you to that page.

Squarespace 7.1 comes with keyboard focus by default, but 7.0 does not. As it doesn’t look like Squarespace intends to migrate older customers to the new version (rather get more money than honor our current payment plans), we need a solution! This short CSS code can be plugged into Squarespace 7.0 sites by going to Design > Custom CSS, and it should work for other sites as well. You can change the color (change “ffffff” for any other hex color) and the line width (by messing with both the outline px and outline-offset px). It should also work for pretty much every other site!

:focus {
  outline: 3px solid #ffffff !important;
  outline-offset:2px !important;
}

Choose a color that contrasts with the other site colors, and remember that you can only set one color for the whole site (unless you code this into each individual page), so if most of the site is white text on a dark blue background but there’s a section where it’s reversed, blue text on white, then you can’t set a white outline since it will be invisible in the white background section. This leads into…

Contrast and colors

Colors are important for accessibility both for people with low vision and for colorblind people. A quick way to check for colorblind accessibility is to download and run Color Oracle. On Windows, running it makes a tiny icon appear in your taskbar (all the way on the right, near where the sound and wifi settings are), which you’d then click and select one of four types of colorblindness. Your screen then will display how it would look for people with that kind of colorblindness. Unfortunately, it’s more of an overlay than a filter and once you click on something the overlay goes away, so you can’t simply turn it on and navigate your entire site with those settings. I know ColorOracle also works on MacOS and Linux, but I don’t know whether it also appears as an icon like in Windows or how you make it work.

In addition to colorblind accessibility, color contrast is important for visually impaired people. Imagine that you have a glitchy monitor with a vibrating image, or that your screen is cracked or really blurry (remember the thing about the curb cut effect? Color contrast is important for people like my friends, who constantly have cracked screens!). There are several color contrast checkers out there, but I like Coolors’ Color Contrast Checker because it follows the Web Content Accessibility Guidelines (WCAG) and because it lets you drag the cursor around to select colors as it updates the accessibility info. Ironically, a cool part about this contrast checker is that it has green/yellow/red to indicate accessibility level and that’s not colorblind accessible, but it also gives a number rating and follows a star system.

Personally, in adjusting my site I used Coolors’ palette generator, which produces 5-color palettes, allows you to plug in a color or two that you like so it will generate palettes to match it and, once you have settled on a palette you like, lets you quickly check it for eight different kinds of colorblindness so you can adjust as needed.

I cannot overstate the importance of using a contrast checker after choosing your palette, though! I thought I had the perfect palette, with some light blues and greens and then some darker hues, but when I put it to the test, the contrast was terrible.

Remember to highlight your links in some way. Medium simply underlines them in articles, but it’s best to signal them through color as well to make it clear you’re not simply underlining. Don’t rely on people knowing that a specific word is the magic place to click, if only because when someone arrives at your site looking for a link, they probably won’t be looking to closely read your entire site.

There’s a great article on WebAIM about color accessibility in general, and I really recommend reading it over!

Skip links

So, let’s say you’re navigating a website with the tab key. It’s a brand new website to you! You tab over: main menu, about us, locations — great, locations, that’s what you want!

Then tab over again: main menu, about us, locations, about us, contact… THEN: locations, North America, South America, Europe — yes, Europe, click.

Main menu, about us, locations… okay, you get it, that menu is super obnoxious. Let’s allow people to skip it and go right to the content they want. We want a skip link!

I think my interactions with Squarespace regarding accessibility in general can be summarized by this still from a chat about skip links specifically:

Oh no indeed 😔

The takeaway from that chat was that the rep would propose skip links as a feature to their devs, but no promises. If I’d known, I could have been more prepared with some articles about WHY they’re important, but I was able to share this article about how to code it, which will probably be useful to anyone with actual control over their website. (The rep was really nice, I have no bone to pick there.)

After about a week of trying to figure this skip link situation out on my own, I ended up installing the free version of...

…The UserWay Widget

The UserWay Widget has free and paid versions (compare) and is essentially a button you add to your site that allows users to toggle several accessibility features. Most importantly to me, it adds a skip link, which I was unable to figure out otherwise!

(By the way, all images in this article have alt text! It’s quick, easy, and we should always include it when possible)

Signup is free and quick, and all you have to do is add a quick code to your site. If you’re on Squarespace, you can add it through Code Injection (Home>Settings>Advanced>Code Injection) in the footer, which adds it before </body>. It would probably be nicer to add it at the beginning of the <body> tag if you can as it would load earlier, but this works.

I had been avoiding the plugin because it feels like a bit of a cop-out to pass the problem onto someone else rather than figure it out for myself, but I really wasn’t getting anywhere with the skip link and this will allow me to keep working at it on my own without excluding disabled users in the meanwhile.

Fonts and dyslexia

There are a few fonts designed specifically for dyslexia readability, but here’s an example of conflicting accessibility needs: I, and many of the people I know, find dyslexia-specific fonts distracting: not ugly or cartoonish, but literally distracting and hard to read. Since I got to this point after installing UserWay, which already has a feature to set everything to a dyslexia-specific font, I thought I’d choose default fonts that were on the easier to read side of the spectrum but that were still readable to people like me and, ultimately, I went with two Google fonts: Magra and Open Sans.

The British Dyslexia Association has some accessibility guidelines that go beyond just font selection: they go over capitalization, spacing, alginment and much more.

Different kinds of accessibility checkers for your website

Here are some checkers that helped me as I worked on making my site more accessible. Some I mentioned up there, some I didn’t because they applied more widely:

1. Not a checker, but let me plug the website accessibility checklist by WebAIM once more
2. NVDA is a free screen reader, although you can definitely donate to support them! The software is available in several languages, and WebAIM has an article for first-time users specifically aimed toward people using it to evaluate web accessibility. That’s you!
3. The WebAIM WAVE Accessibilty Checker (in browser). It looks like UserWay conflicts with this checker, so either remove the code quickly to check it (which will then flag some errors that you are obviously addressed with the plugin) or use something else, like
4. The WebAIM WAVE Browser Extensions (Chrome and Firefox only), or
5. The Userway Accessibility Checker
6. There’s a veeeeeery long and detailed list of web accessibility checkers at W3C, which also has some great web accessibility resources

—

And anyway, that’s the end of part 1; part 2 to follow… sometime? I’m super open to feedback and solutions, so let me know if you have thoughts!