SharePoint For All

Jennie Delisi| Accessibility AnalystKris Schulze| User Experience

Question 1

Do you work for the State of MN, county, city, other? (Text field beside other)

• State of MN executive branch agency

• County

• City

• Other

After today…many options for learning more!

Free monthly accessibility information:

Office of Accessibility Public Newsletter

Free accessibility training and resources:

Office of Accessibility (Or: mn.gov/mnit/accessibility)

Collaborate with SharePoint

• Create, collect, update, manage files and lists with team members

• Share files and co-author in real time

Who Needs Accessibility?

Minnesota’s population: 5,577,487

% of Minnesotans reporting 1 or more disabilities in 2014:

• 8.5% - age 18-64• 31.7% - 65+ population

1 in 4: Number of today’s 20-year-olds who will become disabled before they retire.

Question 2

Do you have an accessibility policy or standard you are required to follow at work?

• Yes

• No

• I don’t know

State Accessibility Standard

State of Minnesota Accessibility Standard

• Section 508 and WCAG 2.0 AA (includes level A)

• Executive Branch Agencies must follow, others are encouraged

• Not a state agency? Consider using this in your accessibility policy

Which SharePoint Interfaces Need to Be Accessible?

All of them!• SharePoint Administrators

• Site Owners

• Content Creators

• End Users

Today we will focus on the End User interfaces only.

Assistive Technology (AT)

“any item, piece of equipment, or product system,

whether acquired commercially, modified, or customized,

that is used to increase, maintain, or improve functional capabilities

of individuals with disabilities.”

-Assistive Technology Act of 1998, as amended

Clarifying Terminology

Accessibility Testing

Usability Testing

(subset: usability testing with those that use assistive technology)

User Experience

Design Thinking

But I don’t need to test

with assistive technology,

do I?

Ready to Dip Your Toe Into the Water?

• Opportunity to try assistive technologies!

• Volunteer for some, watch others

• Very different experience when you use them, though may not replicate end user’s experience

The Many Flavors of SharePoint

Question 3

Are you a:

• User/Contributor?

• Site Manager?

• Admin?

• Not sure?

Question 4

Are you a:

• Beginner?

• Feeling pretty good (some skills, could use more)?

• Expert?

• Not sure?

Office 365 Periodic Table (G3 License)

Office 365 Periodic Table Website (icsh.pt/O365Table)

Office 365 SharePoint Online or On-premise?

• Look at URL and for app launcher (waffle) and text “Office 365”

• Office 365 cloud site URL is https://mn365.sharepoint.com

• On-Premise SharePoint URL might be something like http://comm https://workplace https://inside

Question 5

What flavor of SharePoint do you use?

• SharePoint Online Government

• SharePoint Online Commercial

• SharePoint 2013/2016/on-prem

• Older version?

• I have no idea

Modern and Classic and Cloud…Oh My

• Looking for online help? Helps to know SharePoint version

• Hard to tell if heavily customized

• Options• SharePoint Online

• SharePoint Online Classic

• SharePoint OnPremise – 2013, 2016, 2019 (preview)

What is Classic SharePoint?

Question 6Do you currently use Modern SharePoint sites or pages?

• Yes

• No

• I don’t know

What is Modern SharePoint in SharePoint Online?

• New user experience

• Easier to edit and create pages

• New look for lists and libraries

• Can create Modern Team Site or Communication Site

Why would you want Modern?

• Future enhancements

• Accessibility

• Mobile responsiveness

Classic and Modern on Mobile

Classic

• Same display as on desktop browser

Modern

• Faster

• Displays better

• Easier to use

Modern Team and Communications Sites

Modern Team Sites

• Ask for Modern site and document library

• From site header, add new• List

• Document library

• Page

• News post or link

• Web app

Modern Communication Sites

• Communicate information to organization - intranet

• Full width site template, mobile responsive

• Simpler to create than publishing sites

• Attractive design out of the box

Classic Sites Mixed with Modern

• SharePoint Admin sets experience

• Classic SharePoint team site with Modern Document Library and Modern Pages

• Modern team site is Modern all over

Differences between Classic & Modern Pages

Classic Pages

• Ribbon

• Web parts

• Layouts

Demo: Switch Access Classic Library

• How much work is it to get through the ribbon?

• All items in the left navigation receive focus using the tab key

• Notice: Status indicators and the person’s name receive focus

• Challenges in Internet Explorer for some ATs when downloading a copy of a document

Switch + Switch Interface

Modern Pages

• Can put spaces in your Page Name

• Options for layout

• Add alt text for images

• REMINDER: Check accessibility of web parts before using

Modern Pages Have Better Themes - Colors

End users may use high contrast mode when viewing pages, or software that modifies color schemes.

Page title is very important

Name your page = Page-Title in URL

Demo: Screen Reader Hears Page Title

Name of your page = Browser tab title

Moving from Classic to Modern

• No good method to convert from Classic to Modern

• Opportunity! Rethink design and user experience in building Modern site

Modern Web Parts

• No classic web parts on modern pages or vice versa

• Easier to use

• Web parts

Bing maps Divider

Document library Events

File viewer Hero

Image Highlighted content

List News

Quick links Sites

Classic and Modern Document Libraries

Classic

Modern

Modern SharePoint Lists and Libraries

• More accessible

• Filter and sort easily

• Resize, group, create custom views

• Quickly change file information, access previews and details

• Create a column

Features in Classic Lists and Libraries Only

• Popularity trends

• RSS Feed

• Connect to Outlook, Office

• Export to Excel for doc libraries

• Edit Library

• Customized navigation links on publishing sites

