Make your SharePoint Online blog more accessible

You can make your blog in SharePoint Online accessible to readers with vision, mobility, or hearing impairments.

For example, you can use a template that includes fonts and colors that enhance readability. In your individual blog posts and other pages, you can add meaningful descriptions to your blog elements, clear text alternatives (also known as alt text) on images and other multimedia content, transcripts for audio elements, and more.

Notes: 

In this article

How users with disabilities might use your blog

Understanding how readers with disabilities might use your blog can help you make your blog more accessible.

  • Users might use keyboard shortcuts to navigate through your blog. It's important to keep screen elements in their default location so that the default tab order of keyboard navigation remains intact. Learn more about Keyboard shortcuts in SharePoint Online.

  • Users might use a screen reader to voice the contents of your blog. Keep your fonts, font styles, and capitalization styles clean and conventional to ensure that screen readers interpret your pages correctly and efficiently. Learn more in Use a screen reader with a blog created in SharePoint Online .

Apply an accessible blog template

Enhance your blog site’s accessibility to all users by selecting your site’s visual theme carefully. The “Office” template is the default template for all new SharePoint Online sites, and is an accessible theme.

The Office template optimizes color balance and contrast between text and background. Users with vision impairments such as low vision or colorblindness find sites that use this template easier to read.

You can apply the Office template to your blog at any time. You can also modify the layout or colors used for links, headings, and other text.

  1. Sign in to your SharePoint Online website and navigate to your blog page.

  2. To open the gallery of style templates, go to the Settings menu (the gear icon in the upper-right corner) and select the Change the look command .

  3. Select the template you want to use. The “Office” template is designed for maximum accessibility.

  4. On the next page, review the details of the template. If you wish, change the background image, color scheme, site layout (with or without a left navigation bar), and heading and body fonts. These changes affect your use of the template and are applied to all pages throughout your blog.

  5. To preview the template in your blog site, select the Try It Out link.

  6. In the Design Preview page, review how the template works with your blog.

  7. To apply the template, select the Yes, keep it link. To make further changes to the selected template, select the No, not quite there link to return to the previous page.

    To return to the template gallery and select a different template, select the Start over link.

Customize the logo and add alt text

All new SharePoint Online sites, including blog sites, have a default placeholder logo. You can replace this logo and add alt text to it at any time.

  1. Sign in to your SharePoint Online website and navigate to your blog page.

  2. Go to the Settings menu (the gear icon in the upper-right corner) and select the Site settings command.

  3. Under Look and Feel, select the Title, description, and logo link.

  4. Under Insert Logo, select the From Computer link.

  5. In the Add a document dialog box, select the Choose File button.

  6. To find the logo image you want for your blog, browse through your computer’s files, select the image, and then press Enter.

  7. To upload the selected image as your blog’s logo, press Alt+O.

  8. Move to the Enter a description field and type alt text that describes your logo image.

  9. To save the image and alt text description, press Alt+O.

    Note: Your logo automatically links to the home page of your SharePoint Online blog site. You cannot change this link.

Add categories to your blog elements

Your SharePoint Online blog is a website which contains lists and libraries that you can categorize any way you choose. Categories help organize the posts and other content in the lists and libraries throughout your blog site. Central to your blog is the list of blog posts. Your blog site can contain a number of other lists, for example, a list of links to other blogs. Your blog might also contain a library for photos or reference documents.

Categories are especially helpful if you create blog posts about different subjects or for different purposes. When posts are organized by categories, people can more easily find the posts that fit their interests by selecting the appropriate item in the Categories list.

Clear descriptions of your lists, libraries, and categories helps your readers understand their purposes. This makes your blog more accessible.

  1. Sign in to your SharePoint Online website and navigate to your blog page.

  2. Go to the Settings menu (the gear icon in the upper-right corner) and select the Site settings command.

  3. . Under Site Administration, select the Site libraries and lists link.

  4. On the Site Libraries and Lists page:

    • To add a description to your list of posts, select the Customize “Posts” link.

    • To add a description to a library of photos, select the Customize “Photos” link.

    • To add a description to a library of other assets, select the Customize “Site Assets” link.

    • To add a description to your categories, select the Customize “Categories” link.

  5. Under General Settings, select the List name, description and navigation link.

  6. In the Description text box, replace the placeholder text with content that best describes the element for your readers.

  7. Select the Save button and press Enter.

Tips for more accessible content

When adding text to your blog, use fonts, headings, and hyperlinks to make your content more accessible

Style fonts for clarity

Be aware of how you use font faces, point sizes, variations, and capitalization in your text. Consider readability for users who have vision impairment and those who use a screen reader.

  • Use simple fonts, and use no more than two or three font faces throughout your blog site.

  • Don’t set a fixed font size , such as 14 point. Instead, use styles such as Normal. A fixed font size can interfere with other elements on the screen, especially if users make their screen larger or smaller. For example, fixed font sizes can cause text lines to overlap columns, or text can disappear.

  • Instead of applying bold (Ctrl+B) or italic (Ctrl+I) font variations, select the Emphasis or Accent style option on the Format Text ribbon tab, in the Styles group,. These styles contain information about how the font looks and what it means. The Emphasis style, for example, applies italics to selected text, and screen readers voice the word “emphasis.”

  • Use sentence capitalization. Long strings of capital letters can be hard to read. In addition, screen readers do not read capital letters differently, so the user won’t discern the distinction you’re trying to make.

Add headings to make your content easy to scan

Many users prefer to scan through web content and only read deeply the content they find particularly relevant. In addition, screen readers voice headings to help users scan and quickly find needed information.

  1. In Edit mode for your blog post or page, in the Body text box, select the text you want to use as a heading.

  2. On the Format Text tab, in the Styles group, select the heading level you want.

    Note: Headings are hierarchical. The Heading 1 style is generally the top heading. Heading 2 is the secondary level. Heading 3 can be used for subheadings and is always preceded in the document by at least one Heading 2.

Make meaningful hyperlinks

Screen readers read the display text of a hyperlink aloud. It's important to make this text meaningful. The display text should give the listener good information about the destination of the link.

  1. In Edit mode for your blog post or page, in the Body text box, place the focus where you want the hyperlink to appear.

  2. To open the Insert Hyperlink dialog box, on the Insert tab, select Link, and then select From Address.

  3. In the Text to display box, type the link text. The most helpful and meaningful link display text is often the website name, page title, or subject matter. Avoid link text that gives little to no information, such as “Click here.”

  4. In the Link Address box, type or paste the web address of the destination website

    Note: To make sure the link works properly, select Test Link.

  5. When you finish, select OK.

Add alt text to images and media

When adding visual objects such as pictures and other images to your blog, use alt text that explains the image. Format tables so that they can be interpreted correctly by screen readers. Add closed captions for video and transcripts for video and audio objects. To learn how, see Add accessible pictures and media to a site.

Make tables easier to navigate

To make tables easier to navigate, keep them simple (no merged or split cells). In addition, it's important to style a header row and add column headings.

  1. In Edit mode for your blog post or page, in the Body text box, place the focus where you want to add a table.

  2. On the Insert tab, in the Tables group, select Table, and then select Insert Table.

  3. In the Insert Table dialog box, type the number of columns and the number of rows in the two text boxes. Tab to the OK button and press Enter. The table appears in the Body text box.

  4. Format the table to enhance accessibility.

    • Designate a header row.

      On the Design tab, in the Table Style Options group, select the Header Row check box, and if applicable, the First Column check box.

    • Add labels to each column header

    • Add a brief description of the table as a caption.

      On the Table Layout tab, in the Properties group, type a description in the Summary text box.

  5. When sizing column widths and row heights, use proportional sizing with percentages rather than pixel or point values. This ensures that your table will scale properly regardless of the user’s device or zoom level.

    • On the Table Layout tab, in the Width & Height group, type percentage values in the Column Width and Row Height boxes. Type the percent sign (%) after each value.

    • If you want, also add percentage values in the Table Width and Table Height boxes.

Add captions for audio and video

Any video you add to your blog should include closed captions. Closed captions are essential for users with hearing impairments. Closed captioning can assist non-native speakers as well as users with differing audio-visual learning styles for processing verbal information. Audio clips you add to your blog should include a transcript for users with hearing impairments. Both video and audio clips should be identified with alt text.

  • In Edit mode for your blog post or page, in the Body text box, place the focus where you want to add a video.

  • On the Insert tab, in the Media group, select Video and Audio, and then select From Computer , Embed, From SharePoint, or From Address.

  • Follow the prompts to find, select, and insert the video or audio into your blog.

Share Facebook Facebook Twitter Twitter Email Email

Was this information helpful?

Great! Any other feedback?

How can we improve it?

Thank you for your feedback!

×