Making Your Site More Accessible


Making Your Site More Accessible

Adding alt text to images

Alt text helps visitors with visual impairments understand images on your site. Assistive technology such as screen readers read descriptive alt text. Search engines also read this text, so it can help your images appear in search results. Here are some tips on how to use alt text:

  • Alt text for each image should be no more than 125 characters.
  • It’s best to imagine that you’re describing your image to someone over the phone.
  • Start with the most important information about your image first.
  • If the image links to something, include that in your description, for example: “A man drinking a cup of coffee. Links to Gallery Photos.”
  • Since assistive technologies automatically identify images, you don’t need to start your alt text with “An image of”.

Here’s how to add alt text to your Gallery images in A.I. Editor:

Scroll down to the Gallery section, hover over the module, and select the + icon.

Picture1_2.png

Your gallery images will appear in a pop up. Hover over an image and select the pencil icon to add alt text.

Picture2.png

Add your alt text to the menu on the left and then select Done.

Picture3.png 

Repeat this for each image you want to add alt text to. Select the Save button to save all alt text changes.

Picture4.png

Select the Save button at the top of A.I. Editor. The alt text is now live 

Picture5.png

 

Differentiating colors

Color contrast helps visitors with visual impairments see the content on your site and distinguish between visual elements. We recommend ensuring a color contrast ratio of 4.5:1 to increase visibility. A third-party tool like WebAIM can help you compare foreground and background colors using color codes.

Here’s how to find color codes in A.I. Editor:

To find the color code of your background overlay, move your cursor over the module and select “Overlay.” Here you can see your color code.

Screen_Shot_2018-04-19_at_10.02.11_AM.png

To find the color code of your text color, highlight the text and select the paint bucket icon. Here you can see your color code.

Screen_Shot_2018-04-19_at_10.08.34_AM.png 

Using readable fonts

Mopro offers a variety of fonts. It’s important to use these fonts to maximize readability for your visitors. Here are some tips on how to choose readable fonts:

  • Avoid small font sizes that are difficult to read.
  • Make sure your text color contrasts with your background color.
  • Consider line height and paragraph spacing. A lack of space makes text difficult to read.
  • Avoid drawing attention to text by using bold, italics, or all caps since screen readers don’t notice this.

 

Making accessible documents

If you have documents uploaded to your site, there are steps you can take to make those accessible.

  • Learn how to make Word documents accessible here.
  • Learn how to make PDF documents accessible here.

 

Avoiding Auto-Play and Movement

Auto-Play videos and audio and moving backgrounds may affect the functionality of screen readers and other assistive technologies.

 

Helpful Chrome Extensions

WAVE Evaluation Tool: WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your website.  

Colorzilla: Get a color reading anywhere in your browser and quickly paste it into another program.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk