SharePoint For All Jennie Delisi Accessibility Analyst Kris 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 6 Do 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? Switch + Switch Interface 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
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 Document library File viewer Image List Quick links Divider Events Hero Highlighted content News 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, or 2. Control + PLUS, or 3. 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 Delisi jennie.delisi@state.mn.us Kris Schulze kris.schulze@state.mn.us