Skip to content

Commit 6cc9ad2

Browse files
authored
Update README.md
1 parent 849b9bf commit 6cc9ad2

File tree

1 file changed

+17
-16
lines changed

1 file changed

+17
-16
lines changed

README.md

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -169,10 +169,10 @@ Optionally, you can also show the description to the user on hover by setting `s
169169
<A11yAnnouncer />
170170
```
171171

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

177177
```jsx
178178
import { A11yAnnouncer, A11y } from "@react-three/a11y"
@@ -199,25 +199,26 @@ If your A11y component have the role="button", you can use three more attributes
199199
<A11yAnnouncer />
200200
```
201201

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`
205206
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.
206207
It's not meant to trigger anything on click or to be activable with the Keyboard.
207208
Therefore it won't show a pointer cursor on hover.
208209

209-
#### button
210-
cursor: pointer
210+
#### `button`
211+
`cursor: pointer`
211212
Special attributes : activationMsg, desactivationMsg, pressedDescription
212213
This role is meant to emulate the behaviour of a button or a togglable button.
213214
It will display a cursor pointer when your cursor is over the linked 3D object.
214215
It will call a function on click but also on any kind of action that would trigger a focused button ( Enter, Double-Tap .. )
215216
It is also actionnable by user using a screen reader.
216217
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.
217218

218-
#### link
219-
cursor: pointer
220-
Special attributes : href
219+
#### `link`
220+
`cursor: pointer`
221+
`special attributes : href`
221222
This role is meant to emulate the behaviour of a regular html link.
222223
It should be used in combination with something that will trigger navigation on click.
223224
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.
226227
- It will have no effect on the navigation, it's just used as information
227228
```
228229

229-
## Screen reader support
230+
## Screen Reader Support
230231

231232
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.
232233

233-
## Additionals features
234+
## Additionals Features
234235

235236
Use a custom tabindex with for your A11y components by providing a number to the tabIndex attribute
236237
```jsx
@@ -240,11 +241,11 @@ Use a custom tabindex with for your A11y components by providing a number to the
240241
```
241242
More about the use of tabIndex on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">developer.mozilla.org</a>
242243

243-
## Next steps
244+
## Next Steps
244245

245246
- [ ] Improve the accessibility for mobile screen readers such as Voice Over and Talk Back
246247
- [ ] Provide a documentation inside the IDE
247248

248-
### Maintainers :
249+
### Author:
249250

250251
- [`twitter 👋 @AlaricBaraou`](https://twitter.com/AlaricBaraou)

0 commit comments

Comments
 (0)