Making an Accessible Blog Content Creators Guide
Each month, more than 409 million people view over 20 billion different blog pages. Blogs can be an amazingly diverse source of information and entertainment. This has led to their enduring popularity.
Blogging can be a worthwhile hobby and career path. Blogs are cheap to start and can make great money. All it takes is a laptop and a fresh idea. However, this has also led to an influx of bloggers who aren’t aware of best blogging practices.
Many blogs remain inaccessible to people with disabilities and impairments. This is both morally wrong and a blunder on your end. People with disabilities make up 15% of the global population, which translates to 15% of your potential audience. This is a huge group that should not be ignored. Additionally, people with disabilities should always be able to access the content that interests them. The UN states that digital accessibility is a human right.
You need to make the most of your content’s potential. And accessibility is a step in the right direction. This easy-to-follow guide gives you all the tips you need to keep your blog accessible.
Accessibility is all about making the web easier to use for people with disabilities. We need to go right back to the basics for this. Think about your site’s layout. This is the foundation for all UX, so it’s important to get it right.
Your site needs to be predictable and easy to navigate. This means that things should be in the spot where they’re usually found. Many people with disabilities rely on patterns and repetition to navigate sites. The further you stray from the norm, the harder it is for everyone to use your site.
It can be difficult to know where to start. More so if you’re beginning with a blank template. You can’t access a website without good navigation, so let’s talk menus first. All components (including menus) must be accessible from a keyboard alone. List-style menus are better for people using assistive technology or a keyboard alone to navigate your site. This is because menu items are easier to track and identify in a clear list. Fly-out menus can be very difficult to use, especially for people with dexterity issues. So, it’s best to avoid these.
Keep text on your site consistent. The font for your heading and body respectively should remain the same throughout. The same applies to font size, which should be ample and easy to read. Headers should be discernibly bigger than the body font. Good headings let people identify what they need quickly. It also helps people who are navigating using the tabbing feature.
Most popular blogging websites provide a selection of pre-made templates which already come with these features. Changing the layout can seem like the most overwhelming step. But if you choose a good template, then it’s often the quickest fix.
Let’s Link Up!
If you’re running a blog that’s been monetized, you’re probably using affiliate links. Your income relies on these links. Making them inaccessible is not only unfair but unprofitable.
Make sure your links are long enough. Dexterity problems affect 23% of people with disabilities. Links that are only one or two words can be tricky to click on. On the other side, HTML links cause a lot of issues for screen readers. Always label links and make them a few words long. This increases the chance of people being able to click on them. Plus, it also makes sure people are clicking on the right thing.
Many people with color blindness are unable to discern color signals. Marking links using color alone is an accessibility issue. Always use another indicator like underlining your link. This clearly shows its purpose and does not exclude people who are color-blind.
Ensure all your links work correctly and take you to the right place. Faulty links are confusing and risky. A blog with faulty links is less likely to get hits as people will consider it untrustworthy.
There are four main pillars which WCAG is based on. Two of these pillars are that digital content must be perceivable and operable. A great way to start with these is by labeling everything on your blog correctly.
Label everything with a concise and accurate text description. This should tell you what components do or where they take you. Avoid vague statements like ‘click here’ and ‘more’. They’re not helpful as they give no context. Never use an image or symbol alone to label something. Screen readers are unable to interpret these.
Labeling correctly is particularly important for comment forms. Make sure that each box is labeled with the precise details needed. The name box, the email box, and the comment box should be labeled exactly as so.
Keep Things Crystal Clear
Blog posts are a creative space. It’s often tempting to write something that’s technically impressive rather than easily readable. Over-stylized writing can be confusing and difficult to read. More so for screen reader users, people with cognitive disabilities, and second-language speakers. The best writing conveys its full meaning in the simplest way possible.
Write in clear and concise language. Generally, sentences should be no more than 25 words long. Sentences become confusing and convoluted after that. If you feel like your sentences are too long, use more full stops. Full stops can replace commas most of the time. Decreasing sentence length will make your writing flow better.
Be liberal with new paragraphs. Every time you’re introducing a new topic or thought, take a new paragraph. Reading big chunks of text is disengaging.
Ample color contrast is vital for accessibility. WCAG guidelines state you should have a text-to-background contrast ratio of at least 4.5:1.
However, this doesn’t apply in the following situations:
When you are using large-scale text. In this case, you should have a color contrast ratio of at least 3:1.
Text or images that are part of an inactive user component, that are purely decorative, that are not visible to anyone, or that are part of a picture with significant other visual content have no minimum color contrast ratio requirement.
When using a logo, these have no minimum color contrast requirements.
You can check your contrast using an online color contrast ratio checker. Most of these are free and take no more than a minute.
Any article speaking about accessibility will always tell you to add alt-text. Because, yes, it really is that important!
Alt-text is a text description of an image on a digital platform. It appears when an image fails to load properly on a web page. However, it’s mainly used for accessibility purposes. Almost 7.3 million Americans have vision impairment. A large percentage of these people rely on screen readers to access the web. Although screen readers are great for text content, they are unable to interpret images. So, they rely on alt-text to convey what an image is and its purpose on a site.
All major blogging sites will have an alt-text feature. However, you can add a short text description below your image if you you’re unable to add alt-text for some reason. Keep your descriptions concise but descriptive. Your image should be as easy to visualize as possible. Never begin your alt-text with ‘an image of…’ or ‘a picture of…’ Users already know you’re describing an image of something.
Test Device Compatibility
Forgetting to test your blog’s device compatibility is one of the most common mistakes first-time bloggers make. It’s important that your blog platform works with different devices. Not just for accessibility but also for general usability.
What works on a desktop won’t necessarily look the same on a mobile browser. Test your blog page on all different browser formats, including web, mobile, and tablet. Make sure header menus on web browsers switch to drop-down or sidebar menus on mobile and tablet browsers.