skip to content
Primary navigation
Keyboard

News

Collaborate with your Entire Community

Creating More Accessible SharePoint Sites

11/16/2021 11:35:21 AM

Feature image for Collaborate with your Entire Community

By Jennie Delisi, Office of Accessibility

You may be using a SharePoint site to help your team:

  • Track project status.
  • Organize shared content.
  • Provide a roadmap for your team about where to find project assets and websites.

A great goal for your SharePoint site is to help your site visitors:

Can you do this and be digitally inclusive?

Answer questions, then plan

It may surprise you to find out that achieving your site goals can also create a more digitally inclusive space. 

You begin by answering some questions about the site:

  • Who will use it?
  • What will they want to do there?
  • Do you want this to be accessible to all your visitors?
  • How will you know it is achieving the goals?

Plan your SharePoint communication site has great tips for those starting a new site, or those who want to revisit and improve a site they already have. When you plan the layout and content, here are some tips to help you create with accessibility in mind.

Add colors with good contrast

Color can be really helpful on a SharePoint site. Color:

  • Helps people find content.
  • Adds sensory input - keeps some people engaged.

Some of your site visitors may not be able to perceive color. Others may need to view your page in different ways.

  • Use good color contrast for headings, text, and other features when compared to their backgrounds.
  • Don't use color alone - make sure that if people view the page in black and white they can still understand the content. While not how most people will view the content, it is an easy test to help ensure color is not the only way you are communicating information.

Make it easy to know what to do here

Too many things on the page will make it difficult for some people to find what they need. Others may find a cluttered page overwhelming. Both groups may find other ways to get to the information instead of using this page. That may prevent them from accessing the latest information you are sharing.

A few steps can help people more quickly find what they need:

  • Plan the main tasks for the page.
  • Write headings that help people know what is in each section.
  • Use the heading structures built into the tool.

Use quality graphics that don’t blur when magnified

Many people use magnification these days for a variety of reasons:

  • Using a smaller device.
  • Multiple open windows.
  • Because of their vision.

While digital fonts generally magnify well when zooming in, images depend on the quality of the picture or icon used. Select images considering the needs of those that will zoom in:

  • Load good quality graphics.
  • Test when loading your image (CTRL + Plus, CTRL + mouse scroll) to 200%. Is everything clear? 

Be modern: Say goodbye to older interfaces

Microsoft has been working to build more accessibility into SharePoint. Older interfaces may not support navigation as well for people using assistive technologies. They do not include some important accessibility improvements built into the more modern interface features.

And it may be hard to tell which version you have. 

  • Whenever possible choose to use modern interfaces.
  • If you are not sure which interface you are using on your site, connect with your SharePoint administrator.

Boost the clickability of your links

Everybody uses links. Your goals should include using text that describes what they will do:

  • Make it easier for people to find them on the page.
  • Help people pick the correct one to use.
  • Make it easier for people using assistive technologies.

A plain URL link when sharing information in a digital space is a throwback to 1999!

Some tips:

  • Use phrases that include the title of the destination.
  • Include (PDF) or (Video) at the end of the link if going somewhere other than a webpage.
  • Think about how they would read if you had a list of just the links on that page. Would you know where each one goes? For examples and more information about link best practices read our article Descriptive Hyperlinks for All.

Describe Your Graphics

Ensure everyone gets the message. You are using those graphics to communicate. For those who cannot see the page, or need the information in text, add concise and descriptive alternative text. When using complex graphics (like busy charts), in addition to the alternative text:

  • Provide more details elsewhere on the page. 
  • Ensure all users can find these details.

Names Matter

The name of your site, your pages, your documents - each helps people find what they need. 

Remember: 

  • Your page title is displayed in the browser tab. 
  • People using screen readers hear the page title when a page loads, and again when they are navigating between open windows. 
  • Descriptive document titles and document names help people find things quicker in a document library.
  • When linking to a document or other page, having descriptive and concise page and document titles helps. The link text will help people confirm they went to the right place. 

Screenshot of Office of Accessibility Document Library. This is a modern document library. Word document name: Step by Step How to Create An Accessible Document in InDesign.docx.

Test While You Design 

When updating a SharePoint site you may encounter older pages and components. Also, you may want to experiment. Just take care to not break the built-in accessibility. 

As you design and select your layout: 

  • Use your tab key to move between interactive elements, then use the standard keystrokes to operate them. Is each link, button, menu, form control easy to get to and operate? WebAIM’s article Keyboard Accessibility has a section called Keyboard Testing. This is a great reference when doing these quick checks. 
  • Use a tool like the WebAIM WAVE browser extensions to test the accessibility of: 
    • Lists.
    • Tables. 
    • Content. 

Some SharePoint interfaces have systems in place that automatically assign heading levels of some text on the page. An example: the name of the page is sometimes coded as a first level heading (H1). Some of the interfaces take all headings in the content area and demote them one level. This makes the H1 you styled become an H2, the H2 become an H3. You may not realize this unless you test. Using a tool like WAVE will help you run a quick test to ensure the structure you want to communicate is shared as you intend. 

Improve the digital accessibility of your site 

Planning, then designing and testing is a great way to begin improving digital inclusion. If digital accessibility is a new skill for you, welcome! 

Some places to start: 

  • Meet the digital accessibility professional(s) at your organization. 
  • Ask your training coordinator what is available to help you learn more. 
  • Subscribe to our newsletter if you have not already. Each month we list webinars and other training opportunities to help you learn more.

Subscribe to our Newsletter

Would you like to learn more about the accessibility work being done by Minnesota IT Services and the State of Minnesota? Once a month we will bring you more tips, articles, and ways to learn more about digital accessibility.

Subscribe Today

Accessibility

Accessibility

back to top