Resources for creating accessible sites in sharepoint online

OnlineOnline Modern Experience



In SharePoint Online, you can easily create sites using the standard, "out-of-the-box" templates (such as Blog, Team Site, Project Site, and so on). These standard templates place content on the pages in your site that was designed with accessibility in mind.

This article is for people who are thinking about customizing their site after they've created it, and are committed to making the customized site accessible to people with disabilities. It covers the essential information you need to consider before customizing your site, including audience needs and accessibility guidelines, and it links to resources that help you make basic site customization while still keeping your site accessible.

Notes: 

• For more information on the types of sites you can create in SharePoint Online and how to use them, see Using templates to create different kinds of SharePoint sites.

• This article covers some common, basic customization that anyone can make to sites through the SharePoint Online user interface in a browser, without any knowledge about the code underlying pages. Customizing the code for a site, such as HTML, CSS, or JavaScript, or making extensive customization are beyond the scope of this article. However, the accessibility information in this article applies to any site customization, no matter the scope.

In this article

• Goals for accessible sites

• Learn about the audience - people with disabilities - and their needs

• Identify your company's accessibility policies, requirements, and guidelines

• Familiarize yourself with current, widely accepted accessibility guidelines for all types of websites

• Put it all together: Make typical customization accessible on sites created in SharePoint Online

Goals for accessible sites

For many people, SharePoint accessibility is an afterthought. They think of it as something a web developer does to the code for a site after the site has been created (such as tweaking the HTML, CSS, or JavaScript code).

However, accessibility should be a component of the design process that you consider before the work on any site begins. With that in mind, you need to consider how customizing a site created in SharePoint Online will affect accessibility before you customize your site. Making any site accessible equates to, first and foremost:

• Usability for everyone.

  Accessibility is about building a site that anyone can use—that means people with or without disabilities. Usability is critical. If you can't easily move around your site to get what you want or accomplish what you need to do, how can other people?

• Usability for people with disabilities.

  Accessibility is about being inclusive and not ignoring a portion of your audience. It involves meeting the needs of people with disabilities when building a site—making it accessible to them. They are, after all, users of your site, just like anyone else in your organization.

Designing sites with accessibility in mind helps to make your sites:

• Accessible regardless of the device or input method someone may be using (for example, desktop browser, voice browser, mobile phone browser, automobile-based computer, and so on).

• Accessible no matter the constraints under which someone may be operating (for example, noisy surroundings, rooms with varying degrees of illumination, hands-free driving environments, and so forth).

• Predictable. Site innovation is important, but predictability is essential. When you make the navigation on your site easy to understand and predictable, it is more accessible to everyone.

Resources

What is web accessibility?

Microsoft accessibility training: Introduction to accessibility

Guide for businesses and government organizations that are creating accessible content for people with disabilities

Guide for educators who are creating accessible content for people with disabilities

Microsoft Accessibility Blog

Learn about the audience - people with disabilities - and their needs

The term "people with disabilities" encompasses millions of people with a broad range of needs. However, each sub-audience has specific, distinctive needs. The following table covers some of the most common disabilities and the corresponding needs of the people who have them. When customizing a site created in SharePoint Online, understanding how your customization affect each sub-audience is critical.

Note:  "Assistive technologies" describes the group of technologies that address the needs of people with disabilities. The following table mentions some of these technologies, such as screen readers. For more information on various types of assistive technologies, in this article, go to Experiment with the assistive technologies that the audience uses.

Some of the most common disabilities and corresponding accessibility needs:

