Small changes to your website can improve website accessibility. Accessibility is a broad term encompassing users that have differing abilities or different internet access. The end goal for all of us as website owners is to reach our audience, so taking measures to improve our website’s accessibility is important.
Today’s tip is about capital letters and accessibility.
Sometimes when entering content on your website, it’s easy to go for the simple option. We like to use capital letters for emphasis, and we hit that caps lock or shift key and type away. But did you know that typing your text directly in capital letters may make it more difficult for some users to understand?
Why shouldn’t you type your text in uppercase letters?
Screen readers may interpret capital letters as acronyms, and read them out letter-by-letter. Some developers brush this off as par for the course of using a screen reader. They say that it’s a minor annoyance people who use screen readers are used to, just as we’re used to our GPS mispronouncing street names. They also say that since each program reads things differently, we shouldn’t worry about this issue. While it’s true that different programs interpret language differently, we believe website owners should do our best for our entire audience. Dropping the use of capital letters, or changing the way you use them, is a simple change that can improve your website’s accessibility for users visiting your site with a screen reader.
Keep in mind also that there are other reason to avoid the use of full sentences typed in capital letters. Online, capital letters are often seen as “shouting,” and studies show sentences using all capital letters are harder for us to read.
I really want to use capital letters, though. What can I do to make this work?
If you want to use capital letters, use the CSS text-transform feature, or use the text transform feature in your page editor. If you’re familiar with how HTML works, you can use the CSS method below.
CSS Method:
Set a class for your text as shown below:
<p class="super-important">This is Very Important Information</p>
Then in your stylesheet, set that class to use uppercase characters, as shown below.
.super-important {
text-transform: uppercase;
}
If you’re using a page builder like Beaver Builder on your website, try this method instead.
Page Builder Method:
When you use the Beaver Builder page builder, you can set the text to display in uppercase characters as shown below.
In the Heading module, we type the text normally (RED is in uppercase here because it’s used as an acronym for Red Earth Design).
On the Style tab, under “Style and Spacing,” we choose “TT” to transform the text to be displayed in uppercase.
Keep in mind that the best way to make your website accessible is to create content that works for everyone.
What small changes can you make to your website today to improve accessibility? Let us know in the comments.
