How can we help you today?

How to Add Alt Text to ShortPoint Image Design Elements

Today, visual content dominates our online experience. SharePoint intranets are no exception. On a single page, alone, you may already have a couple of images.


But what happens when someone can't see these images? This is where alternative text, commonly known as alt text, becomes not just helpful but essential. Starting from ShortPoint SPFx version 8.5.3.3 or later, you can now add Alt Text to ShortPoint Image-related Design Elements. This article will detail all you need to know about the new Image Alt Text.


NOTEThis solution is only applicable for static/non-connected Image Design Elements, including Image, Image Captions, Frame, Image Carousel, Image Titles, or Before and After.


Image Alt Text


TABLE OF CONTENTS


Prerequisites


What is Image Alt Text?

Alternative text, or Alt Text, is a written description of an image that serves as a text-based substitute when the image cannot be viewed or understood. In ShortPoint, you can start adding alt text starting from ShortPoint SPFx version 8.5.3.3 or later. It is available for the following Design Elements:



While it is invisible to most users browsing your SharePoint sites, it plays a crucial role behind the scenes, making your content accessible to all viewers. It also makes it easier for ShortPoint Designers who need to adhere to the Web Content Accessibility Guidelines (WCAG), which mandate accessible digital content, including proper alt text.


Adding Image Alt Text

Start the interactive tutorial to learn how to add an Image Alt Text in ShortPoint:


NOTECurrently, these ShortPoint Design Elements do not have the Image Alt Text property due to some limitations: Slideshows, Image List, and Background. We recommend using alternative Design Elements, such as Image Carousel, Image Titles, etc., if you want to create a fully accessible SharePoint site.

Depending on the Design Element you’re using, the location of the Image Alt Text property will vary:


For Design Elements with a Single Image

This is applicable for non-connected Image Design Elements, including Image, Image Captions, Frame, and Before and After


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit:


Edit

  • Close the Toolbox:


close icon

  • Click the Edit Properties icon:


Edit properties icon


Step 2: Edit the Design Element


NOTEBefore proceeding, you must already have any of these Design Elements on your page: Image, Image Captions, Frame, or Before and After.
  • For this guide, we’ll use Image Caption. Click its EasyPass tag:


EasyPass tag

  • Select the cogwheel icon:


Cogwheel icon


Step 3: Write Alt Text

  • Look for Image Alt Text and write the description you prefer:


Image Alt Text

  • Once satisfied, click the green check mark.
NOTEIf you’re using the Before and After Design Element, there is an  Image Alt Text field for the before and after photos.

Step 4: Save

  • Click the eye icon to see your page in real-time:


eye icon

  • Save your changes:


Save


For Design Elements with Multiple Images

This is applicable for  non-connected Image Design Elements, including Image Carousel and Image Titles.


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit:


Edit

  • Close the Toolbox:


close icon

  • Click the Edit Properties icon:


Edit properties icon


Step 2: Edit the Design Element


NOTEBefore proceeding, you must already have any of these Design Elements on your page:  Image Carousel or Image Titles.
  • For this guide, we’ll use Image Carousel. Click its EasyPass tag:


EasyPass tag


  • Select the cogwheel icon:


Cogwheel icon


Step 3: Write Alt Text

  • Click the cogwheel icon of the first item:


Cogwheel icon

  • Look for Image Alt Text and write the description you prefer:


Image Alt Text

  • Click the back icon:


back icon

  • Repeat the same steps for the other items.
  • Once satisfied, click the green check mark.

Step 4: Save

  • Click the eye icon to see your page in real-time:


eye icon

  • Save your changes:


Save


Congratulations! You now have Image Alt Text on your SharePoint sites, making way for a more accessible site for all your page viewers.


TIPYou can also enable the UserWay widget to make your intranets more accessible to people with disabilities. Check out Getting Started: Setting Up ShortPoint Accessibility to learn more.

Best Practices for Writing Alt Text

To help you start writing effective alt text, we’ve compiled some best practices you can apply to your own SharePoint sites:


Be Concise Yet Descriptive

Effective alt text strikes a balance between brevity and detail. As much as possible, your description must be under 125 characters. Remember that some screen readers cut off longer text, so focus on what’s important. Convey the image's meaning and purpose.


Good example: "Smiling chef holding a steaming bowl of ramen" 

Poor example: "This is a photograph showing a person who appears to be a professional chef, holding something that looks like a ceramic bowl with noodles in it”


Consider Context and Function

The same image may need a different alt text depending on the context of your page. For example, an image of a person with a laptop might be described as "Smiling Employee working in a gray laptop" in an HR site, but "Employee launching the new sales product" in a Sales news page.


Avoid Redundant Language

Avoid phrases like "image of," "picture of," or "graphic showing." Screen readers already announce that the element is an image, so these phrases appear redundant.


Instead of: "Image of a red sports car" 

Write: "Red sports car"


Include Relevant Details

Include specific details when it’s relevant to what is happening in the photo. For example, in an image like a bar chart, colors and numerical values are important, so you need to include them. For a product photo, the emotions of the model and the fabric color may be needed to add extra context.


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 96 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more