How to Create an Accessible Website

Diversity, inclusion, and accessibility are at the forefront of trending topics in business and technology. Marketing teams should ensure you are creating an accessible online presence for everyone as an essential part of your brand. Even with modern tech advances, online platforms like websites, e-mail newsletters, social media posts, etc. are not automatically adapted for accessibility for visitors who are blind, deaf or hard-of-hearing, or may have mobility issues or cognitive disabilities. Because of this, a large portion of the population gets forgotten.

By adapting your website, e-mails, social posts, and other online platforms to be more accessible, you will provide anyone interacting with you digitally with a more positive and engaging experience.

How do to create an accessible website for all visitors? It may seem overwhelming to undertake such an initiative, but there are a few easy changes you can make to improve your online experience.

1. Add Captions to Audio and Video Media

Whether you embed a video or provide an external link, all audio and video media should include captions that align with the audio directly. Guidelines for captions vary, so it is best to outsource caption curation to a company that specializes in creating descriptive captions for deaf and hard-of-hearing people.

If outsourcing is outside of your budget, there are a multitude of websites and some (limited) free services that can provide these for you. Be sure to edit and double check the captions created to ensure they match up with the audio and video provided prior to publishing.

2. Format Content for Screen Readers to Create a More Accessible Website

When creating content, it is important to follow specific formatting recommendations to provide an accessible experience for blind, low-vision, and colorblind individuals.

Screen readers work more efficiently when these guidelines are followed:

• Limit the use of tables, which can confuse the flow of content.
• Use actual formatting tools such as using “header” functions to create each header (i.e. Title, Header 1, Header 2, HTML formatting, etc.) and bullet points to create lists.
• Use a simple font (no more than one or two), no smaller than 11pt in print.
• Avoid typing long phrases or sentences in ALL CAPS.
• Do not use color to convey meaning (the meaning will be lost for blind or colorblind individuals).
  • An example of this is page navigation: if the only distinction that you are on a current page is the color of that page’s tab, that may not be enough for someone who is colorblind to distinguish which page they are currently browsing.
• Use high contrast colors such as black on white, yellow on black, white on brown, etc.
  • Free websites like this Color Contrast Accessibility Validator can point out any problem contrast combinations presented on your website.
• Use descriptive hyperlinks; rather than including the URL, embed the link in the title of the page to which the link redirects.
• Enable zoom features on your site, allowing for visitors to zoom in on smaller text.
• Generate a text description for complex graphs to include alongside the graph itself.
• Create alternative text for images that describe the image in detail.

Perhaps one of the most complex but important screen reader formatting details is adding alternative text. Alternative text (alt-text) content depends on the context of the image, and should include the purpose of the image, the surrounding text on the page, and a description of the visual image itself (see examples below).

Examples of Alt-Text for Images

 

 

If the Partner Marketing Group logo above is shown simply to indicate the landing page is associated with The Partner Marketing Group, then the text could simply say “The Partner Marketing Group logo.”

If the logo is used with a link attached, as is often the case on websites or e-mails to direct to the company website, the alt text could read “The Partner Marketing Group home page” or “The Partner Marketing Group logo, link to homepage.”

If you are using an image in line with text, as part of the content, be as concise as possible with text. For example, if we were to display the logo in place of text such as “Welcome to ” the text would simply read “The Partner Marketing Group” so the screen reader flows accurately.

Tip: The best way to know if you’ve done a good job with screen reader accessibility is by using one of the many free screen reader tools available to test the screen reading yourself!

3. Keep Access Top of Mind on Social Media

All the above guidelines can transfer to social media posts and pages, but there are a few other things to keep in mind when posting on social media as well.

When creating posts, limit the use of hashtags if you can. But, if you’re like most companies and capitalizing on hashtags to build awareness, be sure to capitalize the first letter of each word. For example, instead of #thepartnermarketinggroup, you would use #ThePartnerMarketingGroup. Capitalizing each word helps screen readers distinguish words from each other, but also helps those with dyslexia or difficulty distinguishing word patterns to separate each word from the phrase.

While alt-text has been discussed in a generic setting, it looks a little different on each social media platform. Each platform has their own alt-text guidelines and best practices so be sure to review them. For reference, here are the guides to alt-text for Facebook, Instagram, LinkedIn, and Twitter. As a general note, it is also good to include a description in your post at the end of the content, such as: “Image description: (insert alt-text here).”

4. Do What You Can to Create an Accessible Website!

Overhauling your online presence all at once may not be possible. After reviewing your website, you may be thinking, “Wow, we need to do more than I realized!” The fact that you’re committed to making your web experience more accessible is what matters most. Doing something is better than doing nothing, so start small if you need to and work toward a more accessible online presence at a pace that works for your company. Most, if not all, of these guidelines are free or affordable, and relatively easy to do once you know the basics!

Note: Most of the information available here was obtained with the help of guidelines for digital accessibility created by Harvard University, the Washington State Board for Community and Technical Colleges, and The Whole Person.