Add accessible pictures and media to a SharePoint Online site

In this topic

• Add a picture with alt text

• Add video in a media web part

• Embed an audio file in your page

Add a picture with alt text

When using photos, images, clip art, or audio, you're responsible for respecting copyright. For images, the license filter in Bing can help.

1. To open the Editing ribbon and to enter Edit mode, on the page you want to edit, select the Edit link.

2. Place the focus where you want the picture to appear.

3. To open the Upload Image dialog box, from the Insert tab, open the Picture group and select From Computer.

   

   Tip: To insert a picture from the Internet by pasting in an image URL, select From Address. To insert an image from your SharePoint in Microsoft 365 site, select From SharePoint.

4. Choose your file, select a destination folder in your SharePoint in Microsoft 365 site (the default choice is the Site Assets folder), and include any notes about the different image version.

5. To insert your picture and activate the Image tab, select OK.

   

   Tip: The Image tab is only visible when an image is selected.

6. Move to the Alt Text box on the Image tab, and enter your alternative text for the image.

7. When you finish, click Save.

Accessibility tips   

• Alt text should be brief but descriptive.

• Good alt text tells the listener why the picture is important.

For more information about alt text, including examples and links to more information, visit the WebAIM Alternative Text page.

Add video in a media web part

Whenever you add a video to a page, make sure to include captions and audio descriptions of the content. Captions let hearing-impaired users learn about the content, and they provide assistance to non-native speakers who watch the video.

To make an audio recording accessible to deaf users, create a transcript and make that available along with the audio file.

1. To open the Editing ribbon and to enter Edit mode, on the page where you want to display the video, select the Edit link.

2. Place the focus where you want the video to appear.

3. To open the Upload Media dialog box, from the Insert tab, open the Video and Audio group and select From Computer.

   

   Tip: To insert a file from the internet, select From Address and paste in a URL. To insert an audio or video from your SharePoint in Microsoft 365site, select From SharePoint. To add embed code from sites such as YouTube or Vimeo, select Embed.

4. Choose your file, select a destination folder in your SharePoint in Microsoft 365 site (the default choice is the Site Assets folder), and include any applicable notes about the different file version.

5. To insert your video inside of a Media Part component and to activate the Media and Web Part tabs, select OK.

   Tip: The Media tab is only visible when a media file is selected.

6. Open the Web Part tab, and select Web Part Properties. The Media Web Part Properties pane appears.

   

7. In the Title box, type the title.

8. Scroll down, and open the Advanced panel.

9. In the Description box, type a brief description of the audio or video file.

10. To apply your changes to the media web part, scroll to the end and select Apply.

11. When you finish, to save your changes to this page, select Save.

Embed an audio file in your page

These instructions tell you how to place a much smaller, slimmer control bar into a webpage. This control bar works best for audio files, like podcasts, in which the full media web part would be too large.

1. Upload the audio file and transcript file into your Site assets folder.

   1. To open the Settings menu, in the upper-right corner, select the Settings icon.

   2. Select the Site Contents link.

   3. Go to the Site Assets folder.

   4. Drag the audio and transcript file into the folder.

      

   5. Get the URLs for the files. To open the file action menu, next to the file name, select the ellipsis. Copy and paste the link from the action menu to another file. You will need this link later, in the audio embed code.

2. To open the Editing ribbon and to enter Edit mode, on the page where you want to display the video, select the Edit link.

3. Place the focus where you want the video to appear.

4. To open the Embed dialog box, from the Insert tab, open the Video and Audio group and select Embed.

   

5. Paste the embed code into the field, with the URL of your audio file after “src=” and between the quotation marks.

   <audio src="your-audio-file-URL-here.mp3"controls="controls"></audio>

   This code places the media control bar on the page. The bar lets users start and stop the playback.

   Tip: If your embed code is not formatted correctly or if it points to a file location that does not exist, the Insert button will not be active.

6. When you are done, select Insert to put your audio control on the page. The embedded audio control looks like this:

   

7. Place the focus at the end of the audio control snippet and to go to the next line, press Enter.

8. Insert a link to your audio transcript file.

   1. To open the Select an Asset dialog box, from the Insert tab, select Link and From SharePoint.

   2. Select your audio transcript file, and press Insert. This inserts a hyperlink with the name of the file as the text of the link.

   3. Place the focus in the link, just before the last character of the file name. Slowly backspace to remove all but the first and last characters in the file name.

      Tip: This leaves the link intact and keeps your cursor exactly where it needs to be so that you can change the text of the link.

   4. Type the text that you want for the link. For example, for an audio transcript, type View the audio transcript.

   5. Delete the remaining characters of the file name.

9. When you're done, to save all your changes, at the top of the page, click Save.

Related information

Resources for creating accessible sites in SharePoint Online

Keyboard shortcuts in SharePoint Online