If a website is accessible, it means that it was built and designed for all people to use it. Websites are a tool for people to find information, learn, read the news, donate to causes that matter to them, shop, and more. If your website is unusable for some people, you might be leaving information, opportunities, or money on the table.
When a website is truly accessible, it will be user-friendly, even for people living with auditory, cognitive, neurological, physical, speech, or visual disabilities. Also, some users have situational limitations such as they lost their glasses or they are in an environment where they cannot listen to audio. Even something like slow internet or a small screen can be considered a situational limitation.
These users may use accessibility tools that come built into browsers such as magnification, custom styling, font size adjustments, keyboard shortcuts and more. Or they might use specialty tools like screen readers, programs that read out what screens are showing users (mainly used by those with visual impairments and blindness), only a keyboard (some users cannot use a mouse) or voice recognition tools for hands-free interactions. Other tools people may rely on are closed-captioning and touch screens.
Ensuring your site is accessible allows people with these disabilities or limitations to have a better web experience, which can lead to increased engagement and response. Here are a few quick and easy changes you can take today to make your website more accessible.
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 of 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 there is no alt tag defined, a screen reader will simply say "image" giving the visitors no information on what the image is displaying!
Go through your website's media library and 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.
Use "maple tree with yellow and orange leaves" vs. “tree”. This will help the user get a better picture of 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
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 simply 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 simply “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.
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.
Many web users have vision problems, whether they just 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!
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 web site. 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 and it’ll show you some options for what color your text should be).
- 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 like buttons (button backgrounds color and button text color), body copy (background color of block and text color), navigation bars (background color and nav item colors), and footers (background color and footer links) have a high enough contrast. If they don’t have proper contrast, switch it up!
A final simple change you can make to your website is to adjust the headings on your pages and make sure 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 simply stands for heading 1. The title of the page should be the only text that is an H1. Then, 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 section they’re looking for. 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 more time 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 to put you on the path to bettering the web experience for every type of user.
A Few Tools to Help Test Your Site: