The Cookies Banner and the Screen Reader – The ongoing conflict to make the Internet accessible to all

Recently I’ve been spending an extraordinary amount of time sat in railway waiting rooms and the usual way to pass this time is no different to anybody else – staring at my phone, browsing Facebook or Twitter, playing some random game, or simply doing a bit of online shopping. The difference is that I use VoiceOver meaning everything takes that little bit longer.

For the many of you that have never heard of it, VoiceOver is one of the inbuilt accessibility functions on Apple products alongside Zoom, Larger Text and Magnifier. All these functions are available through the Accessibility menu in Settings. VoiceOver is a great tool meaning I can still use my iPhone to access everything a sighted person can, although it does take some getting used to. This is because once activated, the way to interact with the screen is very different. For example, instead of tapping an app to open it, you must first tap it to select and then double-tap to activate. Even using the handy swipe-left on an email or SMS to choose to move, mark as read or to delete is different, instead you swipe down to scroll through as it talks you through the various options before finally reaching the desired one.

Like many of these accessibility tools, it has its downsides and this is typically down to the way the app or browser has been built. Often developers and business owners incorrectly believe no extra development is needed and the application will simply interact seamlessly with any accessibility tool like VoiceOver, Android’s TalkBack or the Windows based tools such as Fusions Scientific’s JAWS or Dolphin’s SuperNova. This is not the case. Unless the underlying source code has the necessary additions then the site or app becomes a complete nightmare to use.

Today, I wanted to look for a new pair of boots so went to a well-known bootmaker’s website for some ideas. Sadly I fell at the first hurdle when the site loaded and the usual cookies banner appeared at the bottom. Swiping left and right to navigate through the page I promptly reached the bottom, completely missing the button to “select all”.

This issue of pop ups being invisible to screen readers is more common than you may think. So many times a window appears inviting the visitor to sign up to receive the latest offers and a discount off their first order. With no audible prompt to alert us to the offer, we continue to swipe about none-the-wiser. The problem is that the site doesn’t work until the user either enters their email or clicks the cross to close the window – neither option can be “seen” by the reader. Normally at this point we get frustrated, close the site down and go elsewhere.

Most of these pop ups are small sub-routines or plug ins to the main website and will be invisible to screen readers unless coded correctly. What some organisations fail to realise is that an inaccessible website is, in fact, in contravention of discrimination legislation such as the Disabilities Discrimination Act. As a result, there is an emerging market for third-party accessibility plug ins that will magically transform any website to be fully compliant. These plug ins do work, to a certain degree, but unless the underlying site is built with accessibility in mind such as tab ordering to aid navigation and alt text to describe images the plug in can only go so far.

The same applies to social media – Instagram, Facebook and Twitter all have AI that scans images and provides a description – some of which with very amusing results. Often these descriptions are quite clinical and miss the real emphasis of the image. The worst thing a screen reader user can hear when checking their Instagram feed is an image description starting with “maybe an image of…”. You can add your own alt text (or image descriptions) on all these platforms, some of which are easier than others.

Twitter, for example has a really simple “+ ALT” button in the bottom right-hand corner when you add the photo to your post. By tapping it, you have up to 1,000 characters for your descriptions, more than enough to adequately describe the picture.

Facebook is just as easy, simply tap the three dots in the top right-hand corner and select “add alt text”.

Instagram on the other hand takes a bit more effort – a real shame considering it’s a platform specifically built for sharing holiday snaps and dog pictures. To add alt text here you must first select your photo (or photos), apply the filter, add a caption and then scroll all the way down past the share to Facebook, Twitter and Tumblr options to “Advanced settings”. Then scroll past like and view counts, comments and preferences until you finally reach Accessibility and the option to write alt text – anyone would think they didn’t want you to find it! It is a lot to remember but, believe me, every blind person who finds your photo will definitely thank you for the effort.

Even if you do forget, don’t worry, you can, at the very least add the image description to the caption – don’t forget to add the accessibility hashtag.

I feel I have gone off on a bit of a tangent there, it’s funny how individuals are often more amenable to accessibility than some organisations, despite their legal obligation.

Many organisations will prioritise their development based on return and may believe that making a site accessible is less important as the blind customer-base is very small, but with 40 million blind people worldwide, this really is not the case. Added to this the risk of the financial and reputational damage from a discrimination lawsuit, it just makes good business sense.

So what can be done?

The basic fix is not as complex as first imagined, most people with low vision will forego using a mouse and simply navigate around a screen using the keyboard’s tab and arrow keys. By making sure that pop-ups, banners and any navigation menus can be tabbed into and selected using the keyboard is a massive start and if you are testing on a mobile device – simply try it out with the accessibility function switched on.

There are many accessibility development experts and consultants who are better placed than me, a humble Business Analyst, to advise on the intricacies of accessibility design such as metadata, tab ordering and alt text, but this is at the very least a good place to start.

It is tempting to simply buy a plug in or overlay to fix it but, as I said earlier, this is just a sticking plaster and without actual development the systems simply won’t work as seamlessly as people think.

But it’s not just the developers and consultants who have a role to play in accessibility, it is the responsibility of the Sponsors, Product Owners, Subject Matter Experts and Business Analysts like me to ensure that these requirements are well documented and remain key components of any Minimum Viable Product delivery.

With everyone across the business taking ownership for accessibility then the final user experience is so much more satisfying and, you never know, by becoming more accessible to all there may be added benefits to users who don’t need VoiceOver or similar.

Anyway, what about those boots I was looking for earlier?

I’ll have to see if I fare any better on my laptop this evening. But if there is anybody from the good Doctor reading this then it may be prudent to suggest some extra accessibility testing and I’d be more than happy to offer my services! I’d even be willing to test a pair of boots at the same time!

Thanks as ever.

Chris

If you want to talk to Chris about anything discussed in this article, please feel free to drop him an email at chris@blindmanwithabackpack.uk

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s