Web accessibility: what it is, what it means, how to apply it to sites

Put us to the test
Put us to the test!
Analyze your site
Select the database

More than one billion people in the world have a recognized disability. This is about 15 percent of the world’s population, and this percentage rises to 20 percent if we consider temporary disabilities and if we add the elderly population, which represents a significant share in nations such as Italy. This is why we are increasingly talking about accessibility and inclusion, and this also applies to the Internet and sites. Ensuring web accessibility is not only a matter of legal compliance, but also represents a commitment to social inclusion and digital equity: an accessible website allows all users, regardless of their abilities, to access online information and services, improving the overall user experience and expanding the reachable audience. Our goal, therefore, is to build an accessible site by eliminating digital and IT architectural barriers, i.e., the obstacles that people with disabilities encounter every day when trying to use certain services or information on the Web, and more generally to provide a level playing field for all users. Both in the design of the site and in the daily optimization work, because this complex issue calls into question several elements related to SEO.

What website accessibility is

Web accessibility refers to the practice of designing and developing websites so that they are usable by all people, regardless of their physical, cognitive or technological abilities.

This therefore means including the specific needs of people with visual, hearing, motor, and cognitive disabilities in design and development.

Take care of your site and users

SEO and usability go hand in hand: an accessible site pleases Google more and speaks to more users! Use SEOZoom to check the key aspects of your project
Registrazione

In a broader sense, then, the goal of Web accessibility is to eliminate barriers that prevent these users from accessing online information and services.

In its original and pure form, the Web is fundamentally designed to work for all people “regardless of their hardware, software, language, location or ability.” This is the official position of the World Wide Web Consortium (W3C), the international nongovernmental organization founded by Tim Berners-Lee (one of the fathers of the Web), whose goal is precisely to spread maximum accessibility of sites, that is, the ability to access information and content “to people with a wide range of auditory, motor, visual and cognitive abilities.”

And W3C itself has developed special guidelines, called the Web Content Accessibility Guidelines (WCAG), which provide a framework for creating accessible Web content.

The definition of accessibility in digital context

The term web accessibility refers to the ability of computer systems to provide services and information to each type of user without discrimination, and in particular also to persons suffering from temporary and non-existent disabilities, Consequently, they use auxiliary technologies or special configurations.

In the context of the Network, therefore, the word includes all the inclusive good practices of removing digital barriers that prevent the interaction or access to sites to people with disabilities, but its meaning is also extending to technological barriers.

More broadly, in fact, we must work to ensure maximum accessibility to the site to every type of person/ user, including those who use mobile devices of old generation or surf the Internet with a slow connection.

Everything revolves, as we said, around the four basic principles set by the WACGs: Perceivable, Usable, Understandable and Robust (POUR). In practice, web accessibility involves the use of techniques such as adding text descriptions for images, creating intuitive navigation, and ensuring that all content is compatible with assistive technologies, such as screen readers.

Digital accessibility: the numbers and critical issues

Accessibility is a crucial element to evaluate for developers and organizations wishing to create high-quality Web sites and tools that do not exclude people from being able to use their products and services.

However, still too often sites, applications, technologies or tools are designed incorrectly and create real barriers that prevent groups of people from using these products efficiently, similar to the physical obstacles that characterize many places in everyday reality.

This betrays the concept of accessibility, which is precisely “the ability of information systems to deliver services and provide usable information, without discrimination, even by those who due to disabilities require assistive technologies or special configurations.” Globally, it is estimated that there are more than 1 billion people who have disabilities-visual, auditory motor or cognitive-and this huge audience must also be added the difficulties to access created by technology-for example, difficulties with mobile browsing in areas with poor network coverage, or use of obsolete devices.

I risultati del report di WebAim: le principali tipologie di errori nel 2024

The latest report from the U.S. NGO WebAim (Web Accessibility In Mind) takes a snapshot of the situation: analyzing one million home pages for accessibility problems, the study certifies that still in this 2024, 96 percent of pages had at least one WCAG 2.2 error (i.e., did not comply with at least one of the web content accessibility guidelines) and, more specifically, each page contained an average of 56.8 errors. Considering that an average home page consists of 1173 elements, it means that users with disabilities are at risk of encountering an error on every 21 on-page elements they interact with.

WebAim also noted what the most common accessibility errors found on the home pages surveyed were: low-contrast text, no alternative text, missing form input labels, empty links, missing document language, and empty buttons. More specifically, 81 percent of home pages have low-contrast text (with an average of 34.5 instances per site), 54.5 percent of images have missing alternative text, more than one-third of all images analyzed have detectable accessibility problems, and nearly half of all form inputs are not labeled correctly.

Gli errori di accessibilità nelle home page: l'evoluzione storica

As the association’s experts note by comparing the results of the last four annual monitors, there are slight improvements in the overall number of detected accessibility errors and WCAG noncompliance, but problems with home pages with low-contrast text, missing input labels and empty buttons remain very high, while critical issues with home pages with missing alternate text, empty links and missing document language have conversely and thankfully decreased.

Understanding accessibility, an evolving issue

Accessibility is not a static concept, but an ongoing process of improvement and adaptation to meet the needs of all users.

For example, for a blind person, an accessible website might include text descriptions for images and a navigation structure that can be easily interpreted by a screen reader. For a person with mobility disabilities, it might mean the ability to navigate the site using only the keyboard.

As technology evolves and internet use increases, it is essential that websites are designed and developed to be accessible to all users, regardless of their physical or cognitive abilities.

Web accessibility is not only a matter of social inclusion, but also represents an opportunity to improve the overall user experience and reach a wider audience. In an increasingly connected world, where online information and services have become an integral part of daily life, ensuring that everyone can access this content is a responsibility that cannot be ignored.

Digital obstacles and barriers

When we talk about the accessibility of a site we are therefore referring to a set of practices and technologies that allow all users to access and interact with content without encountering obstacles.

