Veronica With Four Eyes

Six CSS Accessibility Tweaks I Made For My Website

As a person who runs a website related to visual impairment and assistive technology, it’s only natural that I want to ensure that my website is accessible for as many people as possible. While my blog theme was created with accessibility in mind, I decided to add some additional CSS to my website based on feedback from readers so that it would be even easier for people with visual impairments and print disabilities. Here are six CSS accessibility tweaks I made to my website, and how they are helpful for my readers with visual impairments.

What is CSS? How do I add it to my website?

Cascading Style Sheets, also known as CSS, describe how HTML elements are to be displayed on the screen, paper, or in other media. I think of adding CSS to my website as being like making my bed, as I add sheets and covers to make my bed look nicer and more comfortable to use. The exact method for adding additional CSS to websites varies and may require a premium plan for users of blogging websites.

Related links

Text-Alignment: Left

For the longest time, I used a justified text alignment, which meant that text wasn’t aligned to the left or the right margin, but rather there were gaps in spacing to ensure that words were unevenly distributed. A Twitter friend messaged me saying that this was bad design for people with cognitive disabilities as well as print disabilities, as it is harder to track words and spaces with the additional white space between words. The Web Content Accessibility Guidelines (WCAG) recommends aligning text to one side, and I immediately switched the text alignment for all of my posts and pages to be to the left for improved readability. I’ve found that my posts are now much easier to read with alternative reading tools and when printed out on a page.

Code to implement

text-align: left;

Related links

Adjusting line-height on pages and posts

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.

Code to implement

.post p{line-height: 2.0em;}
.post ul{line-height: 2.0em;}
.post ol{line-height: 2.0em;}
.post h1{line-height: 2.0em;}
.post h2{line-height: 2.0em;}
.post h3{line-height: 2.0em;}
.page p{line-height: 2.0em;}
.page h1{line-height: 2.0em;}
.page h2{line-height: 2.0em;}
.page h3{line-height: 2.0em;}
.page ul{line-height: 2.0em;}
.page ol{line-height: 2.0em;}

Related links

Defining headings

While this technically isn’t implemented in the “Additional CSS” section of my website like these other tools are, defining headings is an extremely important part of making an accessible website, especially for screen reader users. Headings help to break content up into sections so that users can easily navigate a document or page and read/skip over different parts as needed. I use Heading 2/H2 tags for each section of my blog post, and Heading 3/H3 tags for subsections, including related links from my website. In order to make my headings easier to read, I also add additional CSS that makes the font for my headings large and in bold print.

Related links

Using larger font sizes

My visual impairment keeps me from reading standard-sized print, so my website naturally has larger font sizes so that users with low vision (or just people who aren’t wearing reading glasses) can read content more easily. However, users can also resize text by zooming in on the website, or using the ctrl-+ shortcut if they find that they still need a larger font. Since I use WordPress, I was able to edit the text size for my website in the Custom Text section of my theme, though I am including the CSS below as well.

Code to implement

font-size: 250%;

font-size: 24pt;

font-size: large;

Related links

Font-family: Arimo

My favorite font from the perspective of a student with a print disability is Arial, as I prefer sans serif fonts and I like that I can tell the letters apart easily. The Arimo font is the equivalent of Arial for websites and it is easier to read on screens. I use the Arimo font-family for all of the body text on my website so that users can easily read text and links without any issues.

Code to implement

font-family: Arimo

Related links

Adding alt text for images

Alt text tells people what is in an image, such as text, colors, or basic essential details. If an image fails to load, alt text will display in its place, and search engines also index alt text information and consider it a factor when determining search engine ratings. More importantly, alt text provides assistive technology users with information about what is in an image, and the inclusion of alt text is a critical component of designing an accessible website for users with visual impairments. I’m able to add alt text when uploading a new image to my website without needing additional code, though users can also add the CSS alt tag to their image as shown below.

Code to implement

alt="Six CSS Accessibility Tweaks I Made For My Website. How I made my website easier to read for users with print disabilities and visual impairments by adding additional CSS to my WordPress theme" />

Related links

Final thoughts

I’ve learned a lot about web accessibility since I first started my website, and sometimes find it surprising that I managed to start a website that was missing so many critical accessibility features. However, after taking the time to learn more about web accessibility and learning from others, I’m proud to see how my website has improved dramatically with not only implementing accessibility features but teaching others to implement them as well. I hope this post on CSS accessibility is helpful for others!

Six CSS Accessibility Tweaks I Made For My Website. How I made my website easier to read for users with print disabilities and visual impairments by adding additional CSS to my WordPress theme

Leave a Reply

%d bloggers like this: