The Internet is one of the primary sources of information, work tools and entertainment. Web accessibility refers to practices and technologies that enable people with various disabilities to use online resources fully. This important aspect affects people with disabilities, older people, people with limited technical skills and users of mobile devices.
In this article, we will look at what web accessibility is, its key principles and guidelines, and why it is so important. By raising awareness of Web Accessibility, we can work together to create a more inclusive Internet accessible to all users, regardless of their abilities and limitations.
According to WHO, by 2030, one in six people worldwide will be 60 years old or older. The population of people aged 60 and older will grow from 1 billion in 2020 to 1.4 billion in 2030, and by 2050, the number of people aged 80 and older will triple, reaching 426 million.
The growth in the elderly population underscores the importance of ensuring web accessibility to enable older people to more easily access online information and services, thereby supporting their active participation in digital social and economic life.
Web accessibility refers to the design and development of websites so that they are accessible and usable by all people. This includes accessibility for users with various disabilities, such as:
- Blind people or the visually impaired use screen readers and other assistive technologies that convert text to speech or Braille.
- People who are deaf or hard of hearing may require closed captioning of video and text audio content.
- People with limited mobility may have difficulty using a computer mouse and prefer to navigate using a keyboard or alternative devices.
- People with cognitive impairments may need simpler language, more predictable navigation and additional visual cues.
The basic principles of Web Accessibility are included in the WCAG guidelines, which were developed by the W3C (World Wide Web Consortium). These guidelines consist of four main principles:
- Perceivable: Information and user interface components must be presented in a way that can be perceived by all users.
Example: providing alternative text (ALT) for images. - Operable: UI (User interface) components and navigation must be accessible through various methods.
Example: enabling page navigation using the keyboard. - Understandable: User interface information and operations must be understandable to users.
Example: using simple and clear language. - Robust: Content must be robust enough to be correctly interpreted by various devices, including assistive technologies.
Example: using standard HTML tags.
WCAG is divided into three compliance levels: A, AA and AAA, which determine the degree to which a website is accessible to people with disabilities. Each level requires meeting specific success criteria, which are more detailed and rigorous at higher levels.
ARIA (Accessible Rich Internet Applications) is a specification developed by W3C that aims to improve the accessibility of dynamic content and user interfaces on websites. ARIA attributes enable better integration with assistive technologies such as screen readers by providing additional information about the structure and functionality of interface elements.
There are several types of ARIA:
1. Role attributes
Role attributes define what functions the elements perform in the user interface. They help screen readers and other assistive technologies interpret and communicate the functions of individual elements to users. Examples of ARIA roles include:
- role=”button”: Indicates that the element acts as a button.
- role=”checkbox”: Indicates that the element acts as a checkbox.
- role=”navigation”: Indicates that the element represents a navigation section.
- role=”alert”: Indicates that the item displays important, dynamic messages.
2. State attributes
State attributes describe dynamic aspects of interface elements that can change in real-time. They inform assistive technologies about the current state of a component. Examples of ARIA states include:
- ARIA-checked: used with the checkbox role, tells whether the checkbox is checked (true), unchecked (false) or in an intermediate state (mixed).
- ARIA-expanded: This property tells whether a section (e.g., a drop-down menu) is expanded (true) or collapsed (false).
- ARIA-pressed: it tells whether the button is pressed (true) or not (false).
- ARIA-hidden: Indicates whether the item is visible (false) or hidden (true) to assistive technologies.
3. Value attributes
Value attributes provide additional information about UI elements that do not necessarily change but are essential for understanding and interacting with the element. Examples of ARIA properties include:
- ARIA-labelledby: specifies uniquely which element (or elements) provides the labels for a given element.
- ARIA-describedby: specifies uniquely which element (or elements) provide an additional description for a given element.
- ARIA-live: determines how dynamic content is handled by assistive technologies, e.g. polite for quiet updates and assertive for instant updates.
- ARIA-valuemin, ARIA-valuemax, ARIA-valuenow: Used with a slider or progress bar element, specify the element’s minimum, maximum and current value.
1. Alt text for images
Images on a page should have an alt attribute that describes its content, which is essential for people using screen readers. Additionally, alt attributes are used by indexing robots to obtain information about the image content, which is very important from the perspective of SEO optimization. Images that are merely decorative and do not add substantive value to the page content should have an empty alt attribute. This way, screen readers skip them, and if the image fails to load, users will see a description instead of an empty field.
2. Proper heading structure
Headings should be used hierarchically (h1, h2, h3, etc.) so that screen readers can correctly interpret the page structure. Hierarchical organization not only facilitates navigation for users with disabilities but also has a positive impact on SEO by improving search engine indexation. It is also important that the content of the headers is clear and understandable, which helps users understand the content of the page more quickly.
3. Form descriptions
Each form element should have a description that informs the user about its purpose. The label element links the description to the appropriate form field, making it easier for users with screen readers to understand what the field does.
4. Colour contrast
The text and background should have sufficient colour contrast to be readable by people with visual impairments. Providing appropriate contrast is crucial to making the information on the website easy to read, which increases comfort and accessibility for all users.
5. Video subtitles
Adding subtitles to videos is crucial for people who are deaf or hard of hearing and those whose native language is not used in the video. Subtitles enable these people to fully understand audio content or dialogue, which increases their accessibility to information and allows them to participate better in video content. This can be achieved using the track element, which allows subtitles to be added directly to the video file. This is favoured by assistive technologies and facilitates integration with various platforms and devices.
6. Focus indicators
Using focus indicators is essential so keyboard users can see which item is active. Focus indicators allow people who cannot use a mouse to easily navigate the site and know which interface element they are on.
7. ARIA roles
The use of ARIA (Accessible Rich Internet Applications) attributes helps improve the accessibility of dynamic elements on the website. These attributes provide additional information to assistive technologies, which enables people using screen readers and other assistive tools to better understand and interact with the user interface.
8. Forms with errors
It is crucial to inform users about form errors. ARIA attributes can help, providing screen readers with information about the occurrence and type of errors, allowing users to identify and correct problematic fields more easily.
9. Responsive design
Ensuring that your website is responsive and works properly across devices is crucial to accessibility. Thanks to this, all users, regardless of whether they use computers, tablets, or smartphones, can have full and convenient access to the website’s content and functionality.
10. Using JavaScript to improve accessibility
JavaScript can be used to change ARIA attributes to improve dynamic accessibility. This allows you to customize the user interface in real-time, ensuring that assistive technologies always have up-to-date information about the state and function of dynamic elements on the page.
11. Dynamic content
Make sure dynamic content is accessible to screen readers by appropriately marking new or changed content with ARIA attributes. This will ensure that users using assistive technologies are immediately informed of any updates.
12. Checking availability
Use accessibility tools such as WAVE, Axe, and Lighthouse to assess and improve the accessibility of your website. These tools help you identify accessibility issues and suggest solutions so you can systematically improve the experience for users with different needs.
Web Accessibility benefits not only people with various limitations but also all users. The websites available are more intuitive, easier to navigate, better visible in search engines and compliant with legal regulations. By implementing accessibility principles, we improve the website’s overall quality and usability.
To continue improving the accessibility of your websites, you may want to:
- Educate yourself and regularly update your knowledge of WCAG guidelines and assistive technologies.
- Test accessibility and use automated accessibility testing tools and test pages with users with disabilities.
- Iterate and improve, constantly monitor and improve the accessibility of your websites based on test results and user feedback.
- Implementing web accessibility principles requires commitment and continuous improvement, but this effort is invaluable in creating a more inclusive Internet.
Author
- Frontend Developer | Software & Data Development
