Last month, I took a look at how you can plan your website to be available to the broadest audience possible. By separating what you really need your website to do from what would be nice to have, you should have identified the core functions of your website. Now that you’ve done that, what steps can you take to ensure that those core functions are available to as diverse an audience as possible?
Text alternatives
Not everyone who visits your website is able to see it as you or your web designer intended whether because of vision impairments, slow connection speeds, broken images, or other reasons. To assist in these situations, your web developer can code text alternatives for any images and sound files on your website.
How does this help? Well, individuals who are unable to see the site can have text read aloud to them through screen reader technology. Since images can’t be read aloud, text alternatives are used so that any information conveyed in the image is shared. Without it, these individuals miss out on this content. Of course, decorative images don’t need this because they don’t add to the meaning of the website, but if images are used instead of words on the website, the text alternative is a good back up.
Additionally, text alternatives for sound files is also important for people who may not be able to hear your website, whether through hearing impairments or being in an environment where sound is unavailable, perhaps at a public library computer.
A secondary benefit to text alternatives is that they provide search engines a way to know what your images and sound files are about since they cannot see or hear your website as humans can.
Semantic markup
Semantic markup is just a fancy way of saying that the code on your website should match the meaning of the information. Here are some examples of what that means:
- headings are coded as headings
- quotations are coded as quotations
- items for emphasis are coded as bold or italics
- information in tables is coded with proper columns and rows
- forms are coded with labels that match each form field
Many times, these are coded correctly. But if you are coding something as a heading just because you want it to appear big and bold, you should know that screen readers are telling their users that this is a heading, and if it’s not, your site visitors may be confused. Whether your designer codes for you or you are using software like WordPress for your website, remember to code your text appropriately to the content.
An eye for color
Colors aren’t rendered identically from one screen to the next, so your website’s colors won’t always be consistent, either. So while you may need to give up perfect color control, you should also make sure to never communicate any information exclusively by color. Your site visitors who are colorblind will appreciate this. For example, links should never be differentiated by color alone; you can also underline them as well.
While we’re discussing color, it’s also important to make sure that there’s plenty of color contrast between text and its background. Two shades of green on top of each other may be difficult for some people to differentiate.
You can try an online color tester for your website to see how you’re doing.
Links
It’s been popular for years for links to simply read, “click here,” as in, “For more information, click here.” However, for individuals using a screen reader and skipping through to links, that doesn’t help very much if read out of context. It might be more helpful to phrase the entire link with more context clues such as, “Learn more about our kitchen design services here.” This makes very clear what’s behind that link if it’s read out of context. Two bonuses for greater context in your links are that they give better clues to search engines what that link is for, and since it’s a longer link, it provides more area to click on, which can be especially helpful on small mobile device screens.
Additionally, people who are unable to use a mouse to click on links may use the TAB key to click through links. While this won’t pose a problem on many websites, some others are coded with lots of “hidden” links and form fields that don’t appear on the screen, so they break the ability to use the TAB key effectively. Good coding by your web developer will ensure that this works properly.
Use common sense
While many of these techniques are specific to what web developers and coders do, you as a website owner or manager can do your part by checking with your developer to ensure that accessibility best practices are followed. Additionally, if you update your own website through a platform like WordPress, you can use its tools as they were intended to be sure that the proper meaning is conveyed on your site. A little forethought for how to make your site as easy to use and understand as possible will go a long way to increasing accessibility for all.
