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: README.md
+17-16Lines changed: 17 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -169,10 +169,10 @@ Optionally, you can also show the description to the user on hover by setting `s
169
169
<A11yAnnouncer />
170
170
```
171
171
172
-
If your A11y component have the role="button", you can use three more attributes :
173
-
- activationMsg: When the user will click / activate the "button" the screen reader will read what you wrote in activationMsg
174
-
- desactivationMsg: When set, it turns your button in a togglable button. Which means he now has a on/off state. Screen readers will read the state of the button as well as the desactivation message / activation message that you set when toggling it.
175
-
- pressedDescription: When set, it turns your button in a togglable button. Which means he now has a on/off state. This will be read instead of the usual description when the button is on.
172
+
If your `A11y` component has the `role="button"`, you can use three more props:
173
+
-`activationMsg`: When the user will click/activate the "button" the screen reader will read the passed message
174
+
-`desactivationMsg`: When set, it turns your button in a togglable button. Which means it now has a on/off state. Screen readers will read the state of the button as well as the activation/disactivation messages passsed.
175
+
-`pressedDescription`: When set, it turns your button in a togglable button. Which means it now has a on/off state. This description will replace the one passed via `description` when the toggle is active.
@@ -199,25 +199,26 @@ If your A11y component have the role="button", you can use three more attributes
199
199
<A11yAnnouncer />
200
200
```
201
201
202
-
## the three role of the A11y component
203
-
#### content
204
-
cursor: default
202
+
## The three roles of the `A11y` component
203
+
204
+
#### `content`
205
+
`cursor: default`
205
206
This role is meant to provide information to screen readers or to serve as a step for a user to navigate your site using Tab for instance.
206
207
It's not meant to trigger anything on click or to be activable with the Keyboard.
207
208
Therefore it won't show a pointer cursor on hover.
208
209
209
-
#### button
210
-
cursor: pointer
210
+
#### `button`
211
+
`cursor: pointer`
211
212
Special attributes : activationMsg, desactivationMsg, pressedDescription
212
213
This role is meant to emulate the behaviour of a button or a togglable button.
213
214
It will display a cursor pointer when your cursor is over the linked 3D object.
214
215
It will call a function on click but also on any kind of action that would trigger a focused button ( Enter, Double-Tap .. )
215
216
It is also actionnable by user using a screen reader.
216
217
You can turn it into a button with aria-pressed by providing the following properties desactivationMsg, pressedDescription in addition to the usual description and activationMsg properties.
217
218
218
-
#### link
219
-
cursor: pointer
220
-
Special attributes : href
219
+
#### `link`
220
+
`cursor: pointer`
221
+
`special attributes : href`
221
222
This role is meant to emulate the behaviour of a regular html link.
222
223
It should be used in combination with something that will trigger navigation on click.
223
224
Just like the button one, it is accessible to all kind of user.
@@ -226,11 +227,11 @@ Just like the button one, it is accessible to all kind of user.
226
227
- It will have no effect on the navigation, it's just used as information
227
228
```
228
229
229
-
## Screen reader support
230
+
## Screen Reader Support
230
231
231
232
In order to provide informations to screen reader users and use this package at its full potential, fill the description attribute of all your A11y components and use the appropriate role attribute on each of them.
232
233
233
-
## Additionals features
234
+
## Additionals Features
234
235
235
236
Use a custom tabindex with for your A11y components by providing a number to the tabIndex attribute
236
237
```jsx
@@ -240,11 +241,11 @@ Use a custom tabindex with for your A11y components by providing a number to the
240
241
```
241
242
More about the use of tabIndex on <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">developer.mozilla.org</a>
242
243
243
-
## Next steps
244
+
## Next Steps
244
245
245
246
-[ ] Improve the accessibility for mobile screen readers such as Voice Over and Talk Back
0 commit comments