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.
What is assistive technology? How do my readers use it?
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:
- Screen readers, which read all text-based content, alt text for images, and navigation tools to get from one page to another
- Text-to-speech/read aloud, which reads all text-based content and alt text for images, but does not read out navigational tools or page structure information like a screen reader does
- Large print and larger font sizes
- Screen magnification for increasing the size of information
- High contrast displays/inverted screens for changing the display colors on the device
- Simplified reading displays, which apply consistent formatting, colors, and fonts/font sizes to a blog post or article for an improved reading experience
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.
Related links
- A to Z of Assistive Technology For Low Vision
- Five Ways To Simplify Reading With Technology
- My Favorite Web Browser Extensions For Virtual Learning
Dynamic fonts that can be enlarged
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:
- body {font-size: 100%;}
- h1 {font-size: 2.5em;}
- h2 {font-size: 1.875em;}
- p {font-size: 0.875em;}
Related links
Images with meaningful alt text
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.
Related links
- How To Write Alt Text and Image Descriptions for the Visually Impaired
- How To Write Alt Text For Casual Outfits
- How To Create Image Descriptions For Red Carpet Looks
- How To Write Alt Text For Memes
- How To Write Image Descriptions About Online Products For Visual Impairment
Solid black text on a white background
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.
Related links
- How To Use High Contrast in Windows 10 and Windows 11
- Paper Colors And Low Vision
- Digital Accessibility and Chronic Pain
Clear readable font for headings and body text
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:
- Arial/Arimo
- Verdana
- Helvetica
- Times New Roman
- Oswald
- OpenSans
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.
Related links
- My Eight Favorite Free Fonts For Print Disabilities
- My Talk At I’m Determined Summit: Crash Course In Immersive Reader
No pop-ups or auto-play videos
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.
Display post excerpts, not full text
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.
Use descriptive hyperlinks
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.
Related links
- How To Be An Effective Human Guide For People With Vision Loss
- Tips For Be My Eyes Volunteers From A User With Low Vision
Increase line spacing
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.
Related links
- Six CSS Accessibility Tweaks I Made For My Website
- How To Make Tumblr Themes Accessible For Low Vision
More tips for how to improve your blog theme for visually impaired users
- When possible, use large/full size graphics in a high resolution, as these are easier to magnify or zoom in on
- These tips can be applied to free or paid blog themes that support custom fonts, as well as blogs that have options for custom CSS
- Avoid using transparent/translucent backgrounds for blog posts, where the background color/pattern is still visible. This can make it difficult to focus on the text of the post
- Admittedly, I didn’t have all of these things on my website when it first launched, but taking the time to fix these issues has helped me to get more readers and ensure my work is visible to the largest audience possible
