SharePoint For All. Jennie Delisi Accessibility Analyst Kris Schulze User Experience

Transcription

1 SharePoint For All Jennie Delisi Accessibility Analyst Kris Schulze User Experience

2 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

3 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)

4 Collaborate with SharePoint Create, collect, update, manage files and lists with team members Share files and co-author in real time

5 Who Needs Accessibility? Minnesota s population: 5,577,487 % of Minnesotans reporting 1 or more disabilities in 2014: 8.5% - age % population 1 in 4: Number of today s 20-year-olds who will become disabled before they retire.

6 Question 2 Do you have an accessibility policy or standard you are required to follow at work? Yes No I don t know

7 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

8 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.

9 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

10 Clarifying Terminology Accessibility Testing Usability Testing (subset: usability testing with those that use assistive technology) User Experience Design Thinking

11 But I don t need to test with assistive technology, do I?

12 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

13 The Many Flavors of SharePoint

14 Question 3 Are you a: User/Contributor? Site Manager? Admin? Not sure?

15 Question 4 Are you a: Beginner? Feeling pretty good (some skills, could use more)? Expert? Not sure?

16 Office 365 Periodic Table (G3 License) Office 365 Periodic Table Website (icsh.pt/o365table)

17 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 On-Premise SharePoint URL might be something like

18 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

19 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)

20 What is Classic SharePoint?

21 Question 6 Do you currently use Modern SharePoint sites or pages? Yes No I don t know

22 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

23 Why would you want Modern? Future enhancements Accessibility Mobile responsiveness

24 Classic and Modern on Mobile Classic Same display as on desktop browser Modern Faster Displays better Easier to use

25 Modern Team and Communications Sites

26 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

27 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

28 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

29 Differences between Classic & Modern Pages

30 Classic Pages Ribbon Web parts Layouts

31 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

32 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

33 Modern Pages Have Better Themes - Colors End users may use high contrast mode when viewing pages, or software that modifies color schemes.

34 Page title is very important Name your page = Page-Title in URL

35 Demo: Screen Reader Hears Page Title Name of your page = Browser tab title

36 Moving from Classic to Modern No good method to convert from Classic to Modern Opportunity! Rethink design and user experience in building Modern site

37 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

38 Classic and Modern Document Libraries Classic Modern

39 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

40 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

41 Demo: Keyboard Only Access Modern Library Key change for end users: Command bar

42 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

43 Switch between classic and modern lists and libraries Return to classic SharePoint and Exit classic experience

44 Break 15 minutes! Enjoy!

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

46 What do we need to think about for SharePoint? communications SharePoint pages Documents Videos Calendars Timelines Forms

47 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?

48 Document Accessibility Word, Excel, PowerPoint, PDFs Use Office of Accessibility s online training and resources

49 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

50 Sample: Keyboard Only Test Test: Order (logical?) Focus (do you know where you are?) This screen shot done with Chrome Can you access everything?

51 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

52 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

53 Good color, Bad color Breeze Link Text Fail Characters Link Text - Pass Testing Tool Used: Colour Contrast Analyser

54 Start Seeing Alt Text Add your image, then select the edit button to open alt text panel for pages

55 Clear at 200% Fuzzy logo Testing tool: 1. Control + mouse scroll, or 2. Control + PLUS, or 3. Set browser to 200% in zoom settings

56 Test for Proper Heading Structure Used Web Accessibility Favelets (WAF) to test for headings. What is missing?

57 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

58 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.

59 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

60 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

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

62 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!

63 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

64 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

65 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

66 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

67 Office of Accessibility Resources Subscribe to our newsletter and other 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

68 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

69 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?

70 Thank You! Jennie Delisi Kris Schulze