{"id":977,"date":"2022-07-23T19:40:00","date_gmt":"2022-07-23T18:40:00","guid":{"rendered":"https:\/\/cerovac.com\/a11y\/?p=977"},"modified":"2022-07-19T13:25:40","modified_gmt":"2022-07-19T12:25:40","slug":"native-mobile-app-support-for-headings","status":"publish","type":"post","link":"https:\/\/cerovac.com\/a11y\/2022\/07\/native-mobile-app-support-for-headings\/","title":{"rendered":"Native mobile app support for headings"},"content":{"rendered":"\n

When auditing an iOS app against EN 301-549<\/a> 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)<\/a>. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

iOS and Android both support headings<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Official iOS documentation on headings (opens in new window)<\/a>. I actually made a simple Swift based app and tested it with VoiceOver and it worked like a charm.<\/p>\n\n\n\n

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)<\/a> doesn’t mention levels as far as I was able to tell. It’s only possible to set it to true or false.<\/p>\n\n\n\n

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”.<\/p>\n\n\n\n

React Native supports heading as well<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Official React Native documentation offers accessibilityRole=”header” (opens in new window)<\/a> 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.<\/p>\n\n\n\n

So – no excuses – use headings!<\/h2>\n\n\n\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

Mobile native applications are often with no headings. Sometimes even have visual headings but are missing on the semantics. Screen-reader users can and also like to navigate via headings, so we should be responsible and use them. They are supported on both iOS and Android.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[503],"tags":[508,91,506,507,90,239,242,25,166,29,509],"class_list":["post-977","post","type-post","status-publish","format-standard","hentry","category-native-mobile-apps-accessibility","tag-1-3-1","tag-android","tag-headings-on-mobile","tag-headings-on-native-mobile-apps","tag-ios","tag-native-mobile-application","tag-react-native","tag-screen-reader","tag-screen-reader-2","tag-wcag","tag-wcag-1-3-1"],"_links":{"self":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/comments?post=977"}],"version-history":[{"count":0,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/977\/revisions"}],"wp:attachment":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/media?parent=977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/categories?post=977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/tags?post=977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}