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
title: Accessibility in SharePoint web part design
3
-
ms.date: 9/25/2017
3
+
ms.date: 11/21/2017
4
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
7
8
-
9
-
10
-
11
8
# Accessibility in SharePoint web part design
12
9
13
10
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.
@@ -22,9 +19,8 @@ All Microsoft products must meet the requirements listed in the [Microsoft Acces
22
19
23
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.
24
21
25
-
<!-- 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? -->
26
-
27
-
[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")
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") -->
28
24
29
25
## Accessibility testing
30
26
@@ -63,6 +59,9 @@ The first tab is the list item.
63
59
The second tab is the command.
64
60
The third tab is the navigation.
65
61
-->
62
+
63
+
*Figure 1. The tab stops on a SharePoint page*
64
+
66
65
67
66
68
67
### Navigation within a control
@@ -71,31 +70,41 @@ You can use arrow keys to move to items in a control, such as choices in a menu,
71
70
72
71
<!-- This image is not very clear. Do you need to have the "blank" list box on the left? -->
73
72
73
+
*Figure 2. Using arrow keys to navigate within a control*
74
+
74
75
75
76
76
77
### Selecting the current item
77
78
78
79
Use the space bar to select or deselect the item currently in focus in a control.
79
80
81
+
*Figure 3. Using the space bar to select an item in a list*
82
+
80
83
81
84
82
85
### Run a control
83
86
84
-
Press **Enter** or the return key to run a control.
87
+
Select **Enter** or the return key to run a control.
88
+
89
+
*Figure 4. Selecting Enter to run a control*
85
90
86
91
87
92
88
93
### Leave a control
89
94
90
-
Press **Escape** to exit a control and return to the container.
95
+
Select **Escape** to exit a control and return to the container.
96
+
97
+
*Figure 5. Selecting Escape to leave a control and return to the container*
91
98
92
-
99
+
93
100
94
101
### Go to the first or last item
95
102
96
-
Press**Home** or **End** to go directly to the first or last item in a list, menu, and so on.
103
+
Select**Home** or **End** to go directly to the first or last item in a list, menu, and so on.
97
104
98
-
105
+
*Figure 6. Selecting Home or End to go to the first or last item in a list*
106
+
107
+
99
108
100
109
101
110
## Screen reader navigation
@@ -104,6 +113,8 @@ Users who have vision impairments rely on screen readers to navigate the site UI
104
113
105
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? -->
106
115
116
+
*Figure 7. Screen reader navigation of a SharePoint page*
117
+
107
118
108
119
109
120
## Alt text and transcripts
@@ -119,16 +130,90 @@ To be fully compliant with accessibility standards, include alt text and a compl
119
130
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.
120
131
121
132
<!-- Convert this image into a table, for accessibility. ;) -->
122
-
123
-
124
-
133
+
<!-- -->
134
+
135
+
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.
129
212
130
213
<!-- In the left part of the image, I think the title should be "High Contrast Black". -->
131
214
215
+
*Figure 8. High contrast black and high contrast white settings*
216
+
132
217
0 commit comments