Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Hacer que tu sitio de Squarespace sea más accesible

Accessible websites are parsable by screen readers and other assistive technologies. While some aspects of your site’s accessibility are controlled by your template’s underlying code, there are many things you can do to make it easier for visitors with different vision and movement abilities to access your content.

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

Note: This guide is available as a resource to help you get started, but shouldn't be construed or relied upon as legal advice. Squarespace can't provide advice about making your site compliant with specific web accessibility laws or acts.

Page titles

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

Headings

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.

  • 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.

Espacios

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.

Enlaces

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

“To reach out, visit our contact page.”

Don't  “To reach out, click here.

Imágenes

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.

  • Consider the purpose of the image and try to convey that meaning concisely using text.
  • Keep your alt text under 125 characters. Many braille displays only present up to 40 or 80 characters at a time, so it's best to be concise as 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.

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

Videos

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.

  • 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.

Colores

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

  • 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.

Preguntas frecuentes

Is my site accessible?

Los requisitos de accesibilidad difieren en todo el mundo. Eres responsable de asegurarte de que tu sitio cumple con las leyes aplicables, incluidos los requisitos de accesibilidad locales. La mejor manera de entender la accesibilidad de tu sitio e identificar áreas para mejorar es consultar a un especialista en accesibilidad. También puedes revisar esta lista de comprobación preliminar de accesibilidad web. El soporte técnico de Squarespace no puede proporcionar asesoramiento sobre cómo hacer que tu sitio cumpla con leyes o decretos específicos de accesibilidad 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. 

 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 154 de 184
Hacer que tu sitio de Squarespace sea más accesible