Loading...

Knowledge Base

Online Store and Online Marketplaces - Improve a Website's Accessibility

Did you find this article helpful?
Copy Link

 
* Your feedback is too short
Share

Important: This article applies to Online Store and Online Marketplaces customers only.

Overview

To boost your website’s accessibility, you must keep it up-to-date and ensure that its content is clear and visually compelling. You can incorporate the following practices when creating a new website or making edits to an existing one.

  • Add Alt Text

    Alt Text is a short-written description of an image that will display a message for users who use a screen reader or cannot see the photos on your site. Having a descriptive Alt-text for each image on your website will help users understand your website's images.

    • Once you have added a photo in your site editor, you can add Alt Text by clicking on the Advanced options and selecting Alt Text.
      Red arrow pointing at Alt text icon

  • Use Contrasting Colors

    • Choosing your theme colors, customizing your text or buttons, and using high contrasting colors are vital for people with color blindness and other visual impairments. We recommend using a single color for body text on a different colored background.

      Note: Our intelligent editor will automatically adjust the color of your text or background if there isn't enough contrast between the two to be readable.

  • Pay Attention to Font Size and Text Treatments

    • You can format your text to make reading comfortable for your site visitors with dyslexia or low vision.
      Red box around settings to format font or text

      Pro Tip: Use common sans serif fonts with extra paragraph spacings and refrain from paragraphs with all capital letters or excessive use of italics and underlines.

  • Reduce Automated Motion

    • Decreasing the motion from elements on your website will create more accessibility for your site visitors with cognitive issues like ADHD, epilepsy, or motion sickness.
      Red box around Autoplay toggle switch for a video

      Pro Tip: Start by turning off animations, avoiding or limiting the use of auto-play on videos, and using parallax scrolling sparingly.

  • Enable the Sitemap in the footer

    • An enabled footer Sitemap that displays as a link at the bottom of your website will help screen readers read your site's hierarchy. It allows your site visitors to access different pages and navigate your created content in various ways.

    • You can locate a link to your Sitemap by clicking on settings. selecting Search Engines, and then Sitemap.xml. Copy the link and use text features from the build menu to customize your site footer.

  • Use Nested Headings for Text

    • The title, subtitle, and description for most sections coded to a preset hierarchy are provided to your website. This will give screen readers a path to follow and show them your website's structure.
      Example use of headings in a website

      Pro Tip: Organizing text from Titles, Subtitles, and Descriptions will break up the areas and add visual interest to your website content.

  • Add Descriptions to Videos and Images

    • Adding captions on images and videos is another way to convey what is happening within the media for the visually impaired or screen readers.
      Description added under a sample video

  • Use Text Treatments to Highlight Important Information

    • Using a combination of text sizes, thoughtfully underlining, bolding, or italicizing text will emphasize content to readers. Instead of using multiple colors within the text that could be missed by visitors with color blindness or visual impairments, these steps will help your site become more accessible.

Did you find this article helpful?
Copy Link

 
* Your feedback is too short

Loading...