Os sites acessíveis são analisáveis por leitores de tela e outras tecnologias auxiliares. Há muitos aspectos do seu site que você pode ajustar, para facilitar o acesso ao conteúdo por visitantes com habilidades diferentes de visão e movimento.

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

Observação: este guia está disponível como um recurso para ajudá-lo a começar, mas não deve ser interpretado ou usado como aconselhamento jurídico. O Squarespace não pode fornecer conselhos sobre como tornar seu site compatível com leis, regulamentos ou padrões específicos de acessibilidade.

Títulos da página

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.

Texto

Títulos

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.

É bom	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.

Espaçamento

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.

Links

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

É bom	“To reach out, visit our contact page.”
Don't	“To reach out, click here.”

Compartilhamento social

Além dos ícones sociais, inclua links de texto para suas contas de redes sociais. Sempre indique o nome da plataforma de rede social no texto para identificar a finalidade do link.

Imagens

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.

É bom

Consider the purpose of the image and try to convey that meaning concisely using text. Mantenha seu texto alternativo com menos de 125 caracteres. Muitas exibições em braille apresentam apenas até 40 ou 80 caracteres de cada vez, então é melhor ser o mais conciso possível. 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.

Áudio

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

É bom

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

Vídeos

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.

É bom	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.

Cores

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.

É bom	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.

Contorno de foco

Os sites do Squarespace têm um recurso de contorno de foco integrado que destaca itens em uma página, como links de navegação e campos de formulário, com um contorno preto quando os visitantes do site pressionam Tab no teclado. Esse contorno de foco é padrão em todos os sites e páginas, e você não pode ajustar a cor ou a espessura da linha.

Perguntas frequentes

Is my site accessible?

Os requisitos de acessibilidade diferem em todo o mundo. Você é responsável por garantir que o site cumpra as leis vigentes, incluindo os requisitos de acessibilidade local. Uma forma de entender a acessibilidade do seu site e identificar áreas que precisam melhorar é com um especialista em acessibilidade. Você também pode consultar este checklist preliminar de acessibilidade da web. O suporte ao cliente do Squarespace não pode dar conselhos sobre o cumprimento de uma lei, regulação ou padrão relativa à acessibilidade na 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.