A few years ago, I wrote the original version of this post about seven factors that make websites accessible to the visually impaired, with an emphasis on blogs and blog posts. Since then, there has been a huge increase in web accessibility resources and tips for making websites accessible, but I have found that a lot of these tips rely on accessibility plugins and automated tools that may not be a great option for bloggers or their readers, since these tools can impact how their website looks for users of assistive technology. However, there are still ways for bloggers to make their blog accessible for visually impaired users without needing an accessibility plugin by making changes to their blog theme that improve readability for everyone, and are compatible with popular assistive technologies. Here are my favorite tips for how to improve your blog theme for visually impaired users, inclusive of low vision/blind, based on my experiences as a blogger with low vision.
In this context, assistive technology consists of mainstream and specialty tools that are used to read and interact with web content. For people with vision loss, some of the most popular assistive technology for interacting with web content include:
The tips I share in this blog post can be implemented to improve how blogs are accessed with these and other assistive technology tools, but are not a substitute for an accessibility audit that is done by a qualified web accessibility professional. However, making these changes to a blog theme can have a positive effect on the outcome of an accessibility audit and the overall reading experience.
It’s frustrating when I go to a website and try to use the browser zoom or control-+ shortcut to enlarge text, and the text size doesn’t increase. When setting font sizes for a blog, avoid using absolute size and instead use relative size so that users can customize how the text is displayed in their browser or on their device screen.
I use a mix of percentage values and em values for the text sizes on my own website, which are larger than average since my primary audience is people who have trouble reading small print and have requested larger default font sizes. w3Schools’s font size tutorial page uses the following example values for font sizes that can be resized in any web browser:
Alt text is a text-based description that describes visual content in an image and is read out loud by screen readers. If an image fails to load, alt text will display in its place, and good alt text plays a role in improving images for search engine optimization. However, it’s important to ensure that alt text accurately describes what is going on in an image, and isn’t just a list of random keywords or other not-helpful information. I’ve created the ultimate guide to writing alt text and image descriptions for the visually impaired, which is linked below, as well as a few other alt text guides for different types of content.
Gray text on a white background does not provide adequate contrast for users with low vision or contrast deficiencies, and trying to read gray text on a white background can contribute to more eye strain. Alternatively, colored backgrounds and colored text can make text more difficult to read or not work properly with inverted displays, color filters, or other display accommodations, as well as make it difficult for users with colorblindness or color deficiencies to read text.
For this reason, I recommend that bloggers use solid black text for headings and body text (#000000) on a white background for displaying blog posts and articles. This makes it easier for users with low vision to enable color filters, dark mode/inverted displays, and similar tools for reading.
I’ve met people with low vision who prefer to use serif fonts for reading text as well as others who prefer to use sans-serif fonts, but one thing they all have in common is a dislike for cursive, decorative fonts that are used for headings and body text in blog posts. Save the decorative fonts for logos and word art, and make sure to choose a clear, easy-to-read font for headings and body text. Some popular options include:
I received a question from a reader about using the OpenDyslexic font on their website, or adding a plug-in that converts text to OpenDyslexic. I find OpenDyslexic difficult to read with low vision, and recommend that readers who want to access content with that font enable a simplified reading display like Microsoft Immersive Reader to change the page’s text, since a lot of plugins distort text spacing and alignment that can make it even more difficult to read text.
I’ve encountered many websites that have pop-ups asking users to subscribe or that auto-play videos on top of content, which can be disorienting if this content contains strobe or flashing lights. Some pop-up tools are also inaccessible for screen readers and can be the equivalent of a brick wall preventing users from accessing additional site information. For this reason, I recommend avoiding subscription pop-ups and video pop-ups, and putting these in a dedicated widget on the page or in the sidebar.
On my website, I have a “subscribe to site” option as a full length widget on the bottom of every page and post, so that users can choose whether they want to subscribe to my posts via email. One of the options on my comment form is to subscribe to the site as well.
On the blog home page, it is better to display post excerpts over full text so that a screen reader does not start automatically reading the full content of a post. Having excerpts make it easier for people to decide what they want to read, and also makes it easier to use other reading tools when there is only one blog post on the page, instead of having three full posts on one page.
When giving someone directions to get somewhere, it’s helpful to avoid using generic location words like “here” or “over there”, as this doesn’t help people figure out where they are going. The same is true for hyperlinks- phrases like “click here”, “here”, or “post” are not helpful for helping a user figure out where a hyperlink goes. Instead, write the name of the post, the name of the website, or something similar when creating a hyperlink within a blog post.
On Veronica With Four Eyes, I put all of my links under a “related links” heading in each subsection of a post, or at the end of a post so that screen readers have the option of skipping links and coming back to them later.
As someone with double vision as well as low vision, it is helpful for me to have additional spacing between lines so that the lines don’t appear to run into each other. In order to do this, I adjusted the line-height for my pages, posts, lists, and other types of content so that they would be easier to read with additional spacing between each line. I chose to use the value 2.0 em for all of my content so that it would be adjusted relative to the font size.
By Veronica Lewis/Veronica With Four Eyes, www.veroniiiica.com
Updated July 2023: original post published March 2018
Back to Paths to Technology’s Home page