This implies a careful and conscious design that takes into account the different ways in which users can navigate and use the Web, with a view to creating a site that is perceptible, usable, understandable and robust.

Thus, the main problem is the obstacles we unknowingly litter along the way: unlike in the real world-where most obstacles are “concrete” and physical-in the digital world, accessibility is transparent!

That is, we are talking about “digital architectural barriers,” which are precisely the obstacles that prevent or limit access to and use of online content and services by people with disabilities. These barriers can take different forms and affect various aspects of interaction with the Web.

Taking up a precise definition provided by Donato Matturro and Bianca Maria Carchidio, experts in the field of web accessibility and creators of the sitiaccessibili.it project, a digital barrier is “any communicative element that prevents, limits or makes it difficult to navigate or use digital content (especially for people with limited motor or sensory capacity, i.e., those with disabilities).”

Greater complexity comes in one aspect: an element may not constitute a digital barrier for one individual, but instead be a barrier for another. This is because the concept of barrier is perceived differently by each individual, also generating the need to guarantee the right to freedom of communication and information to the greatest number of people through the search for common parameters.

The most important step has been taken at the regulatory level by going to identify what digital content is to be considered a digital barrier, as happened in Italy with Law No. 4 of January 9, 2004, the so-called “Stanca Law.”

What are the main digital architectural barriers

As we said, digital barriers can manifest themselves in different forms and affect various aspects of interaction with the Web.

For example, visual barriers include the lack of alternative text for images, which makes it difficult for blind users to understand visual content through screen readers. Another common problem is insufficient contrast between text and background, which can make reading difficult for users with visual impairments such as partial blindness or color blindness. In addition, text that cannot be enlarged without losing its readability or functionality is an additional obstacle for those with visual impairments.

Hearing barriers, on the other hand, occur when videos do not have subtitles, making it difficult for deaf or hard-of-hearing users to understand the audio content. The lack of transcripts for audio content further excludes these users from accessing information. Motor barriers occur when site navigation depends solely on the use of the mouse, making the site inaccessible for users with motor disabilities who use only the keyboard or alternative pointing devices. In addition, links, buttons, and other interactive elements that are too small or close together can be difficult to click for those with motor coordination problems.

Cognitive barriers include complex and unstructured content that may be difficult for users with cognitive disabilities to understand. A non-intuitive user interface or complex navigation can create additional difficulties for those with memory or comprehension problems. Technological barriers occur when websites are not compatible with assistive technologies, such as screen readers and screen magnifiers, thus excluding users who depend on these tools. The use of proprietary or nonstandard technologies that are not supported by all browsers or devices can further limit access to content.

Mobile accessibility also presents its own challenges. A non-responsive layout that does not properly adapt to mobile devices can make navigation difficult for users using smartphones or tablets. In addition, interactive elements that do not respond properly to touch gestures can create difficulties for those browsing on mobile devices. Multilingual accessibility barriers occur when websites do not offer content in different languages, excluding users who do not speak the site’s primary language. Content that does not take into account cultural and linguistic differences can be difficult for users of different nationalities to understand.

Finally, temporal accessibility barriers include timed content that requires a response within a limited time, creating difficulties for users with motor or cognitive disabilities. Animations and moving content that cannot be stopped or controlled can be distracting or cause problems for users with cognitive or visual disabilities.

What does website accessibility mean on a practical level

In general, accessibility is a commitment to ensuring the inclusion of each individual within society, regardless of the presence of limiting or distinctive elements. It is work to improve inclusion, while maintaining and protecting the unique characteristics of the individual person, to arrive at equity and equal opportunity.

This is also true in digital, where a website is accessible if it is reachable and usable by all users, regardless of their abilities. However, this is not only a matter of legal compliance or social responsibility, but also a business opportunity.

In fact, an accessible website can significantly improve the user experience, increase user engagement and satisfaction, and expand the reachable audience. In addition, web accessibility can have a positive impact on search engine rankings, making the site more visible and attractive to a wider audience.

Indeed, this issue does not exclusively concern people with a disability, but in a broader sense all users. It follows that accessibility is the attempt to provide all people with the same opportunities to enjoy a site, regardless of their abilities and circumstances, including technical ones.

Again according to Tim Berners-Lee, “the power of the Web lies in its universality” and therefore “access by all, regardless of disability, is an essential aspect.” By its very nature, the Web is designed to “work for all people, regardless of their hardware, software, language, location or ability,” making it “accessible to people with varying degrees of hearing, motor, visual and cognitive abilities.”

When this happens, the Web removes barriers to communication and interaction that many people with disabilities face in the physical world, but when “when Web sites, applications, technologies, or tools are poorly designed” they can create other barriers that exclude people from using the sites and the entire Web.

Why website accessibility is important

In an increasingly digital world, access to online information and services has become a fundamental right. However, many people with disabilities continue to face significant barriers when navigating the web.

Web accessibility is an essential component of social inclusion, and making websites accessible means breaking down these barriers to ensure that all users can access the same information and opportunities. This not only promotes equity and inclusion, but can also improve brand reputation and build trust and loyalty among users.

It is still the W3C to clarify what Web accessibility means for sites: designing and developing the tools and technologies to allow the use of all people, including those with disabilities. More specifically, users must be able to “perceive, understand, navigate and interact with the Web” and, at the same time, “contribute to the web”.

Web accessibility includes all disabilities affecting access to the Network, including:

  • auditory
  • cognitive
  • neurological
  • physical
  • discursive
  • visual

As we were saying, this approach also generates benefits for users without disabilities, especially in cases of:

  • People who use mobile phones, smartwatches, smart Tvs and other devices with small screens, different input modes, etc.
  • Older people with changing abilities as a result of aging.
  • People with “temporary disabilities”, such as a broken arm or lost glasses.
  • People with “situational limitations”, such as those who use their smartphone in full sun, travelling by train or in an environment where they cannot listen to audio.
  • People who use a slow Internet connection or who have a limited or expensive bandwidth.

