As someone who regularly writes about assistive technology and accessibility, I have taken a lot of steps to ensure that my content is accessible to as many audiences as possible- not just people with low vision or blindness. One of the areas I have been exploring a lot more in the last few months is cognitive accessibility, as cognitive disabilities represent the largest number of computer users with disabilities and designing with cognitive accessibility in mind can benefit all users, not just those who identify as having a specific disability. Here is how I optimize my website for cognitive accessibility, taking guidance from users and the Web Content Accessibility Guidelines 2.1.
What is cognitive accessibility?
From the Mozilla Developer Network:
“Cognitive accessibility covers accessibility considerations for people with cognition and learning disabilities. Cognitive and intellectual disabilities cover a large spectrum, and may be momentary, temporary, or permanent conditions. For example, dementia and Alzheimer’s are permanent cognitive impairments that get progressively worse. Other permanent cognitive impairments include aphasia, speech and language, autism, ADD/ADHD, dyslexia, and dyscalculia.
An example of a temporary cognitive impairment could be people affected by substances such as alcohol or drugs. Another form it can take is depression, such as when mourning the loss of a loved one, or being momentarily saddened by a tweet or video they just saw online. A third example could be sleep deprivation.”
While these conditions and disabilities may not seem very similar, they do share a lot of the same functional problems. Some examples of these problems include:
- Understanding content
- Remembering how to complete tasks
- Confusion when navigating inconsistent websites
Using a simple blog theme
When I redesigned my blog in 2017, I wanted the new design to be simple yet bold and colorful, so that it could more easily be used by people with low vision. While I have made minor design changes over the years to improve accessibility and readability even more, I was excited to learn that my blog theme already has lots of characteristics that make it easier to use for people with cognitive impairments. Some of these characteristics include:
- A responsive layout with a single-column mobile design so that it can be viewed on any device
- The fonts for titles, posts, and headings are clear and easy to read
- Images contain alt text that can be read for additional context on what is in an image
- Lots of white space throughout the design
- Options for keyboard access- my website is fully navigatable with a keyboard
- Post slider on homepage has auto-play disabled so that users can move between posts more easily
Related links
- My Eight Favorite Free Fonts For Print Disabilities
- Six CSS Accessibility Tweaks I Made For My Website
Avoiding popups and advertisements
One of the most frustrating things for me is when I visit new website and I am bombarded with pop-up windows asking me to subscribe for more posts or to join some form of mailing list. It’s even worse when I close all of those pop-ups only to have advertisements that obscure the content of the page I’m reading, or the advertisements contain videos with flashing lights. I prefer to keep my website looking as clean as possible, and do not display any advertisements or pop-ups on my posts (or anywhere else) as I want to make sure that readers can easily access my posts without distraction. Instead of a pop-up, I have an option for people to subscribe to my blog in the footer of every post and page so that I don’t have to interrupt people reading.
Related links
Structuring posts with titles and headings
Each of my posts have a distinctive title and heading structure so that users can easily navigate between sections and focus on what they are reading. While I originally structured all of my posts with screen reader users in mind, I’ve updated some of my headings in posts so that they help more with comprehension and following along with the text, instead of only writing a few words. I wrote more in-depth about heading structures for documents in a post about creating take-away documents with Microsoft Office Sway, which is linked below.
Related links
- Ways To Read Webpages Without A Traditional Screen Reader
- Creating Take-Away Documents With Microsoft Office Sway
Providing multiple ways to find content
Instead of having users scroll through an endless blog feed with hundreds of posts to find what they are looking for, my website has several options for users to find and engage with content on my website, including but not limited to:
- A search bar for finding a specific post or post topic
- An easy-to-navigate category page
- Post tags linked at the bottom of every post
- The option to explore blog posts sequentially
- Outside of the website, users can view posts on dedicated Pinterest boards
Besides giving users the option to find content in a variety of ways, my posts can also be read with a variety of assistive technology, including screen readers, simplified reading displays like Immersive Reader, or other reading tools.
Related links
Adding definitions of terms and abbreviations when relevant
When writing for Veronica With Four Eyes, I want to ensure that my blog posts could be read by a variety of different audiences, including students, families, educators, accessibility professionals, and people who just want to learn more about low vision. Since it’s impossible for me to know what a reader’s experience is with assistive technology prior to coming on my website, I assume that my readers have limited knowledge on the topic and make sure to add definitions of terms and abbreviations whenever relevant in a post. I also have a pinned post on my homepage about common assistive technology tools that are used by people with low vision.
Related links
Giving links meaningful names
When someone is helping to guide me somewhere, I find it helpful for them to say specific places and directions, such as “the door to building 36 is on your left” or “we’re going to this restaurant now.” It’s not very helpful for someone to tell that the door I am looking for is “over there” or for them to not tell me where we are going, as I have no idea where “over there” is and I generally like to know where I am going. The same applies to web links- telling someone to “click here” isn’t overly helpful if they have no idea where “here” is and have no idea where the link will take them. For this reason, I give all of my links meaningful names so that the user knows where a link will take them, and if it will take them to another website. I also give links their own section in my posts so that users can decide whether they want to learn more about a given topic or skip the links.
Related links
- How Do People With Visual Impairments Use Human Guides?
- How To Be An Ally For Braille Users: World Braille Day 2021
Adding summaries to posts so that they are easier to process (in progress)
One of the biggest steps I have been taking to improve my website for cognitive accessibility is adding summaries to the end of my posts so that it’s easy to recap what a given post was about, or people can just read the summaries and still use the information I wrote about. This is still a work in progress as over half of my posts currently do not have summaries, but it is something I am actively working on to help teach even more people about low vision and assistive technology.
Summary of how I optimize my website for cognitive accessibility
- My blog theme is simple and consistent so that users can easily identify posts and pages, with clear and easy to read text
- I do not have any pop-ups or advertisements on my website, as they can be distracting or difficult to close
- My posts are structured with titles and headings so that users can easily focus on what they are reading
- There are multiple ways to find content on my website, including category pages, tags, and the search bar
- Whenever I use specific assistive technology or disability terms or acronyms, I define them in the text
- All links have descriptive and meaningful names so users know what page the links go to
- I have text summaries at the end of posts so users can recap what they have read, or just read the summaries
