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:

Your SharePoint Online blog has to reside within a SharePoint Online website. Learn helpful information in Basics: Create an accessible SharePoint site and Create a blog .
SharePoint Online is a web-based application, so the keyboard shortcuts and navigation may be different from those in the on-premises version. Learn more in Keyboard shortcuts in SharePoint Online .

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.

Sign in to your SharePoint Online website and navigate to your blog page.
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 .
Select the template you want to use. The "Office" template is designed for maximum accessibility.
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.
To preview the template in your blog site, select the Try It Out link.
In the Design Preview page, review how the template works with your blog.
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.

Sign in to your SharePoint Online website and navigate to your blog page.
Go to the Settings menu (the gear icon in the upper-right corner) and select the Site settings command.
Under Look and Feel, select the Title, description, and logo link.
Under Insert Logo, select the From Computer link.
In the Add a document dialog box, select the Choose File button.
To find the logo image you want for your blog, browse through your computer's files, select the image, and then press Enter.
To upload the selected image as your blog's logo, press Alt+O.
Move to the Enter a description field and type alt text that describes your logo image.
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.

Sign in to your SharePoint Online website and navigate to your blog page.
Go to the Settings menu (the gear icon in the upper-right corner) and select the Site settings command.
. Under Site Administration, select the Site libraries and lists link.
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.
Under General Settings, select the List name, description and navigation link.
In the Description text box, replace the placeholder text with content that best describes the element for your readers.
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.

In Edit mode for your blog post or page, in the Body text box, select the text you want to use as a heading.
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.

In Edit mode for your blog post or page, in the Body text box, place the focus where you want the hyperlink to appear.
To open the Insert Hyperlink dialog box, on the Insert tab, select Link, and then select From Address.
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."
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.
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.

In Edit mode for your blog post or page, in the Body text box, place the focus where you want to add a table.
On the Insert tab, in the Tables group, select Table, and then select Insert Table.
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.
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.
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.

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

Notes:

Your SharePoint blog has to reside within a SharePoint website. To learn more, see Make your SharePoint site accessible and Create a blog.
When you use SharePoint, we recommend that you use Microsoft Edge as your web browser. Because SharePoint runs in your web browser, the keyboard shortcuts are different from those in the desktop program. For example, you'll use Ctrl+F6 instead of F6 for jumping in and out of the commands. Also, common shortcuts like F1 (Help) and Ctrl+O (Open) apply to the web browser – not SharePoint.

In this topic

How users with disabilities might use your blog
Apply an accessible blog template
Customize the logo and add alt text
Add categories to your blog elements
Tips for more accessible content

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. To learn more, refer to Keyboard shortcuts in SharePoint.
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. To learn more, refer to Use a screen reader with a blog created in SharePoint.

Apply an accessible blog template

Enhance your blog's accessibility to all users by selecting your site's visual theme carefully. The Office template is the default template for all new SharePoint 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 color blindness 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.

Sign in to your SharePoint website and navigate to your blog page.
To open the gallery of style templates, go to the Settings menu (the gear icon in the upper-right corner) and select Change the look.
Select the template you want to use. The Office template is designed for maximum accessibility.
Review the details of the template. If you wish, change the background image, color scheme, site layout, and heading and body fonts. These changes affect your use of the template and are applied to all pages throughout your blog.
To preview the template in your blog site, select Try It Out.
In the Design Preview page, review how the template works with your blog.
To apply the template, select Yes, keep it. To make further changes to the selected template, select No, not quite there to return to the previous page.

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

Customize the logo and add alt text

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

Sign in to your SharePoint website and navigate to your blog page.
Go to the Settings menu (the gear icon in the upper-right corner) and select Site settings.
Under Look and Feel, select Title, description, and logo.
Under Insert Logo, select From Computer.
In the Add a document dialog box, select Choose File.
To find the logo image you want for your blog, browse through your computer's files, select the image, and then press Enter.
To upload the selected image as your blog's logo, press Alt+O.
Move to the Enter a description field and type the alt text that describes your logo image.
To save the image and alt text description, press Alt+O.

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

Add categories to your blog elements

Your SharePoint blog 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. Central to your blog is the list of blog posts. Your blog 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 category, 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 help your readers understand their purposes. This makes your blog more accessible.

Sign in to your SharePoint website and navigate to your blog page.
Go to the Settings menu (the gear icon in the upper-right corner) and select Site settings.
Under Site Administration, select the Site libraries and lists link.
On the Site Libraries and Lists page:
- To add a description to your list of posts, select Customize "Posts".
- To add a description to a library of photos, select Customize "Photos".
- To add a description to a library of other assets, select Customize "Site Assets".
- To add a description to your categories, select Customize "Categories".
Under General Settings, select List name, description and navigation.
In the Description text box, replace the placeholder text with content that best describes the element for your readers.
Select Save 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 impairments and those who use a screen reader.

Use simple fonts, and use no more than two or three font faces throughout your blog.
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 what the style means in addition to how the font looks. 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 content easy to scan

In Edit mode for your blog post or page, in the Body text box, select the text you want to use as a heading.
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 must always be preceded in the document by at least one Heading 2.

Make hyperlinks meaningful

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.

In Edit mode for your blog post or page, in the Body text box, place the focus where you want the hyperlink to appear.
To open the Insert Hyperlink dialog, on the Insert tab, select Link, and then select From Address.
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."
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.
When you finish, select OK.

Add alt text to images and media

When adding visual objects such as 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 SharePoint 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 use a header row style and add column headings.

In Edit mode for your blog post or page, in the Body text box, place the focus where you want to add a table.
On the Insert tab, in the Tables group, select Table, and then select Insert Table.
In the Insert Table dialog, 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.
On the Design tab, in the Table Style Options group, select the Header Row check box, and if applicable, the First Column check box to designate a header row.
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.
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.

Note: When sizing column widths and row heights, use proportional sizing with percentages rather than pixel or point values. This ensures that your table scales properly regardless of the user's device or zoom level.
You may also add percentage values in the Table Width and Table Height boxes.

Add captions for audio and video

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.

Technical support for customers with disabilities

Microsoft wants to provide the best possible experience for all our customers. If you have a disability or questions related to accessibility, please contact the Microsoft Disability Answer Desk for technical assistance. The Disability Answer Desk support team is trained in using many popular assistive technologies and can offer assistance in English, Spanish, French, and American Sign Language. Please go to the Microsoft Disability Answer Desk site to find out the contact details for your region.

If you are a government, commercial, or enterprise user, please contact the enterprise Disability Answer Desk.

2 comments:

Sapphire SolutionsDecember 29, 2021 at 2:50 PM
Make your SharePoint Online blog more accessible

Great post, now sharepoint developers can make their knowledge easily accessible to students, developers...!

Well, read out our blog - Top 5 Reasons for Hiring Best SharePoint Developers in 2021

Microsoft Office Tutorials

Thursday, January 11, 2018