Site accessibility and SEO

These principles – ensuring that websites are accessible and usable by everyone – should be a primary concern for anyone who works in the online space, but are usually seen as a responsibility of developers and designers. In fact, there is a lot of overlap in the SEO work that we do to make websites accessible and easy to understand for search engines, as pointed out by Ruth Everett on Search Engine Journal.

Stepping out of philosophical discourse for a moment and reasoning with a hint of malice, optimizing a website for disabled users has also perfect sense for business, because it allows you to intercept and satisfy a wider market segment and, at the same time, build a positive brand image and receive a boost to ranking.

This is because most of the components needed to achieve the goal and meet international standards of accessibility fits directly into the best practices of the SEO: we talk about the optimization of title tags, header structure, the care of alt text and responsive design, or elements that all websites should include to maximize their effectiveness

An accessible website helps all users and also responds to the logic of business: the crucial point is to have a site easier to view, understand and navigate, which therefore enhances the experience provided to people and allows them to quickly and efficiently find the information they are interested in.

Basically, accessibility therefore concerns user experience, satisfaction and brand loyalty – and in fact it also appears among Google’s indications to create SEO oriented sites – but there are also legal implications for those who do not respect the principles.

The benefits of accessibility for SEO

In addition to social benefits, web accessibility therefore also offers significant SEO benefits.

Search engines, such as Google, reward websites that offer a good user experience, and accessibility is a key part of that experience.

For example, the use of text descriptions for images not only helps visually impaired users, but also provides valuable information to search engines, improving the relevance and visibility of the site.

Similarly, a clear and consistent navigation structure makes it easier for search engines to crawl and index the site, improving its ranking in the results pages. In addition, accessible content tends to be clearer and well-organized, which can reduce the abandonment rate and increase dwell time on the site, both of which positively influence SEO ranking.

Web accessibility guidelines: the 4 key principles

To ensure that websites are accessible to all users, we can refer to established and internationally recognized guidelines.

The Web Content Accessibility Guidelines (WCAG) are the gold standard for Web accessibility, providing a comprehensive and detailed framework of practices to be adopted.

These guidelines were developed by the World Wide Web Consortium (W3C) and are widely accepted as best practices for the design and development of accessible Web content. By following WCAG, website owners can ensure that their content is usable by a wider audience, including users with disabilities.

A website is accessible if it meets four principles, known as POUR:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Or:

  • Perceivable – that is, providing for the removal of any barriers a user might have to access content, including the ability to use the site with screen readers, by providing text alternatives and a logical structure. The principle of perceivability focuses on the need for information and user interface components to be presented in ways that can be perceived by all users. This means that content must be visible and audible, and visual information must be accompanied by text alternatives. For example, images must have text descriptions (alt text) that can be read by screen readers, and videos must have subtitles for deaf users. In addition, it is important to ensure sufficient contrast between text and background to facilitate reading.
  • Operable – a site that is functional and usable by all users, regardless of the device they are browsing on, through work on the user interface and navigation. This parameter also includes ensuring sufficient time for users to complete a given task. This is the principle of usability, which concerns the ability of users to navigate and interact with the website. This implies that all UI components and navigation must be operable. For example, links and buttons should be easy to click, and the site should be navigable using only the keyboard, without the need for a mouse. In addition, it is important to provide clear and consistent directions for using forms and interactive features so that users can complete tasks without difficulty.
  • Understandable – people must be able to comprehend the information displayed on a Web page, as well as clearly understand the user interface and navigate the site. It includes providing predictable and consistent navigation. This is the principle of understandability, which implies that content should be clear and readable, and interactive features should behave in a predictable manner. For example, the language used should be simple and direct, and instructions should be clear and concise. In addition, it is important to provide timely and helpful feedback when users make mistakes so that they can easily correct them.
  • Robust – to be robust, a site must be able to be accessed and interpreted by different technologies and platforms, including screen readers. It must also remain accessible during updates to all platforms. The principle of robustness focuses on the need for web content to be robust enough to be reliably interpreted by a wide range of user agents, including assistive devices. This means that site code must conform to web standards and content must be structured semantically. For example, proper use of HTML tags and ARIA attributes can improve the site’s interoperability with screen readers and other assistive devices. In addition, it is important to test the site with different assistive technologies to ensure that all users can access the content without problems.

The WCAG is divided into three levels of compliance: A, AA and AAA. Level A represents the bare minimum for accessibility, level AA is the recommended level of compliance for most websites, and level AAA is the highest and requires implementation of all guidelines to ensure maximum accessibility. The WCAG is organized into four basic principles, Perceivable, Usable, Understandable, and Robust. These principles provide a clear and consistent framework for designing accessible web content, covering all aspects of user interaction.

ARIA specifications for improving digital accessibility

We have mentioned them as a way to ensure the robustness of digital platforms, but we need to delve deeper into what ARIAs are and how they can support the broader effort to make web applications more accessible.

ARIA stands for Accessible Rich Internet Applications and refers to a W3C specification that provides a set of attributes that can be added to HTML markup. They take the form of attributes that help improve interaction with assistive technologies, such as screen readers and screen magnifiers, by providing additional information about the roles, states, and properties of user interface elements.

These attributes help communicate additional information about the roles, states, and properties of user interface elements that might not otherwise be easily interpreted by assistive technologies.

The proper use of ARIA attributes can significantly improve the accessibility of dynamic Web applications, and in detail we recognize:

  1. ARIA Roles

ARIA roles define the purpose of a user interface element. These roles help assistive technologies understand how an element should be interpreted and interacted with. Some of the most common roles include:

  • role=“button”: Indicates that an element is a button.
  • role=“checkbox”: Indicates that an element is a checkbox.
  • role=“dialog”: Indicates that an element is a dialog box.
  • role=“navigation”: Indicates that an element is a navigation section.
  • role=“alert”: Indicates that an element is an alert message.

 

  1. ARIA states

