Try ShortPoint nowToday, 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 Image Design Elements, including Image, Image Captions, Frame, Image Carousel, Image Titles, or Before and After.
TABLE OF CONTENTS
Prerequisites
- You must have ShortPoint SPFx version 8.5.3.3 or later installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have any of these ShortPoint Image Design Elements on your page: Image, Image Captions, Frame, Image Carousel, Image Titles, or Before and After.
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 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:
- Close the Toolbox:
- Click the 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:
- Select the cogwheel icon:
Step 3: Write Alt Text
- Look for Image Alt Text and write the description you prefer:
- 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:
- Save your changes:
For Design Elements with Multiple Images
This is applicable for 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:
- Close the Toolbox:
- Click the 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:
- Select the cogwheel icon:
Step 3: Write Alt Text
- Click the cogwheel icon of the first item:
- Look for Image Alt Text and write the description you prefer:
- Click the 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:
- Save your changes:
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:
