Axess Lab: Recent Episodes
None
June 28, 2025. That’s the deadline for all banking services and e-commerce in the EU to be fully compliant with the European Accessibility Act (EAA). Here’s a straight-to-the-point summary of what you need to know!
BackgroundThe EU combines two of their general goals in the European Accessibility Act. First, the EU wants people with disabilities to be included in, and get full access to society. Second, the EU want companies competing on the inner european market to have clear and fair rules, equal for all participants, no matter which European country you are based in. That’s the background for creating the new EAA regulation.
In a nutshell, the purpose of the EAA is for products and services to be accessible for consumers:
- Without vision
- With limited vision
- Without perception of color
- Without hearing
- With limited hearing
- Without vocal capability
- With limited manipulation or strength
- With limited reach
- With risk of photosensitive seizures
- With limited cognition
Who is affected?Six types of consumer services are affected, as well as eight types of consumer products.
Any company selling or providing these are affected. For services, all ICT (information and communication technologies) used by consumers to access the services are covered – for example self-checkout kiosks used to pay for groceries in a physical store.
It’s important to note that it is the service or product that is targeted, not the company as a whole. That means, if an e-commerce website has a page for consumers, and another page for business-to-business then only the page for consumers needs to comply with the new regulation.
Affected consumer services1. Electronic communication services like network subscriptions, phone calls, e-mail, SMS, chat, video conferences. 2. Media services like streaming services or program guides in TV-boxes. 3. Transport services like websites, apps or electronic ticket kiosks needed to access the transportation service. 4. Banking services, including websites, apps and queueing systems or kiosks in a physical bank office. 5. E-books 6. E-commerce including any website or app where a purchase can be made of a product or service.
Affected consumer products1. Computers, including laptops, smartphones, tablets etc. 2. Payment terminals including payment card readers. 3. Kiosks for cash withdrawal 4. Self service terminals, if the terminal is used for ticket sales, check-in etcetera for services covered in “Affected consumer services”. 5. Interactive information terminals, but only if they are used for the services listed above, and are interactive. For example interactive screens used to present time tables at the train station are affected, but if the screen just presents the departure times (not interactive) then it’s not covered. 6. Products used to access communication services, like routers, modems and smartphones. 7. Products used to access media services, like digital TV boxes or smart-TVs. 8. Reading tablets used to read e-books.
What are the penalties?The biggest risk is that you might no longer be allowed to sell your services in the EU. Loosing the EU as a market is likely the biggest consequence for most companies.
However, the more likely consequence for most is sanctions – the size depending on each contry. In many countries sanctions will be in the range $1000 – $1 000 000, and with multiple or recurring compliance issues there can be many sanctions.
In some countries law makers have added prison sentences of up to 18 months to the penalty scale. Others, like Latvia, have added “confiscation or destruction of property” as a potential consequence.
What do you need to do?You need to conform with relevant standards and guidelines. There are also some documentation requirements. Exact requirements and interpretations can differ between each contry, but the EAA sets a very clear baseline for all countries in the EU. This regulation is intended to be be consistently implemented – so the variance will likely be very small.
Design for allAccessibility is about making something that works for people with diverse abilities. So the standards to follow are all focused on making sure your users with or without disabilities can use your products and services. The best way to accomplish this is probably to work together with users with disabilities and making sure in usability tests that they can actually use your stuff! If actual people with disabilities have a good user experience – you will comply with most formal legislation on the fly.
However, the Directive that’s the foundation for the EAA, points towards standards that specify formal, testable criteria for compliance.
EN 301 549The EU standard EN 301 549 covers the formal requirements for products and services. The section about requirements for web and apps is mainly a copy-paste of the Web Content Accessibility Guidelines.
There are a few WCAG criteria that don’t apply in EU – for instance you don’t have to caption live streamed videos even though it’s a WCAG requirement – and some that go beyond WCAG – like having to support dark mode. But apart from a few exceptions like those, it’s WCAG that applies.
WCAG – for web contentThe Web Content Accessibility Guidelines list 50+ criteria for accessible web content. It’s divided into 3 levels; A, AA and AAA. The law requires conforming with level A and AA requirements only.
As an example, the first WCAG criteria 1.1.1 states that all non-text content, like images, must have a text-alternative for users who cannot see the image. If your website has only text content – you already pass this criteria. Congratulations!
WCAG is versioned, and as of writing this article, the latest version is 2.2. Some legal documents still point towards version 2.1, but you may as well start working with version 2.2, as conforming with version 2.2 also means you conform with version 2.1.
AppsFor iOS and Android apps, you need to conform with relevant parts of the WCAG. Out of the current 56 criteria in WCAG 2.2, only 44 apply to apps. There are a few more general requirements for ICT in the EN 301 549 that also apply to apps (read chapters 4 and 5). But as a rule of thumb – if you make sure you meet the success criteria in the WCAG (interpreted in an “app” way), you will come a long way!
The WCAG beginners’ guide on appt.org is a good place to start understanding how to conform with WCAG in iOS and Android apps.
DocumentsDocuments (commonly PDFs), that are a part of the product or services covered by the EAA, also have to be accessible if they are intended to be read by your users as a part of the service. This includes “terms and conditions” and similar documents, but also interactive form documents like loan application forms in PDF.
Any documentation of the product or service needs to be available in an accessible digital format like an accessible webpage (HTML), or an accessible PDF.
Hardware, payment terminals, kiosks and physical devicesThe requirements for hardware differ depending on the type of service the hardware provides. On top of that – there are often other laws governing physical products that overlap the EAA or add to the complexity.
Check out our indepth article on that theme:
European accessibility act (EAA): kiosks, touch screens and physical devices
SummaryMaking sure your software and hardware works well for users with disabilities is important, and now also legally required in the EU. You may want to get expert help evaluating if your current websites, apps and devices are compliant! Luckily there are companies like ours that can help you with that.
The standards are great tools, but remember – the purpose of these laws are to make sure your stuff works well for everyone. A fully compliant piece of ICT can still technically be completely useless, so try to involve users in your efforts to test your product or service – preferably users with disabilities!
Get some help along the wayIf you need help sorting out what your organization should do, in what order, and how to do it – reach out to us here at Axess Lab. We are specialised in digital accessibility, and stand ready to help your team! Here are a few of the things we can help you with when you are ready to start the journey:
Accessibility review
Usability testing with people with disabilities
Accessibility statement – let us create it for you!
Accessibility training, workshops and talks
Or just drop us a message on hello@axesslab.com and we’ll take it from there.
In June 2025, the European Accessibility Act will be enforced. Most of the buzz is around websites and apps, but many physical devices will also be covered by the new legislation. Let’s look at that more closely and create some buzz around the accessibility of touch screens and other physical devices!
Issues I face personallyI’ll begin with some personal experiences. I use a wheelchair, and face issues with reaching devices all the time. Here are some photos I’ve taken when grocery shopping!
By the way, if you’re just looking for what the actual law says, skip ahead to What are the actual requirements?
This is a classic struggle: a touch screen for choosing what grocery I have on the scale.
Way too high, and even if it would have been lower, there’s a table blocking my wheelchair from getting close.
Another common issue: payment terminals on gas stations. Here is a newly built charging pole for an electric vehicle. It’s obvious that they haven’t considered accessibility here at all. Can you spot the issues?
Well, the raised ground and two metal poles prevent me and other wheelchair users from getting to the actual charging post at all. And even if we learned how to magically hover above the ground and get there, the interactive touch screen is way too high to reach.
This has been a problem for a long time with regular petrol pumps, but in those cases you often have the alternative to ask the people at the cashier to activate the pump and then pay inside the store. This is often not an option with electric car chargers, making this a more pressing problem.
Sidenote: many cars are adapted so that people without use of their legs, or with other motor impairments, can drive them independently. Check out this video where Kathryn Granger showcases how she drives and gets her wheelchair in the car.
Moving on: a lot of new “smart delivery boxes”, like the one below, cause problems for me. The first challenge is reaching the touch screen. Then the lottery starts. Is my package in one of the around 50% boxes I can reach? Or is it in one of the top boxes I can’t reach?
Self-service check-in terminals at airports are often also difficult for me. Feels like a lottery every time! Will I be able to use them or have to look around for help.
So a lot of the issues that me and other consumers with motor impairments face are about reaching stuff.
Issues for blind usersAnother group that is heavily affected by inaccessible touch screens and other physical devices are blind folks.
Here, most major exclusion comes down to the fact that you’re required to use a touch screen that does not have screen reader support. For instance, you often need to input numbers on the smart post box touch screen display.
“Oh, but supporting screen readers must cost a ton of money to support”, you may think. Well, there are often creative solutions if you have accessibility in mind from the start of projects. Let’s look at a few..
Nice solutions are already out thereHere in Sweden, our state funded postal service “Postnord” also has smart post boxes. But opening those boxes is achieved by using an app on your own device instead of a touch screen.
The app supports the users own screen reader, and voilá: no problem opening the boxes!
There’s still the issue of reaching the box for me and others with motor impairments, and I heard from a blind colleague that he often struggles with finding which door has opened. He listens for the click of the door and starts waving his arms close to the device to find it. A bit of subtle sound design would do the trick!
The Postnord app shows that good solutions are already out there. Let’s look at a few more positive examples!
In Norway, they let you choose if you only can reach the middle boxes (“Luker på midten”), or all of them (“Alle luker”), when choosing delivery methods. Very nice!
When activating your tickets in public transportation in Stockholm, here a ferry, the devices are often available at different heights. Great for me! Great for kids who want to blip their parent’s ticket! Great for anyone!
Another example of terminals at different heights.
On a “Max Burgers” restaurant, I can press a button at the bottom corner of the touch screen to have the top part of the interface move down to a more reachable height. Creative thinking!
Look closely at this ATM:
Notice the headphone jack? It makes it possible for the user to get spoken instructions, and not have sensitive bank details be shouted out through a speaker.
Finally, a few years back we made a short article including a video of an accessible queue system that has a built in screen reader.
So there are great solutions out there already, to get inspired by!
What does the EU law actually require?I’ll now summarize some key points in the European Accessibility Act relating to the topic of kiosks, touchscreens and similar devices. This is mainly taken from the following sections of the actual Directive 2019/882:
- Chapter 1, Article 2 for which products are covered
- Annex 1 for the actual accessibility requirements
- Annex 2 for examples and possible solutions to fulfill the requirements
Feel free to open the Directive and dig in yourself, but below are some highlights I’ve extracted. We’ve also got a general article on the European Accessibility Act that you can check out.
What products are coveredSome parts straight from the directive:
The following self-service terminals:
- payment terminals
- the following self-service terminals dedicated to the provision of services covered by this Directive:
- automated teller machines (ATM:s)
- ticketing machines
- check-in machines
- interactive self-service terminals providing information, excluding terminals installed as integrated parts of vehicles, aircrafts, ships or rolling stock
So in a nutshell: self-service payment terminals and basically any self-service terminal related to e-commerce or banking (services covered by the directive).
When do we need to comply?The European Accessibility Act covers products that are “placed on the market after 28 June 2025”. So you will not have to trash all your current products! You’re allowed to keep them for another 20 years, or until they need to be replaced. So focus on the new products you’re shipping, not the ones already out there.
Here’s the exact phrasing in the Directive:
Given the cost and long life-cycle of self-service terminals, it is appropriate to provide that, when such terminals are used in the provision of services, they may continue to be used until the end of their economic life, as long as they are not replaced during that period, but not for longer than 20 years.
What are the actual requirements?In a nutshell, the devices covered needs to be accessible by for consumers:
- Without vision
- With limited vision
- Without perception of color
- Without hearing
- With limited hearing
- Without vocal capability
- With limited manipulation or strength
- With limited reach
- With risk of photosensitive seizures
- With limited cognition
The specific requirements are laid out in Annex 1 of the Directive. Here are some highlights I’ve extracted.
the product shall avoid modes of operation requiring extensive reach and great strength
What’s extensive reach and great strength? Well that’s detailed in the EN 301 549 standard, chapter 8 “Hardware”, which includes requirements like having interactive elements at a height between 38-122 cm:
when the product uses visual elements it shall provide for flexible magnification, brightness and contrast
So you should aim to have zooming features and similar controls in the interfaces. If you don’t, you have to instead meet quite rigid requirement of text sizes. For instance, if the normal viewing distance is 50 cm from the screen, the minimum allowed character height is 6.1 mm. Check out the specifics of text sizes in chapter 5.1.4 “Functionality closed to text enlargement”.
when the product provides for communication, including interpersonal communication, operation, information, control and orientation, it shall do so via more than one sensory channel.
Fancy language..! But in plain words: you can’t only show something visually on the screen, there needs to be another “sensory channel”, for instance sound, to give that information. Basically: support a screen reader or similar.
when the product uses colour to convey information, indicate an action, require a response or identify elements, it shall provide an alternative to colour
So users with color vision deficiencies also can understand the information you’re providing.
Here are some requirements that are specific to self-service terminals:
shall give the possibility to extend the time given
shall allow for the use of personal headsets
when the product uses audio or audible signals, it shall be compatible with assistive devices and technologies available at Union level, including hearing technologies such as hearing aids, telecoils, cochlear implants and assistive listening devices
So those were some of the general requirements laid out in the Directive, with a bit of details from the EN 301 549 standard. There are many more, and a fair bit to wrap your head around. Most touch screens, kiosks and other physical devices are far from compliant, so there’s likely a big effort needed to make this sector more accessible in the years ahead.
Want a helping hand?If you want a detailed checklist/requirement document, we’ve created one! But it’s taken us a lot of time and effort, more than we’re giving away for free here. But feel free to contact us if you’re interested in buying that.
Also: if you want help from accessibility experts like me to analyze and recommend solutions for your specific product or service – you’ll find the contact details in the footer below.
Thanks for putting in the effort to make these devices more accessible for me and many others with disabilities!
You may think that QR codes are great for securing your login, or letting users read more online about a product marketed in a news paper ad. But there is a high risk you are creating barriers for people with disabilities, unless you use QR codes correctly. This article is your ultimate guide to accessible QR codes!
What is a QR code?QR code stands for Quick Response code and you have probably seen the square pattern being used in “read more” parts of paper ads like this:
Or in online bank login screens like this:
And there are many other uses for them:
- Scanning a QR code on a new dishwasher to open up an installation guide video.
- QR codes in books to help people with dyslexia with audio/video versions of the text as in this “Blipsay” example by Susanna Cederquist. (PDF)
- Restaurants linking to a digital menu or the restaurants app from a physical menu.
- Physical mail containing links where a QR code saves you from writing the URL manually into a browser.
- Smart TV interactions like login and payments using QR codes on screen.
Advantages of QR codesA QR code can bridge the gap between the physical world and the digital world, and it can save a lot of time and hassle for many users.
Most modern phones have QR-code scanning functionality built in to their camera apps so users don’t even have to download an app.
General problems with QR codesInstructions and helpQR-codes are still fairly new and far from everyone knows what they are and how to use them!
And even if users know how to scan a QR code with their camera app, that doesn’t always work! For two way authentication QR codes, even if they look exactly like other QR codes – they should not be scanned with the normal scanning app, or the built in camera scanner. Users might need to use a specific identification app to scan that QR-code. And it’s not alway obvious for users why, and when to use which. So instructions are vital!
The solution is to write instructions of the steps that the user needs to complete in order to login with a QR-code.
Here is a good example of instructions for a two factor identification app in Sweden:
- Open the BankID app on your phone or tablet.
- Press “scan QR-code” in the app.
- Point your phone or tablet at the QR-code on the screen.
- Follow instructions in the app.
You can also give some extra instructions for screen reader and other assistive technologies users, which we’ll go through later.
When you use QR-codes in printed media or in other devices such as TV-apps or gaming consoles it helps to put the link (URL) that the QR code represents in clear text alongside with the code itself. This not only helps the user to type it manually if needed, but also hints of what the QR-code will do – take them to another page.
Time limitQR-codes used in login scenarios often have time limits for security reasons. But having short time limits means some users will not have time to read the instructions or start the app and scan the QR-code before timing out. These time limits are often set based on the assumption that the user is a strong reader, with perfect eyesight. But following written instructions when using assistive technologies like a screen reader can take a lot more time than for other users. Same goes for users with reading impairments.
According to the WCAG (Web Content Accessibility Guidelines) users need to be able to extend any time limits in digital interfaces at least 10 times. The user also needs to be notified at least 20 seconds before the time limit ends. So if you, like many others, use a 30 second time limit you need to notify the user after 10 seconds that “the time limit is about to be reached”. That is, if you want to conform to the WCAG, which may be required by law.
If getting interrupted once every 10 seconds with a warning prompt sounds annoying – you should try to increase the default time limit to be as long as possible.
We recommend having at least 3-5 minutes as a time limit. You still need to give users the ability to extend the timer and we recommend notifying the user when there is 30 seconds left. Let the users extend in a simple way such as pressing a button or by just pressing space on the keyboard. When you notify the user, it is important to use simple language and short copy in the button such as:
“30 seconds left for login. Extend.”
Alternative ways to sign inIf you have limited motor skills or have a mobile device mounted on a wheelchair it could be hard or even impossible to pick up the phone and use the camera to scan the QR code.
We made this video with Jessica, who highlights how QR codes can be problematic for users with motor impairments, and showing her “techy workaround”. It’s in Swedish but with English subtitles.
To manage these issues, you should offer alternative ways to sign in. For instance using username and password with 2 factor authentication. There are such solutions that does not require scanning a QR-code. Here in Sweden we have a software called “BankID on file” for this purpose.
Problems for screen reader usersAs a person with a severe visual impairment I often use a screen reader to convey text and other information on my screen. With QR codes being very much a visual thing, many accessibility issues come from relying too much on users being able to see what’s on the screen.
Position of QR-codesNot all users will know where on the screen the QR code is located.
You can help us by making the QR-code centered on screen as that’s where most users will likely attempt to find it first.
Obscured or cut-off QR-codesNot all users will know if the full QR-code is visible in their browser window or not. Here we see a QR code being cut of when I had accidentally made my browser window smaller. Tiny browser windows are quite common amongst our friends who use screen readers, because most of them don’t need the browser window to be a specific size to access the content of the page.
Cut off QR codes can also be caused by being zoomed in using browser zoom settings, but more on that under “Problems for magnification”
A common (but bad) solution to this is adding help text with shortcut commands to increase window size. One big drawback when implementing this solution is that you need to have system specific shortcut commands, for all operating systems and browsers. There are also usability and accessibility problems with this approach:
- Long instructions of this type adds additional cognitive load in a scenario that is already stressful, especially if time limits are in place.
- Users who need to increase the window size might not be able to use a keyboard as instructed due to motor impairments (try pressing “ctrl” and “+” at the same time with only one arm)
This can be solved better by making it able to press the QR code (which of course includes being possible to activate using space or enter keys). Then use the Fullscreen API in the browser to trigger fullscreen mode. Check out my CodePen demo or the demo with code to see how. That way the whole QR code will be visible, no matter what window size the browser was opened in.
QR code outside of viewImagine this: The user has scrolled down on the page and the QR code is no longer displayed. But they are not aware of this issue due to visual impairments.
This actually happens a lot while reading list instructions or navigating the QR code page, the screen reader might scroll down and the QR code is then outside of view or cut off.
How to solve it? Make the QR code sticky so it can’t get out of view! It is OK that some content becomes placed behind the QR code when scrolling, if the QR code is the main actionable content on the page as in my examples. However, if possible you should make the instructions at least partly visible when scrolling. Again you can test my CodePen demo and try to zoom in and scroll.
There’s no need to make the QR code huge, so set a maximum width and height if it helps ensure that instructions remain visible. zoom in on my CodePen demo to see how it can stay small even if you use ctrl or cmd + to zoom in the page.
Instructions and helpThis is one of those situations where it makes sense to give additional instructions for how to scan the QR code to users who use a screen reader. But they can be hidden visually since non-screenreader users do not need these.
Example of hidden screen reader instructions:* Scan with your camera about 30 centimeters, or an arms length distance from the screen. * Make sure your screen shade or screen curtain is off + JAWS: JAWS-KEY + SPACEBAR + F11 + NVDA: NVDA + CONTROL + ESCAPE + VoiceOver: VO + SHIFT + F11 * Ensure your browser window is large enough or maximized. Press the QR code button or maximize here (button to activate). * Ensure your screen/monitor is turned on.
This conveys in simple language how to manage the phone and the screen while scanning a QR code. It gives a guide for turning off the screen curtain (dark screen) on different variants of screen readers. It also hints at maximizing the browser window and preferably gives a quick button that does it for them. And it states, perhaps obvious but easy to forget, to turn the screen on. Remember that many screen reader users do not need the screen to be on for them to browse the internet.
It helps screen reader users if you put these specific instructions in its own heading. This makes it easier to find and navigate to the instructions.
Problems for magnificationCut-off QR codesUsers with reduced vision sometimes browser websites using browsers built in zoom of 200% or more. QR codes easily get cut off when being zoomed in, as seen in this image where 250% zoom is used:
The solution again is to make the QR code sticky or clickable – or both. Here’s a 43 second demo of that in action on a Swedish insurance and banking site:
This also works great in my CodePen QR code demo.
Mouse pointer obstructing QR-codeUsers might have a larger mouse pointer or not being aware of the position of the mouse pointer. This might result in obstructed QR code loosing its functionality.
You can solve this by hiding the pointer after three seconds if on top of the QR-code, like the YouTube player does when watching a video. Just set the ‘cursor’ css to ‘none’ after 3 seconds, and make sure to change it back when moving the mouse again. Did I mention that I have a CodePen demo? Well I do, and you can test to hover the QR code and hold still to see what I mean.
Great resources* Länsförsäkringar bank have implemented a lot of the feedback and ideas from my talk. You can test it by selecting option “Mobilt BankID”. * CodePen demo by Daniel Göransson * Recording of my Swedish talk about QR-codes from 2022 at T12t Meetup. English subtitles are available. I’ve embedded the talk here below.
In summary* Craft great instructions on how to use QR codes * Make the QR codes centered * Make the QR codes sticky * Allow users to open the QR code in full screen * Write extra instructions for screen reader users * Hide mouse cursor after 3 seconds * Allow for longer timout limits (3-5 minutes)
Thanks for making the web better!I’m happy you read this far! It means you care about making the web a better place for all users. Spread the knowledge and keep being awesome!
I got a chance to try out the Apple Vision Pro for an hour. Having a vision impairment myself, I obviously dove straight into the accessibility settings to find out if this new, hyped technology would work for me. Let’s go through how it went.
I was worriedI usually trust Apple devices will work great for me. For instance, when the Apple Watch first came out, I preordered it without hesitating at all. And sure enough, it came loaded with VoiceOver, zoom and other features, so it worked great for me.
But with the Apple Vision Pro, I worried. Not that it wouldn’t include the accessibility features I’m used to, but because of the foundation of the technology: it records eye-movements and makes the image clear where you’re looking.
For me, that could be a problem. I have peripheral vision. So I don’t see at all in the middle of my field of vision. Here’s a simulation of that:
So I “aim my eyes” to the side of what I want to see, to see it as clearly as possible. If the Apple Vision Pro makes the peripheral stuff too fuzzy, then I’d probably not be able to use it efficiently at all.
Onboarding – great first impressionYou can trust Apple to include accessibility right out of the box. No surprises there. On the first screen you get to, there’s a prompt to tripple click the digital crown to activate accessibility features. I immediately got a short tutorial to the main VoiceOver gestures:
- Pinch left thumb and index finger to click
- Right thumb and index finger to step forward
- Right thumb and middle finger to move back
With this, I could independently read the first few screens with instructions. I was most interested in activating zoom, but figured that I’d do that once I got into the main interface.
The eye setup – unsuccessful but not a blockerThe main step of the set up process consisted of having me look at a dot moving around clockwise in front of me. Since I had VoiceOver turned on, the experience was a bit different than the “regular” one.
In the regular onboarding, it shows six dots at once and asks the user look and tap for each dot.
It does this in three rounds, with lighter and lighter conditions.
For me, with VoiceOver turned on, it only showed one dot at a time and asked me to just look at it, not tap it. After a second or so it moved to the next position.
Here’s a low-quality video of me doing the eye setup, with my colleague holding up an iPhone so you might be able to see what’s going on. Also, kids running around in the background, a great illustration of situational cognitive load..!
Round 1 was on a dark background, but then it got brighter and brighter. It felt like I could do the first round quite well, but the third, brightest round was almost impossible for me. I also didn’t get any audio feedback when the dot moved, which would have helped. Something like: “Dot position at 12 o’clock. Dot moved to position at 2 o’clock.”
And sure enough, I got an error message “Eye setup unsuccessful”. Tried it again, where my colleague tried to help by telling me when and where the dots moved to, but with the same result.
Luckily, there was a “Skip eye setup”, so I pressed that. And found that it worked fairly well for me without the calibration.
It made me a bit disappointed though, and I felt unsure how much this would affect me moving forward.
Accessibility settings to the rescueGetting into the main screen felt nice. I had gotten the hang of the basic VoiceOver gestures and could quite easily navigate to Settings and Accessibility. This experience was very consistent to iOS and MacOS.
I found settings for Zoom, activated full screen zooming instead of window zooming, which is how I have it set up on my other devices.
To activate and adjust zooming, I press the physical button on the top left of the device and rotated the digital crown.
I found that the maximum default zoom level was too zoomed out. So I needed to activate VoiceOver and try to increase the zoom level. Which was a slider, and I didn’t instinctively understand how to increase that slider. So had to go online on a smartphone and read up on that. Finally I figured out some way to do it. It wasn’t intuitive to me, though.
So with the maximum zoom set to 10x instead of 5x, I could much more easily use the interface.
But it was still difficult to read a lot of the text in the settings screen. So I increased the text sizes (dynamic type). Then I found the increase contrast feature which was a game changer for me. Making things more “dark mode” helped a lot.
With these settings I could start the dinousaur experience that you probably heard of, use zoom in that to get a great experience!
OverallMy feelings after having used the Apple Vision Pro for about an hour were optimistic.
Even though the eye setup failed, it didn’t seem to affect my experience much.
I think after getting used to the gestures and interface it would become quite a nice tool for me. Especially once I get the hang of scaling “screens” in the interface larger or smaller, to immerse myself in them, that could work really well for me.
Like for anyone, it’s going to require getting used to the new gestures and functionality. Doing this with accessibility features turned on adds an extra layer to this learning process.
It all reminded me of when I first got my iPhone 3GS, the first iPhone with VoiceOver on it. There were a lot of gestures and fundamentals to learn and it took some time. But we all know how that turned out, I use my phone everyday with gestures that now feels like second nature. I’m optimistic that I one day will feel the same about Apple Vision Pro!
I hate to see how many marketing emails that go to waste and frankly, suck! It really has irritated me throughout the years – so much it became my contribution to Axe-con 2024 and this article.
SummaryThis is a rant about poor email communication that relies too much on embedded images being shown (they rarely are). Bad examples of newsletters and other types of email are shown (some are truly horrible) along with good examples to learn from. This is not an in-depth how to guide on coding accessible email but I will share resources to get you started.
Introduction to my rantSo across my many email accounts I get roughly 300 emails every week. Important stuff such as invoices and meeting plans, updates from the kids’ school and doctor appointments. Also, I get calendar reminders, updates regarding services, and countless marketing newsletters.
Too many marketing emails rely on using images. But guess what, I never load images in my Gmail accounts! Images are deactivated by default and other email services and it takes a manual click to load them. When I travel abroad I have limited data plan I need to be mindful of the mobile data usage, even though I have unlimited data plan in Sweden.
So, with a well structured email, a great subject and well described content you have perhaps half a second to get my interest so that I will open your email. Given these challenges and the resources required to communicate or sell through email, I just really hate to see companies mess up by relying too much on using images in their emails. You have customers who actually want to read your content – make sure they can by making it accessible for all of them.
Do you have the time to listen to me whine? Let’s go 🙂
TransparencyI myself or colleagues at Axess Lab has worked or are actively working with with several of the clients listed. Often we work with departments that do not directly work with marketing and they often do not see improving newsletters as a priority. I hope this is a wake-up call for our clients and everyone else reading the article – that you need to get your stuff together! We or other professionals are out there to help.
Reason to not load imagesThere are many reasons to not load images, these are some of my reasons.
Bandwidth restrictionsYou might have a slow internet connection, it might be to low speed in your home or while travelling on a train. Going hiking often poses threats to your ability to load before the request times out.
Limited data planThere are many reasons not to have unlimited data plans. They might not even be available in your country or as I often find myself while travelling abroad they are capped to a certain gigabyte. It might be very expensive and even paying by megabyte (MB) usage. So really it could be for some to choose between food or buying mobile data.
PrivacyWhen you load external images, you give away data about reading the email. Putting that in correlation with clicks on links and previous data shared it adds into the vast knowledge bank put in the hands of multinational companies working for profit.
Examples of emailsEmails that suckICA bonus update newsletterMy main interest with this newsletter is to know how many bonus points I have from the grocery stores ICA. Or more specifically how much I get back in money which I can deduct when shopping.
Almost everything in the image above is text, except for how much bonus I get… Aaahhh!
They also have some inspirational content to help you with shopping and what to eat. ALT-text is showing same text as heading.
Let’s head to the loaded images!
And here comes the loaded image, visually showing bonus amount of 50kr.
The duplicated text is visually showing image about the shopping app. The text in the image is also different, so I suspect they did have a plan here…
Kry newsletterQuite good layout with different backgrounds, headings and non-image call to action buttons.
ALT-text says 115×115, probably perfect for the one editor. Not very helpful for the thousands of recipients.
The footer of the email has contrast issues and cryptic ALT-texts.
115×115 ALT-text shows an illustration of a foot.
Also, missing information about the sender. The two logos that had no ALT-texts was beneath social icons.
TallinkSilja Club One newsletterALT-texts are different from the headings, I think… But they are cut-off, only showing half.
Zoomed in on ALT-text example only showing half.
In darkmode the light green button background make the changed white text unreadable.
Two ALT-texts provided:
- Aktiviteter ombord
- FriendSHIP
Images displayed are not matching ALT-text description.
FKP Scorpio newsletterReally poor contrast values on text and all images says “image” in their ALT-texts. Contrast of 3:2:1 on very light grey text on white background.
Zoomed in on alt text saying “image”.
Loaded images, showing lineup poster with a lot of band names.
ALT-text “image” on loaded image is a concert poster.
Bengans friday newsletterA
ALT-text on image in email from music store says “Friday releases”.
On mobile the email is zoomed out to desktop version. Unreadable.
First part of Friday releases visual image loaded. Consisting of a lot of band names and albums.
Last part of Friday releases with a lot of band names and editorial pitches.
Haupt Lakrits newsletterExample of desktop email with no huge issues.
Example of same email in mobile, unreadable zoomed out desktop version.
Quickpix4u newsletterBroken attributes “jobname” and image code that should have been something else.
Coop membership surveyIn mobile the button line-breaks and overlaps.
BokaDirekt newsletterThanks to Amin Amini for finding this example!
Using CSS to make extra link large and covering surrounding text.
Even the text next to link looks depressed as a sad smiley.
Kronans apotek newsletterA lot of ALT-texts written which is on a positive note, but there’s no space in between and strange fonts makes it very hard to read.
Horror sectionKronans apotekWelcome as member at Kronans Apotek!So I became a member when I tested the site and made a purchase. Nice with a hello and welcome… But… It was very empty, which I thought was a huge waste of opportunity to make me buy more stuff.
It was suspiciously empty with unloaded images. I needed to ease my suspicious mind…
And behold, there was a lot of information about their offering, services, apps and much more. Everything is image-based with image-map links. It almost made me cry!
Campaign newsletter at Kronans Apotek Campaign newsletter missing ALT-text for main image.
Main image with a lot of offers.
Main image zoomed out with about 20 call to actions in the image.
MyFujifilmEmpty email with only a footer.
Let’s look at it with loaded images, surprisingly it has a lot of call to actions.
Ubisoft newsletterCheck out the big news from Ubisoft Forward! Unreadable alt-texts and no headings. 2:8:1 Contrast ratio on blue ALT-text on dark background.
ALT-text has really generic naming that probably makes sense to the editor.
Unsubscribe link. Link not underlined, it looks like text. Grinch not happy!
Zoomed in on one of many ALT-texts having a generic name saying 212TTC_Right_Image. There’s probably some content behind the puzzle of ALT-texts?
Images loaded showing text in images with key information about the offer.
More text in images showcasing different games.
SF Anytime latest movie releasesThis is from a Swedish online movie streaming provider.
The ALT-texts are really hard to read, dark blue on black background.
ALT texts beneath heading “Finally you can rent:”.
ALT-texts:
- Barbie.
- Book.
- Art.
- Advertisement.
- Face.
- Firearm. Movie posters not conveyed in text.
Random words for ALT-texts were different movie posters. Example “Face” was for the movie Darkland 2.
Kila möbler Christmas offeringsEmpty email from Kila möbler. Zoomed out full empty email with only a footer. My ALT-senses are tingling again!
About 60 CTA’s in the email, not displayed for potential customers.
Stadium OutletEmail with product categories and text that says the terms of the offering and a “Shop”. The title is the best, “You haven’t missed…” Well in fact… I have missed all of it…
Yet another text in image marketing letter.
Debaser concert newsConcert information heading “Dont miss this” followed by two empty images.
Don’t miss this, images loaded shows date, location and band names.
To be fair they have improved their email marketing letters since.
Eventim localised newsletterEventim newsletter in Swedish with event suggestions.
Eventim suggestions zoomed in, generic ALT-texts are written in German. “Unsere Empfehlung 1” “Unsere Empfehlung 2” and so on.
Eventim suggestions loaded images, showing poster, location, date, band name, and call to action to buy a ticket.
Random Christmas newsletterChristmas email sent out. Two column layout. Black text on dark blue to black background with stars, and a moon overlayed by reindeers flying a sleigh. Unreadable.
Thanks to Homer Gaines for sharing this horrific example 🙂
Better examplesThere’s a soothing light in the tunnel and it is not just a freight train coming your way. There are better examples out there. And by better, I do not mean perfect. There are parts in the same email that are good and some not so good. The examples I will describe are simply just better in providing content that does depend on images.
Impecta fröhandelNewsletter with ALT-texts, normal text and CSS call to action buttons.
Loaded images, looks a lot prettier but it is mostly added visual goodies.
Ebay newsletterEbay newsletter showing good structure with headings and text.
Ebay could improve adding product suggestion image ALT-texts.
Runkeeper yearly updateRunKeeper has ALT-texts and text content. Text content instructs to click on 2023 image to load the data, which has corresponding ALT.
RunKeeper images loaded, visuals could be added as text instead of text in image.
Eventim newsletterBetter example from Eventim where image content is conveyed in text.
Eventim email with loaded images.
Jula weekly newsletterEmail from Jula, a Swedish retailer.
Using Headings and text and layout with spacing.
Easy to see titles and pricing without images.
Email from Jula with loaded images. The image content is conveyed in text.
Product brand name is missing, could be added.
Concert news from Live NationConcert update from Live Nation missing ALT-texts but the headings are sufficient.
Unsubscribe linksIn all my newsletters I’ve seen a pattern. Make it as damn hard as possible, or even impossible to unsubscribe. Do you know what happens to these emails? They get marked as SPAM and that surely decreases your visibility even more. Getting flagged as SPAM, unwanted or fraudulent email is not good… Sad but true!
BingolottoHorrible example and this is not by changing colors due to dark mode. This is just one of the worst examples I could find, it has 1:2:1 contrast ratio.
FoursquareJust linking the word “Click here” and with a really really poor 2:5:1 contrast ratio Foursquare deserves the SPAM folder. It is extra evil making the font very very small.
FKP ScorpioIf the contrast was good enough the content would actually be good. Headings and paragraph text. 3:2:1 contrast ratio on text
Unsubscribe link, good clear wording but bad contrast. 2:4:1 contrast ratio on orange link. Just fix the contrasts, pretty please…
BahnhofUnsubscribe link in a different language and only the word “here” is linked.
DemandoUnsubscribe link in a different language. Most people in Sweden speak English, but this is also a strange context switch.
NintendoUnsubscribe link with the word “Click here”. So you need to read the full paragraph to know what they refer to.
ReadlyUnsubscribe link in text content only shown as bolded text with the word decline.
Thanks to Martin Falk Johansson for this example 🙂
EbayeBay example with underlined, good contrast unsubscribe link
AmazonAmazon email example on desktop, yellow button background with black text. Good contrast.
Amazon email example on mobile dark mode, yellow button background with white text. Unreadable.
ResourcesIf you want to know more about how to make email more accessible and consistent across platforms, then these resources will help you along!
A good resource from Harvard University about who to compose your emails Creating Accessible Emails.
In 2019 i went to SmashingConf in Freiburg. I met Rémi Parmentier and listened to his interesting talk Think Like An Email Geek about how to combat a well designed email in different email systems, such as Outlook or Gmail. When I was looking for the link to this talk I also saw that he returned to Freiburg in 2022 expanding the subject with issues in Dark mode in the talk Shining the Light on HTML Email Dark Modes. Really interesting and he finished off with announcing the great resource Can I email which is based on the well known Can I use. There’s also an in-depth article Essential Tips and Tricks for Coding HTML Emails. Hats off for Rémi for sharing!
You can always register and watch my talk at Axe-con 2024 on demand.
ConclusionJust by testing your shit in at least a few email clients regularly you can avoid loosing potential customers not buying your products or services.
There are really small fixes in which you can be visible to all your subscribers and…
…tadaaa! You also make it more accessible for people who can’t see loaded images.
Avoid the SPAM folder and make an A11y Grinch happy!
Here are seven great free tools that help you measure color contrasts and create beautiful, accessible color schemes that fulfill the contrast requirements in the Web Content Accessibility Guidelines (WCAG). 1. Contrast Checker (Monsido) Contrast Checker (monsido.com) Perfect if you just want a quick and easy contrast measurement without having to download anything. Measure contrast […]
Interacting with our fan base is a fulfilling part of my job. Yesterday I got a request to write an article on why the font size on this site sucks. So let’s not waste any time and get straight to it! The humble request Nice font size 143.75% on that page. Maybe next they’ll have […]
Can you keep a secret? Here’s why you should keep testing your product with users, but not say that’s what you’re doing. Basically – how to test with users without anyone knowing! There has been some discussion in the UX community the last few years on what to call the activity that’s arguably the most […]
In the EU, the laws on digital accessibility for the public sector all point to a standard called EN 301 549. It’s been updated, and here in Europe a lot of people who work with web sites and apps are asking what this means for them. Most news are probably not relevant to you If […]
Accessibility is exciting, user-centered and should make you jump out of bed each workday morning with a proud grin on your face. Accessibility legislation is boring, text-centered and makes you snooze your alarm at least four times before getting up. But let’s see how to use the boring laws to get to do exciting, high […]
I’m a dad since a few weeks back. This means I spend my days trying to keep a tiny, helpless lump of life alive. Scary stuff! I’ve also realised that this dad-thing comes with a ton of accessibility needs. First a short future message to my kid… Hi kiddo! If you find this post in […]
The world has changed due to Covid-19. A lot of people are in quarantine, voluntary or involuntary. Shops and restaurants are closed or have new rules to restrict crowding. One way to support local restaurants is to buy prepared meals in takeaway apps. But, how are these takeaway apps in terms of accessibility? Our 5 […]
There’s a new kid in design town: neumorphism. It’s predicted to become a big design trend ahead. Let’s look at what neumorphism is, the potential accessibility pitfalls and how to use it responsibly. Neu…what now? Neumorphism is a fancy word for a user interface design trend. It derives its name from skeumorphism – a way […]
At Axess Lab we strive to make the world more accessible for people with disabilities. But what’s the point of an accessible world if we can’t survive in it? 2019 was the year where 16 year old Greta Thunberg helped make the environment the number one issue on peoples mind. The media primarily focused on […]
A screen reader is an assistive technology, primarily used by people with vision impairments. It converts text, buttons, images and other screen elements into speech or braille. Let’s go through what a screen reader is, how it works and see blind people in action! Screen reader basics I use a screen reader on my mobile […]
There is no better way to understand the importance of accessibility and inclusive design than learning from actual users with disabilities. Here’s a collection of our favorite Youtube videos where people showcase how they use assistive technologies like screen readers, eye tracking, zoom and switches. We’ll start off with former BMX star Stephen Murray showing […]
Stephen Hawking used something called a switch to communicate, author books and surf the web. Just like Stephen, millions of people around the world with motor impairments use switches to access technology. Sadly, the awareness and knowledge about this assistive technology is generally low. So it’s time to switch the spotlight on switch users! Short […]
Web teams usually spend a tremendous amount of time, money and energy on designing lovely, beautiful start pages. Let’s apply the psychological concept known as the peak-end rule to question that and introduce a flipped approach to web design. Why we care so much about start pages If your parents are like most parents, you’ve […]
To be honest, I don’t really have time to write this article. I’ve got loads of other things I should be doing. But it needs to be written. Now. So I’ve popped up my laptop on the bus and am angrily typing away. Sounds so serious…what’s going on? So Apple just released a new accessibility […]
It’s well known in the accessibility community that the road to an inclusive digital world is through awareness. And what better way to raise awareness than wearing an awesome, head-turning accessibility t-shirt? Before we begin, you might be wondering how much we get paid to write this post. It’s zero. Zip. Nada. Just hopefully the […]
Axess Lab is a team of IT professionals who want to make life easier for everybody. And it seems to be working! As you may know, we do everything from development projects for everyone to specific digital efforts to help people with a variety of mental and physical disabilities, and we strive to show the […]
There are lots of stereotypes about the elderly and tech or the world wide web. Many portray the over-sixty crowd as being unable to cope with modern tech. But is this stereotype correct? That’s what Dr. Nikola Djordjevic, from the site medalerthelp.org set out to learn. His team compiled all of the information into a […]
Hi Instagram! We’re thrilled to see you’re improving your accessibility by making it possible to write alt-texts for images. As a token of appreciation, we’ve made you part of our Axessified-series! This means you get some top-notch, tailored inclusive design tips to help you take the next step on your accessibility journey! First off – […]
Hey Accessibility Scotland! I like you guys even though you invented golf… Here are the slides from my talk: Have you tried to dab some coconut oil on your spine (PowerPoint on Dropbox) Enjoy! And while you’re here, you might as well check out our other articles on accessibility.
A lot of the accessibility initiatives today are focused on web sites and apps. But there’s of course more to the digital world than that. In this article we’ll look at a case where a team has done great work to make their digital comic accessible to people with visual impairments. Let’s start with a […]
It’s pride week here in Stockholm, Sweden! So we thought we’d celebrate by sharing a few tips on how to create a LGBTQ-inclusive digital environment. Here at Axess Lab we specialise in accessibility and inclusive design – which is about making sure as many people as possible feel great about using your products and services. […]
Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
What are skip links? Skip links are a common accessibility feature on websites. They are simply shortcuts to important parts of the webpage that makes it easier and quicker for some users – especially users with disabilities – to find their way around.
Skip links are usually hidden visually by default and appear when users navigate to them using the tab key on their keyboard. “Who would ever use a keyboard to navigate?” you may ask yourself. Well, lots of people actually! For instance many users with motor or sight impairments will rely on keyboard navigation. But more on the use cases under the next heading.
If you want to try out a skip link using your laptop, go to Starbuck’s website and press the tab key after you have entered the site.
Here’s an attempt at illustrating what happens.
So when you “tab into” the site the skip link appears, and you can activate it with the Enter key to skip to where it points. On Starbuck’s site you can (in theory) skip to either the main navigation, content or footer.
Skip links work well on desktop. Here’s a short video where I’m using them on a few sites with the VoiceOver screen reader on Mac. It might be a bit difficult to follow along if you’re unused to hearing a screen reader in action, and to make things worse mine switches between Swedish and English. But the important thing to notice is how the focus indicator jumps into the content area after I press the skip links:
Skip links are great when they work, and this type of functionality is recommended in the Web Content Accessibility Guidelines (WCAG):
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
– WCAG 2.1
Who are skip links for? Skip links are mainly used by:
- Users with motor impairments who navigate with a keyboard instead of a mouse.
- Users with motor impairments who navigate with switches.
- Users with severe visual impairments who use screen readers on desktop or mobile devices.
- Users with low vision who use screen magnification software in combination with keyboard navigation.
Instead of having to spend time tabbing through the logotype, links in the header, menu, etcetera, on each page you visit, skip links provide a handy shortcut to jump straight to what you’re after.
They’re also quite popular among users. In the latest Web AIM screen reader user survey – which almost 1800 people responded to – over 30% said they always or often use skip links when they are present.
We’ve seen in user tests that skip links are even more used by novice screen reader users. Tech savvy users tend to use shortcuts on their keyboard or special gestures to skip between different parts of the page. But less “techy” users are not always aware of those features, and will instead often use the skip link to find their way to the main content.
Update april 2020 The problems we describe below have been fixed by many (all?) of the browsers/assistive tech/operating systems. So skip links seem to work as intended in most devices right now.
The problem We became aware of a major issue with skip links after seeing it in two user tests a few months apart, where two different screen reader users struggled with the same type of problem on two different websites.
One of our clients was kind enough to let us share a video clip from their user test in this article. So thanks, Council of the European Union, for that ❤️. The user in the test has also given us her consent to spread this video.
So take a look at this clip (sorry for the blurry start), then we’ll tear apart exactly what’s happening.
So in the clip we see a screen reader user trying to use the skip link with her iPhone. This is what happens:
- She activates the skip link.
- The page scrolls down visually – which she and other blind user will not be helped by.
- She swipes right to go to the next object – you can think of it like pressing the tab key on a desktop.
- The screen reader puts focus on the cookie message, not the main content.
- She naturally gets quite confused and annoyed.
We started investigating the problem and found the same issue on every single skip link we tested. You can try it yourself if you know how to use the screen reader on your smartphone at these sites:
- www.starbucks.com
- www.slack.com
- www.gov.uk
Or just check out this video where we try to use skip links with VoiceOver on an iPhone on the sites above. You’ll see the sites scrolling, but as soon as we swipe the screen to go to the next item, we’re back at the top of the page.
Skip links are almost always constructed in the same way. They are simply anchor links pointing to a part of the page.
Something like this:
```
//Menu and other stuff users might want to skip..
```
For some reason, these simple anchor links don’t work as intended on iOS. We tried in Safari, Firefox and Chrome – all have the same issue.
To be clear, this problem exist on mobile when the user navigates by swiping to go from one object to the next. There is another way of navigating (explore by touch – moving your finger over objects on the screen), and then it works fine on iOS.
Affects Android as well, but in a different way Regular skip links don’t work with VoiceOver on iOS as shown above. Sadly they don’t work with Android’s screen reader TalkBack either, but this time it’s not the anchor link that’s causing the problems.
In Talkback, skip links don’t even show up when the screen reader focuses on them. Here’s a video where you’ll hear the skip link being announced, but it’s not showing on the screen like in iOS. We try to activate the link when it’s announced, but nothing happens.
This is caused by a bug in Android that stops the focus event from being triggered. It’s probably easiest to understand if you look at this video comparing what happens when tabbing on desktop, using VoiceOver on iOS and using TalkBack on Android. You’ll see that when tabbing on desktop or using an iOS screen reader, the focused links turn orange. On Android, you never see the orange focus style.
For some reason, Android doesn’t trigger the CSS focus event with TalkBack. This is the reason skip links never show up visually on Android, since they are programmed to show up when they receive focus. This is a bug reported to Google, so hopefully they’ll fix it soon.
But shouldn’t it still be possible to use the link, even though it’s visually hidden? Sadly, that’s not possible. If you click on a hidden link with TalkBack, the link will not be activated. So, we guess that Google will need to fix this focus issue before skip links will work at all on Android.
Interesting enough, some Android phones have a version of TalkBack called VoiceAssistant. With VoiceAssistant, skip links work exactly as intended!
What can you do? Solving this bug is mostly up to browser and screen reader vendors. So we hope you’re listening Google, Apple, Mozilla and the rest.
But there are some things you as a site owner can do while we wait for a more robust solution.
We created and played around with this codepen where you can test skip links that reference different types of elements like headings, <main> ,<div>, and more. We found cases where including the attribute tabindex="-1" on the element you reference would solve the issue, but unfortunately only for iOS users. Here’s how:
```
//Menu and other stuff users might want to skip ...
```
So simply adding tabindex="-1" to the element you’re skip link points to is the best solution we can offer at the moment. It won’t make your skip links work for all your screen reader users, but at least you’ll have catered the needs of the majority of them.
See update 3 below for problems with this solution and other, better ways to solve this
Update 1 – a better solution! A lot of clever people read our articles, and it turns out that there’s an even better solution. Paul J. Adam (@pauljadam) uses javascript to move focus to the first heading. Like this with jQuery:
```
$('#skip-link').click(function(e) { e.preventDefault(); $(':header:first').attr('tabindex', '-1').focus(); });
```
It works splendidly! Check it out on Paul’s website.
Update 2 – Vanilla javascript solution Ben Buchanan made a regular “vanilla” javascript solution from Paul Adam’s solution above, since many people don’t use jQuery. And he was also kind enough to share it with us and the world, so here it is:
Codepen – Working skip links using vanilla JS
Mike Foskett also made a really nice Codepen:
Mike Foskett’s skip links codepen
Update 3 – A comment from gov.uk Anika Henke e-mailed us some great input:
I’m a developer working in the accessibility team at GDS (the people behind gov.uk).
I was made aware of your article about skip links and that it mentions gov.uk.
We investigated the very same issue on gov.uk last year and I created a bug report for the iOS issue as it’s clearly a browser or screen reader bug.
Your suggested solution introduces worse barriers, though. See our Pull Request about removing tabindex from main to understand why. To quote:
“When clicking anywhere in the page focus will return back to the top. Consider a user interacting with an input field who clicks away from it to remove the focus style. Should they then hit tab they will be taken to the top of the page.”
The JavaScript solutions are a bit better because they focus on a smaller element. But it is too specific. It is dependent on certain elements or IDs being present.
Since ages I’ve been using a better fix in my personal projects which fixes all in-pages links, not just skip links, and removes the tabindex the moment the focus moves away.
Thanks for that great input Anika!