When building a website, there’s a critical component that is often overlooked: accessibility. Accessibility refers to making the website, or any specific scenario, able to be used and enjoyed by those with disabilities. In the case of a website, that could range from what the text looks like to the functionality of forms. Let’s begin by breaking down some key concepts you want to pay attention to when making your site accessible.

• Alt Text: when using images on your website that serve a purpose, you can use alternative text to provide a description of the image’s purpose on the page. For example, a university’s website may have an aerial image of their campus, and alt text can provide visually impaired users that the campus is by the water or very spread out. Similarly, it’s important to add captions to any videos.
• Using Appropriate HTML Elements: It’s critical to select the ‘headings’ option when creating headings on a page, instead of simply increasing the size of the text to act as a visual heading. This allows users with screen readers to hear that there is a heading and understand that a new topic is going to be addressed.
• Keyboard Friendly Websites: For the visually impaired, they rely on their keyboard to navigate sites as a mouse cursor serves little purpose. For that reason, it’s important that all ‘clickable’ elements, such as buttons and forms, can be navigated using only the keys on a keyboard.
• Avoid Timed Elements: In order to provide an equal experience for all users, it’s advised to avoid elements that disappear after a short period of time, such as in a slideshow. This eliminates the time limit on certain features, which could put some users at a disadvantage if they aren’t able to access the same resources consistently.
• Zoom-In Feature: Make sure your website can be seen and interacted with in a similar way when it is zoomed into, whether that is for the visually impaired or for general users who may need to zoom in for their own comfort. If your site doesn’t work in the same manner, you are automatically disadvantaging those who can’t use it as-is. Similarly, it’s important that your site can be used on any size screen, as accessibility technology may not be available on every device.
• Use High Contrast Colors: Using colors that are difficult to read against each other isn’t only frustrating for your general website users but can provide challenges to understand the material for those who rely heavily on clear visuals. For that reason, let’s look at what accessible text does and doesn’t look like:

To meet the WCAG (Web Content Accessibility Guidelines) standards for accessible text, your colors must contrast by at least a 4.5 to 1 ratio for paragraphs, and 3 to 1 ratio for large text. This is what inaccessible text may look like:

What is Accessibility?

On the other hand, text that meets WCAG standards may look like this:

What is Accessibility?

Overall, there are many arguments as to what makes this text accessible, but the most important one is the contrast. By providing such a stark contrast against the white background of the page, visually impaired users would be able to zoom in, considering that you’ve optimized your page to be able to do so, and read the text with relative ease, compared to the first example that is difficult to read for users who aren’t visually impaired. In fact, when you scroll through this page, you are more likely to notice the above example because it is bold, so it stands out, and it’s a color that doesn’t take any thought to understand.