How to have a website that’s accessible to everyone? – Accessibility in the online environment

accesibilitate website - online accessibility

Context: about online accessibility

In our country (Romania – Ed.), we talk too little about online accessibility. Here, in the sea of bits and pixels, the phenomenon of social inclusion takes shape, most often by chance. How do you develop a website that is accessible, in a real way, to everyone – regardless of their visual, auditory, motor and other skills? How do you create content that makes it easier for everyone interested in your company’s products or services to know and get information equally?

„The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee, inventor of the World Wide Web (WWW) and director of the World Wide Web Consortium (W3C).

Large companies and international platforms, such as Facebook, YouTube, Google or WordPress, provide users with a series of tools designed to increase the level of accessibility for the messages transmitted online. Sometimes, online marketing objectives overlap good content accessibility practices from the point of view of their technical execution. A very good example would be the importance of alternative texts in the case of images used on a website. These are relevant both from the SEO point of view and from the perspective of making the visual content accessible.

However, although the tools exist, they are underutilized. We set out to bring them to the attention of the general public, as well as of our partners and… our own. Adopting new habits and standards takes time, but the first step is to become aware of them being needed.

Why try to apply the principles of accessibility on your business website?

The intentional, strategic and consistent use of these tools can lead to changes that have a double-impact:

  • in the lives of your potential customers…
  • but also in your turnovers.

People with visual or hearing impairments, those who have health problems, even temporary ones, and cannot browse websites as they normally would, but also those who use hardware, software or even browsers considered to be not exactly compatible with the norm represent an audience that Romanian businesses tend to neglect. A quality website means, beyond a visually appealing look, a website that is accessible and easy to use by all its visitors – regardless of the ones mentioned above.

The benefits are self-evident. If you follow the principles of online accessibility, your business website becomes more visible, easier to find (because it appears in the list of search results) and obviously becomes accessible to a larger audience, for users who will appreciate the efforts made by your company to provide them with the information they need.

Online accessibility: recommendations for an accessible website

Internationally, there are a number of official recommendations on website accessibility measures, such as the World Wide Web Consortium recommendations – which you can read in detail on the Web Content Accessibility Guidelines, Web Accessibility Initiative or Accessible Rich Internet Applications

At national level, there is a Guide for making the web pages of public institutions in Romania more accessible (the link opens in the browser, in a new window, PDF format) developed by the Ministry of Public Consultation and Social Dialogue, in partnership with the Ministry of Communications and Information Society, in line with national strategies that are currently implemented. We believe that these objectives and recommendations can be adopted in the private sector as well, and website developers in Romania already apply a large part of these technical measures.

Accessibility criteria and standards are dynamic, depending on the access technology currently available. Beyond the technical aspects, which are not easy to implement and are a must for many website creators, there are a number of actions that do not involve too much extra effort or advanced knowledge in the field. However, it involves awareness and their intentional implementation, in a systematic way.

Our recommendations can be a minimum set of measures that can be taken into consideration by any company. Some aspects, which are more technical, only need to be requested or communicated to the team in charge of the website. Others require minimal documentation and a little practice. Most people who manage and publish content on a website can become familiar with these processes without too much difficulty.

1. Headings are important. Make sure they are set properly!

According to an opinion poll conducted by WebAIM in October 2017, among screen reader users, when accessing a larger web page, 67.5% of respondents browse using headings.

According to the same survey, over 60% of respondents prefer the web page to have a single <h1>, in which the title of the respective page or the title of the article is present – not the name of the site. After this first heading, it is important that the main text or content of the page starts immediately. No additional elements such as titles and links to other articles, no additional menus, no navigation elements to other pages, etc. These make it difficult to navigate and experience the user of a screen reader.

If certain settings have already been made by the site developer, when a new article or page is published on the site, it is important that the text be formatted as such. So, if there is already an H1 (Heading 1) properly set on the site, when publishing an article, for example, subtitles must be selected and set as such, as headings, not just visually formatted. Sometimes, the font is enlarged, the text is colored or bolded, but these measures have only an aesthetic and visual function. From the formatting options, where the “Paragraph” option appears as standard, an H2, H3 or H4 is to be selected in the case of subtitles, depending on the structure of the text.

The content of a page or article must have a clear structure, similar to any table of contents of a book. Setting subtitles, in addition to highlighting them visually, helps users navigate the website easily and efficiently.

