Using this list should result in highly accessible (though not necessarily perfect) site. If you are unsure of what a heading is referring to, please refer to the associated links for more information.
Using an “accessibility ready” theme is solid foundation for a more accessible site. Themes with this label have gone through extra steps to validate their accessibility.
Themes control how your site looks, which is important for things like contrast that impact readability for all users. Themes also control other important things, like how menus work for people who use screen readers or use special controls instead of a mouse.
If you choose to go with a theme that is not on this list, it is still possible for you to create an accessible site; just know that it may take a bit more time and a more in-depth knowledge of coding and web design in order to do so.
Think about headers (h1, h2, h3, etc) like an outline for a paper, rather than a way to achieve decorative effects. Headers should go in order and can have other content like paragraphs or images in the order.
Patterns like H1, H2, H2, H3, H2 are fine in the same way that outlines have different levels of topics but patterns like H1, H3, H4 would not be valid because the H2 level is skipped.
A lot of website design revolves around visual appeal, such as color, layout, and interesting graphics or animation. A well-designed website should be physically easy to read for all users. Generally speaking, following the below guidelines for accessibility not only makes a website accessible, but usually also means good ol’ design!
Color and Contrast:
As you think about what colors to use on your website, keep in mind the contrast between the background and the images or text in the foreground. The stronger the contrast that you choose, the more accessible the page is to users with visual impairments or color blindness.
Another important part of color has to do with color used to convey meaning. While you can use color as one way to convey meaning, try to refrain from using color alone to indicate something. If you do use color to denote an important item, also use a non-color related indicator, such as an asterisk (with an explanation).
Text is at the heart of just about every site. Here are some principles to keep in mind when thinking about appearance of the text on your site:
Sans Serif fonts (i.e. fonts without serif) are typically easier to read than serif fonts are for persons who are visually impaired. Serifs are small tails attached to letters, which can distract the eye, or cause the eye to work a bit harder when reading. As a result, sans serif fonts are just easier on the eyes for most people. Popular sans serif fonts include Arial, Tahoma, and Verdana. Times New Roman and Garamond are serif fonts.
Avoid tiny text. If you choose to use it, make sure there is a way to adjust the size of the font on your site.
Avoid blinking text. It’s generally distracting, and may be falling prey to a visual cue to indicate meaning that is not conveyed by any other means (read more about blinking text here). If it blinks at a rate of more than 3 times per second, it’s also a seizure trigger risk!
The idea behind a properly formatted link is that the user should know that it’s a link, and have a general idea of where the link will take them when it’s clicked. Typically, a link will be delineated as text that is a different color to begin with, or changes color when hovered over with the mouse pointer. It’s most helpful to visually differentiate link text even more by having it underlined. Underlining helps make the link visible to people who might perceive color differently.
If you’ve been reading this site in order, you may be saying to yourself ” That’s a visual-only indicator! That’s not allowed.” This a bit different because screen readers recognize links automatically, and will tell the user that something is a link. Screen readers literally announce it by saying “link” followed by the words that make up the link.
The other important part to good links is the actual text. Link text should be:
Unique to that link (don’t have a bunch of “click here” links repeated on a page)
Descriptive (when the screen reader reads the text make it say something useful)
Real words (i.e. not a url)
1. Unique to that link
Text that is unique to that link means that the words in that link text are found only one time on the same page (unless they link to the same thing). When a screen reader reads a link, it will announce that it is a link followed by the text that makes up that link. So if your link says something along the lines of “read more here,” multiple times on the same page, a screen reader user will likely have a hard time keeping track of what that link leads to. If the user is just navigating specifically to links only on the page (a common practice), there is no way of knowing which of those links links to the page they want to read more about.
When we say descriptive, we don’t mean “click this underlined blue text link to go to my favorite website www.myfavoritewebsite.com because it’s the best!” We mean describe what the link is linking to. “Read more here” is somewhat descriptive. You know if you click the link, you will get to read more about something. But we can provide better context. An example might be “click here to visit my favorite website.” You know that if You click that link, you will be taken to my favorite website.
3. Real Words
Use words for links rather than plain URLs. Links in a page like www.myfavoritewebsite/thisisthebestplaceonearth/iamawesome.com are not only cluttered to a sighted user, but a screen reader will announce “link” and then read that url out loud character-by-character since it is not composed of recognizable words. That is a very unpleasant experience.
Images and Video
All informational images should have (appropriate) alt text.
Alt text (literally the text that is an alternative to the image) is read by a screen reader when the user cannot see the image. This is where you want to make sure that you’re conveying the same information that is contained in the image. Most users of screen readers indicate they do not want alt text for decorative images, which is documented here at webaim, for example. Decorative images tend to be present mostly for visual appeal, rather than conveying information.
Like many areas of accessibility, there is no “one size fits all” or clear-cut formulaic way to determine the best alt text for an image, but there are some things to keep in mind. You need to take into account the context and your intent. Try asking yourself the following questions:
What text surrounds the image?
What did I mean to convey when I decided to include the image?
Why did I include an image here, rather than no image at all?
Does the image contain text that needs to be conveyed?
These questions should be answered in the alt text of the image, in a concise manner.
Here is the image from the top of this entry again:
The alt text for this image is “Screenshot of arrow showing that the alt text box in WordPress is the fourth entry field from the top when uploading media. Text overlay indicates that alt text should only be used for content images, not for decorative images.” This describes the location of the alt text box, which is the main take away message from the image, as the arrow is clearly pointing to the alt text box to indicate its location. It also describes the included text overlaid on the image, as this is not accessible to a screen reader (for the screen reader, the text is just a part of the image; it’s not actually interactive text).
This is not the one and only perfect alt text for this image. However, it includes pertinent information at the generally acceptable level of description; it describes the overall image and its intent clearly and concisely. It is longer than is generally typical because it includes a text overlay that is not accessible to the screen reader; however, it does not go overboard by describing unimportant characteristics, such as colors, fonts, or other text fields that are in the screenshot, but not related to the purpose of the image.
Videos are a great way to enrich an experience, demonstrate a task, or provide a visual supplement. When using video, it’s imperative that videos be captioned, so that there is text available for those who cannot hear the audio in a video.
For the most common form of website video–embedded YouTube videos–captions are not always readily available and even when they are, accuracy is not always optimal. There are two things to keep in mind with captioning with YouTube videos:
1. Is it captioned at all?
The vast majority of the time, the video owner is responsible for making sure that captions are available. You can check and see if a video is captioned by looking in the bottom right hand corner of the video player; if a “CC” is present, such as in the image below of a TEDTalk, the owner of the video opted to have the item captioned. If a “CC” is not present, your video is not captioned.
2. How accurate is the captioning?
All captioning is not equal. Make sure to watch your video with the sound off and captioning on prior to using it on your site. Can you understand the captioning? Does it cover everything it needs to? By doing this, you can check to see if the captioning provided allows for the understanding you are aiming for by using a video supplement. If it doesn’t then you can fix it.