• Tree and Content Organizer views

• Customizations to list templates, in Infopath, Publishing, JSLink code

Demo: Keyboard Only Access Modern Library

Key change for end users: Command bar

Demo – Screen Reader and Libraries

Classic SharePoint

• Must use the ribbon

• Keyboard trap in Internet Explorer

Modern Library

• Improved navigation

• Command bar controls available using Shift + F10

• No more keyboard trap

Switch between classic and modern lists and libraries

Return to classic SharePoint and Exit classic experience

Break

15 minutes! Enjoy!

I know what I have (maybe), now what?

What do we need to think about for SharePoint?

• Email communications

• SharePoint pages

• Documents

• Videos

• Calendars

• Timelines

• Forms…

Checklist for Your SharePoint Accessibility Tests

• Documents are accessible?

• Operates keyboard only?

• Color contrast passes?

• Alt text added for images?

• Clear at 200% magnification?

• Headings present, in a logical order?

• Links have meaningful text?

• Lists and tables have proper structure?

Document Accessibility

• Word, Excel, PowerPoint, PDFs…

• Use Office of Accessibility’s online training and resources

Can You Operate Using Just Your Keyboard?

• Tab key: goes from actionable item to actionable item

• Quick Launch and other areas that act like applications:

• Tab to group (e.g., Home)

• Arrow through choices

• Form controls (e.g., check boxes and radio buttons)

• Tab to group

• Arrow through choices (not check boxes)

• Enter or space bar to select

Use WebAIM’s Keyboard Testing Chart

Sample: Keyboard Only Test

Test:

• Order (logical?)

• Focus (do you know where you are?)

• This screen shot done with Chrome

• Can you access everything?

Consider Your Keyboard Only Users

Calendar Month View (Classic) Calendar List View (Classic)

Location can be key! For example, put link to Calendar List View link before the Calendar Month View

Testing Tool Used Here: Tab Key

Color Contrast

Text (WebAIM Color Contrast Checker)

• 4.5:1 unless…

• “14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger”

• 3:1

• Includes heading styles, link text, visited link colors when present

• Exempt: logos, decorative images

But, isn’t the logo important information for your readers? Food for thought…

Good color, Bad color…

Breeze Link Text – Fail Characters Link Text - Pass

Testing Tool Used: Colour Contrast Analyser

Start Seeing Alt Text

Add your image, then select the edit button to open alt text panel for pages

Clear at 200%

Fuzzy logo

Testing tool:

1. Control + mouse scroll, or2. Control + PLUS, or3. Set browser to 200% in zoom settings

Test for Proper Heading Structure

Used Web Accessibility Favelets (WAF) to test for headings. What is missing?

Short, Clear Link Text

Links on a SharePoint page

• Link text is meaningful in context

Screen shot of screen reader list of links

• Link text is meaningful when out of context

Proper Structure for Lists, Tables

List (Testing Tool: WAVE)

Table (Testing Tool: Web Accessibility Favelets)

Example at right shows lack of table headers (th) in table formatted in Modern page

Note: pasting accessible tables from Microsoft Word or PDFs to Modern pages may not guarantee an accessible table.

Is there a way to test for all these things at once?

Use automated accessibility testing tools with caution:

• SharePoint issues vs content issues

• Limits to what is tested

• Manual testing still required

• Select the right testing tool

Testing An Entire Page with WAVE

Wave tool (wave.webaim.org)

Pros:

• Automated checking tool that tests against WCAG standard

• Visual representation of errors

Cons for this purpose:

• You can only impact content

• Need to know which issues exist without you even adding content - baseline

I know what I have (maybe) and a little more about accessibility, now what?

It takes a village

• eDad

• Rapid change and new features• Test

• Spread the testing around!

• Have a good feedback mechanism• End user reporting

• Structured feedback sessions

• Join an accessibility group• Yammer, LinkedIn, Twitter

• Make friends with your accessibility coordinator & UX people!

In our future?

Microsoft Teams

• Skype for Business Online capabilities moving to Teams

• Microsoft Teams video with captions

Accessibility features in Windows 10 and Office 365 Pro Plus

State of MN Training Toolkit and Yammer

• Minnesota IT Services Training Toolkit site extranet for State of MN employees

• Yammer SharePoint Group must have state.mn.us email

Microsoft Online Learning

Accessibility in SharePoint Online

• Keyboard shortcuts

SharePoint Online video training

• Intro to SharePoint Online

• Create sites, posts, lists

Microsoft Learn

Important Note: State of MN does not use all of the features shown in these training materials

More ways to learn more about SharePoint and O365

Microsoft Accessibility site and support

SharePoint Saturday Twin Cities

Minnesota Office 365 User Groups

Microsoft Ignite Sessions Online

Microsoft Tech Community

Microsoft Teams video training from Microsoft

PowerHour with Laura Rogers: Modern Lists webcast of Modern List features from 2/2017

SharePoint classic and modern experiences, Microsoft Support article

Office of Accessibility Resources

• Subscribe to our newsletter and other email updates

• Office of Accessibility website – tons of info on websites, applications, documents, social media and more

• Accessible Word Document eLearning – basics of accessibility taught for Word documents but concepts apply to many applications

Other Greater Minnesota/Great Lakes Region Resources

• Great Lakes ADA Center: webinars, online information, newsletter

• University of Minnesota Accessible U: great info on digital accessibility

When you get back to your desk…

What is one thing you will use, try, do, or share

because of information you learned in this session?

Thank You!

Jennie Delisijennie.delisi@state.mn.us

Kris Schulzekris.schulze@state.mn.us