This tutorial will walk you through what you need to think about and do in order to create a website and webpages that are accessible to everyone, regardless of impairment or ability.
Accessibility in web design means creating webpages that everyone can use, regardless of hardware, software, or any sensory or physical impairment. This includes, but is not limited to:
- Those who cannot see or use a mouse.
- Deaf users whose first language is sign language.
- Visitors whose primary language is not your language.
- People who use special assistive software or hardware to access websites.
- People who are color blind or can’t see low color contrast.
For the purposes of this tutorial, we will be focusing on different elements of websites and making them accessible for people with hearing impairments and people with visual impairments. However, it's important to keep in mind that those people may not be the only ones who cannot access parts of your site. Keep the above list of people in mind as you're creating in WordPress.
Text may, at its surface, seem like something that's already very accessible. However, text can easily be inaccessible to site visitors with visual impairments. As one of the main elements of your websites, it's important to make sure your text is structured and formatted in a user-friendly way.
Structure
The more structure you can build into your text, the more accessible it is to visitors with screen readers. This means using paragraphs, numbered and bulleted lists, headings, and other elements that give your text definition, rather than keeping it as an unformatted block of words. WordPress themes have up to 6 different heading styles—to make your text a heading, select the piece of text, click on "Paragraph" in the upper left-hand corner of the Visual Editor, and choose which heading you want. (You may want to experiment a bit and see what each heading looks like first—the dropdown list does not show what each of the headings actually looks like.)
Color
In addition to adding structure to your text, it's important to choose a color (or colors) that contrast well with the page background. Choosing high-contrast colors, such as black text on a white background, will help visitors who may have trouble seeing low color contrast. If the background of your page is an image, choose a text color that contrasts well with the colors in the image. If you can't find a text color that works well, then you should probably change the background image.
Also be mindful of choosing colors that, in addition to contrasting, contrast well, especially for visitors who have color blindness. There are several different types of color blindness, each of which affects different parts of the color spectrum, depending on the type. A great tool to use to check the contrast of your colors is Web Accessibility in Mind's Color Contrast Checker. You can input color hex codes or choose from a palette.
Another great tool to use in checking the contrast and visibility of colors is Color Hexa's Color Blindness Simulator. You can search for a particular color using any number of values (hex, RGB, CMYK, or just the name [i.e., "green"]), and at the bottom of that color's page, Color Hexa will show you how that color is perceived by people with each type of color blindess. For example, here is how one of COPLAC's main colors, hex #228D71, is perceived:
Links
The links within your text should stand out so that they are clearly visible to everyone. Best practice for links is to make sure they are a different color than your regular text, and they should be underlined.
Note: WordPress's Visual Editor will always show your links as being blue and underlined. However, this does not mean that your links will appear that way on your site. Blue and underlined is the formatting within the Visual Editor only. On the front end, links will display according to the styling of your theme. If you need to change the styling of your links, you should activate Jetpack and then add custom CSS. You should also to check to see if your theme has link styling available in the Customizer.
Menus are a critical part of how visitors will get around your site. First and foremost, make sure your navigation is in a prominent place on every page and is well organized. Both of these things will help everyone navigate your site.
When creating menus, err on the side of simplicity—try to limit your menus to only two levels (main menu and sub-menu). Any additonal sub-level menus (i.e., a sub-menu for a sub-menu) means that your visitors will have to navigate through multiple drop-down menus, and that navigation can be difficult for everyone.
| Accessible | Less Accessible |
 |
 |
