.... L'accessibilité est la capacité de rendre un site disponible et adapté à l'accès des personnes ayant des limitations physiques, intellectuelles, ou même des personnes ayant une faible vitesse de connexion à l'internet, et elle est de plus en plus considérée comme un élément clé de la conception web.

Comment l'accessibilité peut-elle améliorer les performances d'un site web ? 

L'accessibilité se traduit par une manière de promouvoir l'inclusion dans l'accès aux outils numériques, générant un processus de dépassement des inégalités entre l'accès à l'information.

En outre, rendre un site web accessible, du point de vue de la conception web, augmente le nombre d'accès, améliore l'expérience des utilisateurs mobiles, et améliore le classement dans les outils basés sur le référencement, comme Google Search, par exemple.

Nous avons rassemblé ci-dessous quelques conseils sur la manière d'améliorer l'accessibilité de votre site web.

L'accessibilité dans la conception

L'utilisation de palettes de couleurs présentant de bons contrastes dans la conception de sites web permet aux lecteurs d'écran d'identifier correctement les variations de teintes. En outre, l'utilisation de bons contrastes permet aux personnes qui accèdent au site web à partir d'appareils ayant des qualités d'écran différentes d'avoir accès aux informations contenues.

En outre, l'utilisation de caractéristiques de conception telles qu'une typographie claire et concise, comme les polices de caractères sans empattement, et d'autres éléments visuels qui peuvent être facilement distingués à partir de n'importe quel dispositif contribuent à améliorer l'accès aux informations à partir des dispositifs mobiles et ou des ordinateurs de bureau les plus divers.

Toutes ces ressources, dans le domaine de la conception web, permettent aux sites web d'être accessibles par les publics les plus divers.

Texte alternatif

L'utilisation de textes de remplacement ou textes alternatifs est importante pour que les personnes qui utilisent des dispositifs d'assistance, tels que des lecteurs d'écran, par exemple, puissent utiliser au mieux les informationscontenues sur le site web. Ces appareils fonctionnent comme des logiciels qui convertissent les informations visuelles en informations tactiles, auditives ou une combinaison des deux, ce qui est essentiel pour une personne malvoyante.

Un autre exemple d'utilisateurs qui peuvent bénéficier des textes alternatifs dans les images est celui des personnes qui ont une faible connexion internet, car, comme les textes alternatifs, ces personnes peuvent avoir accès à ce qui est montré dans l'image, sans nécessairement attendre qu'elle se charge.

Des vidéos toujours sous-titrées

Une autre façon d'accroître l'accessibilité d'un site web est de toujours sous-titrer le contenu vidéo mis en ligne. En sous-titrant une vidéo, les personnes souffrant d'une quelconque déficience visuelle ont accès aux ressources. De plus, le sous-titrage des vidéos permet aux personnes qui accèdent au site web et qui ne peuvent pas activer l'audio sur leurs appareils, parce qu'elles se trouvent dans des environnements publics, par exemple, d'avoir accès à ces ressources de la meilleure façon. 

Enfin, les personnes dont la langue maternelle n'est pas celle de votre site web, par exemple, peuvent tout de même y accéder. Ainsi, les sous-titres aident à la compréhension des mots en lisant, ou à la traduction automatique des sous-titres dans la langue d'origine.

Certains outils effectuent le travail de sous-titrage des vidéos automatiquement, ce qui permet d'économiser ce travail. L'un de ces outils est le sous-titrage automatique de Youtube, qui est une ressource gratuite et disponible pour n'importe quelle vidéo, car la transcription est intégrée au gestionnaire de vidéos du site.

Il existe également des outils utilisés pour la transcription audio, qui seront expliqués ci-dessous.

Transcription des fichiers audio

Il peut également être intéressant de transcrire les fichiers audio et de les convertir en fichiers texte. En créant ces ressources textuelles, il est possible de mettre le contenu textuel à la disposition des personnes souffrant de déficiences auditives, et d'accroître l'accessibilité de ces matériels aux personnes qui ne peuvent pas entendre les fichiers audio ou regarder les vidéos pour le moment.

En ce sens, les fichiers texte commencent à fonctionner comme des types d'articles, ce qui permet d'obtenir les informations contenues de manière visuelle plutôt qu'auditive.

Un outil qui peut être utile dans ce processus est Canvas, qui transcrit les fichiers audio et vidéo.

L'accessibilité, pour la conception web, permet à davantage de personnes d'avoir accès aux ressources, ce qui, si l'on observe les résultats, augmente la portée d'un matériel produit par la marque auprès du plus grand nombre possible de clients.

Tester avec un lecteur d'écran

Tester les sites web avec des lecteurs d'écran est un moyen de valider l'accessibilité de la conception web. Ce test peut être effectué afin d'identifier les éventuelles failles lors de l'activation de la fonction de lecteur d'écran lorsque vous êtes une personne malvoyante, ce qui peut entraîner des malentendus lors de l'utilisation.

La première étape pour tester les lecteurs d'écran est de comprendre comment ils fonctionnent.

Fondamentalement, ces systèmes utilisent des raccourcis clavier pour activer les fonctions qu'ils peuvent exécuter, comme les raccourcis pour lire les intensités précédentes, les mots postérieurs de la même phrase et les commandes de lecture et de pause.

De nombreuses personnes, parce qu'elles n'ont pas besoin de les utiliser au quotidien, ne savent pas comment s'y prendre. Les lecteurs d'écran fonctionnent différemment des navigateurs web ordinaires, tels que Chrome et Safari, par exemple, et n'utilisent nécessairement que les commandes du clavier pour la navigation.

Les lecteurs d'écran courants à utiliser sont VoiceOver et NVDA, le premier étant gratuit pour les appareils iOS et NVDA pour les appareils Windows. Au moins un de ces deux systèmes peut être testé sur le site Web. Une troisième option est Windows Narrator, qui est livré nativement sur les appareils Windows.

L'importance de tester les sites web avec des lecteurs d'écran est justifiée, puisque, pour les personnes malvoyantes, c'est le seul moyen d'accéder au contenu web et d'avoir accès à ce que vous publiez.

Le test du clavier, dans ce sens, est également intéressant à réaliser, ce qui sera expliqué plus loin.

Vérifiez que le site web est accessible uniquement avec le clavier

Une autre façon de tester un site web est de voir s'il est accessible uniquement avec le clavier. Les tendances en matière de conception de sites web étant en constante évolution, il est important de vérifier la faisabilité de chacune d'entre elles pour l'inclusion des personnes ayant besoin d'une plus grande accessibilité.

Comme expliqué ci-dessus, les personnes malvoyantes ont besoin d'utiliser des raccourcis clavier afin d'accéder à chaque élément du site web. Certains raccourcis qui peuvent être testés, par exemple, sont :

● La touche Tab, qui permet de naviguer entre les liens ;

● La touche Entrée pour accéder à un lien qui est en focus après l'utilisation de la touche Tab ;

● Les touches de déplacement vers le haut, le bas et le côté pour naviguer dans les listes, parmi de nombreuses autres touches.

L'utilisation de ces touches pour accéder à un site Web permet aux personnes qui naviguent avec des lecteurs d'écran d'avoir accès à toutes les informations contenues dans la page. Vous pouvez tester ces raccourcis dès maintenant sur la page du site de l'Holographisme et vérifier comment cela fonctionne.

La division des pages en en-têtes, expliquée ci-dessous, permet également d'améliorer encore l'accessibilité.

Utilisez toujours des en-têtes

L'utilisation d'en-têtes consiste à diviser une page web en titres et sous-titres. Lorsqu'elle est divisée de cette manière, en utilisant la modification du HTML de la page, on observe que les lecteurs d'écran sont capables de lire correctement les informations, en différenciant ce qui est le titre et ce qui est le "corps" du texte.

Il faut vérifier la hiérarchie des balises de titre, à partir de <h1>, qui est le titre principal, pour les balises suivantes, comme <h2>, <h3> et ainsi de suite, normalement jusqu'à <h6> au maximum, afin que la construction du site web ne porte pas préjudice au SEO du texte.