ARIA states describe the dynamic conditions of a user interface element. These states can change in response to user actions and must be updated in real time to reflect the current state of the element. Some examples of ARIA states include:

  • aria-checked: Indicates the state of a checkbox (true, false, mixed).
  • aria-expanded: Indicates whether an element, such as a menu or section, is expanded or compressed (true, false).
  • aria-hidden: Indicates whether an element is visible or hidden to users of assistive technologies (true, false).
  • aria-disabled: Indicates whether an element is disabled and non-interactive (true, false).

 

  1. ARIA properties

ARIA properties provide additional information about user interface elements. These properties help describe the characteristics and relationships between elements. Some of the most commonly used ARIA properties include:

  • aria-label: Provides a textual label for an element, which can be read by assistive technologies.
  • aria-labelledby: Indicates the ID of another element that serves as a label for the current element.
  • aria-describedby: Indicates the ID of another element that provides an additional description for the current element.
  • aria-controls: Indicates the ID of another element that is controlled by the current element.

 

  1. ARIA Landmark Roles

ARIA landmark roles help define the main areas of a Web page, facilitating navigation for users of assistive technologies. Some of the most common landmark roles include:

  • role=“banner”: Indicates the main header of a page.
  • role=“main”: Indicates the main content of a page.
  • role=“complementary”: Indicates additional content that complements the main content.
  • role=“contentinfo”: Indicates information about the content, such as copyright or contact information.
An increasingly topical issue

After the coronavirus pandemic, which has generated a further increase in the use of the web, the need to set up an accessible website has never been so great: an American study reported that 62 percent of accessibility professionals interviewed in March and April 2020 reported that “COVID-19 has increased the awareness and impact of accessibility on the digital channel”. More recently, then, a survey by Deque revealed that by the end of 2021, 73 percent of accessibility professionals in the U.S. saw an increase in awareness of this issue on digital channels during the pandemic, which forced more people to engage online, whether for work, training, or just for fun.

When websites are not fully accessible, it can become incredibly difficult for some users to perform the necessary tasks or find the information they are looking for. This obviously determines a negative experience, which worsens the feeling towards the brand and undermines trust and loyalty.

Even more pragmatic, this also goes against the growing attention that Google is devoting to sites that, on the contrary, provide a good user experience – and that is also the basis of the Page Experience, the algorithmic update already scheduled for 2021. This means that the search engine wants to be sure to include the best sites among its results, and the accessible sites meet the criteria because they are the easiest to understand and use.

Laws on digital accessibility

But in addition to being indispensable for the user experience, an accessible website is also required by law in most cases and regulations: in the European Community, in 2019 was introduced the European Accessibility Act, concerning products and services such as computers and operating systems, smartphones and e-commerce platforms, which must be compatible with assistive technologies and presented in an appropriate format for all users.

The Equality Act has been in force since 2010 in the United Kingdom, which covers the accessibility of websites in the United Kingdom and is designed to protect people from unfair treatment, while promoting a fair and equal society. In particular, it requires site owners to anticipate the needs of potential disabled customers and to make “reasonable adjustments” to those needs.

The American Disability Act (ADA) was introduced back in 1990 for the United States, a civil rights law that prohibits discrimination against people with disabilities, including websites with inaccessible components, which may be considered discriminatory and in breach of Title III of the Act. Also influential here is what is known as Section 508, a U.S. federal law (part of the Rehabilitation Act of 1973) that requires federal agencies to make their electronic products and information technologies accessible to people with disabilities. These standards include requirements for websites, software, documents, and other information technologies used by federal agencies; compliance with Section 508 is essential to ensure digital accessibility and inclusion of people with disabilities in government online environments in the United States.

This interest is not too surprising, to read the estimates of the CDC federal agency – which reveals that 25 percent of adults in the United States live with a disability – nor is it surprising to find that legal proceedings are often opened against sites that did not respect those principles – 2.256 lawsuits for the accessibility of the ADA website in federal courts in the only 2019. These cases have also affected in the past giants such as Nike (guilty of inaccessibility to screen readers, the presence of empty links and the absence of alt texts for images), Domino’s Pizza (users with screen readers could not customize the pizzas nor take advantage of discount coupons due to a technical problem of compatibility with the site) and the website of the star Beyoncé (for absence of alt texts, impossibility of access via keyboard and poorly accessible dropdown menus).

How to make the site accessible

Despite the growing attention on the issue-even supranational institutions are moving to promote accessibility, as mentioned-the reality tells us that in practice digital inclusiveness is the last thing (or at least among the last) that marketers think about when they create a website, and the numbers found by the Webaim study confirm this.

In addition to the social aspect, because as mentioned this negligence prevents so many people from accessing sites and using them properly, there are also business aspects to consider, because errors create a real growth barrier for the site, which precludes itself from attracting potential customers.

For those who want to change their approach and make their site accessible, there is good news: most of the basic accessibility interventions are fairly easy to implement, although studying common problems and solutions can take time and effort.

What is the purpose of optimizing website accessibility?

Implementing web accessibility is not a task that ends with the adoption of guidelines and standards. It requires an ongoing and proactive approach, involving various practices and tools to ensure that the site remains accessible over time

Best practices for web accessibility include regular testing, inclusive design, and involving real users in the development and evaluation process.

These practices not only improve accessibility, but also help create a more satisfying and inclusive user experience.

The value of IT accessibility for marketing and business

Such work to recognize and adopt Web accessibility can produce positive effects for the site, however, as Atul Jindal points out in his article, because this approach “enhances the customer experience, opens new doors for the business, improves marketing results, and increases revenue in more ways than one.”