| This sample menu shows an accessible structure: it has just one level of sub-menu. | In contrast, this sample menu is less accessible: it has multiple levels of sub-menus, making navigation difficult. |
It is, however, perfectly fine to have sub-menus from different main menu items. You'll see we've actually done that on this site: there is a sub-menu under "Courses," and another under "Resources." Though they are different sub-menus, they are functioning at the same level (both at the first level under the main menu).
Each of the menus discussed above all have top-level menu items that are pages. However, if your top-level menu item doesn't have a parent page (e.g., if COPLACDigital didn't actually have a "Resources" landing page, but we still wanted to collect the resources under a menu item with that label), you'd use the "Custom Link" option. To make these Custom Link menu items accessible, make sure you input a pound symbol (#) in the URL field:
The # gives visitors the ability to access the sub-menu without having to hover over the top-level item (which is not possible to do on touchscreen-only devices such as tablets, smartphones, etc.). Then you would proceed with the rest of the menu creation as normal:
If you use PDFs on your site, there are a couple different types to take into consideration.
New PDFs & PDFs Converted from Word Processors
For new PDFs (i.e., you've created it in a program such as Adobe Acrobat, or you've converted a Word document into a PDF), a screen reader will already be able to read the text in it. However, to make sure the PDF is fully accessible, make sure that you've followed the same approaches as outlined in the "Text" portion above, especially with regard to using headings. Once you've made sure that your document is properly structured throughout with headings, you can save it as an accessible PDF by doing the following:
- For Windows Users: Save As > PDF, and then make sure you choose "Options" before you Save. The options you should toggle on are: Create bookmarks using Headings and Document structure tags for accessibility.
- For Mac Users: Save As > PDF, and then choose the "Best for electronic distribution and accessibility" option.
If you have access to Adobe Acrobat Pro, you can use its built-in Accessibility tools to ensure your PDF is accessible.
PDFs of Archival & Scanned Documents
PDFs of archival documents (most likely scans of documents) will not be accessible to users with screen readers because they are images rather than text, so keep that in mind as you are gathering research materials to put on your site. To make these materials accessible, you should provide transcripts and/or descriptions of the PDF. These transcripts and descriptions should be available in the same place as the PDF—so, if you have a link to a PDF (or have embedded a PDF) on a particular page, the transcript and description should be on the same page, ideally alongside or below the PDF.
To make images accessible, provide alternative text (also know as alt-text). The function of your image will determine what kind of alt-text you should provide:
- Informative Images — These are images that graphically represent concepts and information, typically pictures, photos, and illustrations. The alt-text should be at least a short description conveying the essential information presented by the image.
- Decorative Images — These are images whose only purpose is to add visual decoration to a page, instead of conveying information that is important to understanding the page. Do not provide alt-text for decorative images.
- Functional Images — These are images that perform a function, such as a printer icon to represent the print function. The text alt-text should describe the functionality of the link or button rather than the visual image.
- Images of Text — These images will most likely (but not always), in the case of COPLACDigital, be of archival materials. A very common example is an image of a newspaper article. The alt-text should ideally provide a full transcript of the text in the image. However, the alt-text can become quite lengthy (especially for newspaper articles)—if this becomes the case, follow Web Accessibility Initiative's guide to alt-text for Complex Images. If it is not necessary for visitors to be able to read the article, the alt-text can be a summary of it.
- Complex Images — These are images such as graphs and diagrams. To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the alt-text.
- Groups of Images — If multiple images convey a single piece of information, the alt-text for one image should convey the information for the entire group.
- Image Maps — These are images with multiple clickable areas. The alt-text should provide an overall context for the set of links, and each individually clickable area should have alt-text that describes the purpose or destination of the link.
For a thorough tutorial of how to address alt-text in each of these scenarios, consult Web Accessibility Initiative's Images Tutorial.
Adding alt-text in WordPress is easy and should be done as you add new media to your site. When you upload your media, make sure you fill in the "Alt Text" field.
If you uploaded images and did not fill in the alt-text field, make sure you go back and add it. This can easily be done in the Media Library.
Color
Finally, as you're choosing images for your website, remember to keep color contrast in mind. Use this Color Blindness Simulator to see how your images would be perceived by people with different color vision deficiencies.
Audio
Provide transcripts for audio that you include on your site. This means that if you conduct an oral history interview but only include a two-minute clip from it on your site, you need to provide a transcript for only those two minutes. Transcription software is not free, so keep that in mind as you consider whether or not to include audio on your site.
Note: For audio embedded using SoundCiteJS, providing transcripts is a bit trickier. SoundCiteJS is not accessible out-of-the-box, so keep that in mind as you decide how you want to feature and include audio. First and foremost, make sure that SoundCiteJS is the most appropriate tool for you to use. For example, you should not use it to include an interview in your site, unless it's just a couple words that exactly mimic the accompanying text.
See SoundCiteJS's examples for appropriate uses of the tool.
To make the audio accessible to visitors with hearing impairments:
- Make sure the audio you are embedding directly reflects the text you've chosen to accompany it.
- Go into the HTML version of your page (the "Text" editor) and add a "title" attribute to the SoundCite HTML with a short description of the audio or music.
Video
Videos that you embed on your site should have captions. Captions are text versions of the audio content, synchronized with the video. YouTube will automatically generate captions (with varying degrees of accuracy) for any video that you upload. No matter what, you will need to edit those captions because they won't be completely accurate, but YouTube is still a good starting place.
If you are embedding someone else's video in your site, make sure that it has captions available. If captions are not available, you should create a transcript for the video—or you should not include the video on your site.
Videos without meaningful audio, but with meaningful visuals, should include descriptions of these visuals in place of closed captions.
*Remember that you should not store audio or video files in your WordPress site.
"Multimedia" means content made up of multiple forms of media, so it can take on many forms. The best way to ensure that any multimedia on your site is accessible is to make sure its media elements (text, images, video, etc.) are individually accessible by following the best practices laid out in the preceding parts of this tutorial.
StoryMapJS & TimelineJS
StoryMapJS and TimelineJS are two of the most popular multimedia tools among COPLACDigital faculty and students. These tools handle accessibility fairly well, but you should also follow these guidelines to improve their accessibility:
- Headlines — Always fill in the "Headline" field for each event (TimelineJS) or slide (StoryMapJS).
- Contrast — When choosing background images and colors, make sure they contrast well with the text. Contrast is a very common problem with both of these tools.
- Images — Make sure any images you include have alt-text. The easiest way to ensure each of your images has alt-text is to first upload them to your WordPress Media Library and enter the alt-text there. Then you would use the WordPress-generated media file URL to include the image in your timeline or map.
- If you are using outside media (i.e., you have not uploaded it into your Media Library), use the "Caption" area for alt-text.
- Video — Make sure any videos you include have captions available.
- Audio — If you include audio, make sure the source (e.g., Soundcloud) has a transcript available and that you link to it (most often done in the "Caption" field). If a transcript is not available, provide at least a brief summary in the "Caption" field. Also consider creating your own transcript or not using the audio.
Finally, you should include some basic context and directions before the placement of your Timeline or StoryMap—this will help orient visitors and let them know what to expect, which can in turn help them navigate the complex multimedia. Text such as, "The timeline below outlines the major events of the Progressive Era. Click or swipe through each slide to explore the era," is ideal—it provides basic information, direction, and lets visitors know what to expect.
Resources
- WordPress Accessibility Handbook
- W3C Web Accessibility Initiative: Accessibility Fundamentals
- Web Accessibility in Mind: Resources
- W3C Web Accessibility Tutorials
Tools
- Web Accessibility Evaluation Tool — Evaluate entire webpages for accessibility
- Color Contrast Checker
- Color Hexa
- Color Blindness Simulator