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
- A to Z of Assistive Technology For Low Vision
- How Students Can Celebrate Global Accessibility Awareness Day
- How to Celebrate Global Accessibility Awareness Day Every Day
- Choosing High Contrast Color Schemes For Low Vision
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
- What I’ve Learned About Print Disabilities
- Reading Bookshare Titles With Microsoft Word
- My Talk At I’m Determined Summit: Crash Course In Immersive Reader
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
- Pocket App Accessibility For Visual Impairment
- Seven Tips For Adapting To Newly Acquired Vision Loss
- Seven Factors That Make Websites Accessible To The Visually Impaired
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
- How To Create Accessible Assignments With Microsoft Office Sway
- How To Modify Anatomy Diagrams For The Visually Impaired
- Quick Ways To Improve Accessibility For Virtual Learning Materials
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
- Accommodations For Print Materials
- Seven Accessibility Features You Didn’t Know Existed In Microsoft Office
- Learning To Explain Usable Vision
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
- My Eight Favorite Free Fonts For Print Disabilities
- How To Create Accessible Classroom Posters For Students With Visual Impairments
- How I Document Accessibility Preferences With Low Vision
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
- How To Write Alt Text And Image Descriptions For Photojournalism Images
- How To Add Alt Text On Social Media
- How To Write Alt Text and Image Descriptions For Instagram
- How To Write Alt Text and Image Descriptions for the Visually Impaired
Summary of CSS accessibility tweaks I made to improve 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.
- Use Text-Alignment: Left to improve visual tracking
- Adjust line-height on pages and posts
- Define headings
- Use larger font sizes
- Have text displayed with the Arimo font family
- Add alt text to images
