Developing Websites With Accessibility in Mind
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?
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”>).
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.
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.
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).
Did you know?
- In the United States, about 55 million people have a disability (src: 2010 U.S. Census).
- About 1 in 5 Americans have some kind of disability (src: 2010 U.S. Census).
- The percentage of people affected by disabilities is growing as our population ages.
- Two popular, free screen readers are VoiceOver (Mac OS and iOS) and NVDA (Win).
- Good accessibility practices can improve the search ranking of your website.
- Form fields without labels can cause problems for some assistive technology users.
- Low color contrast makes content difficult to see, especially for users with low vision.
- Documents linked on a website need to be accessible too (e.g., PDF and Word files).
- Audio content, like podcasts, need transcripts for deaf or hard of hearing users.
- Online videos should be captioned for deaf or hard of hearing users.
- Using HTML tags correctly is very important for accessibility.
- Descriptive link text helps make a website more accessible. Avoid using "Click here" or "Read more."
- A "screen reader" is an application that reads content aloud to a user.
- There is no "alt tag" in HTML. "Alt" is an attribute used with the img tag.
- HTML uses the alt attribute to provide a text description of an image.
- Alt text should describe an image, if the purpose of the image is to convey information.
- If an image is a link, the alt text for the image should explain where the link goes.
- If an image is only being used for decoration, the alt text should be null (i.e., alt="").
- If a table has headers, using header tags (<th>) will make the table more accessible.
- An accessible website is one that can be navigated and understood by everyone.