Accessibility: what it is, how to apply it to the site and why it helps the SEO
To remove the IT architectural barriers, and therefore the obstacles that people with disabilities encounter every day when they try to use specific services or information on the Net, and more generally to offer equal conditions to all users. In summary, we can say that this is the ultimate goal of accessibility, one of the key words to keep in mind not only in the design of the site, but also in the daily work of optimization, as it involves several elements related to SEO.
The definition of accessibility
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.
What website accessibility means
This topic then does not exclusively concern persons suffering from a disability, but in a broader sense all users, from which it follows that accessibility is the attempt to provide all people with the same opportunities to use a site, regardless of their abilities and circumstances, including techniques.
According to Tim Berners-Lee, director of W3C and inventor of the World Wide Web, “the power of the Web lies in its universality” and therefore “access by all, regardless of disability, is an essential aspect”. By its nature, the Network is designed to “work for all people, regardless of their hardware, software, language, location or capacity”, making it “accessible to people with varying degrees of hearing, motor, visual, and cognitive abilities”.
When this happens, the Web removes the barriers to communication and interaction that many disabled people face in the physical world, but when “when websites, applications, technologies or tools are badly designed” may create other barriers that exclude people from using the sites and the entire Network.
It is always 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 4 principles of accessibility
A website is accessible if it meets four principles, known as POUR:
- Perceivable – providing for the removal of any barriers that a user might have to access the content, including the ability to use the site with screen reader, providing text alternatives and a logical structure.
- Operable – a website that works and can be used by all users, regardless of the device on which they are browsing, thanks to a work on the user interface and navigation. This parameter also includes ensuring sufficient time for users to complete a given task.
- Understandable – people must be able to understand the information displayed on a Web page, as well as clearly understand the user interface and browse the site. Includes providing predictable and consistent navigation.
- Robust – in order to be solid, a site must be able to be consulted and interpreted by different technologies and platforms, including screen readers. In addition, it must remain accessible during updates to all platforms.
An increasingly topical issue
With 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”.
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 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 Act on Accessibility, 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.
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).
The intersection between SEO and accessibility: still too many errors
Although SEO work typically focuses on ensuring that websites are accessible to search engines, many of the optimization areas can also have an impact on website accessibility for users.
As the SEJ article says, in February 2020 Web Aim used its WAVE accessibility engine to analyze the rendered DOM of all pages after applying scripts and styles, to assess barriers to end-user accessibility and errors in web content accessibility guidelines (WCAG).
The study revealed that 98 percent of home pages had detectable WCAG errors, while 97 percent of pages with deeper content failed the accessibility test.
The main factors that caused the errors in both cases were low-contrast text, missing alternative text and empty links.
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.
- 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“.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
