As design, development and even search engines embraced the mobile first way of thinking we should probably also start to think about the accessibility from mobile first perspective. WCAG 2.1 update brought some basic and critical additions to the accessibility for mobile (and touch devices in general), so we do have some guidelines that we can start with.
The availability of mobile internet and mobile devices is also adding a lot to user base of mobile users in the world context. More and more people are only using their mobile devices and not even considering desktop computers anymore. So maybe it really is time to think about digital accessibility from mobile first aspect as well.
Where to start with mobile first in terms of accessibility
When we start thinking about the web with mobile first strategy we are immediately thinking about smaller screens and the need for simplification is much higher than before.
And that is a good thing, not only for the visual user interface but also for the non-visual one – like for example screen-readers. Desktop user interfaces can afford more complexity but mobile devices, especially phones, demand much more focus on the user task and how to be more effective.
Add also touch interfacing to it and sometimes also pointer and still also keyboard and you get a variety of details to think about at once.
I would start with thinking about problems in different screen orientations first. When you try to turn old smartphone in landscape and try to use a form you will probably understand why that combination can be difficult to design properly. Please do not argue that old phones are not so common for your customer and try to think about users that have their devices on 200 percent or maybe even 400 percent zoom. Then their modern phone may actually present the visual interface exactly the same as if designer will design for ten years old smartphone. With keyboard expanded (for example in an online form) it is really obvious what kind of problems we must fix. Even before we start to find best solutions for people with cognitive disabilities.
Next step would be and extension of the landscape orientation problem – what if the user needs to use fonts larger than default browsers font? How will all the reflows work then? How can we avoid the impractical horizontal scrolling? That one needs a combination of designer and developer expertise and is again an excellent example of how accessibility needs multiple roles to be effective.
I would then continue with all the touch targets, in the context of the orientation and reflow solutions of course. Thinking about all three problems at the same time is much more effective. If we take them sequentially we may introduce the previously solved problems again. So it needs to be thought about holistically. The same goes also for all sticky elements that may seem so useful on the larger displays. I will not deny that I do not like them there, but on mobile devices they may cause a lot of problems. Especially in scenarios with high zoom and then maybe even custom, bigger, fonts. This may mean that our to top button may cover almost whole screen for some users making the page totally unusable for them. Please think about it when trying to help some groups of users with sticky elements.
Dark mode on phones and other mobile devices is way more common than it is on desktops and that’s why it also need special attention. Not only dark mode itself but also taking into account good contrasts. And not only text but everything. Everything besides logos, although I would personally also try to fix the contrast of the logo if branding would allow it. Because of the branding. Poor contrast on the logo is an exemption from the WCAG but it can do a lot of harm on the branding of the website.
Even if we are talking about mobile devices and we do not immediately remember the modern phones with integrated keyboards we must make sure every action is also possible with mobile keyboards. This may not be obvious at first but it is a sane requirement. People like to use keyboard also on mobile devices and some people can only use mobile devices with keyboard or keyboard like devices. This will also make us think about all the special gestures that can be so natural on mobile. For example slideshows and carousels that can be swiped – they too must work with keyboard. Do not forget that screen-readers on mobile devices prevent gestures to be passed down to JavaScript. So any action that needs a special gesture will not work if user uses a screen-reader. The solution is obvious – we must use buttons that can be used by screen-reader and other users as an alternative. The same goes for special actions that needs us to maybe shake the device. Mobile phones has sensors that made this possible but if we need to use them we must also provide a normal way of doing it with keyboard and press alone.
Mobile and desktop can sometimes overlap
There are also laptops with touch screen, supporting different orientations and even some other sensors. And there are also touch screen monitors for desktop computers that are partially also mobile. Soon users will adopt foldable mobile devices that can maybe be also modular and possibly desktop and mobile at the same time. Current development of hardware possibilities makes things more portable and therefore also mobile. So thinking about mobile first will get even more important. There are also smart watches and even wearable interfaces that can require similar strategies and we can only dream of interfaces of the future. But keeping it simple, sticking to well known patterns, thinking beyond responsive design and more to user customizable design will never go out of fashion.
And don’t forget about whole WCAG
To conclude – these were only some thoughts of mine on mobile first accessibility that can make web sites and web applications more mobile friendly from the start phase on. If you are familiar with WCAG 2.1 you will quickly notice that I actually summarized them here. And that was also my intention. WCAG are a good start and should be used as it. With this mobile first world I suggest we also think about them first when we (re)design our webpages and web applications and they will for sure have a better chances to really be integrated into design, content and development from the start.
And when dealing with mobile first accessibility – do not forget about other parts of the WCAG as well. They still help to make the web more accessible!