La construction du site web, de cette manière, doit, dès le début, être pensée afin de pratiquer l'accessibilité dans une page. Pour cela, Holographisme vous accompagne, dès le début, dans la construction de tous les éléments du site web, avec attention et professionnalisme lors de la construction du HTML de votre site web.

Tester le site sur d'autres appareils

Enfin, le test d'un site Web doit être conçu pour différents appareils, tels que les ordinateurs de bureau, les tablettes et les smartphones. Comme il n'est pas possible de prévoir où chaque public accédera à votre site, il est important de vous tester sur plusieurs appareils.

Pour vous aider dans cette partie, il existe une fonctionnalité native de Google Chrome, appelée "Chrome DevTools", qui vous permet d'avoir une vue du même site web depuis des appareils, notamment des smartphones et des tablettes de différentes marques. Dans ce même outil, vous pouvez observer le HTML de la page de manière complète.

Cette fonctionnalité, en ce sens, permet de tester la conception du site web à partir de différents points de vue des utilisateurs.

Pour accéder aux outils de développement depuis un bureau, appuyez sur les raccourcis Commande + Option + C (Mac) ou Contrôle + Shift + C (Windows, Linux, Chrome OS).

Comment puis-je toucher le plus grand nombre de personnes possible pour ma marque, sans perdre de vue l'accessibilité ?

Comme expliqué ci-dessus, l'accessibilité est capable d'augmenter les résultats d'un site Web de manière très significative. En élargissant la réflexion à différents publics, il est possible d'inclure autant de personnes que possible dans la liste des clients potentiels.

Ainsi, Holographisme, de par son travail de construction de sites web de manière solide et fiable, rend possible la mise en pratique de tous les conseils ci-dessus. Visitez notre Instagram et découvrez, avec nos Case Studies, quelques exemples de sites web créés et édités par nos soins.

Contactez-nous dès maintenant et faites un pas important vers la croissance de votre marque.
..
Accessibility is the ability to become an available and suitable site to be accessed by people with physical, intellectual limitations, or even people with low internet connection speed, and it has been increasingly thought of as a key part of web design.

How can accessibility improve the performance of a website?

Accessibility translates as a way of promoting inclusion in access to digital tools, generating a process of overcoming inequalities between access to information.

In addition, making a website accessible, from the web design point of view, increases the number of accesses, improves the mobile users' experience, and improves the ranking in SEO-based tools, such as Google Search, for example.

We've collected some tips below on how to improve the accessibility of your website.

Accessibility in design

The use of color palettes with good contrasts in web design allows screen readers to correctly identify variations in shades. In addition, the use of good contrasts allows people who are accessing the website from devices with different screen qualities to have access to the information contained. 

In addition, the use of design features such as clear and concise typography, as the sans-serif type fonts, and other visual elements that can be easily distinguished from any device help to improve access to information from the most diverse mobile devices and or desktops.

All of these resources, in web design, allow websites to be accessed by the most diverse audiences.

Alt text 

The use of alternative texts or alt texts is important so that people who use assistive devices, such as screen readers, for example, can make the best use of the information contained on the website. These devices function as software that converts visual information into tactile, auditory information or a combination of these two, which is essential for a visually impaired person.

Another example of users who can benefit from alt texts in images is those who have low internet connections, since, like alt texts, these people can have access to what is being shown in the image, without necessarily waiting for it to load.

Videos always with subtitles

Another way to increase the accessibility of a website is to always subtitle the video content posted. When subtitling a video, people with any kind of visual impairment have access to resources. In addition, the caption of videos allows people who are accessing the website and are not able to turn on the audio on their devices, because they are in public environments, for example, to have access to these resources in the best way. 

Finally, people who are not native speakers of the language of your website, for example, can access it anyway. In this way, the subtitles help in understanding the words by reading, or in automatic translations from the subtitles in the original language.

Some tools do the subtitling work of the videos automatically, which saves that work. One of these tools is Youtube Automatic Captioning, which is a free resource and available for any video, as the transcription is integrated with the website's Video Manager.

There are tools used for audio transcription, too, which will be explained below.

Transcribe the audio files

