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:
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.
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.
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.