Web accessibility is the design principle that ensures users can access and interact with website content regardless of their abilities. It is vitally important to prioritize web accessibility when designing and developing websites or applications.
Proper HTML markup is critical for ensuring accessibility. For example, using logical headers helps screen readers distinguish the structure of your pages. It is also recommended to use descriptive link text and provide sufficient color contrast.
WCAG Guidelines
The Web Content Accessibility Guidelines (WCAG) are standards for web application development accessibility. These standards are used by front-end developers, QA testers, and other members of the web team to meet minimum accessibility requirements for websites. WCAG includes 13 guidelines organized under four main principles: perceivable, operable, understandable, and robust, known as POUR. Each guideline has testable success criteria that determine compliance.
Unilever, an international conglomerate that produces 400 brands sold in over 2 billion homes globally, maintains a website that balances web accessibility and aesthetically pleasing design. Its site meets WCAG guidelines for color and contrast, keyboard navigation, and heading structure.
A key feature of its site is the use of visual indicators that show which page element has keyboard focus. This makes it easier for users to navigate and read the content of a page without a mouse, as well as for screen readers and other text-to-speech software. This approach is also recommended for other web applications that require keyboard-only navigation.
Semantic HTML
In addition to keeping content and style separate, semantic HTML makes your website easier for assistive technology to interpret. When a browser processes well-written, semantic HTML, the information it presents is passed to assistive technologies like screen readers to be interpreted and converted into formats that users need.
For example, if you use the semantic <h1> tag to define your site’s title, your browser will instantly recognize it and display it appropriately for visitors using screen readers that convert text into synthesized speech or Braille. The same goes for other semantic tags, such as <aside> or <nav> for navigation links.
In addition, the proper use of landmarks — a set of HTML tags that mark sections of your web page – can help ensure that key areas are keyboard accessible for screen reader and text-to-speech users. Also, remember to include short descriptions of images (also known as alt attributes) for those who cannot perceive or interpret visual imagery.
Keyboard Friendly Web Interfaces
Certain users navigate the web using a keyboard rather than a mouse. They can be expert “power” keyboard users, or they might have motor impairments that prevent them from performing the fine motor movements required to operate a mouse. The key is to make interactive and navigation elements easily accessible by tabbing and displaying a visual indicator that indicates the current keyboard focus.
For example, if you have input fields for inputting text, a form, or drop-down menus, ensure that these elements can be tabbed to and that they provide a clear indication of their current state. Screen readers and screen magnification utilities also use the focus indicator to determine which objects are currently selected.
It is important that all text on a page be visible and easy to read. This is a major aspect of web accessibility, particularly for users who have hearing or vision impairments or who are blind and rely on assistive technology to navigate your site.
Color Contrast
Using colors with adequate contrast ensures that all users, including those with color blindness, can read and navigate web content. Many people with dyslexia benefit from high-contrast text as well.
ARIA roles and properties describe the state of widgets to assistive technologies, such as screen readers web application development. For example, the role “search” is used to label a form field for a search function. Roles are stable and do not change when the widget is updated, while properties are dynamic and update when a user interacts with a widget.
Use headings (<h1> through <h6>) to organize the structure of a page. These help non-visual users scan a document for key information and allow screen readers to narrate the page sections as they are read. For more information on proper heading structure, see the UW Accessible Technology page “Providing Structure in Web Pages and Documents.”