It may also be interesting to transcribe the audio files and convert them to text files. When creating these text resources, there is the possibility of making textual content available to people with hearing impairments, in addition to increasing the accessibility of these materials to people who cannot hear the audios or watch the videos at the moment.

In this sense, text files start to function as types of articles, which allows obtaining the information contained in a visual rather than an auditory way.

A tool that can be useful in this process is Canvas, which transcribes both audio and video files.

Accessibility, for web design, allows more people to have access to resources, which, when observing the results, increases the reach of a material produced by the brand to the greatest possible number of customers.

Test with a screen reader

Testing websites with screen readers is a way to validate the accessibility of web design. This test can be done in order to identify possible flaws when activating the screen reader feature when you are a visually impaired person, which can lead to misunderstandings during use.

The first step in testing screen readers is to understand how they work.

Basically, these systems use keyboard shortcuts to activate functions that they can perform, such as shortcuts for reading previous intensities, posterior words of the same phrase and play and pause controls.

Many people, because they do not need to use them on a daily basis, do not know how to do it. Screen readers work differently than ordinary web browsers, such as Chrome and Safari, for example, and necessarily use only keyboard commands for navigation.

Some common screen readers to use are VoiceOver and NVDA, the first being free for iOS devices and NVDA free for Windows devices. At least one of these two systems can be tested on the website. A third option is Windows Narrator, which comes natively on Windows devices.

The importance of testing websites with screen readers is justified, since, for visually impaired people, this is the only way to access web content and have access to what you publish.

The keyboard test, in this sense, is also interesting to be performed, which will be explained below.

Check that the website can be accessed only with the keyboard

Another way to test a website is to see if it can be accessed with just the keyboard. As web design trends are constantly changing, it is important to check the feasibility of each of them for the inclusion of people who need greater accessibility.

As explained above, visually impaired people require the use of keyboard shortcuts in order to access each element of the website. Some shortcuts that can be tested, for example, are:

·       Tab key, which allows navigation between links;

·       Enter key to access a link that is in focus after using the Tab key;

·       Up, down, and side arrow keys to navigate lists, among many other keys.

Using these keys to access a website ensures that people who are browsing with screen readers are able to gain access to all the information contained on the page. You can test these shortcuts right now on this Holographisme’s website page and check out how it works. 

The division of pages in headers, explained below, also allows accessibility to be further improved.

Always use headers 

The use of headers is the division of a web page into titles and subtitles. When it is divided in this way, using the modification of the HTML of the page, it is observed that the screen readers are able to read the information correctly, differentiating what is the title and what is the "body" of the text.

You should check the hierarchy of heading tags, starting from <h1>, which is the main title, for subsequent tags, such as <h2>, <h3> and so on, normally up to <h6> at most, so the construction of the website doesn’t prejudice the SEO of the text.

The construction of the website, in this way, must, from the beginning, be thought of in order to practice accessibility within a page. For this, Holographisme provides support, since the beginning, for the construction of all elements of the website, with attention and professionalism when building the HTML of your website.

Test the website on other devices

Finally, the test of a website must be designed for different devices, such as desktops, tablets, and smartphones. Since it is not possible to predict where each audience will access your site, it is important to test yourself on more than one device.

To help in this part, there is a native feature in Google Chrome, called "Chrome DevTools", which allows you to have a view of the same website from devices, including smartphones and tablets from different brands. In this same tool, you can observe the HTML of the page in a complete way.

This feature, in this sense, allows the web design to be tested from different user perspectives.

To access the developer tools from a desktop, press the shortcuts Command + Option + C (Mac) or Control + Shift + C (Windows, Linux, Chrome OS).

How do I reach the largest possible audience for my brand, keeping in mind the accessibility?

As explained above, accessibility is able to increase results in a very significant way for a website. By expanding the line of thought to different audiences, it is possible to include as many people as possible in the list of potential customers.

Thus, Holographisme, from its work of building websites in a solid and reliable way, makes it possible for all of the above tips to be put into practice. Visit our Instagram and find out, with our Case Studies, some examples of websites created and edited by us.

Contact us now and take an important step towards the growth of your brand.
....