Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Rendre votre site Squarespace plus accessible

Les sites web accessibles sont analysables par des lecteurs d’écran et d’autres technologies d’assistance. Vous avez la possibilité de modifier de nombreux aspects de votre site afin de faciliter l’accès à votre contenu pour les visiteurs ayant des capacités différentes en matière de vision et de mouvement.

Use this guide to learn best practices for designing and structuring your content. 

Remarque : Ce guide est proposé comme ressource pour vous aider à démarrer, mais il ne doit être en aucun cas considéré comme un document juridique. Squarespace ne peut pas vous fournir de conseils sur la conformité de votre site aux règlements, lois ou normes spécifiques en matière d’accessibilité du web.

Titre des pages

The first thing screen readers dictate when users go to a new web page is the page title. Since page titles are so important for orientation, ensure every page has a title that introduces its topic or purpose, and differentiates it from other pages on your site. You can also add a page description that provides more context. These fields also help with your site’s SEO.

Texte

Titres

Screen readers scan pages for html tags to understand their structure and allow visitors to navigate quickly between sections. Use the heading field in the text editor to structure your text. To learn how to format text with headings, visit Styling and formatting text.

À faire
  • Use structured headings and a linear format.
Don't
  • Rely on text within images to convey meaning.
  • Rely on bolding, italics, or other design formatting to create structure.

Espacement

Ensure your text has adequate line spacing. You can control letter spacing and line height in Site Styles. Here are some guidelines:

  • Line spacing should be at least 1.5 times the font size.
  • Spacing following paragraphs should be at least 2 times the font size.

Liens

Ensure the purpose of each link can be determined from the link text alone. For example:

À faire

“To reach out, visit our contact page.”

Don't  “To reach out, click here.

Partage social

En plus d’afficher des icônes sociales, incluez des liens hypertexte vers vos comptes de réseaux sociaux. Indiquez toujours le nom de la plateforme du réseau social dans le texte du lien pour identifier le but du lien.

Images

When scanning a page, screen readers identify images and read the descriptive text (alt text) to visitors. When adding alt text, take a moment to consider why you’ve used the image in the first place. Is it to convey information, or is it decorative? What do visitors with vision impairments need to know about the image to access all the information available to sighted visitors? A best practice is to briefly describe the image as you would to a friend over the phone.

Purely decorative images, like graphics separating content or abstract background images, don't require descriptions.

To learn more about alt text, visit Adding alt text to images.

À faire
  • Consider the purpose of the image and try to convey that meaning concisely using text.
  • Gardez votre texte de remplacement en dessous 125 caractères. De nombreux affichages en braille ne présentent que 40 ou 80 caractères à la fois, il est donc préférable d’être aussi concis que possible.
  • If the image has a clickthrough URL or any other functional use, describe the function. For example: "A laughing couple. Links to Engagement Photos."
  • For images that require detailed descriptions, like charts, graphs, or complex graphics, include a description of the image nearby in the text of your site. As an alternative, you can add a separate page containing a description of the image, then add a clickthrough URL from the image to that page.
Don't
  • Include phrases like “An image of” or “A picture of” in your alt text. Many assistive technologies automatically identify them as images.

Audio

You can help visitors with hearing impairments access your audio content, like podcasts, by adding a transcript.

À faire
  • Keep your pages organized by linking to a Not Linked page containing the transcript.

Vidéos

Add synchronized captions using the integrated closed captioning features for YouTube and Vimeo. This way, viewers can enable or disable captions from within the Video Block. Visit YouTube and Vimeo for more information on adding captions.

À faire
  • Provide enough time to read captions.
Don't
  • Add flashing content known to cause seizures or physical reactions. As a general rule, avoid content that flashes three times in any one second period.

Couleurs

Pair colors that maximize contrast, and avoid grouping colors that are difficult to differentiate with color blindness, like blue and purple. Color Oracle is a useful tool that simulates how people with common color vision impairments see a page. Note that this is a third-party application that falls out of the scope of Squarespace support. You can change your site’s colors in Site Styles.

If you can’t change the color scheme, use text, alt text, and other contextual information to help visitors with color blindness understand content explained through color.

For example, if the chart below was a static image, visitors with color blindness probably wouldn't see which section represents New York. However, since this is a Squarespace Chart Block, we can add section labels on hover so color vision impaired visitors read context about each section of the chart.

Color_wheel.png

À faire
  • Group colors with high contrast.
  • Use Color Oracle or similar tools to see a simulation of how people with common color vision impairments experience your content.
Don't
  • Pair colors that are difficult to differentiate with common color blindness, like blue and purple.

Contour de mise en évidence

Les sites Squarespace disposent d’une fonction de contour de mise en évidence intégrée qui met en surbrillance les éléments d’une page, tels que les liens de navigation et les champs de formulaire, en les encadrant en noir lorsque les visiteurs du site appuient sur la touche Tabulation de leur clavier. Ce contour de mise en évidence est le même sur tous les sites et toutes les pages. Vous ne pouvez pas ajuster la couleur ou l’épaisseur de la ligne.

FAQ

Is my site accessible?

Les exigences en matière dʼaccessibilité diffèrent dʼun pays à lʼautre. Il vous incombe de vous assurer que votre site respecte les lois applicables, y compris les exigences locales en matière dʼaccessibilité. Pour comprendre lʼaccessibilité de votre site et identifier les points à améliorer, vous pouvez par exemple contacter un spécialiste de lʼaccessibilité. Vous pouvez également consulter cette liste préliminaire de contrôle de lʼaccessibilité web. Lʼassistance client de Squarespace ne peut pas vous fournir de conseils sur la conformité de votre site aux lois, réglementations et normes spécifiques en matière dʼaccessibilité du web.

Is Squarespace working to improve accessibility?

Yes. Squarespace takes accessibility seriously. We are always looking to improve and will never be done. We’re committed to making our services more accessible to users of all abilities. We're currently in the process of reviewing our services to improve user experience further, and seeking to make it easier for our customers to make their sites as accessible as possible. 

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 169 sur 208
Rendre votre site Squarespace plus accessible