Disability	Typical assistive needs
Blindness or low vision	Keyboard shortcuts (no mouse actions). A predictable tab order and landmarks on a web page (including any dialog boxes) that enable the audience to build a mental model of the page so they can stay oriented and not lose track of where they are. Audible feedback from screen readers—one type of assistive technology. Alternatives to visuals (images, icons, etc.), and descriptive text for all images (even those that are only decorative), such as alternative text (alt text). Audio transcripts for videos, and settings for video players, such as the ability to turn off autoplay, so a video's audio and the audible feedback from a screen reader don't overlap. Language that's clear and inclusive, and doesn't always refer to "seeing" an element. For example, instead of saying, "See xyz," you could say, "Xyz is included." Instead of saying only, "Watch the video," you could provide an alternative: "Watch the video, or listen to the audio transcript for the video." Larger typefaces that make text easier to read, and black or high-contrast text. To learn how Microsoft addresses this sub-audience's needs, go to Microsoft guide for people who are blind or have low vision.
Color blindness	Color blindness is organized into two main types: difficulty distinguishing between red and green and difficulty distinguishing between blue and yellow. Consider the following when customizing your site: Alternatives to color to convey important information. Ensure that color is not the only means of conveying information on your site. For example, ensure that a hyperlink that's highlighted by color is also underlined, so a person who is color-blind knows it's a link even if they can't see the color. Bright colors or high-contrast color schemes on the opposite ends of the color spectrum. For example, white and black schemes help people who are color-blind distinguish between colors. Simple backgrounds without patterns behind text on web pages. For more information, go to Visual disabilities: Color-blindness
Limited dexterity or motor disability	Keyboard shortcuts (no, or limited, mouse actions). Opportunities to cancel major actions, such as providing a Cancel button when deleting a channel on a video portal to ensure the user can recover from any mistakes they might make with an input device. Ways to skip long lists (for example, links that enable a person to go to the top, to the end, or to the next section on a page in a site). Links that include more than a few words of text, which are difficult to click. For example, instead of "click here," include the full title for the link, which is most likely longer.
Deafness or limited hearing	Captions and text transcripts for videos. • Text transcripts for audio. Alternatives to audible cues. Language that's clear and inclusive, and provides alternatives to "hearing" or "listening to" an element. For example, instead of saying, "Listen to the audio," you could say, "Listen to the audio, or read the text transcript for it."
Cognitive disability, such as dyslexia, or attention deficit disorders	People with dyslexia describe seeing text "swim together" on a page, for example, the compressing of one line of text into the line below. Or they often see text merge or distort. They have similar needs as people who have low vision—especially reduction of their reading load. They may also benefit from familiar sans serif fonts such as Arial or Calibri. Avoid italics, all caps, and underlining. People with attention deficit disorders have trouble focusing on a sentence, a task, etc. They need simple site designs that make it easier for them to focus. They have trouble processing information on a site that's too crowded with elements. Make effective use of white space in your site layout, and use left-aligned text, not centered or justified.

Resources

Stories of web users: How people with disabilities use the web

Microsoft guides for various types of disabilities and ideas for addressing them

Identify your company's accessibility policies, requirements, and guidelines

When anyone creates content for the web or a company intranet site, and they are committed to making it accessible to people with disabilities, they must follow certain accessibility guidelines. When you veer from the standard, "out-of-the-box" templates that SharePoint Online provides for creating sites, you need to keep that in mind and do the following, at a minimum, depending on the extent of your customization:

• Identify your organization's established accessibility guidelines and requirements to which you must conform when building sites, including customized sites in SharePoint Online.

• Get in touch with the accessibility contact in your organization, and discuss the implications of customizing your site. Also, ask them to recommend tools for testing certain aspects of your site's accessibility.

• Share your content plans with your accessibility contact, and have them assess your plans and site customization progress at regular intervals to avoid potential accessibility roadblocks.

• Talk with people in your organization who have disabilities, and ask for their opinion about your plans to customize your site in SharePoint Online. They may be able to provide insights into the daily challenges they face when using websites, in general, and the specific problems they encounter when using intranet sites—both of which may encourage you to reconsider your customization plans, or at least set realistic goals.

Resources

Microsoft Developer Network (MSDN) Accessibility website

Familiarize yourself with current, widely accepted accessibility guidelines for all types of websites

Sites created in SharePoint Online are, above all, websites, just like any other. So the general guidelines that you use to create accessible content for any website also apply to sites created or customized in SharePoint Online. The following guidelines are comprehensive and detailed.

Resources

Web content accessibility guidelines (WCAG) from World Wide Web Consortium (W3C) W3C is an international community who work together to develop web standards, including guidelines for web accessibility. WCAG are some of the most comprehensive guidelines available on website accessibility, and they are the basis of accessibility regulations in many countries. WCAG is the de facto standard to aspire to for modern web and intranet site development.

WebAIM offers reference guides and design guides. WebAIM is a leading authority on web accessibility that offers complete web accessibility services. The mission of WebAIM is to empower organizations to make their web content accessible to people with disabilities.

In addition, people who work for a department or agency of the United States government must comply with federal procurement regulations. For more Information, see Section 508 standards for web-based intranet and internet information and applications.

Put it all together: Make typical customizations accessible on sites created in SharePoint Online

Now that you're familiar with accessibility as a design component, as well as the accessibility implications of veering from the standard templates included with SharePoint Online, you're ready to customize your site while keeping it accessible.

Here are some suggested articles:

• Make your SharePoint site accessible to people with disabilities