Thus, IT accessibility has precious value in modern marketing initiatives, because it specifically allows a site to extend its market reach, improve user experience, and also benefit from SEO advantages.

In particular, a company that has a digitally inclusive Web presence interacts with a greater volume of people it would otherwise have lost, and so these remedial interventions bring a whole new community of potential customers to interact with and to win over as customers to increase revenue. At the same time, it improves positive brand perception, a key element in attracting value-oriented consumers, reflecting a commitment to spreading the values of empathy, compassion, and equal opportunity for all

It is easy to see, then, that the work of optimizing site accessibility also allows for improved user experience, a factor that is increasingly at the heart of digital presence because it relates directly to conversions and influences what the target audience wants, making it available in the easiest, most immediate and fluid way. A site without usability errors more easily achieves customer satisfaction and gives the potential customer a final push toward conversion, contributing precisely to improved returns.

And this also benefits SEO, because search engines prefer to bring up sites in their SERPs that are “safe, accessible, and valuable to all types of users.”

What the main accessibility mistakes are

Before we even delve into the practical aspects of optimization, it is appropriate to complete the theoretical framework and thus understand what are the obstacles and barriers that we commonly erect on our sites.

The main accessibility problems of a website can vary, but there are some common issues that often arise that can make it difficult or impossible for people with disabilities to use the site. WebAIM has as mentioned identified several recurring problems that can negatively affect the user experience, among which are:

  • Lack of alternative text for images

One of the most common problems is the absence of alternative texts (alt text) for images. Alt texts are text descriptions that can be read by screen readers, allowing blind users to understand the visual content. Without these texts, images become inaccessible to those using assistive technologies.

  • Insufficient contrast

Inadequate contrast between text and background is another significant problem. Inadequate contrast makes it difficult for users with visual impairments, such as partial blindness or color blindness, to read the text. WebAIM recommends using color combinations with high contrast to improve readability.

  • Mouse-dependent navigation

Many Web sites are designed so that they require the use of a mouse for navigation. This presents a barrier for users with motor disabilities who use only the keyboard or alternative pointing devices. It is essential to ensure that all site features are accessible via keyboard.

  • Absence of subtitles in videos

Videos without subtitles exclude users who are deaf or hard of hearing. Subtitles provide a text transcript of the audio content, making videos accessible to a wider audience. WebAIM stresses the importance of including subtitles for all video content.

  • Complex and unstructured content

Long, complex text without clear structure or sectioning can be difficult for users with cognitive disabilities to understand. It is important to organize content logically and use headings and paragraphs to improve readability and comprehension.

  • Lack of labels and instructions for forms

Online forms without clear labels and instructions can be difficult for all users to use, but they are a particularly significant barrier for those using assistive technologies. Labels must be properly associated with form fields to ensure that screen readers can provide the necessary information to users.

  • Content that cannot be resized

Text that cannot be enlarged without losing readability or functionality is a problem for users with visual impairments. WebAIM recommends using relative units, such as em or rem, to allow users to resize text to suit their needs.

  • Lack of feedback for errors

When users make mistakes while filling out forms or interacting with the site, it is essential to provide clear and helpful feedback. Lack of feedback can make it difficult for users to correct errors and complete tasks.

  • Incompatibility with assistive technologies

Websites that are not compatible with screen readers, screen magnifiers, and other assistive technologies may exclude users who depend on these tools. It is important to test the site with different assistive technologies to ensure that all users can access content without problems.

  • Timed content

Content that requires a response within a limited time may be difficult for users with motor or cognitive disabilities to use. WebAIM suggests avoiding timed content or providing options to extend the available time.

  • Animations and moving content

Animations and moving content that cannot be stopped or controlled can be distracting or cause problems for users with cognitive or visual disabilities. It is important to provide controls to pause, stop, or hide this content.

  • Lack of semantic structure

Inappropriate use or lack of HTML semantic elements can make it difficult for assistive technologies to correctly interpret the content of a Web page. Semantic elements, such as headers (<h1>, <h2>, etc.), paragraphs (<p>), and lists (<ul>, <ol>), provide a logical structure that helps screen readers navigate and better understand the content. The absence of this structure can be confusing and make the user experience less intuitive.

  • Non-localized content

Websites that do not offer content in multiple languages can exclude users who do not speak the site’s primary language. In addition, content that does not take into account cultural and linguistic differences may be difficult for users of different nationalities to understand. It is important to provide accurate translations and consider cultural specificities to make the site accessible to a global audience.

  • Inaccessible document formats

PDF, Word and other document formats that were not created with accessibility in mind can be a significant barrier. These documents must be properly structured, with the use of tags, text descriptions for images, and clear navigation, to be accessible to users using assistive technologies.

  • Flash and JavaScript content not accessible

The use of Flash and JavaScript content that is not designed to be accessible can create problems for users with disabilities. It is essential to ensure that this content is compatible with assistive technologies and can be navigated and used without difficulty.

  • Lack of accessibility testing

Finally, one of the most common problems is the lack of accessibility testing during the site development process. Without regular testing, it is difficult to identify and correct accessibility problems. It is important to use automated validation tools, such as WAVE, Axe, and Lighthouse, and to conduct manual testing with real users to ensure that the site is accessible to all.

Tools and resources for making sites accessible

In light of all this, implementing web accessibility requires a proactive and continuous approach, involving the adoption of established guidelines, the use of validation tools, and the involvement of real users in the testing process.

In particular, we need to know and use tools and resources that can help identify and solve accessibility problems. These tools not only facilitate the testing process, but also offer guidance on how to improve site accessibility. In addition, there are numerous educational resources that can help designers, developers, and website owners better understand accessibility practices and implement them effectively.

