[Guest Blog] 8 Tips to Create Accessible SharePoint Pages

Posted on by — No Comments ↓

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Tech Community.

Humans of IT is thrilled to feature an Accessibility-focused content series, where we highlight a number of inspiring stories from Microsoft MVPs, employees and community members to share how accessible technology has helped them succeed and feel empowered in the workplace. Today, we continue the series with  , an Office Apps and Services MVP, who will useful tips and tricks on making your SharePoint pages and news accessible to all. 

 

I am an information architect and business analyst. One of the best parts about what I do is that because technology is constantly evolving, I am constantly challenged to learn new things. As an information architect, I care enormously about organizing and presenting information. As a business analyst, I care enormously about generating business value. For the past few years, my professional learning journey has been driven by some personal and professional experiences that have caused me to think a lot about time, or the lack thereof, and inclusion.

 

I spend a lot of time focused on creating easier-to-consume SharePoint sites and pages. In the middle of last year, I was listening to Episode 30 of the Intrazone podcast called Accessibility from the start, which inspired me to add an additional focus to that work - accessibility. The episode celebrated Global Accessibility and Awareness Day, which is coming up next month on May 21, 2020. One of the guests on the podcast was Lauren Back, a usability engineer at HCL Technologies, who happens to be blind. Lauren talked about how she imagined that someone who is not blind could quickly scan a webpage to get a sense of what the page is all about. However, Lauren uses a screen reader and depending on how the page author created the page, she might have to listen to every single word on a page! While listening to the podcast, I started thinking about how I create page content, and wondered how much time it would take for Lauren to “read” some of those pages. I have long been on a mission to eliminate the use of “click here” on web pages. Links that embedded in the text displayed as “here” cost a lot of time for both sighted and visually impaired page visitors. If you put the link on the word “here,” rather than the target content, all readers have to stop and focus to read the text before and after the word “here” to figure out exactly where clicking “here” is going to take them. It is one thing to do this when you can visually scan the page – but quite another if you have to listen to every single word! Lauren got me thinking about other things I should be doing to make my SharePoint pages not just more organized and readable, but also more accessible.

 

Like a good analyst, I took on a mission to research what accessible SharePoint pages should include when you consider accessibility from the start, not as an afterthought. I have added these accessibility tips to the information I share in conference presentations about making more “consumable” web pages. I try to follow these tips every time I create a page because, as it turns out, accessible pages are better for everyone! I hope you will accept the challenge to make your pages more accessible for all!

 

Tip 1: Write content upside down

People scan web pages; they don’t read them. To make your pages more “scannable” for all readers, put the key information that readers must have to be successful at the top of the page. Try to write more like a journalist with the key points early on the page and less critical information next. Put your conclusion first, instead of at the end!

 

To make your writing more accessible:

  • Use visual separation of content, including white space!
  • Don’t use only color to differentiate content. For example, using only colors (especially red and green) to indicate required fields in a form will prevent color blind individuals from understanding your message. That said, color - when used appropriately - can be helpful to users with some learning disabilities who benefit when color is used to distinguish and organize your content. To make your content more accessible to both groups, use color, but use other indicators to help convey your message as well.
  • Put periods between each letter in abbreviations.
  • Use inclusive language. Don’t say “See the instructions.” Instead say, “Refer to the instructions.” Instead of saying “Listen to the audio,” say “Listen to the audio or read the text transcript”. Remember to provide alternative text and transcripts!

 

Tip 2: Design pages around "chunks" of content using sections

  • Use sections to make content more readable and ensure correct display placement on mobile devices
  • Use section background colors to break up and highlight content
  • Use built-in header styles to take advantage of on-page anchor links and give people using a screen reader the ability to use their keyboard to jump from heading to heading
  • Don’t skip heading levels – use H1, H2, and H3 in order – and only increase by 1 as you write. In other words, don’t use H1 headers followed by H3 simply because you like the size of the style. People who use screen readers can use headings to “jump” from heading to heading on your page – helping them “scan” your content. Skipping a level or using levels out of order impedes that experience.

 

Tip 3: Write scannable text

  • Use bullets to make concepts easier to scan
  • Highlight key words using bold
  • Write with only one idea per paragraph to keep your paragraphs shorter
  • Keep your page short – use hyperlinks for ancillary content
  • Do not use underlines in text. Underlines are only for hyperlinks.
  • Keep your link text short. It is OK to link a full sentence if you must but avoid anything longer than that.
  • Do not associate a hyperlink with the word “here.” Ever. Go on a search-and-destroy mission in your organization’s intranet to kill all your “click here's!”
    • Do not use: Click here for the latest application form
    • Better: Download the latest application form
    • Best: latest application form

 

Tip 4: Embed where you can

If you only have a few of videos to share on your page, embed them on the page instead of linking to them. Make sure you include a link to the transcript.

 

Tip 5: Choose a great title, especially for news

The title of your news article helps the reader determine whether it is worth reading.

  • It is OK to start your headline with a number. People like lists!
  • Make sure the title tells the reader something useful
  • Don't use idioms or expressions in your title, especially if you have a global audience. Some expressions do not translate well in other languages.
  • Keep your title short – omit non-essential words. I have seen a lot of articles in my clients' intranets lately that start with COVID-19 Update: followed by something that is meant to be an article title. Skip the repetitive front part and get right to the point, for example: "All non-essential travel banned until June 30 at the earliest".

 

Tip 6: Use relevant images

Modern SharePoint provide many ways to use beautiful images – but if you add an image to a page, it needs to be relevant to the topic! Also important: Make sure that you either own the right to use it, or have been given permission by the image owner to use it. It will be very exciting when the collection of stock images for SharePoint announced at Microsoft Ignite 2019 finally lands in SharePoint! Avoid gratuitous images that have nothing to do with the topic. If the image does not match the topic, your reader still must read the text for the link.

 

To ensure your images are accessible:

  • Make sure images have “alt” text. When a screen reader encounters an image, it will attempt to read a text alternative. With SharePoint images, there is zero excuse to not add alt text – you'll automatically get an AI-driven prompt to check the alt text section when you add an image. Most of the time, all you need to do is make sure the AI got it right. If it does not, simply click the prompt to correct it! It only takes a few seconds to look at the image and add a brief description.
  • Browsers show alt text when images do not load, for example, on slow internet connections, so adding alt text is just a good practice in general
  • What should be in alt text?
    • A short description conveying the essential information in the image
    • You do not have to say “a photo of” unless the medium is important
    • Complex images, like charts or graphs, should provide a full-text equivalent of the data or information provided in the image as the alt text

 

Tip 7: All about me!

Use audience targeting for pages and news (and soon for navigation) to show people information that is most relevant to them based on geography or role. Save time for your readers by only showing them information that applies to them.

 

Tip 8: Start your journey

These tips are all simple, easy things you can do that today that will not add much extra time when you create SharePoint pages. Yet, there is always a lot more to learn. Be sure to use these very helpful resources (start with the first one) to help you begin creating more accessible pages and sites.

These tips have personally helped me in my journey to create more accessible webpages, and I hope they will help you as well!

 

#HumansofIT

#Accessibility

 

Like this article? Learn more about Sue Hanley, and follow her on Twitter!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.