Web accessibility for beginners: 8 ways to make your website more accessible

Web accessibility for beginners: 8 ways to make your website more accessible

The Internet at its core was designed to work for everyone – regardless of ability, location, and language. 

In fact Tim Berners-Lee, the inventor of the World Wide Web himself, has stated,

“The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect.”

– Tim Berners-Lee 

The Internet was a revolutionary invention that was applauded for its ability to break down barriers and improve communication across the globe. 

In general, the Web has continued to succeed in that regard. It’s a place where almost everyone can voice their opinions, participate in online discussions and marketplaces, and connect with one another. 

It has removed the barriers to communication and interaction that many people face in the real world.

Unfortunately though, when online tools, websites, applications, or technologies are poorly designed, they (often inadvertently) exclude people from accessing and using the Web. 

In the same way that physical spaces need to be welcoming, inclusive, and accessible to people of all abilities (for example having elevators and ramps or offering braille versions of written content), online spaces need to comply with specific standards and practices to make them usable by as many people as possible. 

Why does your website need to be accessible?

1. 1. It’s the right thing to do.

Maybe you know someone with a physical disability who is directly impacted by poor website design. Maybe you know that someday you yourself might struggle with your vision or hearing.

Or, maybe you’ve experienced the struggle of a website not loading when you’re in a location with poor Internet connection. Or you’ve visited a site on your mobile device that was clearly designed only for desktop users. 

Web accessibility is key to creating an inclusive online environment for all, regardless of access and ability level, and the bottom line is that making your website accessible is the right thing to do.

This includes taking into account those who experience blindness or low vision, cognitive or learning disabilities, deafness or hearing loss, speech disabilities, and physical disabilities. 

It also includes designing for people without disabilities who, for example, are using a smartphone or alternative small screen, have a temporary disability such as a broken arm, are using a slow Internet connection, or are experiencing situational limitations such as being in an environment where they can’t listen to audio. 

2. 2. It’s the law.

Meeting certain web accessibility standards is also the law in many places, though the rules and regulations can vary by area (here is some information for those in Ontario). In that regard, complying is in your best legal interest to avoid the risk of a lawsuit. 

Beyond these moral and legal reasons though, there are also a lot of benefits to making your site widely accessible, for you as a business owner. 

3. 3. It offers business benefits like expanding reach and improving SEO.

If someone has trouble reading the content on your website, clicking a button to reach out to you, or loading a website page, you’ve likely lost that person’s interest and business. 

Prioritizing web accessibility provides a better experience for all users, boosting your reach and increasing your potential audience size. 

It’s estimated that 15% of the world’s population possesses some sort of disability. Excluding these people through poor website design is simply bad business. 

Web accessibility (or lack thereof) is also a component of search engine optimization. In creating a user-friendly website, you’re also creating an SEO friendly site, meaning you’re more likely to rank higher in search engines like Google. 

8 ways to make your website more accessible

While all of this sounds great in theory, it doesn’t mean implementing these accessibility standards is always easy. In fact, it can take some time to ensure your website is up to standard. 

Here are 8 guidelines to follow to begin improving the accessibility of your website. 

1. 1. Add alternative text for photos.

Adding alternative text which describes any photos on your website can be helpful for those who are visually impaired and/or using screen readers (assistive technologies that read information out to users). 

Alt text is also supportive if an image fails to load for someone due to Internet connectivity or bandwidth issues. 

This text can be added directly underneath the image, though in most website builders you have the option to add it specifically as alt text within the site settings. 

Alt text should be both short and descriptive. 

2. 2. Add captions or transcripts for video or audio files.

In a similar way, whenever you are adding media files (such as video or audio) to your website, there should be an alternative way to consume the content for those who have visual or hearing impairments. 

Adding captions or providing a transcript of the dialogue can be helpful in this case. 

3. 3. Utilize contrast and whitespace appropriately in your website design. 

Readability is key when it comes to accessibility and user-experience. 

If there isn’t enough contrast between your website text colour and your chosen background colour, it can make it difficult for those with low vision to read. 

Image from: https://www.audioeye.com/post/what-is-color-contrast/ 

Similarly, if there isn’t enough whitespace on each page, it can be visually overwhelming. (Below is an example of using whitespace appropriately to split up content).

Image of The New Yorker website, via https://elementor.com/blog/white-space-web-design/. 

Use clearly contrasting colours, and add space between letters, words, sentences lines, paragraphs, and blocks of text when building your site. 

This accessible colour palette builder is a great tool for checking contrast levels. 

4. 4. Choose appropriate fonts and font sizes. 

Your font and font size choices need to be able to be comfortably read by website visitors. 

A font may not be legible if the letters are too similar, too close together, too decorative or quirky, or if there isn’t a clear distinction between upper and lowercase letters. 

Image source: https://commons.wikimedia.org/wiki/File:Inkscape_Fonts_-_Vivaldi.png  

While there is no official minimum font size for the Web, it’s generally agreed upon that 16px is a good starting point for body text. It’s also supportive if visitors can resize all text on the page on their end. 

5. 5. Use headings appropriately. 

Headings make web pages easier to scan. 

People who use screen readers can utilize headings to scan the page and jump to the content that applies to them instead of needing to read through the entire page. 

H1 (heading 1) tags are used for the page title. From there, your first subheading should be classified by an H2 tag, and any further subheadings will be H3, then H4, and so on. 

Image from: https://www.med.unc.edu/webguide/accessibility/headings/ 

Text that is bold or enlarged won’t necessarily be recognized as a heading by a screen reader, making these specific heading tags important. 

6. 6. Consistent web page layout and navigation. 

Ensure content on your site follows a consistent layout and pattern. 

This can help users learn to navigate your site pages predictably and quickly, so they can achieve their intended goals easily. 

It also supports those using screen readers, or those who struggle to use a mouse and instead rely on keyboard navigation. 

7. 7. Offer alternative contact methods. 

Providing only a phone number as a means of contact, or requiring that site visitors give you their phone number for you to contact them, may not be accessible to all users. 

Add alternative contact methods such as text or email options, and consider making these contact fields optional. 

8. 8. Avoid content that flashes, is time-based, involves loud sounds, or auto-plays. 

Content that blinks, flashes, moves around a lot, or is very loud, can be overwhelming for many users. 

Avoid these distractions when possible. At the very least don’t have them set to auto-play, and present them with a content warning. 

Auto-play content can also be limiting to those who take more time to read instructions, type, or complete tasks. 

Instead, give users the ability to adjust the timing or volume of these features.

Where do you stand? How accessible is your website?

Utilize this blog post as an accessibility checklist. Where does your website stand? Where could you use some improvements?