How to make your blog more accessible, and why you should care
Article written by Kami
Heya!
I've been on bear for a while now, and while it's been awesome to see everyones cool website designs, I still ocassionally run into blogs which make some easy to fix mistakes regarding accessibility. So, in this blogpost I want to quickly go through some easy things you can do to make sure that more people will be able to enjoy your blog.
Color Contrast
So, first up, the biggest thing that I see over and over on here: Color contrast.
Please, make sure your website has good color contrast. Simply take the color of the text, and the color of your background and input them into this website.
If both Normal Text and Large Text pass: You're good.
If they don't, fiddle around with your color choice a bit until you find some colors you like that also have decent contrast.
I think it's important to note here that good color contrast benefits everyone, not "just" people with visual disabilities. It's less straining to look at, and it'll ensure you posts remain readable even if, for example, you're sitting outside somewhere and the sun is causing plenty of screenglare.
I feel this is important to note, because I ocassionally see people saying that accessibility isn't important on their hobby website or blog, because of X or Y reason. If you want anyone (including yourself, mind you) to use your website, it's a good idea to care about these things - even if the usecase might seem non-obvious at first.
Not only because it's a nice thing to do for people who do have disabilities and want to view your site, but also because it helps out literally everyone else as well.
Do your future, outdoor-browsing self a favor and and improve your color contrast.
Alt Text
If you are going to add an image to your website, please give it some alt text. Alt text is a short description of an image for visually impaired people. It's also displayed if the image can't load for whatever reason. (For example, if the internet connection of the person reading your blog is too slow.)
Here's how to add alt text with markdown:
Here's how to do it if you're using html:
<img src="https://link-to-your-image.com/image.webp" alt="A description of your image">
Generally, you should add alt text to any images you use. If your image is purely decorative, it is fine to ommit. If you're using html however, you should still add the alt attribute. Just leave it empty instead. That way, screenreaders know to ignore the image. Here's an example:
<img src="https://link-to-your-image.com/border.webp" alt="">
I think it's important to stress here that an image is only decorative if it does not convey any additional information. So, if the image is just used as a decorative border, for example.
If you're going to add HTML, make sure to use semantic HTML
If you're going to mark up something using HTML, please do a quick google search beforehand to check if there's a more specific HTML element you could use. What do I mean by that? Well, let's say you want to add a caption to an image. Maybe your first instinct is to do something like this:
<img src="https://link-to-your-image.com/image.webp" alt="Kami">
<div class="caption">A very cool image of Kami talking about web accessibility.</div>
Technically, this works. You can put this on your website, and it'll look fine enough. Thing is, people using screenreaders will have a harder time realizing that the caption actually belongs to that image. And on top of that, you're gonna have to put in some additional effort to make it look nice.
If you take maybe a couple minutes or so to look up if there's a better fitting element though, you might end up with something like this instead:
<figure>
<img src="https://link-to-your-image.com/image.webp" alt="Kami">
<figcaption>A very cool image of Kami talking about web accessibility.</figcaption>
</figure>
Not only will this be much nicer to read on a screenreader, the figcaption element actually comes with some built-in styles that will make it look more like... well, a caption. If you're lucky, the theme you're using might already have some built-in styling for it!
The same thing goes for basically anything you want to mark up with html. Before going off and making your own completely custom class, try and see if there's a nice HTML element you can use as a jumping off point.
Use headings properly
It can be tempting to misuse <h1>, <h2> and so forth and # Markdown Headings purely to get differently sized text. And while that may look nice, that's not actually what you should use headings for.
Semantically, headings are landmarks. They're used to denote the different sections of your text. This is useful for people navigating your website with either mouse and keyboard or a screenreader. They'll be able to jump to those places in the text.
If you don't actually want to use a heading for its intended purpose of marking different sections of the text, add a css class to your theme, like this for example:
.text-large {
font-size: large;
}
<p class="text-large">This text is big just because it looks nice!</p>
It's also very important that you have your headings in the right order. If you're making a post, <h1> and its markdown equivalent # Heading will always be taken by your post title.
So, if you want to mark a new section you should use either <h2> or ## Heading. If you then want to add subsections to those sections, you can use <h3> or ### Heading and so on and so forth. If you're adding a page to your blog, the <h1> slot won't be taken up, so you'll be able to use that instead for your toplevel heading.
If you don't follow these rules, your post will be rather annoying to navigate via keyboard only or with a screenreader.
So, Don't do it like this:
# The Title of My Very Cool Article
Hello guys, today I will tell you why I'm very awesome and attractive. Here it goes.
# Why I'm so awesome
Some text goes here
# The biggest reason
I'm very cool and awesome because my website respects user preferences
Some more text
And even more text
# Another reason
I've got incredibly good taste in books,
and have read all of lord of the mysteries
# A different topic
Some more text
Do it like this instead!
# The Title of My Very Cool Article
Hello guys, today I will tell you why I'm very awesome and attractive. Here it goes.
## Why I'm so awesome
Some text goes here
### The biggest reason
I'm very cool and awesome because my website respects user preferences
Some more text
And even more text
### Another reason
I've got incredibly good taste in books,
and have read all of lord of the mysteries
## A different topic
Some more text
Use rem for font sizes
If you're making your own theme, or adapting an existing one, please use rem for font sizes instead of something like px. Unlike px, rem is not a static unit. How large one rem is changes with the font size setting the user has set.
This means, that if a user has set their browser to use a larger than normal font-size for whatever reason, your website will respect that preference. If you use a static unit like px, users will have to manually scale up your website - which is annoying.
So, be nice to users that prefer larger or smaller than normal font-sizes, and instead of doing this:
.elem {
font-size: 16px;
}
Do this:
.elem {
font-size: 1rem;
}
Aaaand, that's all for now!
There's obviously a lot more you could talk about when it comes to this stuff, but taking some time to implement just these tips where appropriate will already make reading your blog a much nicer experience for everyone who might want to do that.
Including future you!
So, do yourself and everyone else who might enjoy your website a favor, and make sure that it's accessible.
Thank you for reading this far, and if you've got any additional questions/feedback, you can email me at kami@kamiscorner.xyz.