Add accessible content and links to a SharePoint Online site

After you create your SharePoint Online site using an accessible template, use correct formatting, styles, and alternative descriptions to keep your site accessible.

Note: When you use SharePoint Online, we recommend that you use Internet Explorer as your browser.

In this topic

Add and format text

Add headings to make your content easy to scan

Add tables and make them accessible

Insert accessible hyperlinks

Add and format text

Your SharePoint Online site already contains some basic elements, such as a Search bar and a Documents area. It’s very easy to add your own content to a SharePoint Online site.

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

    Shows a section of the SharePoint Online ribbon with the Share, Follow, and Edit controls plus the Search box.
  2. To add text to an existing web part, place the focus in it and then, from the Edit ribbon, cut, copy, insert, or format text, as you would in Word Online.

  3. To select a format for your text, open the Styles group.

    Shows the Styles group on the SharePoint Online ribbon with the Heading 1 style selected.

    Select the style that you want to use, place the focus in the edit area, and start typing.

    Page Elements, such as heading styles, and Text Styles, such as Normal, are available from the Styles group on the SharePoint Online ribbon.
  4. When you finish, select Save.

    Shows a section of the SharePoint Online ribbon with the Share, Follow, and Save controls.

Some accessibility notes   

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

  • Do not set a fixed font size. Setting a fixed size can interfere with other elements on the screen, especially if someone makes the screen larger or smaller. For example, it can be a problem with screen layout, because text lines can overlap columns, or text can disappear.

  • Avoid using bold, italic, and underline font variations, if possible. Instead, choose an option from the Styles group. Options from Styles include information about both how the font looks and what it means. Emphasis, for example, appears in italics, and screen readers read the word “emphasis” aloud for people who can’t see the italics.

  • Use conventional capitalization. Long segments of capital letters are harder to read. In addition, screen readers do not read capital letters differently from lower-case letters, so the listener won’t know what you meant.

Add headings to make your content easy to scan

Headings are important for accessibility in a document. Users tend to scan through web content and may only read deeply when the content is especially interesting. In addition, screen readers use headings to help people scan. Without headings, blind users have to listen to an entire webpage, word by word.

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

  2. Select the text you want to use as a heading.

  3. Open the Styles group, and select the heading level that you want.

    Tip: Headings are hierarchical. The Heading 1 style is the most important in the document and 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 with the Heading 2 style applied.

  4. When you finish, select Save.

Note: Use headings to create a table of contents so that screen reader users can easily scan the page.

Add tables and make them accessible

Tables are a great way to organize information on a page. It’s easy to make sure that your tables are set up to provide helpful context for screen readers, such as column headings or table captions.

  1. To open the Editing ribbon and to enter Edit mode, select the Edit link.

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

  3. From the Insert tab, open the Table group and select the number of rows and columns you want in your new table. After you click the final box, a table of the specified size appears on your page.

    On the SharePoint Online ribbon, select the Insert tab and then select Insert Table to specify the number of rows and columns for a new table.
  4. Place the focus in the upper-left row of your new table, and select the Design tab.

    On the SharePoint Online ribbon, use the Design tab to select check boxes for header row, footer row, first column, and last column in a table plus select from table styles and indicate if the table uses grid lines.

    Note: The Design tab is only visible when your cursor is in a designable element, such as a table.

  5. Select the Header Row check box.

    Note: To make your table easier to read, use a colored-line style or show grid lines. These options are both available on the Design tab.

  6. When you finish, select Save.

Accessibility notes for tables   

  • Always designate a header row, and put labels in each column. If appropriate, you can also designate a First Column.

  • Table headers should not be empty.

  • Add a brief table description as a caption.

  • Just like fonts, use proportional sizing (percentages) instead of absolute sizing for column widths and row heights. Don't use pixel or point values. . If users view your site via a mobile device or if they zoom in on your site to better see details, pixel or point values keep an element frozen at the defined size.

Add accessible hyperlinks

  1. To open the Editing ribbon and to enter Edit mode, select the Edit link.

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

  3. To open the Insert Hyperlink dialog box, from the Insert tab, select Link and From Address, or press Ctrl+K.

    The Insert Hyperlink dialog box provides a Text to display field for the name of the link and an Address field for the link's URL. To make sure the link works, select the Try link option.
  4. In the Text to display field, type the destination of the link.

    Tip: The link text is often the website name or page title. Link display text should be meaningful in any context and should never be something like Click here.

  5. In the Address field, type or paste the URL.

    Tip: To make sure the link works like you want it to, select Try link.

  6. When you finish, select OK.

Related information

Resources for creating accessible sites in SharePoint Online

Keyboard shortcuts in SharePoint Online

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!

×