Practical, Entry-Level Web Accessibility

Posted January 15th, 2007 by Mike Cherim

You may have an appreciation of web accessibility but are scared of even going there. This may be because you fear peer review. It may be that you’re concerned you’ll miss a beat or won’t get it quite right. Or maybe you’re intimidated by the myriad rules which surround the subject and you’re worried you’ll have to dig deep into a bag of tricks.

Well don’t be fearful or intimidated. I encourage you to try. If you don’t nail every checkpoint on the head, it doesn’t mean your efforts are in vain — every little bit will help and the basics are, well, basic. If a master of the craft proclaims you didn’t get it right, listen to his or her guidance and remain confident that what you have done is better than doing nothing at all, then tweak and improve as needed. There’s more to accessibility than meeting all the priorities and checkpoints. There are levels of accessibility. It’s about doing the best you can and properly marrying the basic concepts with your other priorities and concerns, commercial or otherwise, and about caring enough to at least try. In this article I will throw the official rule book out the window, so to speak, and tell you about some fairly simple things you can do — everyone can do — to make a better, more accessible web page. Put away your can’t-do attitude and put away your fears. Let me give you the practical side so your next page will be more accessible than your last? The following suggestions and recommendations will help you on your way.

Proper Element Use

Before you even begin, understand that using the proper elements in a semantic way is one of the most important things you can do in making an accessible web page. This means using the proper elements for the proper tasks. Instead of using a special “big, bold” class in your style sheet to make certain text look like a heading, for example, use a heading element instead. This is very important as some users, by way of the user agents or browser software they use, actually use headings to navigate a web page. They don’t “see” big, bold text as you perhaps intend. It’s valueless and nothing more than a visual thing. And if for some reason you don’t want your headings to be big and bold because you consider them ugly or maybe they just don’t fit your design, no problem, use your style sheet to make them not-so-big and not-so-bold. They’re still valued as headings so you can have it both ways.

Same holds true for other elements: Make sections of text paragraphs with the paragraph element. And use lists for lists instead of a bunch of breaks to make what looks like a list. You can have unordered lists, numbered and ordered lists, and even definition lists. Writing with emphasis? Use the proper light and strong emphasis elements. Want to present a block of quoted text? Use a blockquote and add a proper citation. If you want to deliver tabular data such as rows and columns of numbers, for example, use a table. That is, after all, what tables are for. Using the proper elements — of which only a few of the many are mentioned here — to present your content is the backbone of a properly formed web page, it’s not that difficult, and will inherently make your page a lot more accessible. In fact you’ll be well on your way to getting it right and already making a huge difference. Once these basics are understood, you can begin the next step.

Laying Out Your Page

This is going to be a tough pill for some to swallow, but if you’re using tables to lay out your pages — however commonplace they may be — don’t. Instead try making a new page with nothing more than heading elements and paragraphs as previously discussed. No style sheet, no nothing. You’ll have an unstyled page, yet it’ll make perfect sense and linearize perfectly; you’ll deliver a web page with headings followed by paragraphs, regardless of what user agent someone accesses it with. From there, and only after you get this far, you can begin styling the page with a Cascading Style Sheet, or CSS by which it’s commonly referred to and is hereinafter. This is the preferred method as it won’t interfere or corrupt the basic page you’ve created, which is possible with other layout methods. You can add some padding to the body element and to your paragraphs. You can then add a border to the paragraphs and maybe even a background color. You’ll see a huge improvement to the page’s styling just from doing that. Nothing fancy or complex is needed at this point; that can be addressed in due time. You won’t go it alone as there are myriad CSS resources to help you with this aspect of a web page’s design. The ordering of the build is important and that’s what’s important to realize at this stage. If you were building a house you wouldn’t start with the siding would you? The foundation must come first.

Allow for Movement

I’m not going to tell you can’t have a fixed-width, provided it’s considerate to users who still use smaller screen resolutions, but allow for movement of your elements. Text, for example, should be measured in units that allow enlargement. Don’t use pixels or point sizes for your text as neither allows text to be re-sized on all user agents. You may worry that your layout will become corrupted if you let users have their way, but by allowing the page to expand downward by applying automatic heights to your page, its sections or containers — such as divs — and its elements, you’ll that find your page works. Keep text sizes relative by using percentage-based values or ems as these units provide the most fluidity. This isn’t to say you have to allow images and similar object elements to be resizable, they’re not really expected to be, but everything else should be able to naturally flow around them. A web page isn’t a book and shouldn’t be fixed as one. Once you have this information firmly in your mind and applied to your page, you can start applying some of the finer points which still reside in what I consider the basics.

Apply Links the Right Way

Links are a very important part of a web page. Linking is one of the inherent features of web pages that make the medium so attractive. Links in books would be fantastic if it were only possible. Due to the importance of links, I’d be remiss if at this juncture I didn’t address them. What follows are definitions of five important rules about links:

Redundant Link Phrases: Don’t use the same link phrase more than once unless it leads to the same place and be descriptive of where the link goes. In other words don’t use link phrase terms like “read more about this topic” more than once unless the link phrase happens to lead to the same place.
Descriptive Link Phrases: As suggested above, be descriptive with your link phrases. All too common links phrases such as “click here” simply aren’t enough. You’ll be making users click on links just to find out where they lead. Even if you feel the context adequately explains where “click here” goes, on the web they may be removed from the context which defines them.
Link Separation: Separate your links by not making them consecutive. Putting even a lowly comma between them will satisfy this requirement. If they’re not used inline with text content, often the best solution is to organize them in an unordered list as mentioned previously as this easily provides the needed separation. Even as list-organized links, they can be styled horizontally with a simply entry in the page’s style sheet thus meeting the needs of your visual layout.
Link Identification: Underlining your links is conventional, widely accepted, and the best of all a recognized methods. While underlined links aren’t absolutely necessary and you may choose to offer them another way, do make them apparent and keep them uniform, just don’t depend on color alone to make this so.
Link Interactivity: Make sure your links are interactive. This may be accomplished by removing the link underline when a user hovers over them with a mouse or focuses on them with their keyboard — which is something even some seasoned developers tend to overlook. The interactive styling depends on their static styling so create a dramatic-enough change. But try not to make this interactivity depend solely on color alone unless said links belong to a very distinctive grouping such as a well-marked navigation list.

Offering Skip Links

Speaking of links, there are two links that belong on every web page. These are referred to as “skip links” or “jump links.” First you will want to offer a jump link at very top of your page. This should allow the user to jump to either the main content or navigation menu depending of what’s offered first on the page. If the content is rendered first, offer a “jump to navigation” (or “skip content”) link, and if the navigation is provided first, provide the user a “jump to content” (or “skip navigation”) link. The second type of jump link that is really quite useful is the fairly common “jump to top” link. This type of link affords the user an opportunity to get back up to the page top from which, if you’ve employed a jump/skip link at the top of the page, an easy means of accessing the navigation so the next web page can be found quickly.

Alt and Title Attributes

Alt Attribute: The alt attribute can be applied to form inputs and images. The most common and required usage is for embedded image substitution should the image not be understood by the user or user agent. It must not, however, be relied on as tool tip; that is the function of the title attribute, below. Now I did tell you this attribute is required for embedded images, but this does not mean it must contain alt text. You have to use care in this area and apply logic to alt text usage. You must first assess the image’s meaning and determine its value to any user who cannot see it, then apply the appropriate alt text or leave it blank. Many times an embedded image will be placed before the particular section of content it supports and floated to either side. By virtue of this placement, the image alt text can easily confuse a user if offered before the content it relates to. Often it’s in the best interest of the user who may need it to simply keep it blank unless the image is used as a link. Again, common sense rules.
Title Attribute or “Tool Tip”: The title attribute can be applied to just about anything, but is commonly used on links. As it concerns accessibility, and usability, you need to apply it wisely. Avoid redundant title attribute text and try to make it somewhat useful as a way of offering additional information. There is a caveat, though: If the information has significant importance, it’s best presented as text. Use the title attribute wisely and employ some common sense.

Scripting and Flash

Scripting: By scripting I mean JavaScript. It’s great, it’s awesome, it’s ubiquitous, but don’t make it your sole means of putting content to the page as it is a user-side scripting language which may be disabled or unsupported. Whatever the reason the user may have for not being able to use it, make sure that content is available another way, there is progressive enhancement, and fault-tolerance or graceful degradation to consider. This can be as simple as using the noscript element as just one method.
Flash Use: Although you can’t apply the aforementioned noscript element in lieu of Flash objects, you can still back them up by offering an accessible alternative, even if it means offering the content on another page. Do understand, though, I’m talking about content. If you want to use Flash to offer decoration, go for it and don’t worry yourself. But content such as text is another matter that you must concern yourself with. In this case I will refer to a very basic checkpoint: If it cannot be made accessible, offer it in a form that is.

Content Visibility

I mentioned previously in this article to allow the user to resize the text on your web page by using relative units of measure for fonts, but it’s very important that text resizing is only really needed under unusual circumstances. By default your page should be styled with content visibility in mind — without user interaction. This means two things: Make sure you offer the text in a reasonable size and; ensure it is offered with usable contrast to the page it’s on. If you’re unsure about what reasonable contrast is, there are tools like the JuicyStudio.com Colour Constrast Analyser and the GrayBit.com Grayscale Conversion Contrast Accessibility Tool. These tools can help take out the guesswork.

Image Content

Embedded images as decoration or in support of text needs to contain the alt attribute but in many cases should really be void of alt text as previously discussed, but images as important content, including background images (such as those used for mastheads), must be handled differently. In addition to providing adequate alt text — or long description, using the longdesc attribute — the image text should be plain to read and be of adequate size and contrast so the content can indeed be read since users won’t be able to enlarge it. One way to work around this is to simply offer the image text as text content in close proximity, while keeping a logical sequence in mind. Background images, however, cannot support the alt attribute or long description so you must provide the text in alternate form or provide a suitable image replacement technique. Choose a method that allows the text to be viewed if images aren’t supported, not just when styles aren’t support. These techniques are moderately advanced, but very important.

Checking Validation

After you’re done making a web page, it’s recommended you check the markup and style sheet validation. This is done to help you figure out whether you’ve forgotten something. But do be aware that you should not completely rely on automated validation tools. They are not all-seeing and can miss some things. So while I recommend you use these tools, be sure to double-check your work manually, especially when it comes to automated accessibility validation tools.

In Summary

Speaking from over forty years of personal experience, I know sometimes the hardest part of getting things done is starting. The information I presented isn’t complete — there are whole books devoted to the finer points — but hopefully this article will start you down the road to an accessible web.

Would you like to post a comment on this article?

Filed under Our Articles —

Sorry. Comments are closed.

Accessites.org Practical, Entry-Level Web Accessibility