Website accessibility is an important part of good web design. A properly designed website should be usable by as many people as possible, including those who rely on screen readers, navigate using a keyboard, have limited vision, or experience other disabilities that affect how they interact with websites.
Accessibility is also a consideration under the Americans with Disabilities Act (ADA). While specific legal requirements vary depending on the organization, making websites accessible is important for businesses that provide information, products, and services online. The U.S. Department of Justice provides guidance on website accessibility and why it matters.
Fortunately, many accessibility improvements are relatively straightforward, particularly when they are incorporated during the initial development of a website. Below are some of the most important practices that website designers, developers, and business owners should understand.
Use Proper HTML Structure and Headings
One of the foundations of accessibility is well-structured HTML. Headings, paragraphs, lists, navigation elements, and other page components should be identified using the appropriate HTML elements rather than relying entirely on visual formatting.
For example, a page should have a primary heading using the H1 element, followed by H2 headings for major sections and H3 headings for subsections. This hierarchy helps screen readers identify the organization of the page and allows visitors to navigate directly to the information they need.
Modern HTML5 also provides semantic elements such as <header>, <nav>, <main>, and <footer>. These help identify the purpose of different page sections.
Links should also describe their destinations. For example, “View Our Web Design Services” is more informative than “Click Here,” particularly when someone is navigating through a list of links using assistive technology.
Reference: W3C: Page Structure Tutorial
Provide Meaningful ALT Text for Images
Alternative text, commonly called ALT text, provides a text description of an image for visitors who cannot see it. Screen readers use this information to communicate the purpose or content of an image.
For example, rather than describing a photograph simply as “dogs,” a more useful description might be “Two dogs playing on a beach, catching a Frisbee.”
Keep ALT descriptions concise while communicating the information that matters. There is no universal 64-character limit, and longer descriptions are not automatically better. The goal is to convey the image’s purpose in the context of the page.
There are also situations where an image is purely decorative and provides no additional information. In these cases, an empty ALT attribute, alt="", allows screen readers to skip it.
For charts, maps, and other complex images, a short ALT description may not be sufficient. Important information should also be explained in the surrounding page content or through an accessible, detailed description.
Reference: W3C: Images Accessibility Tutorial
Make Website Forms Accessible
Contact forms, registration forms, and other interactive fields should be easy to understand and complete. Each field should have a descriptive label that is properly associated with its corresponding form element.
For example, the following HTML associates a label with an email input field:
<label for="email">Email Address (required)</label>
<input type="email" id="email" name="email" required>The for attribute of the label matches the id of the input field, allowing assistive technology to identify the field correctly.
Forms should also clearly identify required fields, provide instructions when necessary, and explain errors in a way that visitors can understand. Placeholder text should not be used as a replacement for a proper label.
Reference: W3C: Forms Accessibility Tutorial
Ensure Keyboard Navigation Works Properly
Not everyone uses a mouse to navigate a website. Some visitors rely entirely on a keyboard or assistive technology that operates through keyboard commands.
Visitors should be able to move through links, buttons, menus, and form fields using the Tab key, and activate controls using the appropriate keyboard commands. The navigation order should follow the logical sequence of the page.
In older HTML, developers sometimes assigned numbered tabindex attributes to individual fields and links. This practice is generally discouraged today because it can interfere with the natural navigation order. Standard HTML controls already support keyboard navigation, and a properly structured page will usually require little additional configuration.
It is equally important that visitors can see which element is currently selected. Links, buttons, and form fields should have a visible keyboard focus indicator.
Reference: W3C: Developing a Keyboard Interface
Provide Sufficient Color Contrast and Readable Text
Color contrast is one of the more common accessibility issues found on websites. Light gray text on a white background may look attractive, but it can be difficult to read, especially for visitors with limited vision.
The Web Content Accessibility Guidelines (WCAG) specify a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text at Level AA, with certain exceptions.
Text should also remain readable when visitors enlarge it using their browser settings. Avoid fixed layouts or design elements that cause text to overlap, disappear, or become difficult to navigate when magnified.
Color should not be the only way information is communicated. For example, identifying form errors solely by displaying a red border may not provide enough information for someone with color vision deficiencies.
Reference: W3C: Understanding Color Contrast Requirements
Use Tables for Data, Not Page Layout
HTML tables are useful for displaying information in rows and columns, such as pricing, schedules, and product comparisons. However, tables should not be used simply to position page content.
Modern websites use CSS for page layouts, allowing content to adapt to different screen sizes while maintaining a logical reading order.
When displaying tabular data, developers should use appropriate table headings with the <th> element, along with attributes such as scope="col" or scope="row" where appropriate. This helps screen readers associate data cells with their corresponding headings.
Tables can also include a <caption> element to describe their purpose. More complex data tables may require additional markup.
Reference: W3C: Tables Accessibility Tutorial
Consider Video and Multimedia Accessibility
If your website features videos, consider how someone with a hearing or visual disability will access the information presented.
Videos containing spoken information should include accurate captions. Automatically generated captions can be helpful, but they should be reviewed for errors. Transcripts are also useful, particularly for audio content such as interviews and podcasts.
When important information is presented visually without being explained in the audio, an additional description may be needed.
Reference: W3C: Making Audio and Video Media Accessible
Test Your Website for Accessibility
Even a carefully designed website can have accessibility problems. Testing should be part of the development process and revisited when significant changes are made.
Some basic checks include:
- Navigate through the website using only a keyboard.
- Verify that links, buttons, and form fields are accessible and clearly identified.
- Check that images have appropriate ALT descriptions.
- Confirm that text and background colors have sufficient contrast.
- Enlarge the page to 200% and check that content remains readable and usable.
- Review heading structure and the logical reading order of the page.
- Use an accessibility evaluation tool to identify potential problems.
Automated testing tools are useful, but they cannot identify every accessibility issue. A website that passes an automated scan is not necessarily fully accessible. Manual testing, including testing with assistive technology when possible, remains important.
The W3C’s Easy Checks guide provides a useful starting point for evaluating website accessibility.
Making Accessibility Part of Good Web Design
Website accessibility does not need to be an afterthought. Using properly structured HTML, descriptive image text, accessible forms, appropriate color contrast, and reliable keyboard navigation can eliminate many common barriers.
These practices benefit more than visitors with disabilities. They also contribute to websites that are easier to navigate, understand, and use across different devices and browsing conditions.
Of course, the recommendations discussed here are only a starting point. They do not cover every accessibility requirement or guarantee ADA compliance. Websites with specialized functionality or specific legal obligations may require a more comprehensive accessibility evaluation.
For developers and website owners who want to explore the standards in greater detail, the W3C Web Content Accessibility Guidelines (WCAG) 2.2 provide authoritative technical guidance.