2. Express yourself clearly and publish the text as text, not as an image

A basic rule: do not replace the text with images in which the text appears. Most often, this practice occurs in two situations. Either we have a scanned or photographed text that we don’t have the time or desire to transcribe, so we upload it to the site as an image, or we have included all the information in a poster or other form of graphic design, which we find more visually appealing. Although it seems tempting and effective, avoid making these mistakes. Images cannot be fully decrypted by screen readers. Just as search engines will not consider the image as text, and the content will not be indexed as such. If you do not want to give up the design, you can display the information both as text and as a poster or image.

Then, avoid as much as possible abbreviations or abbreviations that screen readers cannot always optimally interpret. Clear, detailed expression that provides context and uses familiar language is preferable.

3. Provides accessible files for download

If you want to provide users with additional content in the form of files that can be downloaded from the site, the general recommendation is that the documents be in a doc, docx or txt format and contain text, not scans or photos of the text. As for xls, xlsx or csv files, make sure that they contain simple tables with a structure that can be easily understood and read.

4. How to format links?

Regarding links, there are some simple rules to ensure accessibility in the online environment.

Check the option to open links in a new window. Opening a link in the same window where the user was already browsing content can be annoying for most website visitors. But it can be downright challenging for a certain segment of your audience. Returning to the previous page, depending on the access technology used, can be cumbersome and confusing when browsing the content. If the link opens in another window, the user can still browse the main content, having at hand the new window open.

Insert links on clear words, which are representative even when not read in context. Blind people, for example, can browse a web page, as we discussed earlier, using headings. In the same way, with the help of the Tab key, they can jump from one link to another on the page, to find the necessary information. When screen readers reach a link, it is important that its tag or the words on which it was inserted have a meaning of their own and clearly express the nature of the link.

Avoid inserting a link in its raw form. Screen readers will send them to users like this, no matter how long they are or whether or not they make sense as text.

How to NOT insert a link?
Example 1: For more details about SEO 365, click here!
Example 2: If you want to know how to achieve your goals with the help of words, access https://seo365.ro/articole-seo/.
This is a happy example, in which the link is still short and to the point. Most of the time, however, the links will not have this structure. Therefore, both the insertion of the links in their raw form and their insertion on vague formulations such as “click here”, “this article”, “on their website” etc. should be avoided.

How to insert a link?
Example: Go to the SEO 365 page to find out more details!

When you insert a link that allows you to download a file, specify its format and size. Be sure to insert the link including this additional explanation. Example: Download this “Good Practice Guide”, DOC, 5MB. Some files may be opened automatically by certain programs, as well as automatically opened by a browser plug-in. By specifying the file type in such a way that the information is accessible to all users, you give them the opportunity to choose how to manage it. Some will prefer to save the documents on the computer, avoiding their automatic opening in the browser.

5. Provides explanations for images and video or audio materials

Images, videos or audio recordings can be extremely useful tools to ensure greater accessibility in the online environment. If used in a smart way, they can add value to all website visitors.

For maps, graphs or diagrams, add a descriptive text as well. This type of images usually provide valuable information, sometimes of a scientific nature, with the role of supporting the information provided in the text. When using such images, it is recommended to add descriptive text. For example, if you present a map, briefly describe the steps you can take to reach the place marked on the map. If you present a graph or diagram, describe what they represent, what information appears, and what the possible conclusions are.

Add other attributes for images – without exception. As mentioned at the beginning of this article, adding alternative text or other attributes to images is not only a way to align with the principles of online accessibility, but also a way to follow the principles of Search Engine Optimization. Alternative attributes are your way of communicating to a search engine or screen reader what the image is about. A name such as IMG_0505 is not relevant at all. Therefore, when you upload an image to the website, our recommendation is to rename it from your computer. Then, when you reach the media library on the site, add that alternate text or other attribute.

If the image has a decorative and aesthetic role, the alternative text may contain a short descriptive explanation of the image that includes SEO-relevant keywords. If you insert a link in the image or icon, it is more important that the alt attribute describes the nature of the link.

Add subtitles for video content. If you add video content, make sure it has subtitles available. If you make a short video yourself, try to include subtitles in the process. Many users consume video content without sound enabled. Subtitles are therefore useful for a large segment of the general public.