• Plan customizations, solutions, and apps for SharePoint Online

• Introduction to customizing sites and pages

In SharePoint, you can easily create sites using the standard, "out-of-the-box" templates (such as Blog, Team Site, Project Site, and so on). These standard templates place content on the pages in a way that was designed with accessibility in mind.

This article is for people who are thinking about customizing their site after they've created it, and are committed to making the customized site accessible to people with disabilities. It covers the essential information you need to consider before customizing your site, including audience needs and accessibility guidelines, and it links to resources that help you make basic site customization while still keeping your site accessible.

Notes: 

• For more information on the types of sites you can create in SharePoint and how to use them, see Using templates to create different kinds of SharePoint sites.

• This article covers some common, basic customization that anyone can make to sites through the SharePoint user interface in a browser, without any knowledge about the underlying code. Customizing the code for a site, such as HTML, CSS, or JavaScript, or making extensive customization are beyond the scope of this article. However, the accessibility information in this article applies to any site customization, no matter the scope.

In this topic

• Goals for accessible sites

• Learn about the audience - people with disabilities - and their needs

• Identify your company's accessibility policies, requirements, and guidelines

• Familiarize yourself with current, widely accepted accessibility guidelines for all types of websites

• Put it all together: Make typical customizations accessible on sites created in SharePoint

Goals for accessible sites

For many people, SharePoint accessibility is an afterthought. They think of it as something a web developer does to the code for a site after the site has been created (such as tweaking the HTML, CSS, or JavaScript code).

However, accessibility should be a component of the design process that you consider before the work on any site begins. With that in mind, you need to consider how customizing a site created in SharePoint affects accessibility before you customize your site. Making any site accessible equates to, first and foremost:

• Usability for everyone.

  Accessibility is about building a site that anyone can use—that means people with or without disabilities. Usability is critical. If you can't easily move around your site to get what you want or accomplish what you need to do, how can other people?

• Usability for people with disabilities.

  Accessibility is about being inclusive and not ignoring a portion of your audience. It involves meeting the needs of people with disabilities when building a site—making it accessible to them. They are, after all, users of your site, just like anyone else in your organization.

Designing sites with accessibility in mind helps to make your sites:

• Accessible regardless of the device or input method someone may be using (for example, desktop browser, voice browser, mobile phone browser, automobile-based computer, and so on).

• Accessible no matter the constraints under which someone may be operating (for example, noisy surroundings, rooms with varying degrees of illumination, hands-free driving environments, and so forth).

• Predictable. Site innovation is important, but predictability is essential. When you make the navigation on your site easy to understand and predictable, it is more accessible to everyone.

Resources

What is web accessibility?

Microsoft accessibility training: Introduction to accessibility

Guide for businesses and government organizations that are creating accessible content for people with disabilities

Guide for educators who are creating accessible content for people with disabilities

Microsoft Accessibility Blog

Learn about the audience - people with disabilities - and their needs

The term "people with disabilities" encompasses millions of people with a broad range of needs. However, each sub-audience has specific, distinctive needs. The following table covers some of the most common disabilities and the corresponding needs of the people who have them. When customizing a site created in SharePoint, understanding how your customization affects each sub-audience is critical.

Note: "Assistive technologies" describes the group of technologies that address the needs of people with disabilities. The following table mentions some of these technologies, such as screen readers. For more information on various types of assistive technologies, in this article, go to Experiment with the assistive technologies that the audience uses.

Some of the most common disabilities and corresponding accessibility needs:

