digital html

One of the things nearest and dearest to my heart in the design of web pages/sites is ADA compliance. Anyone who knows me knows that I endeavor to create our pages in a way that makes them accessible to everyone, no matter the disability. This is not an easy task to do for a website with an emphasis on images. In fact, you could almost say our website is the ultimate challenge for a web designer. Therefore, I can’t say that our webpage is the most accessible it can or should be, but I will attempt to tell you some of the things I employ to make it more manageable. There are many websites on the internet that describe these ideas better than I can, but the gist of those boils down to: alt tags for everything, and describe, describe, describe. That means every media item and plug-in needs concise alt tags which, when utilizing an assistive device, allow the user to understand what is being displayed. Also, I avoid creating blinking websites or including images and videos that contain vibrating/strobe/rapid blinking colors and/or images. (Note: any blinking light, such as a fluorescent that is about to go out in the ceiling at your work site or at home, can cause epileptic seizures.) Wave.webaim.org is a website I frequent in creating and maintaining my web pages. Put your URL into the “Web page address…” space and hit the —> key. What happens next is:

digital_wave

In the new page, you find that it defaults to a summary of the page. It breaks down into: Errors, Alerts, Features, Structural Elements, HTML5 and ARIA, and Contrast Errors. Not all the items listed here are necessarily bad, and every item is listed whether it has the specific detail or not. Also, on the page, notice the detail is color-coded and is highlighted in the display window.

digital_styles_click

For example, clicking on the yellow box with underlined u, tells you that this alert is an indication that an underline text is present. There are three other link buttons listed under the summary button on the left: Details, Documentation, and Outline. Just below the URL form line and above the enclosed Summary/Detail/etc. box are three buttons: Styles, No Styles, and Contrast.

digital_nostyles

When you click on the No Style button, what you see displayed is what an assistive device is going to see and read to the user. This is very helpful for me.

Did you notice the summary items are color-coded? Red=bad; green=good; the other colors are impartial. The Contrast button pertains to colors and text and is nice to show where issues might be for some persons. Again, you can see that the color-coding on contrast detail is red/white.

There are discrepancies between ADA guidelines about whether certain elements are needed. Notice the menu/navigation text. On some ADA sites, this would constitute an error due to the text size [e.g. small] and contrast (on wave.webaim.org, it is neither.) Most sites default to the more info the better, and bigger text. Also, I have no skip navigation link, which many ADA sites list as necessary.

This is an ongoing process. Basically, what I try to do is imagine myself with a disability and work from there. The simpler you design your website,  the more effectively you create an easily accessible web site, which makes for a more enjoyable experience for all persons viewing the pages, including non-disabled users. Therefore, using wave.webaim.org is a “win-win” for me.

Advertisements