Accessibility validation tools are essential for identifying problems that may prevent users with disabilities from accessing site content. Among the most popular and useful are:

  • WAVE (Web Accessibility Evaluation Tool): WAVE is a free tool that analyzes web pages and provides a detailed report on accessibility problems. It highlights errors and offers suggestions on how to fix them, making it easier for developers to make the necessary changes.
  • Axe: Axe is another accessibility testing tool that can be used as a browser extension or integrated into development workflows. It provides in-depth analysis and practical suggestions for improving site accessibility.
  • Lighthouse: Lighthouse is an open-source tool from Google that can be used to improve the quality of web pages. It includes an accessibility audit that evaluates various aspects of the site and provides recommendations on how to improve.
  • Tenon: Tenon is an accessibility testing tool that provides a detailed and customizable analysis. It is particularly useful for development teams who wish to integrate accessibility testing into their ongoing development processes.

These tools not only help identify problems, but also offer practical suggestions on how to solve them, making the accessibility improvement process more manageable and less burdensome.

To effectively understand and implement accessibility practices, it is essential to have access to high-quality educational resources. Here are some of the most useful resources:

  • Web Accessibility Initiative (WAI): The W3C’s WAI offers a wide range of resources, including guidelines, techniques, and tools to help designers and developers create accessible Web content. The WAI website is a key resource for anyone wishing to learn more about web accessibility.
  • Coursera and edX: These online learning platforms offer courses specifically on web accessibility, taught by experts in the field. These courses cover various aspects of accessibility, from the basics to advanced techniques, and can be taken at your own pace.
  • A11y Project: The A11y Project is a community of developers and designers offering practical resources and guides for improving web accessibility. The website includes articles, checklists, and tools that can be used to make websites more accessible.
  • Inclusive Design Principles: These principles offer practical guidelines for creating inclusive digital experiences. They are a valuable resource for anyone wishing to take a holistic approach to accessible design.
  • WebAIM (Web Accessibility in Mind): WebAIM offers a wide range of educational resources, including articles, tutorials and assessment tools. It is an excellent resource for anyone wishing to learn more about Web accessibility.

How can I make my Web site accessible?

Adopting inclusive design early in the development process and involving real users in testing can significantly improve a site’s accessibility and usability. This approach not only makes the Web more accessible, but also helps create a more satisfying and inclusive user experience.

More specifically, digital accessibility requires a systematic approach and the adoption of various practices and techniques.

Key steps to improve site accessibility include:

  1. Follow WCAG. The Web Content Accessibility Guidelines (WCAG) provide a comprehensive framework for creating accessible Web content. The guidelines are divided into three levels of compliance: A, AA and AAA. Level AA is generally recommended for most websites.
  2. Use alt text for images. Add text descriptions (alt text) for all images. This helps blind users understand the content of images through screen readers.
  3. Ensure keyboard navigability. All site features should be accessible using only the keyboard. This is especially important for users with mobility disabilities who cannot use a mouse.
  4. Improve color contrast. Use color combinations with good contrast to ensure that text is readable for users with visual impairments. In particular, it is important to use appropriate colors to ensure good contrast between the text and the background, avoiding low contrasts in the title and colors that make it difficult to read the text. Tools such as the Colour Contrast Analyser can help to check color contrast.
  5. Work on text readability. There is also very clear and precise guidance for managing textual content. For example, we recommend aligning text to the left, avoiding justified pagination, and making sure to divide paragraphs clearly, using subheadings and headings to facilitate reading and understanding of the content. Equally important is to control the spacing between words for better readability and set an even spacing between words to improve the readability of the text. In this regard, fonts without graces (such as Arial, Helvetica, Verdana, and the like) would be preferred over fonts with graces, such as Times New Roman, because they are more readable on the Web for people with dyslexia, low vision, and cognitive problems. On the practical side, text should have a line spacing of at least 1.5 times the font height; the spacing between paragraphs should be at least 2 times the font size; the spacing between letters should be at least 0.12 times the font size; and, finally, the spacing between words should be at least 0.16 times the font size.

The SEO work on accessibility

The SEO has direct control over at least two of these issues, and more generally there are various areas of overlap between optimization work and accessibility, which can have a positive impact from these interventions. Here is a general overview (in random order) of the areas of onpage work that can affect and improve site accessibility.

  1. Page title

Page titles are one of the basic elements of SEO on page and serve to provide context and help users (and search engines) to understand what the web page is about; as we know, the titles are not displayed directly on the site, but they appear on the search engine results page as clickable links and in the browser tab tab.

So, they allow users to identify whether information on a page is relevant to them, but also to differentiate content when multiple tabs or pages are open: screen readers rely precisely on the page titles to clarify to users when they browse between pages.

Optimising this field means thinking about people first, instead of filling the title with keywords for bots, and the tag must match the intentions of the user, as suggested by Abhishek Shah on Searchenginewatch: for this, writing a title that accurately reflects the topic the page is the best way to be found and clicked, and “Accessibility guidelines say the title should be for example The best Android smartphones for 2020 instead of Why would you want to buy one of these smartphones“.

  1. Headings

It is another theme we have already met: in SEO, the main focus of headings is on the H1 tag to provide an overview of the main content of the page (visible on the site, as opposed to the title SEO), while the H2-H6 tags are used to further define the structure of a page. A good structure can also activate a featured snippet in SERP for certain queries.

Just as search engine crawlers do, assistive technologies use headings to quickly navigate to a page and move to a particular section of content. More in practice, titles and subtitles allow a reader to understand what is worth reading and what is worth skipping.

The best practices of SEO and accessibility converge for this element: use only an H1, make sure that all titles are relevant to the underlying content and use heading only when they are contained in the paragraph, because the heading describes the text below.

  1. Sitemap

HTML sitemaps on the site help all users to find the content they are looking for, especially if the site has a complex navigation, and are even more important for accessibility because they provide an overview and clear access to all important pages of the site.

  1. Anchor Text

The anchor text is useful to describe the content that will be found on the page to which a link brings: it can be used to describe the purpose of the page and help users determine if they want to click on the link to visit the destination page.

