Website Development

Images

When a user using a screen reader reads a web page and encounters an image, it has no idea what the image conveys or if the image is important, often times leaving the user unsure and uncertain of what they missed. By using a descriptive "alt" attribute with images, screen readers are able to know what the image was trying to convey and can more confidently browse the page.

How do I make images accessible?

  • For images on a website, best practice is to include an alternative text field with a descriptive label.

ARIA Landmarks

Using appropriate headings to identify the structure of a web page is essential for people who use assistive technologies, like screen readers; however, heading structure can become cumbersome when applied to complex pages with multiple regions, each with their own nested headings. ARIA landmarks help by adding additional markup to identify region level-structure, which allows headings to be reserved for providing structure within a region. Screen reader users can navigate by landmark, providing a way to jump from region to region.

Tables

Tables are specialized HTML markup that is meant to be used only for the display of data. Tables should not be used for page layout. A table is necessary when data needs to be shown in a such a way that it interrelates. In other words there need to be two or more levels of relationship drawn between data to require the use of a table. Data that only requires a single column should be rendered as an unordered list.

Forms

When a sighted user fills out a form, they go through the process of filling in a field, tabbing over to the next field and filling it out until the form is completed. This is easy for visual users since the labels are placed in a way that they seem to be linked to each of the fields. For someone who is blind and/or using a screen reader, the visual layout will not be helpful and though they can see each of the input fields, they might not know what label is associated with that field.

Heading Structure

People who use assistive technologies such as screen readers are able to browse through the "sections" of a website only through the use of headings and sub-headings (h1-h6) that give an invisible structure to the page. Without headings, web resources appear as one long paragraph to screen reader users. Consequently, locating and understanding information is difficult.

Web Development

Web accessibility benefits all users of a website, not just disabled users. It is best considered early in the design process of a website. The earlier it is included, the less work it will be to implement. Further, web accessibility will help inform the design choices made and can improve the usability of a web site.

This section will cover several aspects of web development. At this time, you will find information in this section on elements of page structure and content.