Is this correct? I'm afraid it will read the word 'switch' twice to the user.
<Switch
accessible={true}
accessibilityLabel="Switch button"
accessibilityHint="Double tap to toggle setting"
accessibilityRole="switch"
/>
Many thanks in advance.
A couple notes on accessibility here:
As of 0.60, all interactive React Native components are accessible by default. (accessible=true)
Beware when using the accessible parameter. It will bundle any child elements into one accessible component and a screen reader will not allow users to select individual components when true. (You may need to override the default behavior because of this.)
Particularly with labels, remember to use full punctuation, or you may create unintended and overwhelming run-on sentences.
For UX, your label should read the purpose of the switch in a concise manner. Reading it without context, I have no idea what this toggle would actually do.
To answer your question:
You are correct that this setup would read out "switch button" twice, followed by the hint.
I tested the <Switch> component on an iPad just now with VoiceOver. By default, it is accessible and reads with a role of "button". Giving it a parameter of accessibilityRole='switch' reads with a role of "switch button" and automatically includes the "Double tap to toggle setting." hint.
The following component will read to the user as, "Airplane mode. switch button ... Double tap to toggle setting."
<Switch
accessibilityLabel="Airplane mode."
accessibilityRole="switch"
/>
accessibilityRole communicates the purpose of a component to the user of assistive technology.
For more information please find the below in official documentation
https://reactnative.dev/docs/accessibility#accessibilityrole-android-ios
Related
I'm adding accessibility to my project and I have a basic vuetify data table, just like this example, but I can't find a way to make the checkboxes accessible using the tab key on the keyboard, Is there any way to do this? I know there's something called 'tabIndex' and I've used it before, but I don't know how to use it here. Can you guys help me or guide me on how to do it? Thanks!
It is very difficult to impossible to “add accessibility” at the end of a project.
Getting keyboard navigation and aria attributes right in 3rd party components is nearly impossible. You’d need to apply plenty of hacks or bind deeply into the component’s DOM, which breaks once the library gets updated.
With Vuetify you chose a library that has accessibility on top of their list, but unfortunately the data table with checkboxes cannot be used by keyboard at all, and is lacking plenty of other ARIA attributes. They don’t seem to keep up to that promise for that component.
As with any 3rd party library, if you find an issue, you should try to report a bug upstream and fix it together with their developers.
Correct behaviour of data grids
The expected behaviour of tables in web applications is that of a Data Grid.
A data grid is a composite UI component, so it’s expected that the whole component receives focus only once by means of Tab. Then, you’d navigate with arrow keys inside the table, using Space to select rows or Enter to interact with a cell.
See Keyboard Navigation Inside Components
You can try keyboard navigation in AG-Grid
The pattern to apply in code would be a roving tab index:
Only one child element of the table has tabindex="0", while all others have tabindex="-1". Key bindings then will move the 0 around in the component.
So this is quite some effort to implement.
Simple Alternative
As far as I known, it is acceptable—sometimes even expected—by concerned users, for web applications to behave more like websites, where everything is focussed by means of Tab.
This might be ok if the only possible interaction in your table is to select checkboxes, and if you provide possibilities to Bypass Blocks by offering landmarks or headlines. You should test it with some screen reader users.
For this to work, you would indeed only need to add tabindex="0" to the checkbox.
Then, again, the checkbox does not expose any other accessibility information, it’s an ignorant <div>. It should at least be:
<div role="checkbox" aria-label="Select row 5" aria-checked="false" tabindex="0">
See the Checkbox Pattern
All this might be possible, see Vuetify Accessibility (a11y)
Other Accessibility Criteria
Right now, you mention keyboard navigation. This is a great place to start with, since it is the foundation necessary for most assistive technology.
The Web Content Accessibility Guidelines (WCAG) are the reference to look for if you want to achieve compliance. Level AA (including level A) is the one recommended as a baseline.
But be aware that keyboard navigation is only one of 13 guidelines. Exposing state (checked, selected) to assistive technology, or getting contrasts right are examples for other criteria.
For web applications, it’s a good approach to advance the improvements based on critical paths in the story map, similar to an MVP, meaning that you would advance per process/task and make sure that each step in that process is accessible to the audience you prioritised based on the nature of the application.
Usability testing with people with disabilities is also a very good approach that can be applied in parallel, which centres the initiative more on the actual use cases.
I have an application with drawer navigation that uses buttons to navigate to different screens.
In terms of accessibility, should I use accessibilityRole='button' or accessibilityRole='link' for the buttons.?
React Native AccessibilityRole docs say
link Used when the element should be treated as a link.
For external links accessibilityRole='link' is clearly the best option. But should I use it for internal navigation, too?
Note: I do not use deep links in my application.
Thank you for your help.
The Link component
renders a component that can navigate to a screen on press.
The Button component is a component that performs a certain action if the user presses it. A Button could be considered a Link if its onPress function navigates to a screen, by definition of the Link component. The Link could be styled to look exactly like a Button and vice versa. There would be no difference.
If we refer to general URL linking which includes deep linking, then we notice that the link functionality needs a UI component as well in order to function. This could be Markdown, the Link component or again the Button.
I personally would use accessibilityRole='button' for every UI component that is the actual Button component or functions (and 'looks') like a button in my application (TouchableOpacity, Pressable, ...), since this is what a user whose disability prevents him from noticing needs to know or wants to visualize. This includes the Drawer buttons.
I would use accessibilityRole='link' for text which is styled too look like a link (text with some highlighting) and navigates somewhere (this could be a website as well).
In general, I would keep in mind that the user wants to visualize the component. While a button, that navigates to a screen, is technically a link by definition of its functionality, it is not a 'typical link' when speaking of visual appereance (but again, we could style our button exactly like that...).
What is generally more important is the accessibilityHint which
helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
The 'what will happen if I click' is certainly more important than 'what the component looks like'.
I personally and a lot of customers think the default icons for links with nested items in the Nav component are strange. Hence I want their look and behavior to change from this:
to this:
(In the screenshots the size is also different, but that's just from the context's I took them. I just want to change the icons).
The latter is btw also used by Microsoft OWA (Outlook Online), which also uses Fluent UI React. The only thing that I could come up with (but which doesn't work really well) was to hide the default chevron using styles and modifying the rendered link onRenderLink to display the other chevrons.
I'm aware of this question, but changing the icons via style is no option and I guess no longer a preferred way by fluent ui.
Is there any better or official way I'm missing?
I've taken a look at the code and unfortunately the icon is baked into the Nav component. Your best option would be to style the icon similar to what is being done in this codepen.
I'm a brand new junior dev working on a react-native app for the first time. I have been searching for quite a while for a way to add a link to the text of a react-native checkbox's value text. If anyone has a link to documentation that might explain what I want to do, I would be super appreciative since I haven't found anything helpful yet. I saw that you can not add html elements into native after I tried a number of variations of anchors. I've tried adding Link to variations and attempted to add an onPress function to the label. I'm grasping at straws here... is this even possible to do?
To be clear, I want a user to be able to press the words "Terms of Service" and have it link to the page that has the terms
{this.props.isUser &&
<CheckBox
containerStyle={styles.checkbox}
onChange={(event, checked) => this.updateAttr('terms', checked)}
value={this.props.program.terms}
label="I have read and understand the Terms of Service"
labelLines={2}
/>
}
Instead of adding the "I accept...." as a label to checkbox, put the Check box without any label and the text 'I have read' as separate Text elements inside a view element and align them accordingly. Then inside the view, put the terms and conditions part inside a touchable and use React Native Linking to link the touchable to open a URL when touched.
https://facebook.github.io/react-native/docs/linking.html
React-Native Open Url in default web browser
Is there a component can toggle the gyroscope? I want to make a button to enable or disable the usage of the gyroscope. I've read the official documentation but find nothing about this.
I do not want to close it in WebVR mode. I want to set a button toggle gyroscope. When I close mobile sensor, I can use finger slide screen to change the perspective.
There was a pull request to A-Frame core to enable this feature, and I believe they determined to not add it. Instead it is best practice to enable this feature using a custom component.
Here is the pull request including commentary:
https://github.com/aframevr/aframe/pull/2585
Here is the code that accomplishes what you are looking for, you can use it to make a custom component in your project:
https://github.com/aframevr/aframe/pull/2585/files