Do you have a podcast? Make its transcript available in text form as well. There are automatic transcription programs if the podcast does not have an initial script. You can opt for a shorter summary version of it. Or you can transcribe the entire episode, if you want the information to reach all website visitors unaltered. Don’t forget to add descriptive texts of nonverbal or para-verbal elements, as they complement and personalize the content.

Create content on multiple levels. In an ideal and challenging version for any creative mind, any content on a website can be published and adapted in a different format, such as text, images, videos and audio recordings. In other words, any text can also be recorded as audio. Any video can come with subtitles. Any podcast can come with a script in the form of text. Any image can also be described in words. Although it requires more involvement, creativity and resources, the results are complementary and add value to all website visitors.

6. Give up on automatically played background songs

In recent years, this trend has almost disappeared, but you can also find websites that greet you with a background song played automatically. In some cases, the song or sounds in question may indeed accurately portray a company’s personality or values. Most of the time, however, these sounds take users by surprise, scare or disrupt their activities. Almost everyone knows how unpleasant it can be to access a website that immediately starts singing to you at the wrong time. You may be on public transportation. Maybe you’re already listening to music or a podcast. Maybe you are in an environment where silence prevails and thus you disturb those around you.

It is all the more unpleasant for those who use screen readers to access a website. Songs and background sounds overlap annoyingly over the screen reader’s voice. This makes browsing and accessing content considerably more difficult.

If you do not want to completely abandon the background song on your website, you can turn off auto play. Thus, website visitors have the option to turn on the sound themselves, if they wish. From the same spectrum, we recommend that any type of content that moves, scrolls, or updates automatically come with the option for the user to temporarily or permanently stop the animation.

7. Do not rely on colors and sensory abilities to give explanations

Most of us use our visual sense to give explanations. If we are not aware of this trend, we risk not being understood by people with visual impairments. The blue button becomes, in this context, a useless explanation, right? Just like the action of coloring a subtitle with red or purple will remain unnecessary if we do not format it technically as well.

When you want to highlight certain elements on the website, do not rely solely on colors, sizes, shapes or positioning on the page. Highlight them technically and descriptively, using specific explanations. Indications such as “on the right”, “in the image on the left” or “below”, so common in texts published on websites, can be replaced by specific explanations. Mention exactly and specifically the text you are referring to. Mention other attributes when it comes to images, set subtitles, or tags used for links.

However, the colors are relevant from these two perspectives:

  • Color contrast: A strong contrast between the color of the text and the background of the web page ensures greater accessibility for the visually impaired. Give up on any wallpapers images that make it difficult to read the text.
  • The relationship between colors: Choose colors that can be easily differentiated from each other, including by people with color blindness, such as those who may not be able to distinguish red text against certain backgrounds.

The most frustrating elements of a website

We hope that this information is useful and can be put into practice by those who own a website. We conclude with a list of elements that raise the greatest difficulties and frustrations for the respondents of the opinion poll conducted by WebAIM. In order, the most problematic elements on a website are:

  1. The CAPTCHA function – with images that present a text to check if the user is a person;
  2. Pages or items on the page that change unexpectedly;
  3. Nonsense links or buttons;
  4. Presence of inaccessible Flash content;
  5. Lack of keyboard accessibility;
  6. Forms too complex or difficult;
  7. Images that do not have descriptions or whose descriptions are inappropriate;
  8. Missing or inappropriate subtitles;
  9. Too many links or navigation elements;
  10. Tables too complicated;
  11. Inaccessible or non-functional search option;
  12. The absence of links that jump to the main content or that jump over the navigation elements.

Bibliographic ideas and sources:
  • In addition to the international platforms and national guides specified in the article, some ideas and information found on the Wishdesk and Dreamhost sites helped us.
  • By far, the most complete article in Romanian that we found is the article published on Kosson.ro, an article that we recommend and which, although somewhat old (2014), includes information that is technically relevant for those who create websites. 
  • Photo by Sigmund on Unsplash.

If you want a website that truly meets the needs of your potential customers, contact us with confidence. Our specialists offer FREE CONSULTATION in order to present you, in a personalized manner, what the most effective online marketing strategies are today!


Leave a Reply

Îți plac articolele noastre?

Vino în comunitatea SEO 365:

Abonează-te la newsletter!



*Prin abonarea la newsletter, sunt de acord cu prelucrarea datelor mele personale. Firma poate utiliza aceste date pentru a-mi trimite periodic e-mail-uri. Detalii: Politica de Confidențialitate.