by Ming Montoya-Tang •
08.08.2022
Managing Partner
she/her/hers
Your website is your organization, and it’s always important to make sure it’s up-to-date and working well. If you want to be a good citizen online, then you’ll also want to make sure that the website can be used by people with disabilities. This isn’t just about being open and inclusive—it’s also about following the law. The Americans with Disabilities Act (ADA) requires all public websites to be accessible for people who are blind or have low vision or dyslexia or cognitive disabilities like autism spectrum disorder, traumatic brain injury (TBI), Alzheimer’s disease or other forms of dementia. We’re here to help!
Reading level
If you don’t have the tools to accurately test the reading level of your website, you can use a tool like Ease.js or Flesch-Kincaid Grade Level. The easiest way to explain this is with an example:
- The Flesch-Kincaid Grade Level method uses a formula that takes into account sentence length and syllables per word, but does not take punctuation into account
- The Ease.js method uses another formula that takes into account sentence length and punctuation as well (and also offers more options for customizing the results)
Both methods should result in a reading level between 5th and 8th grade; however, this may vary depending on which versions of these formulas are used. Either way, it’s important that your website’s text be at approximately the same level as what’s found on its pages so that it doesn’t appear too difficult or intimidating for users with disabilities who might visit them often (i.e. those with cognitive disabilities).
Color contrast
Color contrast is one of the most important elements for making digital products accessible. It’s also one of the easiest to get wrong.
A lot of people with color blindness and low vision can’t see colors very well, so it’s important to make sure that you’re using colors that they can see clearly. For example, if you have a button which says “Login” on it in green text, then the background should not be green as well. If it was green text on a green background, someone who is color blind would have trouble telling which button they were supposed to click on!
Another reason why color contrast is so important for people with low vision and color blindness is because reading small typefaces can be difficult for these individuals even when there aren’t any other distractions like poor lighting or glare from nearby windows (which are also common conditions in offices).
Keyboard navigation
Keyboard navigation is the term used when a user can browse and interact with a website without the use of a mouse. This can be incredibly helpful for people who have difficulty using their hands, such as those with movement or cognitive disabilities that make it difficult to use a mouse. It can also benefit users who have limited range of motion in their fingers, like musicians and other musicians.
Keyboard shortcuts are especially useful because they allow people to navigate around the internet quickly and efficiently. For example, if you want your browser to go back home on your phone’s web browser but don’t want to touch anything because it might mess up all the work that you did today while being very careful (like me), simply press ‘Ctrl + Shift + T’ and voila! The page will take you back home instantly!
Images, alt-text, and videos
Alt-text is the text that appears when someone uses a screen reader. It should be descriptive, but not too long; relevant to the image and not just a description of what’s happening in it; visible to people with color blindness; and meaningful—not just repeating what is already on-screen.
For example, let’s say you have a photo of a dog wearing sunglasses with the caption “Dog in sunglasses.” It’s important that you make sure the alt-text reads “A light brown dog wearing black sunglasses,” so that someone using assistive technology can understand what they’re looking at. But also consider if the caption is actually adding richness or applicable information. If you are using a screen reader to scan an article with many images, the time that it takes to skip over irrelevant descriptions can annoy the reader. Consider what actually makes sense to caption, and then invest time, effort, and energy into describing it in an interesting manner. Ask yourself, why is this image here? What is this image trying to provoke with the audience?
Skip navigation links
- Skip navigation links are not visible to the user.
- Skip navigation links are not visible to screen readers.
- Skip navigation links are not visible to some users with cognitive disabilities, who may have trouble remembering information they need or finding it.
For example, take a look at this website’s main page: The first thing you see is “Home,” which means that if you’re using a screen reader and want to get started right away, you have no idea what section of this site has all the content you’re looking for. You’d have to scroll through everything else on the page until you reached “Home.”
Or take another example: Let’s say there were two sections called “Events” and “Entertainment.” And let’s say that those two sections both had their own list of articles (a group of similar pages). If those two lists were identical but weren’t sorted alphabetically by title or date published—or if one section had more articles than another—it could be very confusing for someone who uses assistive technology like a screen reader because there wouldn’t be any way for them to know which list was going to give them more relevant results when they searched for something specific by typing something into their browser bar!
Language attributes
In the world of accessible design, there’s nothing quite as important as the language attribute. You might think it’s a cookie, or maybe your favorite pet. It helps us identify documents on the Internet and how they should be processed by screen readers. The language attribute is an element that identifies the natural language of text within an HTML document. This means that if you want to write in English, you should use lang=”en”. If you want to write in French, then lang=”fr”. The lang attribute has been around since 1999 when HTML 4 was released and still remains one of my favorites things about web accessibility!
Website accessibility and inclusion
Making your website more accessible to people with disabilities is one of the simplest things you can do to improve your organization’s efforts to be open, inclusive, and accessible.
For example, let’s say that you’re a nonprofit fighting for transgender rights. If you make sure that your website mentions gender-neutral bathrooms, this could help encourage people who have felt marginalized in their own communities to donate—even if they are not transgender themselves! People who feel like an organization is welcoming will be more likely to give money or volunteer time than those who feel excluded from the community. And since these donors may also be young people or minorities themselves (who tend not to donate as much), making accessibility a priority on your site can help increase donations by reaching out to groups that often get left out of traditional fundraising methods. By doing so with an eye toward social justice and equality, organizations like yours can become leaders in creating equitable societies for all!
There are many ways to make your website more accessible. To get started, try following the tips listed above and test your site on a variety of browsers and devices. Or contact us, and we can run your site through our auditing process. Making sure that anyone can use your website is an important part of being open and inclusive, so don’t forget about it!
