Developing Websites With Accessibility in Mind

Developing a website is all about writing the code to make it work. This commonly includes writing HTML, CSS, JavaScript, and any number of server-side scripting languages. Developing an accessible website is largely the same process most developers are familiar with, however, there are an additional set of standards and best practices to follow.

Writing Good Code

Use Semantic Markup

Using HTML tags correctly is the first – and very significant step – in developing an accessible website. HTML is a markup language that uses tags to describe document content. “Using semantic markup” means correctly using tags to define what content is, and it represents a solid foundation for any web page.

For example, your web page will have text content, and that text content should have some kind of structure (e.g., headings, paragraphs, lists, etc.). That’s what HTML is for. Use HTML tags like <p> and <h1> to define one block of text as a paragraph and another block of text as a heading. Notice how this uses HTML to define what content is. Good, sematic HTML markup simply tells web browsers, “This is a paragraph. This is a heading,” for all types of content through the entire document.

Separate Content and Style

Never give up on semantic markup because of the way it makes content look (the default style of HTML tags is never very appealing). Trying to manipulate HTML to make things look pretty is a losing battle; that’s what CSS is for.

It’s much more efficient for a developer to use HTML to define what content is, and rely on CSS to define how that content looks. But keeping content (i.e., HTML) and style (i.e., CSS) separate is not only more efficient, it’s also important for the accessibility of your website. By keeping content and style separate, assistive devices can override or ignore style (i.e., CSS) in order to present the content in a way the user can access.

Practice Progressive Elaboration/Graceful Degradation

Many developers will use one or more scripting languages to perform advanced functions. Sometimes scripts are written to perform relatively simple tasks (e.g., swapping an image or adding a rollover effect), while others generate very complex interactions for the user (e.g., a robust, web-based application).

Using scripts in your website does not necessarily make it inaccessible. However, like other aspects of development, it’s critical that you understand accessibility standards and consider how users with disabilities will interact with those scripts. If someone using an assistive device is unable to interact with a script on your site, steps need to be taken to ensure that the user still has equivalent access to the content. That is, if the functionality of a script is stripped away, is the user left with something they can use?

For example, consider site navigation. At its foundation, a navigation bar will often be defined as an unordered list (HTML). That unordered list with be styled (CSS), and it might even include some interactive elements like fly-out menus (JavaScript). The end product is a navigation bar, but it started with a good foundation (HTML) and additional layers of functionality were added (this is what “progressive elaboration” refers to). If one of these layers fails for a user, for whatever reason, they’ll still be left with something functional (this is “graceful degradation”).

Common Considerations

Write Good HTML Markup

Use semantic markup to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (e.g., <strong>, <abbr>, <blockquote>), etc. Keep code order logical and intuitive, since this will determine the reading and navigation order for many assistive devices.

Rely on CSS for Style and Positioning

Don’t use HTML to define how something looks or where it’s positioned on the page (e.g., using an HTML table to position content). Use CSS to style and position elements, instead.

Define Font Size Using Relative Values

When styling font, use relative values to define size (e.g., 1.3em, 130%). The page should be readable and functional when the text size is doubled by a user.

Title Every Page

Each page should have a descriptive and informative page title (i.e., <title>).

Identify the Language Being Used

The language of the page can be identified using the lang attribute (e.g., <html lang=“en”>). Whenever specific content on the page uses a different language, use the lang attribute again (e.g., <blockquote lang=“es”>).

Be Informative

Use informative page headings and labels. Avoid duplicate headings (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them.

Be Consistent Across Pages

Navigation links that are repeated on web pages shouldn’t change order when navigating through the site, and elements that have the same functionality should be consistently identified. For example, a search box at the top of the site should always be labeled the same way on every page.

Let Users Know Where They Are

If a web page is within a complex site structure or part of a sequence of pages, give users an indication of the current page location (e.g., breadcrumbs, "Step 1 of 5").

Use Appropriate Labels, Titles, and Values with Forms

Always associate text labels with form inputs, when possible. If labels can’t be used, use descriptive title attributes. Group related form elements with fieldset/legend, and give form buttons descriptive values.

Include Instructions

Provide instructions and cues in context to help users with any interactive elements. With forms, in particular, elements that are required or have restrictions (e.g., specific format, value, or length) should provide that information within the element’s label (or title attribute, if a label isn’t used).

Develop for Keyboard Access

All page functionality should be available using a keyboard and never locked or trapped at one particular page element. Include visual indicators to show which page element has current keyboard focus (i.e., as you tab though the page, you can see where you are). If page-specified shortcut keys and accesskeys (accesskey should typically be avoided) are used, make sure they don’t conflict with existing browser and screen reader shortcuts.

Provide a “Skip to Main Content” Link

Include a link at the beginning of the page for keyboard users to skip content that’s repeated across web pages (e.g., the site name/logo and primary navigation links). It can be hidden but should be visible when it receives keyboard focus.

Provide Alternative Text for Images

Provide appropriate alternative text for all images, form image buttons, and image map hot spots. Images that are decorative should have null alt text (i.e., alt="") or be implemented as backgrounds using CSS.

Pay Attention to Complex Tables

Data cells in complex tables need to be associated with their headers. Table captions and summaries should also be used, where appropriate.

Avoid Surprises

When a user interacts with the page, nothing unexpected or (potentially) confusing should happen. For example, a change in keyboard focus that results in a new pop-up window or user input that results in a substantial change to the page.

Leave the User in Control

If some content updates automatically (e.g., automatically redirecting or refreshing a page, a news ticker, AJAX updated field, a notification alert), give the user the ability to pause, stop, hide, or control the timing of the updates.

Don’t Impose Time Limits

Don’t create time limits or constraints for content and functionality, unless it’s absolutely necessary (e.g., a timed quiz for coursework).

Learn More

★