I’ve just done some accessibility audits of native apps and had to fail WCAG Success Criterion 4.1.2 Name Role Value because accordion didn’t have proper semantics. I didn’t bothered checking the Android documentation about technical possibilities of marking expand collapse (like in ARIA), but I just felt it could be done technically.<\/p>\n\n\n\n
When I was later presenting the audit results I got a question from a developer if I have any tips on how to resolve it on native platform. I was honest about it and said that I will check. And this post is kind of a longer answer, hope it will help somebody someday.<\/p>\n\n\n\n
As I am way more experienced with React Native compared to Java And Kotlin I decided to check what are our options there. And I quickly found that React Native supports some accessibility states with accessibilityState attribute (opens in new window)<\/a>;<\/p>\n\n\n\n Perfect, I thought – if React Native supports it for both iOS and Android then it has to be also possible in native Android. So I tried to check some code of native Android parts used in React Native and discovered that they aren’t really using the best option (at least yet). I’ve checked GitHub issues and stumbled upon an open issue that mentions the current downsides and also how to fix it properly (opens in new window)<\/a>;<\/p>\n\n\n\n The “expanded” accessibilityState for Android is currently faked by appending to the content description, rather than implemented correctly.\u00a0<\/p>GitHub issue on current implementation<\/cite><\/blockquote>\n\n\n\n Seems like they had some problems with some components, but I decided to test a proof of concept just to check it for myself. It worked well for my simple example, so I decided to publish it here. Please do test it before you use it in production;<\/p>\n\n\n\n And yes, before you ask – I tried to use a Button but it just didn’t work. Seems like we have to enforce the semantics on a less optimal element. And beware – if you are planning to use this code on web it is missing the proper aria-expanded, so I would not use this for a web version.<\/p>\n\n\n\n Anyway, I was happy with my TalkBack tests, the state was announced fine.<\/p>\n\n\n\n If you want to play, please check the working example on Expo snack (opens in new window)<\/a>.<\/p>\n\n\n\n I didn’t test it by running it in an app. At least not yet, but it seems like the platform really supports expand and collapse states out of the box.<\/p>\n\n\n\n After digging in the documentation I stumbled upon ACTION_EXPAND that is available in AccessibilityAction and was added in API level 21 (opens in new window)<\/a>.<\/p>\n\n\n\nimport * as React from \"react\";\nimport { Text, View, TouchableHighlight } from \"react-native\";\n\nexport default function Accordion(props) {\n console.log(\"props\", props);\n const [isOpen, setIsOpen] = React.useState(props.isActive);\n\n const onPress = () => {\n setIsOpen(!isOpen);\n };\n\n return (\n <View>\n <TouchableHighlight\n accessibilityState={{ expanded: isOpen }}\n accessibilityLabel={props.accTitle}\n accessibilityRole=\"button\"\n onPress={onPress}\n style={{ paddingTop: 10, paddingBottom: 10, paddingLeft: 5 }}\n >\n <View>\n <Text style={{ fontSize: 20 }}>{`${props.accTitle} ${\n isOpen ? \"-\" : \"+\"\n }`}<\/Text>\n <\/View>\n <\/TouchableHighlight>\n {isOpen ? (\n <View style={{ paddingTop: 10, paddingBottom: 10, paddingLeft: 5 }}>\n <Text>{props.content}<\/Text>\n <\/View>\n ) : null}\n <\/View>\n );\n}<\/code><\/pre>\n\n\n\nNative Android solution<\/h2>\n\n\n\n