As someone who both uses the web every day and creates websites for a living, It's very difficult to imagine how someone living with a disability interacts with the same systems in a much different way. The way we use these technologies has become so ingrained in our brains that we forget that these technologies are much more difficult for people to use if they have any sort of visual, auditory, or mental impairment. Here are my recommendations for making web applications more accessible for all people.

Websites are primarily built using a markup language called HTML. A sample HTML tag may look something like this:

<div class=”page-text” > Text Goes Here </div>

This HTML makes up a web page, with each tag corresponding to a different element. Depending on what the element is, there are certain attributes, like class, that can be added to the HTML structure to make the experience of users with disabilities much better. It's important to note that any of these recommendations will only improve the experience for all users, and will primarily not even affect users who are not disabled.

Most people could never fathom living without being able to see. But for many, lack of sight is nothing more than a reality they have to live with. However, navigating a website is not impossible without being able to see. Most people with visual impairments use a screen reader to navigate websites that will read out a website's code in a way that makes sense to the average user. While there are some best practices to make sure a screen reader can read your site well, screen readers work with basic HTML by default.

The bottom line is, choosing your tag carefully is crucial to ensuring your site is accessible. You could create a website using only <div> tags, and your site would work perfectly fine for anyone that can see. Anyone using a screen reader, however, would instantly get completely lost on your site. Instead, use tags that are descriptive of the elements that they contain.

For example, use <nav> tags for your navigation, <button> tags for buttons, <h#> tags for headings, etc. By using descriptive tags, the screen reader can accurately tell a blind user exactly where they are on a page. It is especially important to use <button> tags for clickable elements that aren't links, so that any user with a screen reader knows that they can interact with that element.

Another useful tip for writing code that helps blind people navigate your site is to write a unique title for each page. The <title> tag is what controls the text in the top of the tab. While many developers tend to write a generic title for the entire site, this can make it extremely hard for blind people to distinguish which page they are on, which in turn makes it very difficult for them to navigate the site.

It's important that any links on your site don't just say “Read More”, or “Click Here”, because a screen reader will skip all of your links if their content is essentially worthless without context. Another thing that people who can see don't consider from a blind person's perspective is imagery. Its important to make sure that all of your images utilize the alt attribute, which displays text when the image isn't rendered correctly. The alt attribute is also what screen readers use to convey the images to blind users.

Contrary to what you might expect, the screen reader doesn't just read all the text on the page. Similar to the alt attribute for images, other tags can use the role and aria-label attributes to tell the screen reader what the tag is and what it's used for. These attributes greatly improve the navigational experience for blind users. Other important considerations for visually impaired users include reducing captcha usage, using rem units for font-sizes, and making sure your web pages are easily navigated using the keyboard instead of a mouse.

Many people don't realize that deaf people have trouble navigating websites, because web interaction normally only involves the sense of sight and the sense of touch. However, many people fail to consider that reading levels between deaf people vary drastically, as it's much harder to learn how to read without being able to hear. As a result, it's crucial to make sure web pages are easy to read. Even the average user doesn't want to read a website that's written like a dissertation. When using videos, it's important to make sure they have closed captions or an associated video transcript. Even people who can hear often prefer to turn on captions to help them follow along with a video.

When talking about accessibility, it's very easy to forget that some people can see and hear but still don't interact with the world in the same way as everyone else. For people who are color blind, viewing a website can be extremely difficult depending on the site's styles. There are several different types of color blindness; red-green, blue-yellow, and complete color blindness to name a few. To help people that are color blind, don't use two colors together that are easily confused by colorblind users. If you must, use large amounts of both colors so they are more easily distinguishable.

Don't use two colors together that have similar hues or temperatures together. High contrast is very important when choosing colors. However, the biggest takeaway when choosing color is to not let your key messages be reliant on color. Use different words, bold text, and use images to get key points across.

When creating a website, make sure it works well across all browsers and all devices. It's critical that your site is accessible and easy to use from any device. The best way to make sure your code is accessible is to use people with disabilities in testing your projects. They will make it very apparent what works for them and what doesn't. These tips will make the world wine web a better, more accessible place for all users.