You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/design/accessibility.md
+23-19Lines changed: 23 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,10 @@
1
1
---
2
2
title: Accessibility in SharePoint web part design
3
-
ms.date: 11/21/2017
3
+
description: Guidelines for adding accessibility to your web part.
4
+
ms.date: 01/23/2018
4
5
---
5
6
6
-
<!--Based on how rough this content is in it's current state, i'm going to pull it from this initial release so we can edit and better prepare. -->
7
+
<!--Based on how rough this content is in its current state, i'm going to pull it from this initial release so we can edit and better prepare. -->
7
8
8
9
# Accessibility in SharePoint web part design
9
10
@@ -17,7 +18,7 @@ All Microsoft products must meet the requirements listed in the [Microsoft Acces
17
18
18
19
<!-- Fabric components are not designed to be accessible already? And, shouldn't components that aren't based on Fabric also be accessible? -->
19
20
20
-
If you're building a dialog box, file picker, or any other [Office UI Fabric](https://dev.office.com/fabric#/components) component, follow the guidance in this article to ensure that your content is accessible.
21
+
If you're building a dialog box, file picker, or any other [Office UI Fabric](https://developer.microsoft.com/en-us/fabric#/components) component, follow the guidance in this article to ensure that your content is accessible.
21
22
22
23
<!-- Not sure why we have that link? It currently goes to the OneNote file. Where is the Common UI Controls content? Is that related to accessibility? [v-licapu] - I agree; we shouldn't be linking to this unless it's live to external audiences; even I can't access it. I moved it to within the comment:
23
24
[Common UI Controls](https://microsoft.sharepoint.com/teams/STS/_layouts/OneNote.aspx?id=%2Fteams%2FSTS%2FShared%20Documents%2FSP%20Accessibility%2FAccessibility%20Guidance&wd=target%28Accessibility%20101.one%7C0005C142-938C-4411-B543-B9F4199E19B3%2FEverything%20you%20need%20to%20know%20about%20Accessibility%7CE099AFE3-8804-4E1F-BA50-99493AB8A3D0%2F%29 "Link to Common UI Controls") -->
@@ -28,7 +29,7 @@ If you're building a dialog box, file picker, or any other [Office UI Fabric](ht
28
29
29
30
Test your web part first with [Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started) and Microsoft Edge, and then verify the accessibility experience with [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS).
30
31
31
-
Narrator and Microsoft Edge are standardscompliant. When you test with that combination, you are more likely to find issues, and you can validate that your site meets accessibility standards.
32
+
Narrator and Microsoft Edge are standards-compliant. When you test with that combination, you are more likely to find issues, and you can validate that your site meets accessibility standards.
32
33
33
34
JAWS is the market leader in screen readers. JAWS includes features that can improve the accessibility of some websites that aren't as accessible in other screen readers. Therefore testing in JAWS might not ensure that your site meets all accessibility requirements.
34
35
@@ -60,61 +61,59 @@ The second tab is the command.
60
61
The third tab is the navigation.
61
62
-->
62
63
63
-
*Figure 1. The tab stops on a SharePoint page*
64
64
65
65
66
66
67
+
<br/>
68
+
67
69
### Navigation within a control
68
70
69
71
You can use arrow keys to move to items in a control, such as choices in a menu, commands in a command bar, or items in a list.
70
72
71
73
<!-- This image is not very clear. Do you need to have the "blank" list box on the left? -->
72
74
73
-
*Figure 2. Using arrow keys to navigate within a control*
74
-
75
75
76
76
77
+
<br/>
78
+
77
79
### Selecting the current item
78
80
79
81
Use the space bar to select or deselect the item currently in focus in a control.
80
82
81
-
*Figure 3. Using the space bar to select an item in a list*
82
-
83
83
84
84
85
+
<br/>
86
+
85
87
### Run a control
86
88
87
89
Select Enter or the return key to run a control.
88
90
89
-
*Figure 4. Selecting Enter to run a control*
90
-
91
91
92
92
93
+
<br/>
94
+
93
95
### Leave a control
94
96
95
97
Select **Escape** to exit a control and return to the container.
96
98
97
-
*Figure 5. Selecting Escape to leave a control and return to the container*
98
-
99
99
100
100
101
+
<br/>
102
+
101
103
### Go to the first or last item
102
104
103
105
Select **Home** or **End** to go directly to the first or last item in a list, menu, and so on.
104
106
105
-
*Figure 6. Selecting Home or End to go to the first or last item in a list*
106
-
107
107
108
108
109
+
<br/>
109
110
110
111
## Screen reader navigation
111
112
112
113
Users who have vision impairments rely on screen readers to navigate the site UI.
113
114
114
115
<!-- Narrator isn't a third-party product. This image needs more text/explanation; please also clarify the alt text. Is this section important, or can it be removed, given the previous mention of testing with Narrator and JAWS? Again, the intent/target audience for this information isn't clear - is it for the user, or the designer? Can you explain why this information is important from the designer's POV? -->
115
116
116
-
*Figure 7. Screen reader navigation of a SharePoint page*
117
-
118
117
119
118
120
119
## Alt text and transcripts
@@ -134,6 +133,8 @@ A minimum level of contrast is essential to help users with vision impairments c
134
133
135
134
136
135
136
+
<br/>
137
+
137
138
### Theme colors (Blue) and neutral colors
138
139
139
140
<table>
@@ -183,6 +184,7 @@ A minimum level of contrast is essential to help users with vision impairments c
description: Author pages using Edit mode, Published mode, and consider the mobile view.
4
+
ms.date: 1/23/2018
4
5
---
5
6
6
7
# Authoring pages in a SharePoint site
7
8
8
-
Authoring pages in SharePoint is a simple process, but it does require some familiarity with the SharePoint environment, as well as an understanding of what and who you are designing the page for. A few basic principles – like remembering to "Start simple" and "Build on what's working" - are valuable things to consider as you start authoring. It's also a good idea to consistently remind yourself of your audience, and the goals that you are trying to help them achieve.
9
+
Authoring pages in SharePoint is a simple process, but it does require some familiarity with the SharePoint environment, as well as an understanding of what and who you are designing the page for. A few basic principles, such as remembering to "Start simple" and "Build on what's working," are valuable things to consider as you start authoring. It's also a good idea to consistently remind yourself of your audience and the goals that you are trying to help them achieve.
9
10
10
11
<!-- Do we have content about the design principles that we can link to here? -->
11
12
12
13
The SharePoint page authoring experience has two modes:
13
14
14
-
- Edit - Allows page authors to add and configure web parts to add content to a page.
15
-
- Published - Allows your team or audience to view content and interact with web parts.
15
+
-**Edit**. Allows page authors to add and configure web parts to add content to a page.
16
+
-**Published**. Allows your team or audience to view content and interact with web parts.
16
17
17
18
## Edit mode
18
19
19
20
When creating a new page, users have access to the authoring UI to add content to and customize the page content.
26
+
<imgalt="Edit control with cursor showing highlight"src="../images/design-authoring-edit-02.png"width="850">
25
27
28
+
<br/>
26
29
27
30
### Add hint and Toolbox
28
31
29
-
The add hint is a horizontal line with a plus icon that is visible when a web part is selected and on hover to indicate where page authors can add new web parts to their page. The Toolbox opens when a user chooses the plus icon. The Toolbox contains all the web parts that can be added to a page.
32
+
The add hint is a horizontal line with a plus icon that is visible when a web part is selected and on hover to indicate where page authors can add new web parts to their page. The Toolbox opens when a user selects the plus icon. The Toolbox contains all the web parts that can be added to a page.
30
33
31
-
34
+
<imgalt="Hint and toolbox showing tools"src="../images/design-authoring-add-hint.png"width="850">
32
35
36
+
<br/>
33
37
34
38
### Toolbar
35
39
36
40
A vertical toolbar and bounding box is part of the framework for every web part and is provided by the page. Each web part has an edit and delete action in the toolbar.
On hover/active, the hint bars are primary blue or the primary theme color for the site.
44
49
45
-
50
+
<imgalt="Hover and active state"src="../images/design-authoring-active-hover-01.png"width="850">
51
+
52
+
<br/>
46
53
47
54
The bounding box for a web part is gray by default, but picks up the primary blue or primary theme color for the site on hover or when the web part is selected.
48
55
49
-
56
+
<imgalt="Bounding box on and off"src="../images/design-authoring-active-hover-02.png"width="850">
50
57
58
+
<br/>
51
59
52
60
### Contextual edits
53
61
54
-
Design a WYSIWYG experience for web parts so that users can fill in information or add content that will be displayed when published. This content should be entered on the page so the user understands how the it will render in the viewer. For example, titles and descriptions should be filled out where the text displays; new tasks should be added and modified in the context of the page.
62
+
Design a WYSIWYG experience for web parts so that users can fill in information or add content that is displayed when published. This content should be entered on the page so that the user understands how it renders in the viewer. For example, titles and descriptions should be filled out where the text displays; new tasks should be added and modified in the context of the page.
55
63
56
64
57
65
66
+
<br/>
58
67
59
68
### Item-level edits
60
69
61
70
UI can change within the web part; for example, text can become a text field, or you can display UI to reorder items or to check off tasks in a web part. You can enable interactive functionality for web parts in edit mode, in read mode, or in both, depending on your design intent.
62
71
63
72
64
73
74
+
<br/>
65
75
66
76
### Property panes
67
77
68
-
Property panes are invoked via the **Edit** icon on the toolbar. Property panes should primarily contain configuration settings that enable or disable features that either show on page, or make a call to a service to display content.
78
+
Property panes are invoked via the **Edit** icon on the toolbar. Property panes should primarily contain configuration settings that enable or disable features that either show on the page, or make a call to a service to display content.
After the page is published, all edit UI is disabled and for the viewer or reader of the page. To continue editing the page, the user selects the **Edit** button on the top right corner of the command bar.
86
+
After the page is published, all editing UI is disabled for the viewer or reader of the page. To continue editing the page, the user selects the **Edit** button on the top right corner of the command bar.
All SharePoint pages are [responsive](grid-and-responsive-design.md) to allow the content of the page to be viewed on mobile devices. While designing a web part, it is important to understand how the new SharePoint site pages render across different devices.
83
95
96
+
84
97
98
+
## See also
85
99
86
-
100
+
-[Designing great SharePoint experiences](design-guidance-overview.md)
Copy file name to clipboardExpand all lines: docs/design/design-a-web-part.md
+13-6Lines changed: 13 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,19 @@
1
1
---
2
2
title: Designing a SharePoint web part
3
-
ms.date: 11/30/2017
3
+
description: Use three types of property panes to design and develop web parts that fit your business or customer needs.
4
+
ms.date: 01/23/2018
4
5
---
5
6
6
7
# Designing a SharePoint web part
7
8
8
-
Before you design a SharePoint web part, you should understand how to [author pages in a SharePoint site](authoring-pages.md). If you haven't already, take some time to create a page and add multiple types of web parts. It is important know how to leverage Office Fabric components and styles to make it easier and quicker to get your new web part up and running.
9
+
Before you design a SharePoint web part, you should understand how to [author pages in a SharePoint site](authoring-pages.md). If you haven't already, take some time to create a page and add multiple types of web parts. It is important to know how to leverage Office Fabric components and styles to make it easier and quicker to get your new web part up and running.
9
10
10
11
When you design web parts, it's important to be familiar with the following concepts:
11
12
12
13
-[Property pane types and when to use each type](#property-pane-types)
13
14
-[Reactive and nonreactive web parts](reactive-and-nonreactive-web-parts.md)
14
15
-[Titles and descriptions](web-part-titles-and-descriptions.md)
15
-
-[Fallbacks and placeholders](placeholders-and-fallbacks.md)
16
+
-[Placeholders and fallbacks](placeholders-and-fallbacks.md)
16
17
17
18
18
19
## Property pane types
@@ -21,33 +22,37 @@ You can use three types of property panes to design and develop web parts that f
21
22
22
23
To open a pane to configure settings for a web part, select **Edit**. Use the pane to enable and disable features, select a source, choose a layout, and set options. Edit web part content within the web part rather than in the property pane.
23
24
24
-
The property pane is 320px and when opened, the page will responsively reflow.
25
+
The property pane is 320 px and when opened, the page responsively reflows.
25
26
26
27
### Single pane
28
+
27
29
Use a single pane for simple web parts that have only a small number of properties to configure.
Use an accordion pane to contain a group or groups of properties with many options, and where the groups result in a long scrolling list of options. For example, you might have three groups named Properties, Appearance, and Layout, each with ten components.
34
38
35
39
Use accordion panes when you need to apply categorization for a complex web part.
0 commit comments