Articles in The 'Front-end-Development' Tag

March 31 2009

Implementing Basic Accessibility

by Jordan Sandford

In my last post I discussed accessibility and the web and gave some good reasons why you should deliberately include disabled users as part of you target market.

As I’ve suggested previously, when you design your pages with accessibility in mind by using current web standards, you will go a long way toward enhancing the SEO quality of your pages as well. In addition, you also increase the flexibility of your HTML code to allow more complex and forward-thinking visual and interface design.

One important suggestion is to first design your pages and site as a whole without any styling applied, i.e. black text on a white background. To clarify, do not use any CSS, whether it’s inline or in it’s own file, but do use appropriate and current HTML tags in a semantic, consistent manner.

Don’t forget that you need to choose a DOCTYPE declaration and place it at the very beginning of the HTML document, before the tag. Make sure the HTML you use is supported by the DOCTYPE you plan to use. A good resource about DOCTYPE declarations is the A List Apart article, “Fix Your Site With the Right DOCTYPE!”

The reason I’m suggesting that you don’t use special styling or formatting at the beginning is so that you can make sure that the content on your page can be quickly glanced over and understood using only the formatting the browser supplies to the various tags (e.g. the h1 through h6, the ul, the a, the table and caption tags). With no special formatting applied, all the content will flow down the page, one section or tag after the other. This will ensure that assistive devices will have a much easier time understanding what you meant. Ask another person to identify the different sections of your page, such as the main and secondary navigation, header, side bars, main content and so on.

The next suggestion goes hand-in-hand with the previous suggestion: you need to be able to understand the content of all imagery on the page even after having turned off images. One easy way to turn off images is to download the Web Developer Toolbar add-on for Firefox via MoreVisibility’s Online Marketing Tools & Resources page. The Web Developer Toolbar also allows you to easily turn off all styling in a document.) For all images and/or media that is part of the content of the page, there should be a matching textual description. For regular images, you must at least use the “alt” attribute. Additionally, you can choose to use the “longdesc” and/or “title” attributes to help parlay the meaning of the imagery.

Consider using closed captioning on any videos. You can add closed captioning to the YouTube videos you want to embed in your pages. This does not take the place of a textual description in the HTML of the video, but adds to the interactivity, especially if the viewer is deaf or must play the video with no sound. The sentences in the closed captioning can be set to show during the appropriate time in the video, increasing receptivity and comprehension when compared to the entire script of the video being read before or after the video plays.

My last suggestion is that you validate your HTML using a validation engine, specifically the W3C validator. This will help to make sure that you are not using any obsolete or non-standard coding that might trip up assistive devices such as screen reader.

Please come back and read my next post in which I will give tips on adding accessibility to more complex pages.

March 18 2009

Accessibility Matters

by Jordan Sandford

Why bother?

As your site grows, so does your traffic. As the sum of traffic on the net increases (for both disabled users and non-disabled users), your site can theoretically gain some of that traffic.

The largest group of disabled people in America has vision problems (3.5%), where, in contrast, 3.3% have hearing problems and 3% have difficulty using hands (The Survey on Income and Program Participation, 1999, carried out by the U.S. Department of Commerce, Economics and Statistics Administration, National Telecommunications and Information Administration). The same study showed that 21% of people with vision problems have Internet access.

I believe this shows that since the web is overwhelmingly a visual medium, having an inaccessible site is affecting more users than you might have previously thought.

Often web project managers decide to include some nice effects or special functionality on their sites, but they’re probably not absolutely necessary. Will these features increase traffic? On the flip side, there are likely some vision-impaired people using your site from time to time. These users may keep coming back because they have no problem using your site or they keep coming back and using your site, while being a little inconvenienced or annoyed. The worst case scenario is that they come to your site and leave right away because it’s too difficult or impossible for them to use. What I’d like to propose is that catering to these visitors will probably increase your traffic more than some of the other visual effects or tricks you thought of.

Moreover, laws protecting the disabled users have been passed in many countries based on rulings that having inaccessible sites is a type of discrimination.

Also consider that by digitizing certain environments, such as a shopping mall, disabled users can now participate in these environments due, in part to assistive devices that can understand HTML and other digital technologies. Remember that these assistive devices (such as a screen reader) are machines, just like search engines, that read the pages’ HTML code. Many times if you make sure your HTML is validated with a validation service, you will make strides in both the SEO and accessibility arenas. We can’t assume, however, that all of your disabled users are using assistive devices. In this case, they may be relying solely on your coding and design to help them.

Perhaps you’re wondering what it will cost to add accessible features to your site. Probably very little, especially if you add it from the beginning. Please make sure to come back and read my next post. I will explain some basic tips on designing accessible sites.

© 2024 MoreVisibility. All rights reserved.