Generally, screen readers scroll a page and inform users when a link is found before announcing the anchor text; users will then give the input to follow the link if they deem it useful.

Search engine crawlers also use anchor text to help understand the context of the target page, and the phrase in which the link is contained is also useful for SEO and accessibility purposes.

The advice in this area is not to limit yourself to a generic text such as “click here”, but to write an anchor text that is relevant to the page, while remaining concise.

  1. Breadcrumb links

Used as a secondary navigation, breadcrumbs allow users to return to the original page or first-level content and climb back along the path they followed to reach the page where they are located.

Links can also be used to show search engine crawlers and screen readers how a site is structured, and are also a great way to improve internal linking, especially for large sites with complex navigation structures.

To ensure that breadcrumbs are accessible to all users there are some factors to consider, such as making sure they are placed in the same location throughout the site; in addition, it is important that the words used for links are descriptive, to provide accurate information when reading screen readers.

  1. Alt texts

The best-known meeting point between SEO and accessibility is definitely the use of a descriptive alt text for images, which serves to provide alternative textual information to users with visual disabilities, unable to read the image and any text in it.

These visual elements can become an accessibility barrier for blind and visually impaired users – who often have to rely on assistive technologies that use an upgradable synthesizer and Braille readers – or with devices that fail to load images.

Alt text is also used to help search engine crawlers understand the context of the image, which can thus be better analyzed and shown in image search – and in fact it is one of the best SEO practices for these resources – and is read aloud by screen readers: this means that it must be written accurately and pertinently, not simply stuffed with keywords in an attempt to optimize it (vainly) for bots.

Machine learning algorithms have progressed rapidly in recent years, and so search engines are now able to easily determine if there is an abuse of keyword stuffing in alt text; At the same time, artificial vision tools are becoming sufficiently advanced to identify what is present in an image in order to automatically create the relevant alternative text.

It is good to remember that the alternative text is different from a caption, which usually always appears an image, while the alt text is not visible on the front-end of the site.

  1. Navigation and architecture of the site

An effective site structure, which takes care of the architecture and navigation, simplifies the lives of users, who can quickly find what they are looking for and immediately view the most important pages of the site, but is also useful to search engine crawlers.

In general, navigation links are designed to be tab-able, and therefore all keyboards and screen readers are able to read them.

However, we must avoid the mistake of including the entire site in the navigation: this can cause confusion to all users and hinder accessibility, and on the other hand it indicates to the search engine crawlers that the site has a flat architecture.

More specifically, navigation is a challenge for blind and visually impaired users, who cannot use a mouse to move around the site and use tools such as Braille keyboards.

We must therefore incorporate keyboard navigation into the site, ensuring that disabled users can access all the interactive elements of the website, including:

  • URLs
  • Anchor texts
  • Drop-down menus
  • Widgets (also JavaScript)
  • Modules
  • CTAs
  • Dialog boxes.

Alternatively, we may only use HTML links, buttons and form fields to ensure that all elements of the site are accessible from the keyboard.

  1. User interactions

Just like Googlebot is not able to perform physical interactions – such as clicking buttons or opening drop-down menus – screen readers cannot do so, unless they are directed by the user.

For this reason it is recommended to reduce the number of physical interactions needed: if we have a drop-down menu or an accordion on the site, the text must still be contained in the source code to ensure that both bots and screen readers are able to read the content without having to perform any user interaction.

However, this hidden text must make sense and reflect what is written on the page, rather than serve as a method to make the old hidden keyword stuffing.

It is also good practice to avoid using a mouse pass action to reveal any content, unless the hidden content is also included in the source code.

  1. Readability

Ensuring that any content on a site is readable and assimilable is also important for both users and search engines: having a simplified content reading level is one of the best ways to help users who may have cognitive disabilities, and can also help visitors whose first language is not the one used on the site and those who could read the content while they are distracted.

Simplifying the readability of a site means avoiding the use of technical or complex language, making sure that the text is aligned to the left and that lists are used.

On the technical and design side, it is very important to think about color and contrast: people with vision disorders – such as retinitis pigmentosa, glaucoma, diabetic retinopathy and cataract – have a low sensitivity to color contrast, and when designing Web pages you have to ensure a high contrast between the foreground and the background, for example, using yellow letters on black background and avoiding using thin fonts.

In principle, black text on white background ensures maximum readability (even for CTA), but we can also opt for a combination of black text on yellow background or yellow text on blue background; For sure, it is to avoid a mix like green text on red background or vice versa, difficult to read even in normal conditions.

Be careful that there are no Javascript or CSS features that prevent users with eyesight problems from increasing contrast.

In practical terms, it can also serve to allow users to enlarge the font size, solving the problem that many people encounter with small texts: offer an alternative style sheet, with the ability to enlarge the font size without interrupting the page layout, could facilitate the reading of the content. In addition, CTA buttons should have a larger font size to be more noticeable.

  1. Descriptive URLs

Readable URLs are also important for accessibility, and best practice tips include ensuring that URLs are easy to read and understand, using word separators such as hyphens. Screen readers can quickly and accurately read descriptive Urls, providing context for blind and partially-sighted users.

These meaningful descriptions also make it easier to switch to the correct content, because Urls inform users of what they can expect to find when they click on a page, as well as being used by search engines to understand the context of the page.

Taking the “about” page as an example, the expert Manish Dudharejia on SEJ explains that www.abcmarketing.com/about is a low-readability URL, while www.abcmarketing.com/about-our-company is a high-readability URL.

  1. Accessibility of videos and multimedia content

Videos and other multimedia elements on the website play a key role in increasing user engagement, especially in this one that has been called attention economy.

Regarding accessibility, you have to consider who has problems with hearing, but also who has problems with vision: for the latter, the solution can be to use an audio description to add to parts only visual – among others, images, gestures and changes to settings – which will help blind users enjoy the video.

