By John Gullo

When creating websites, it's important to keep accessibility in mind. Accessible websites mean different things to different people, but for the sake of Lighthouse's mission, it means ensuring that the visually impaired have the best web experience possible.

Basic tips for creating an accessible web page:

Label Everything

The easiest way to make your website more accessible is to label your images and links so that they become more friendly to screen reader users. A user who is visually impaired may not be able to get any information from an unlabeled image and may not always encounter links in context.

Images

The image element has a few attributes that give the necessary information to users who are visually impaired.

The alt attribute is used to provide alternate text where images are used. For instance: if the website for "Acme Enterprises" uses a graphic for their logo at the top of every page, a screen reader will read "graphic" if no alternate text is provided. If you were to add alt="Acme Enterprises" to the image tag, the screen reader would read: "Graphic: Acme Enterprises."

When using graphics that are not part of the content (i.e. spacer images,) leave the alt attribute empty: alt="". It can become fairly annoying to hear "Graphic: spacer" over and over, and it doesn't add anything to the user experience.

Links

Screen reader users encounter links in a number of ways: in the context of the page; as a list of all links on the page; by tabbing through the links and skipping the content between them. This means that ambiguous links like "click here" or "more" could be read out of context and would mean very little to the user. It's better to link more of the text: "click here to fill out the sweepstakes entry form" and "read more about baseball cards."

Another way to add more information to a link is to make use of the title attribute. The title attribute can give a better description of where a link will go.

Not all screen readers automatically read title attributes, so it is best to exercise both methods for making links clearer, where possible.

Keep your code clean

Standards are good

Web standards are a set of guidelines created by the World Wide Web Consortium. The developers of modern browsers follow these guidelines to determine how various elements will display and behave, so the best way to make sure your website will work well in all browsers is to adhere to the standards.

Use the right tag for the job

Many web designers will use a specific tag purely for the way it presents content. When you want a paragraph, use the <p> tag. When you want bulleted list, use the <ul> tag. If you want the first paragraph of an article to be in large, bold type, use CSS to style it. Don't use a heading tag just because it makes the text look the way you want it to. Screen readers alert the user to the types of elements they encounter. When a screen reader comes across an <h1> tag it will announce: "Heading Level 1."

Correct tag usage may not always be apparent. Elements like tables and forms require special tags in order for screen readers to interpret them correctly.

Table-based layout came about as a way to give designers more control over their designs. By placing items in various table cells, graphics and text can be positioned accurately to display correctly in all browsers. The downside is that it complicates development by adding large amounts of unnecessary markup, and it also is using tables for a purpose that they were not intended for. Tables should be used for tabular data.

CSS allows you to position content exactly, so the need for table based layout is almost nonexistent. There are a few cases where tables are very handy (forms especially,) but you can almost argue that it's tabular data.

Separate presentation from content

To take it a step further, you can remove all presentation markup from your html (font tags, spacers, bgcolor attributes etc.) and move it all into stylesheets. Doing so allows your content to be visually transformed for various purposes. Your website can be changed into a mobile, print or a low-vision friendly version simply by using different stylesheets. Doing this also allows users to adjust the site to their needs.

This can be a major undertaking, but is well worth the effort. Legacy web publishing applications might not allow you make the necessary changes to your markup, and CSS layout has a fairly steep learning curve. However, once the transition is complete, making changes or redesigning your website will be almost painless.

Avoid assumptions

Not all users have access the internet the same way, and they don't always have access to the same technologies (JavaScript, Flash, Quicktime etc.) There are a few things you can do to make the site work for the most people possible.

Supply alternatives

If you are providing information using a plugin like Windows Media Player or Flash Player, you should provide alternate ways of accessing that information. For movies, you may want to provide a transcript and provide the movies in several formats. Most movie formats also allow for closed captioning.

Static versions of multimedia presentations can be presented as storyboards in a simple HTML page.

Degrade gracefully

Make sure any site features that make use of client side scripts, like javascript, work correctly without the use of presence of those technologies. Fonts should be sized using relative units (em,%, xx-large etc.) Many browsers have the ability to scale text even when the fonts are set with absolute sizes, but some cannot. Allowing text to scale will make your site more legible for low vision users.

 

 

Like us on Facebook   Follow us on Twitter   Watch us on Youtube   Email   Visit our Flickr