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
* Add accessibility image; update doc
* Added See also to parent topic
* Updated theme/neutral image and added HTML table
* Image with headings
* Added image with headers
* Updated comment
Copy file name to clipboardExpand all lines: docs/design/accessibility.md
+35-83Lines changed: 35 additions & 83 deletions
Original file line number
Diff line number
Diff line change
@@ -1,48 +1,40 @@
1
1
---
2
2
title: Accessibility in SharePoint web part design
3
3
description: Guidelines for adding accessibility to your web part.
4
-
ms.date: 01/23/2018
4
+
ms.date: 03/23/2018
5
5
---
6
6
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. -->
8
-
9
7
# Accessibility in SharePoint web part design
10
8
11
-
Developing an equal experience that meets all users' unique visual, hearing, dexterity, cognitive, and speech needs is an important component of SharePoint web part design. Accessible design applies not only to people with disabilities, but also to potential situational impairments. Accessible design is good design.
9
+
Developing an experience that meets all users' unique visual, hearing, dexterity, cognitive, and speech needs is an important component of SharePoint web part design. Accessible design applies not only to people with disabilities, but also to potential situational impairments. Accessible design is good design.
12
10
13
11
## Accessibility guidelines
14
12
15
-
<!-- Make sure that this is an external resource that folks can access. Original link was to a OneNote file. -->
16
-
All Microsoft products must meet the requirements listed in the [Microsoft Accessibility Standards](https://docs.microsoft.com/en-us/windows/uwp/design/accessibility/accessibility-checklist).
13
+
All Microsoft products must meet the requirements listed in the [Microsoft Accessibility Standards](https://www.microsoft.com/en-us/accessibility).
17
14
18
-
<!-- Fabric components are not designed to be accessible already? And, shouldn't components that aren't based on Fabric also be accessible? -->
15
+
## Making web parts accessible
19
16
20
-
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.
17
+
The SharePoint Framework provides a structure to help make all web parts accessible. The web part container provides keyboard navigation defaults for the web part toolbar to edit, move, and delete the web part, a method to select the web part, and a keyboard short cut (Ctrl+P) to open the property pane. However, you still need to specify additional keyboard and screen reader navigation for the other aspects of the UI in the web part and in the property pane.
21
18
22
-
<!-- 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
-
[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") -->
19
+
In addition, many [Office UI Fabric components](https://developer.microsoft.com/en-us/fabric#/components) have built-in support for accessibility options, to make it quick to configure keyboard and screen reader navigation when you use the components in a web part.
24
20
25
-
## Accessibility testing
21
+
The following image shows keyboard navigation on a web part.
22
+
23
+
26
24
27
-
<!-- FYI, I added links. Can we assume that our target audience uses the Edge browser? -->
25
+
## Accessibility testing
28
26
29
27
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
28
31
-
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.
29
+
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
30
33
-
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.
31
+
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
32
35
33
You might also want to test for whatever combination of browser and screen reader has the greatest market share for your website.
36
34
37
-
<!-- Delete? This doesn't seem like text that should be in externally published docs?
38
-
When suppliers test with JAWS, we ask them to repro identified bugs with Narrator and Edge. In the case a bug does not repro with Narrator/Edge it is sent to Mary Smith who works with VFO for a Jaws specific fix.
39
-
-->
40
-
41
35
## Keyboard navigation
42
36
43
-
<!-- Is this section telling people how to navigate via a keyboard, or how to design to optimize for keyboard navigation? If the former, . -->
44
-
45
-
For some users, navigating a site via keyboard is more accessible. Power users also often rely on keyboard navigation. Use keyboard shortcuts such as tabs to go controls on the page, and use arrow keys to navigate inside controls.
37
+
For some users, navigating a site via keyboard is more accessible. Power users also often rely on keyboard navigation. Make sure to design keyboard shortcuts such as tabs to go to controls on the page, and use arrow keys to navigate inside controls.
46
38
47
39
### Navigation between controls
48
40
@@ -59,61 +51,43 @@ The first tab is the list item.
59
51
The second tab is the command.
60
52
The third tab is the navigation.
61
53
-->
62
-
63
-
64
-
65
-
66
-
<br/>
54
+
67
55
68
56
### Navigation within a control
69
57
70
58
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.
71
59
72
-
<!-- This image is not very clear. Do you need to have the "blank" list box on the left? -->
73
-
74
-
75
-
76
-
<br/>
60
+
77
61
78
62
### Selecting the current item
79
63
80
64
Use the space bar to select or deselect the item currently in focus in a control.
81
65
82
-
83
-
84
-
<br/>
66
+
85
67
86
68
### Run a control
87
69
88
-
Select Enter or the return key to run a control.
89
-
90
-
70
+
Press **Enter** or the return key to run a control.
91
71
92
-
<br/>
72
+
93
73
94
74
### Leave a control
95
75
96
-
Select**Escape** to exit a control and return to the container.
76
+
Press**Escape** to exit a control and return to the container.
97
77
98
-
99
-
100
-
<br/>
78
+
101
79
102
80
### Go to the first or last item
103
81
104
-
Select**Home** or **End** to go directly to the first or last item in a list, menu, and so on.
82
+
Press**Home** or **End** to go directly to the first or last item in a list, menu, and so on.
105
83
106
-
107
-
108
-
<br/>
84
+
109
85
110
86
## Screen reader navigation
111
87
112
-
Users who have vision impairments rely on screen readers to navigate the site UI.
113
-
114
-
<!-- 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? -->
88
+
Users who have vision impairments rely on screen readers to navigate the site UI. When designing a web part, follow this example when thinking about keyboard navigation and how the screen reader conveys important actions or information to the user.
115
89
116
-
90
+
117
91
118
92
## Alt text and transcripts
119
93
@@ -127,17 +101,20 @@ To be fully compliant with accessibility standards, include alt text and a compl
127
101
128
102
A minimum level of contrast is essential to help users with vision impairments consume the content on the page. It is also important to aid readability in low light and glare situations.
129
103
130
-
<!--Original image -->
104
+
The following image shows theme colors on the left and neutral colors on the right.
131
105
132
-
106
+
133
107
134
-
### Theme colors (blue) with neutral colors, followed by alert colors
135
-
136
-
108
+
<!--I replaced this image because it doesn't even make sense; the text to the right of each box does not match what's in the box, and none are labeled "theme."
109
+
-->
Use high contrast colors as a guide for color choices for components and states on the web. Windows computers only have the ability to detect whether a PC is running high contrast, or high contrast white. For this reason, use the default high contrast black setting for any high contrast, non-white theme.
167
+
Use high contrast colors as a guide for color choices for components and states on the web. Windows computers only have the ability to detect whether a PC is running high contrast or high contrast white. For this reason, use the default high contrast black setting for any high contrast, non-white theme.
214
168
215
-
<!-- In the left part of the image, I think the title should be "High Contrast Black". -->
169
+
216
170
217
-
218
-
219
-
<br/>
220
171
221
172
## See also
222
173
223
174
-[SharePoint themes and colors](themes-colors.md)
175
+
-[Design a web part](design-a-web-part.md)
224
176
-[Designing great SharePoint experiences](design-guidance-overview.md)
0 commit comments