For deaf or hearing-impaired users, however, we can use text captions that synchronize with video and audio tracks.

Common sense must also be used in this field: adding hours of audio description makes the experience meaningless for the user, just as it does not facilitate people too long text or with color contrast not evident.

Finally, we must use an accessible media player: modern HTML5 players offer greater possibilities to incorporate accessibility.

  1. Minimize the use of tabs

Usually, screen readers inform blind users of the number of rows and columns in a table, but it is often difficult for these devices to read tabular data in the flow that corresponds to the visual order.

Where possible, therefore, we should prefer the CSS for data presentation and, if we have to enter a table, use the correct headers for each row and column.

We can also use the captions of HTML5 tables to provide additional context for disabled users.

How to assess and test site accessibility

Once these best practices are implemented, then you have to test the accessibility and verify that everything works regularly: there are several tools that can be used for this purpose, including many Chrome extensions that can be run in the browser to evaluate specific web pages.

Among several different ones, the article points out:

  • The WAVE evaluation tool, developed by webAIM.org, provides visual feedback on the accessibility of content by adding icons and indicators on the page.
  • axe Web Accessibility Testing, a Chrome extension uses the axe open source Javascript library, developed by Deque Systems: the test is performed within the browser’s development tools and identifies accessibility flaws on a web page.
  • The accessibility control of Siteimprove, which provides a clear overview of the accessibility problems of a page with clear explanations of how they affect users.
  • Google Lighthouse, the Google tool that also checks accessibility and provides a score similar to that used for performance.

The checklist of interventions to improve site accessibility

And so, although SEO work typically focuses on ensuring that Web sites are accessible to search engines, many of the areas of optimization can also have an impact on site accessibility for users.
Yet not all sites adhere to these principles, and there are many obstacles that can create difficulties for users. These are the main issues related to accessibility, with a checklist of interventions to be implemented on the site to overcome critical issues.
For maximum effect, IT accessibility should be considered a priority and therefore included in the digital and marketing strategy: if we want to correct some of the problems on our pages, we can refer to this quick checklist of interventions that allow us to improve digital inclusivity and demonstrate a different and more serious attention to users/customers, as well as the possession of communicative and technological competence.

  1. Organization of titles and headings

We start with the structure to be given to the page through titling and a hierarchical layout, which shapes the content and makes it easier to read. Proper use of page titles and headings, which creates a hierarchical organization, is a key part of Web accessibility and SEO, because it can make the site usable and understandable both for users with certain cognitive disabilities and for readers with low attention spans, increasing their satisfaction and overall UX.

Good page titles are particularly important for orientation, to help people know where they are and move between pages opened in the browser: the first thing screen readers say when the user switches to a different Web page is just the page title. As also recommended by SEO best practices on titling, therefore, it is also important for accessibility to verify that there is a title that adequately and briefly describes the content of the page and that this title is unique and adequately distinguishes the page from other Web pages. In addition, the hierarchy of headings is also significant: at an ideal level, the page starts with an “h1”-which is usually similar to the title of the page-and does not skip levels, moving on to the various h2, h3, and h4, although these are not absolute requirements but only recommended.

  1. Color contrast

Some people cannot read text if there is insufficient contrast between the font and the background (such as using light gray text on a light background): color contrast involves adjusting the color of foreground web elements (such as fonts) relative to the color of background elements, to ensure that what is most valuable stands out and is easily readable for people with visual impairments and others.

The Bureau of Internet Accessibility has identified a color contrast ratio that ensures that our Web site is visible and readable for people with color-related visual impairments.

Registrazione

Keep your site under control

Analyze your page returns and check key aspects of user interaction

Staying on the font theme, it is also good to pay attention that individual fonts are recognizable and distinguishable, as well as to evaluate the actual efficiency of text resizing controls (available on most browsers): in order to be able to read the content, some people need to enlarge the font size or change other aspects of text display, such as the space between lines. However, if pages are not designed properly, they actually become unusable when the size of the text is changed, especially when it is changed through text-only zooming or text settings, because what happens is that columns and sections overlap, the space between lines disappears, lines of text become too long, or even the text itself goes away.

  1. Alt text for images

Alt text helps visitors understand what a web image represents even when they are unable to view it for whatever reason; more specifically, alt text makes information is available to people who are blind, but also to people who disable images or who, due to lack of sufficient network connection, cannot load them properly, as well as to search engine crawlers.

If we do not provide alt text to images, these resources are inaccessible, particularly to people using a screen reader device, which reads aloud the information on a page and uses just the alt text to describe the visual image.

Optimizing images for SEO and curating descriptive and specific alt text allows, therefore, to offer all visitors fully usable content in its entirety, thus building a better user experience.

  1. Alternatives to multimedia content

Web pages no longer rely only on the textual part and, as we know, there are more and more images, videos or podcasts that complement the information: however, if we include these resources we have to consider the possible limitations for some users.

In particular, information in podcasts or other audio files is not available to deaf people or some people with hearing impairments, while visual information in videos is not available to blind people or some people with visual impairments: however, to overcome the obstacle, we can offer the content in an alternative format such as captions and text transcripts, which can be read by screen readers and Braille displays or enlarged and reformatted for visually impaired people.

  1. Management of forms and other labels

We have mentioned that forms are one of the most critical elements for accessibility and that there are numerous errors on sites in this regard, particularly the lack of management of labels identifying forms-meaning a single text box (e.g., Search), or a complex form with text fields, radio buttons, check boxes, drop-down lists, and buttons.

It is important that all form and control fields have visible, text-based labels that people can then interact with using only the keyboard, voice input, and screen-reading utilities; moreover, when implemented and labeled correctly, the labels themselves become selectable, increasing the target area and simplifying the selection of small radio buttons or check boxes.

Iscriviti alla newsletter

Try SEOZoom

7 days for FREE

Discover now all the SEOZoom features!
TOP