When auditing an iOS app against EN 301-549 I stumbled upon multiple screens that should have a semantic heading, but were actually just showing bold text that really looked like heading. I immediately reacted that this is a obvious WCAG success criterion 1.3.1 fail (opens in new window).
As I am not a native mobile developer I decided to investigate what we can actually do about it. And in this post I will briefly describe my findings.
iOS and Android both support headings
It didn’t take me long to find solutions for headings on both platforms. iOS seems to have better support as developers can even define heading levels, just like in HTML – from level 1 to level 6. And iOS also supports just a heading, with no level.
Official iOS documentation on headings (opens in new window). I actually made a simple Swift based app and tested it with VoiceOver and it worked like a charm.
On the Android platform we can still make a semantic heading but we don’t have the possibility for different levels. Official Android documentation on headings (opens in new window) doesn’t mention levels as far as I was able to tell. It’s only possible to set it to true or false.
I was pleasantly surprised about iOS heading levels and I hope designers, developers and content providers will use them as they really make the app navigation with VoiceOver much better and more “web-like”.
React Native supports heading as well
React Native supports headings but no levels. Not a surprise as it has to unify the APIs of both iOS and Android and if Android is not supporting levels then also React Native can not support them.
It is a bit strange though that developers must use a role of “header” and not “heading”. I had to double check that and it is correct.
Official React Native documentation offers accessibilityRole=”header” (opens in new window) as a solution for headings. Personally I find this a bit strange, coming from web development, as header in HTML represents the header region and not headings. But I guess we can still live with it, just have to remember it.
So – no excuses – use headings!
Just a final reminder – headings are possible also on mobile applications. They make page navigation with screen-reader much more efficient and people are most probably used of having them from their web experiences.
