How to Improve Website Accessibility

Use this guide to improve website accessibility with practical HTML techniques: add meaningful text alternatives, provide captions and transcripts, use semantic markup, support keyboard navigation, label form controls, and validate pages with Aspose.HTML for .NET.

What is Website Accessibility

Website accessibility is primarily the process of web development and design using tools and technologies to facilitate the perception, understanding, participation, navigation, and interaction of a person with a disability on a website. Issues such as slow website loading, poor page design with small fonts and poor contrast, or frustration when navigating a page that is not mobile-friendly are a nuisance to any user. But for people with disabilities, they can completely limit the use of the Internet.

How to Make Your Website Accessible

Most web content can be made accessible simply by correctly using Hypertext Markup Language elements. This article details how HTML can be used to make a website as accessible as possible. An accessible website is a website that is designed in such a way that everyone can easily use it, including people with disabilities. If you adhere to the WCAG requirements throughout your web development process, you can improve the user experience, including users with disabilities. Here are some helpful tips that you can use to improve the website accessibility.

Below you will find a list of some key principles of accessible design.

Add Alt Text to Images

Alternative text is a text description of the non-text content of web pages (images, illustrations, diagrams, etc.). Be sure to use alt text to make image content accessible to people with low vision, including people who use screen readers or Braille output devices. To write effective alt text, you must understand that it must be concise, accessible, and informative.

1<img src="lioness.jpg" alt="The muzzle of a lioness close-up. The lioness looks away.">

The muzzle of a lioness close-up. The lioness looks away.

Alternative texts (“alt text”) convey the purpose of the image, including images, illustrations, diagrams, etc. See the Screen Reader Accessibility article for more information.

Provide Alternatives for Audio and Video Content

Information in audio files is not available to deaf people, video information is not available to blind or visually impaired people. Video and audio must be provided in an alternative format such as subtitles and text transcripts.

The primary purpose of the <track> element is to provide captions and subtitles for video and audio content. You can use it like this:

1<video controls>
2  <source src="video.mp4" type="video/mp4">
3  <track src="captions.vtt" kind="subtitles" srclang="en" label="English Captions">
4</video>

In this example, a <video> element has a <track> element that points to a captions.vtt file containing captions or subtitles. See the Multimedia Accessibility article for more information.

Use Proper Color Contrast Ratios

For the visual perception of the content, it is necessary to ensure the optimal color contrast of the background and text, ensure the optimal scaling of the text without losing content or functionality, taking into account the font, line spacing, and more.

Below, you can see an example of proper contrast between font and background and an example of poor contrast:

Good contrast

Bad contrast

See the Color Contrast Accessibility article for more information.

Use Semantic HTML

Semantic HTML refers to using HTML elements to represent the logical structure and meaning of content on a web page. It is a fundamental concept in web development that promotes accessibility, search engine optimization (SEO), and a better understanding of web documents by humans and machines.

Headings, subheadings, tables, lists, and other structural elements give web pages meaning and structure. They help non-visual users to understand how the page is organized and make it easy for screen reader users to navigate. They can also make it easier to navigate the page using the keyboard.

Ensure that in content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any identifiers are unique, unless the specifications allow such features.

Make Content Clear and Easy to Read

Identify language of text. Indicate the primary language of every page by using the lang attribute in the html tag, for example <html lang=“en”>. Use the lang attribute on specific elements when the language of the element differs from the rest of the page.

1<html lang="en"> <!--document head and body--> </html>

Keyboard Access

Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device. However, many users with motor disabilities rely on a keyboard. Therefore, keyboard accessibility is one of the most important aspects of web accessibility. Some key considerations and best practices for ensuring keyboard access in web design and development include:

Keyboard access to all interactive elements such as buttons, links, form fields, and menus.
Provide a visible focus indicator, such as a highlighted border, to navigate interactive elements sequentially as users navigate using the Tab key and Shift+Tab to move forward and backward through elements.
Ensure that drop-down menus and navigation menus are accessible from the keyboard and that users can navigate submenus using the arrow keys and the Enter or Spacebar.
Make sure that, using the keyboard, you can move and close modal dialogs and pop-ups.
Conduct usability testing with people who rely on keyboard navigation and collect feedback on the user experience.

Navigation Accessibility

Helping users navigate, find content, and determine their location on a website or web application is essential for creating a user-friendly and accessible digital experience. To achieve this, you should provide the following ways:

Implement a clear navigation menu at the top of the page containing links to key sections and pages of your website.
Use descriptive labels for menu items to help users understand where each link leads.
Place a search bar prominently on your website so users can search for specific content or products.
Ensure your website adapts to different screen sizes and devices, providing a consistent navigation and content discovery experience.
Use clear and descriptive headings (<h1>, <h2>, etc.) to structure the content and display the content of the page.
Make sure that links and buttons have clear and informative labels. Avoid generic labels such as “click here” or “read more.”

Ensure Predictable Page Behavior

Make Web pages appear and operate in predictable ways. Ensure that changing the settings of any UI component does not automatically change the context if the user was not aware of the behavior prior to using the component.

Add Labels and Instructions for User Input

Make the form accessible. Provide each form element (textbox, checkbox, drop-down list, and so on) with instructions or labels that identify the controls on the form so that users know what input is expected. In the case of radio buttons, checkboxes, combo boxes, or similar controls that provide users with options, each option should have an appropriate label to let users know what they are actually choosing. Use the <label> element to associate labels with form controls.

FAQ

What is the first step to improve website accessibility?

Start with semantic HTML, descriptive headings, clear link text, meaningful alt attributes, and labels for form controls. These changes improve both accessibility and maintainability.

Can Aspose.HTML for .NET fix accessibility issues automatically?

No. Aspose.HTML for .NET helps validate HTML and detect accessibility issues. Fixes usually require changes to content, markup, design, and interaction behavior.

Which accessibility fixes usually help SEO too?

Clear headings, descriptive link text, meaningful image alternatives, readable content, and semantic structure help both assistive technologies and search engines understand the page.

In the chapter Web Accessibility Check, you will learn how to check website accessibility for all WCAG compliance or only meet specific criteria using classes and methods of the Aspose.Html.Accessibility and Aspose.Html.Accessibility.Results namespaces.
Check out the article Color Contrast Accessibility if you want to learn how to properly adjust the contrast of your web content to WCAG standards, the world authority on web accessibility. You will discover how to test color contrast accessibility using C# and make your web content easy to read for all users.
In the article Accessibility Validator, you will learn about the AccessibilityValidator class that can be used to test web accessibility rules such as principles, guidelines, and criteria.
The article Errors and Warning discusses the classes and interfaces that help collect information about errors and warnings during website accessibility testing. It focuses on the failure criteria and methods that report errors, and provides a C# example for retrieving web accessibility errors after testing an HTML document.

You can use the online Color Contrast Checker for quick contrast checks while designing accessible pages.

Web Accessibility Check Screen Reader Accessibility