Disability	Typical assistive needs
Blindness or low vision	Keyboard shortcuts (no mouse actions). A predictable tab order and landmarks on a web page (including any dialog boxes) that enable the audience to build a mental model of the page so they can stay oriented and not lose track of where they are. Audible feedback from screen readers—one type of assistive technology. Alternatives to visuals (images, icons, etc.), and descriptive text for all images (even those that are only decorative), such as alternative text (alt text). Audio transcripts for videos, and settings for video players, such as the ability to turn off autoplay, so the audio from a video and the audible feedback from a screen reader don't overlap. Language that's clear and inclusive, and doesn't always refer to "seeing" an element. For example, instead of saying, "See xyz," you could say, "Xyz is included." Instead of saying only, "Watch the video," you could provide an alternative: "Watch the video, or listen to the audio transcript for the video." Larger typefaces that make text easier to read, and black or high-contrast text. To learn how Microsoft addresses this sub-audience's needs, go to Microsoft guide for people who are blind or have low vision.
Color blindness	Color blindness is organized into two main types: difficulty distinguishing between red and green and difficulty distinguishing between blue and yellow. Consider the following when customizing your site: Alternatives to color to convey important information. Ensure that color is not the only means of conveying information on your site. For example, ensure that a hyperlink that's highlighted by color is also underlined, so a person who is color-blind knows it's a link even if they can't see the color. Bright colors or high-contrast color schemes on the opposite ends of the color spectrum. For example, white and black schemes help people who are color-blind distinguish between colors. Simple backgrounds without patterns behind text on web pages. For more information, go to Visual disabilities: Color-blindness
Limited dexterity or motor disability	Keyboard shortcuts (no, or limited, mouse actions). Opportunities to cancel major actions, such as providing a Cancel button when deleting a channel on a video portal to ensure the user can recover from any mistakes they might make with an input device. Ways to skip long lists (for example, links that enable a person to go to the top, to the end, or to the next section on a page in a site). Links that include more than a few words of text, which are difficult to click. For example, instead of "click here," include the full title for the link, which is most likely longer.
Deafness or limited hearing	Captions and text transcripts for videos. Text transcripts for audio. Alternatives to audible cues. Language that's clear and inclusive, and provides alternatives to "hearing" or "listening to" an element. For example, instead of saying, "Listen to the audio," you could say, "Listen to the audio, or read the text transcript for it."
Cognitive disability, such as dyslexia, or attention deficit disorders	People with dyslexia describe seeing text "swim together" on a page, for example, the compressing of one line of text into the line below. Or they often see text merge or distort. They have similar needs as people who have low vision—especially reduction of their reading load. They may also benefit from familiar sans serif fonts such as Arial or Calibri. Avoid italics, all caps, and underlining. People with attention deficit disorders have trouble focusing on a sentence, a task, etc. They need simple site designs that make it easier for them to focus. They have trouble processing information on a site that's too crowded with elements. Make effective use of white space in your site layout, and use left-aligned text, not centered or justified.

Resources

Stories of web users: How people with disabilities use the web

Microsoft guides for various types of disabilities and ideas for addressing them

Identify your company's accessibility policies, requirements, and guidelines

When anyone creates content for the web or a company intranet site, and they are committed to making it accessible to people with disabilities, they must follow certain accessibility guidelines. When you veer from the standard, "out-of-the-box" templates that SharePoint provides for creating sites, you need to keep that in mind and do the following, at a minimum, depending on the extent of your customization:

• Identify your organization's established accessibility guidelines and requirements to which you must conform when building sites, including customized sites in SharePoint.

• Get in touch with the accessibility contact in your organization, and discuss the implications of customizing your site. Also, ask them to recommend tools for testing certain aspects of your site's accessibility.

• Share your content plans with your accessibility contact, and have them assess your plans and site customization progress at regular intervals to avoid potential accessibility roadblocks.

• Talk with people in your organization who have disabilities, and ask for their opinion about your plans to customize your site in SharePoint. They may be able to provide insights into the daily challenges they face when using websites in general, and the specific problems they encounter when using intranet sites—both of which may encourage you to reconsider your customization plans, or at least set realistic goals.

Resources

Microsoft Developer Network (MSDN) Accessibility website

Familiarize yourself with current, widely accepted accessibility guidelines for all types of websites

Sites created in SharePoint are websites, just like any other. So the general guidelines that you use to create accessible content for any website also apply to sites created or customized in SharePoint. The following guidelines are comprehensive and detailed.

Web content accessibility guidelines (WCAG) from World Wide Web Consortium (W3C) W3C is an international community who work together to develop web standards, including guidelines for web accessibility. WCAG are some of the most comprehensive guidelines available on website accessibility, and they are the basis of accessibility regulations in many countries. WCAG is the de facto standard to aspire to for modern web and intranet site development.

WebAIM offers reference guides and design guides. WebAIM is a leading authority on web accessibility that offers complete web accessibility services. The mission of WebAIM is to empower organizations to make their web content accessible to people with disabilities.

In addition, people who work for a department or agency of the United States government must comply with federal procurement regulations. For more Information, see Section 508 standards for web-based intranet and internet information and applications.

Put it all together: Make typical customizations accessible on sites created in SharePoint

Now that you're familiar with accessibility as a design component, as well as the accessibility implications of veering from the standard templates included with SharePoint, you're ready to customize your site while keeping it accessible.

Here are some suggested articles:

• Make your SharePoint site accessible to people with disabilities

• Plan customizations, solutions, and apps for SharePoint Online

• Introduction to customizing sites and pages