In some of my other design articles, I’ve discussed techniques that contribute to making a WordPress site accessible to individuals with disabilities. While these techniques address many of the most common problems that disabled persons will encounter while online, there are still more issues that need to be addressed. The tips,below, will contribute to making a better web experience for individuals with a variety of disabilities.
Captions
Captions must be provided for videos. If you are going to have any videos on your site, it is essential that you add the option for captioning. This will enable deaf individuals to get the full meaning of your video content. It is also important to make sure captions are synchronized with the words that are being said, so deaf viewers can adequately read both the speaker’s words and body language. If deaf viewers desire to read the speaker’s lips, they can without issue.
Transcripts
Audio files must have a transcript. While captions cannot be provided for audio files, transcripts can. A complete transcript of the audio file must be easily accessible to your site visitors who are deaf. You can place a link to your transcript right below the controls to play the audio file.
Text And Graphics
Information that is conveyed solely by using color must also be available via other means. Let’s say that you have controls on your site that are designed for the purposes of allowing users to add files to a portfolio. These controls are conveyed only by color, with the green button allowing individuals to add new files and the red button allowing individuals to delete existing files. While this may work for the majority of your user base, this setup will pose a problem for two groups of people, the visually impaired and the colorblind. Individuals who are visually impaired or colorblind will not be able to understand what those colored buttons mean. In order to make these buttons understandable to these groups of people, some form of text needs to be added, such add or delete or plus or minus signs.
Technology Compatibility
Your web pages must still be readable without the help of an associated style sheet. While style sheets are used to format the layout of pages, some assistive technologies and older browsers do not support them. If you want your site to be accessible to individuals who are using older browsers and certain assistive technologies, then it will be your duty to make sure the content on your web pages can still be read when your style sheets are disabled. To test and see if your pages are readable, follow the below steps:
1. See if your theme is using an element of CSS. CSS looks like this (The less than and greater than signs will be substituted with left and right brackets as in the previous article, and the left and right braces will be substituted with the left and right parenthesis. This will keep the browser from actually executing the code.):
[style type=”text/css”] body (font-family: Verdana;
font-size: 12px;
color: #000;
)
[/style]
or
[link rel=”stylesheet” href=”default.css” type=”text/css”]If you see any code like this, than this means that CSS is used as a means for formatting your web pages.
2. Turn off style sheets to see if you can still read your web pages. In Internet Explorer, you will need to do the following steps:
*Go to the Tools menu.
*Then go to Internet Options.
*Go to Accessibility.
*Check the options that say to Ignore Font Styles and Ignore Font Sizes.
*Then click on OK.
*Click OK again.
*Close the browser window and then reopen the site again to see if it is readable.
If you can successfully read the pages on your site, then you know that your site will pass this test. If not, then you will need to find a theme that will allow for the site to be read without the style sheets enabled. Stardust version 2.7 and Precious version 4.0.1 are themes that are one hundred percent accessible and will allow pages to be read without any problems when style sheets are disabled.
If server-side image maps are used, then a redundant set of links also has to be provided. A list of links must be contained somewhere else on the site to allow users to go to the various regions of the map. If these links are not present, then the user will not be able to successfully navigate the map.
Use client-side image maps rather than server-side image maps whenever possible. Unlike server-side image maps, client-side image maps allow web developers to associate text with hot spots on the map. This will allow the information to be conveyed to individuals using assistive technology.
If you are going to display information in graphs and charts, then you need to make sure the columns have proper headers. Without proper headers, individuals using assistive technology will not be able to properly interpret what they are reading. A table that has proper headers looks like this (The less than and greater than signs are substituted with the left brackets and right brackets.):
[table border=”1”] [tr] [th]Day [/th] [th]Opening Time [/th] [th]Closing Time [/th] [/tr] [tr] [td]Monday [/td] [td]8:00A.M.[/td] [td]5:00P.M.[/td] [/tr] [tr] [td]Tuesday [/td] [td]8:00P.M.[/td] [td]4:30P.M.[/td] [/tr] [tr] [td]Wednesday [/td] [td]8:30A.M.[/td] [td]3:00P.M.[/td] [/tr] [tr] [td]Thursday [/td] [td]8:00P.M.[/td] [td]7:00P.M.[/td] [/tr] [tr] [td]Friday [/td] [td]7:30P.M.[/td] [td]7:30P.M.[/td] [/tr] [/table]This table is an example of a schedule for the hours of a business. As you can see, each column is properly headed, facilitating a proper understanding of the information that is being conveyed. The only time that tables will not need proper headers is if they are being used for layout purposes. The example below will demonstrate what is meant by this:
<!—Example Code –>
[tr] [td]Mrs. Grosvalet is a prominent advocate for individuals who are chronically ill and disabled. She is widely respected in a variety of circles, as she selflessly puts forth all of her effort to fight for the equal treatment and dignity of others. She perseveres against persecution and is an out-of-the-box thinker. This woman is to be commended.[/td] [/tr] [tr] [td]Grosvalet plans to fight for some major changes for the disabled community in the upcoming months. [/td] [/tr]<!—Example Code –>
The web page in this example is a two-column layout. Because this table is used as a means for formatting the information on the page, no headers are necessary.
While the tips outlined here combined with the tips from the previous article will not make your WordPress site one hundred percent accessible, you will be very close to your goal. Disabled visitors will be able to interact with your site a whole lot easier than they will if you choose not to implement any of these tips at all. Not to mention, you will optimize your site to reach a much larger pool of people, as individuals who have dialup connections, mobile devices and text only browsers will be able to have an enjoyable experience while browsing your site. Accessibility does not only benefit the disabled. Everyone can benefit from accessibility.