1. Add Alt Tags to Your Images

Alt tags, also called alt text or alt descriptions, are snippets of copy that describe an image. Unlike a caption, these descriptions are invisible – they show up in the code but will not normally be seen by visitors to your website. These tags will show up in the place of an image if the image does not load, or, on some websites, they’ll show up when a user hovers over an image.

Alt tags are important for accessibility as they help users who navigate websites using screen readers! The screen reader will read the alt tags aloud to describe the images to blind or visually impaired users. If no alt tag is defined, a screen reader will say “image,” giving the visitors no information on what the image displays!

Go through your website’s media library; there should be a section where you can add alt tags to your images. Be mindful that the tag should be able to be read in a timely manner but should also accurately describe the images.

Examples:

• Use “maple tree with yellow and orange leaves” vs. “tree.” This will help the user better understand what is being shown.
• Use “young orangutan in a forest that is facing deforestation” vs. “orangutan.”

PRO TIP: Having correct and appropriate alt tags help your website’s search engine optimization, which can boost your visibility and findability in the search engines.

2. Make Your Link Text More Specific

By far, one of the easiest fixes you can make to your website to make it easier to use for all people, including those with disabilities and impairments, is by updating your link text to be a bit more specific. Look through your website and find all the links that say something like “Click Here,” “View Now,” “Read More,” or “Register.” It has become a common practice on websites to make links and button text very short, but that is not helpful for your visitors.

A link that says “Click Here” is not descriptive enough and is very ineffective for screen readers. Screen readers can go through a site and find all the links to lead them to the information they’re trying to find (similar to how sighted users see the links in a particular treatment, typically blue and underlined). If the link text is “Click Here,” that is all the reader will say aloud. The reader will skip all the contextual information and only read the link text.

Rather than using short link text, make your text descriptive.

Examples:

• “Click Here to Donate to Our Organization” should be “Donate to Our Organization“.

• “To Learn Where Your Donation Goes, Read More” should be “Learn Where Your Donation Goes“.

3. Ensure Your Font Size is Large Enough

Many web users have vision problems, whether they have strong prescription eyeglasses or have some type of visual impairment. Have you ever looked at your parents’ computer screen and noticed the font size was quite large compared to what you’re used to on your device? This is because their eyes need a larger font and magnified view. This should make you think about the font size of your site and check if it could use some adjusting.

Starting with mobile, your site’s font size should not be less than 16px. As screen sizes go up, so should the font size. So, if your site has paragraph text on mobile that is 16px, it should be in the 18-22px range on desktop!

4. Contrast and Color

Another excellent way to ensure your website is readable, besides adjusting the font size, is to make sure the colors you’ve chosen for your site provide enough contrast to make text legible.

White and black are the two most contrasting colors you can use together, which explains why so many websites use simple black text on a clean white background. The higher the contrast ratio of text color to background color, the easier it will be to read.

The Web Content Accessibility Guidelines have specific recommendations for the amount of contrast you need on your website. Useful tools such as these can help you confirm you have enough color contrast:

• ColorSafe (Put in the background color, font size, font face, and font weight; it’ll show you some options for your text’s color).
• WebAim Contrast Checker (Input the color codes for your background and foreground, and you’ll get a Pass or Fail per the guidelines).

Go through your website and check if different elements have a high enough contrast. If they don’t have proper contrast, switch it up!

• Buttons (button background color and button text color)
• Body copy (background color of block and text color)
• Navigation bars (background color and nav item colors)
• Footers (background color and footer links)

5. Adjust Your Headings

A final simple change you can make to your website is to adjust the headings on your pages and ensure they are appropriately labeled. When you’re working on a page with content, typically, you’ll have the page title, which should be the largest.  And, on the backend, the page title would be tagged as an H1. This stands for heading 1. The page’s title should be the only text that is an H1. Then, the subtitles should be H2 and a little smaller. Other headers can be tagged as H3 to H6!

Not only will this help your web pages be more organized, but it will help screen reader users. These users can tab through the page and find only the headers to get them to the desired section. If your titles and headers are labeled correctly, this will be easy. If not, it’ll take screen reader users (and non-screen reader users) much longer to navigate!

Rookie Mistake: Don’t choose a particular heading type because of how it looks visually. Choose it because of the organization and hierarchy of the website!

At the end of the day, these are 5 great changes to improve accessibility and put you on the path to improving the web experience for every type of visitor.