How user-friendly is your website? Could a stranger understand at a glance what kind information you offer and where to find it? Can people easily navigate to what they’re looking for?
How about those with impaired vision? Is your website user-friendly for those with vision challenges, or haven’t you given that issue a thought?
I know I’ve been guilty of that omission in the past. But I recently attended a webinar about this issue and I’m passing on some of what I learned to you.
Tips to make your posts and pages more accessible for users, in particular the vision impaired.
Make sure everything is readable.
We’ve all been frustrated by a badly designed web page that is difficult to read. You don’t want that for your website! Common readability errors include:
- Font size too small. Many people find small print difficult to see. Be kind to your readers and make your default font size large enough to read easily. Consider a 14 pt or 16 pt size for body text.
- Hard-to-read fonts. Script fonts, handwritten fonts, and ornate fonts are often difficult to read. Save those fonts for invitations and other fancy stuff. Even standard fonts can be challenging when some strokes of letters are very thin. For best readability on a screen, choose a sans serif font like Arial, Lato, or Verdana. (There’s a good reason they’re so popular. They work!)
- Insufficient contrast. Low contrast between font and background can make the text difficult to read. If you suspect your contrast isn’t good, you’re probably right. Here is a website that allows you to analyze your contrast. You can enter hex values for the foreground (ie text) and background colors, or just use the sliders to play around. The boxes on the top right indicate whether the contrast passes or fails various standards.
Help users see what you want them to see and do what you want them to do
- Create white space. When you try to cram too much into the page, it becomes confusing to the reader and they may miss the great content you want them to read. Spread things out so it’s easier for someone to see each important thing you have to say. Break long paragraphs into smaller ones. (Read a long paragraph on a phone and you’ll see why this makes a difference.)
- Provide useful subheadings. Subheadings help users navigate through your posts and let them know at a glance what the key points are. Many readers scan the subheadings before deciding whether to read the post. If there aren’t any subheadings, they may move on immediately.
- Make it easy to take the next step. After reading the page, what do you want the user to do next? Have you made your call-to-action obvious and simple to use? Can they easily find links to related posts, the comments section, or the search box?
- Clarify what clicking a link will do. Don’t assume that every user will understand buttons or links that say vague things like “I’m in!” or “Show me.” Instead, be very clear about what will happen when a user clicks a link or a button.
Design for screen readers
Many vision-impaired users rely on a screen reader to navigate websites. Here are tips to make your site more user-friendly for audience members using a screen reader:
- Include alt text on all images. Screen readers can’t interpret images. By filling out the alt text for each image, you can include an explanation of the image for the screen reader to read. This could be a simple description of the image, or an explanation of what the image is intended to illustrate. (Also, many email browsers default to not showing images. In this case, the alt text will show rather than just the “an image goes here” icon.)
- Don’t use images when text will work. Since screen readers can’t interpret images, all the data the image provides to those with able vision is lost to those who can’t see it. Screen shots, quote memes, and infographics are examples of images that offer text that is inaccessible to screen reader users.
- Don’t open a new window unless it’s necessary. Screen readers get confused when they have to deal with multiple windows. Users may get lost or unable to navigate back to the page they want. To avoid this, don’t set hyperlinks to open in new windows, and if you do, clearly state that in the hyperlink. For example: Click here to open ThisAwesomeWebsite in a new window.
- Create helpful hyperlink descriptions. Screen readers read everything literally. If you include the whole web address in a hyperlink, the screen reader will read out every letter and symbol. Who wants to listen to that? Long links aren’t nice to look at anyway, so it’s better to offer readers a clear description of what the hyperlink will do.
Consider color-blindness.
Color can make a certain image pop.
Unless the viewer is colorblind.
There are several different kinds of colorblindness, and each will see an image with varying degrees of impairment. I have listed two sites (below) that show examples of how images might look to colorblind viewers. (In both of them, clicking the various types of colorblindness will change the image) Both sites also allow you to upload your images to see how they would appear.
If differentiating colors is critical for understanding your images, you should use a resource like the one above to ensure your message will still get across. Colorblindness is also a factor to consider for contrast between text and background.
Here are links to two websites that simulate colorblindness:
I hope these tips help you make your website even more awesome! Have other tips to make user-friendly websites? Let me know in the comments.
Lisa E. Betz worked as an engineer, substitute teacher, and play director before becoming an award-winning mystery writer. She brings her analytical mind, quirky humor, and positive outlook to all she writes. She draws inspiration from thirty-five years of leading Bible studies to create entertaining mysteries set in the world of the early church, and then she fills that world with eccentric characters, independent females, and an occasional sausage-snatching cat. Her first novel, Death and a Crocodile, garnered a gold medal in the Illumination Book Awards.
In addition to writing novels, Lisa blogs about living with authenticity and purpose. Visit her at www.lisaebetz.com. Facebook LisaEBetzWriter Twitter @LisaEBetz and Pinterest Lisa E Betz Intentional Living.
We love helping your growing in your writing career.
