{"id":2116,"date":"2026-09-27T13:28:20","date_gmt":"2026-09-27T12:28:20","guid":{"rendered":"https:\/\/cerovac.com\/a11y\/?p=2116"},"modified":"2026-09-28T21:45:19","modified_gmt":"2026-09-28T20:45:19","slug":"sorry-for-this-but-please-avoid-lists-in-content-of-mobile-apps","status":"publish","type":"post","link":"https:\/\/cerovac.com\/a11y\/2026\/09\/sorry-for-this-but-please-avoid-lists-in-content-of-mobile-apps\/","title":{"rendered":"Sorry for this – but please avoid lists in content of mobile apps"},"content":{"rendered":"\n

Please don’t kill the messenger! When I audit accessibility of native mobile apps<\/a>, I often stumble on this problem and I decided to write it down.<\/p>\n\n\n\n

Short story – lists like we know and love them in documents and on the web (web documents and apps) do not exist on native mobile apps. Well, at least not on iOS. Sure, if you use web view you can still have them and they work, but on native “native” iOS you will not find a semantic list for content like you are used to see on the web<\/strong>.<\/p>\n\n\n\n

This is most certainly also the reason for frameworks like React Native to lack semantics for lists. Because they can not really fake it…<\/p>\n\n\n\n

But there is List in iOS<\/h2>\n\n\n\n

But, Bogdan, iOS does offer List<\/code> components, you may say.<\/p>\n\n\n\n

Indeed it does, but it is not meant for content in the same way as we use <ul><\/code> and <ol><\/code>. If you have seen iOS Settings – that is the List they are kind of referring to.<\/p>\n\n\n\n

\n

many apps use lists to express an overall information hierarchy and help people navigate it<\/p>\nApple Human Interface Guidelines on lists and tables (opens in new window)<\/a>.<\/cite><\/blockquote>\n\n\n\n

So basically – List is not quite just a list. It is way more and it is designed to be like that on purpose. We may disagree, but it is a fact. We may, in theory, use List to make a old school list, but to my knowledge we can not style it to be seen as a part of the content<\/strong> – we can not make it look and feel like the one on the web.<\/p>\n\n\n\n

What about FlatList and SectionList in React Native?<\/h2>\n\n\n\n

Well, theoretically they seem appropriate. Until you check them with accessibility tools and assistive technology.<\/p>\n\n\n\n

Both FlatList<\/code> and SectionList<\/code> bear a promise of semantics at first sight, but lack it when I tested them with VoiceOver (at the time of writing this post at least).<\/p>\n\n\n\n

Unfortunately the SectionList<\/code> includes also headings that are not announced as headings, so I must strongly advise against using it at the moment.<\/p>\n\n\n\n

Faking a list is dangerous<\/h2>\n\n\n\n

Once again you can quickly argue that we can always use VStack<\/code> and nest HStack<\/code>, or make a loop with output, and just make a list like that looks identical to <ul><\/code> and <ol><\/code>.<\/p>\n\n\n\n

Sure, you can fake it with different technologies, overriding visual content, adding visual bullets and style it as a list, but you can and probably will introduce accessibility issues by doing so. The behavior with assistive technologies will be broken. And you will most probably make an unequal experience for people that can see the screen and people that use a screen reader.<\/p>\n\n\n\n

Info and relationships<\/h2>\n\n\n\n

Faking a list visually can work, but then we need to convey information, structure and relationships in text. I will deliberately not provide any examples here, because this is a typical “it depends” scenario.<\/p>\n\n\n\n

Just some clues, in a list:<\/p>\n\n\n\n