2025 QR Code Login Accessibility Requirements - Best Practices
Introduction
From 28 June 2025, there will be stricter accessibility requirements concerning QR code login implementation for some industries. Read about the regulations and if your business is affected by them.
The main goal is to give people adequate time to properly interact with web content e.g. being able to turn off, adjust or extend a time limit to complete a task (successfully scan the presented QR code).
For a complete overview of the goals and requirements of this regulation, please check this page.
As we offer QR code login as an important part of our service, we have compiled a list of recommendations and best practices on how to implement QR code login with Freja while adhering to the accessibility criteria mentioned above.
The image below is a depiction of how an implementation of QR code login with Freja should look like:
For detailed instructions for each segment of the login screen, please read below.
Requirements and Best Practices
- 1 Screen Reader Compatibility
- 2 Keyboard Operability
- 3 Logical Tab Order
- 4 Extended Time Period to Complete Action
- 5 Clear Visual Indicator for Countdown
- 6 Countdown Extension
- 7 Countdown Expiry Information/Reset
- 8 QR Code Visibility
- 9 Full-screen QR Code Access
- 10 Clear Textual Instructions
- 11 Transaction Status Information
Screen Reader Compatibility
Requirement: All instructions, buttons, links, and images on the login page must be compatible with screen readers and follow accessible naming and labelling practices (follow semantic HTML, and use accessibility aria-label, alt, etc.).
It is recommended to use semantic HTML elements wherever possible to enhance accessibility and structure. In addition, attributes such as aria-label and alt should be used to provide meaningful labels and descriptions for screen readers and assistive technologies.
Keyboard Operability
Requirement: Full keyboard operability must be supported for all essential login functions, including QR code interactions, without requiring mouse or touch input.
Logical Tab Order
Requirement: For easier navigation via Tab, ensure that navigation is logical between between the most essential elements on screen (QR code, success message etc.)
Extended Time Period to Complete Action
Requirement: Provide a time period of at least 5 minutes to allow users with disabilities adequate time to complete the login process.
A new login transaction shall be started every minute. For each started login transaction a new QR code should be generated and displayed every second according to Dynamic QR Code Implementation.
Implemented this way, once the QR code is scanned, the end-user has at least 60 seconds to complete the action.
Clear Visual Indicator for Countdown
Requirement: Display a clear and visible countdown and progress indicator showing the remaining time available to complete the login.
The QR code should have a progress bar and countdown timer indicating the remaining time until the 5 minutes period expires.
The progress bar should be horizontally aligned and positioned below the QR code.
The countdown timer should provide information in the following form (make sure that this information is available for screen readers):
5, 4, 3, 2, 1 minutes remaining
50, 40, 30, 20, 10 seconds remaining
Countdown Extension
Requirement: 30 seconds before the time limit expires, present a visual control (such as a button or link) that allows users to get a new time period to complete the login action.
The extend control (button or link) must be keyboard accessible, meaning it can be activated using both a mouse click and by pressing Enter or Space.
When activated, a new QR code is generated, and the countdown timer resets to 5 minutes.
After the user activates the ‘Extend’ button, focus should programmatically return to the main QR code button, ensuring that screen reader and keyboard users remain in context and can continue the login process without being disoriented.
Countdown Expiry Information/Reset
Requirement: If the time period expires, display information about it and present a control to start the process again.
QR Code Visibility
Requirement: The QR code must remain visible and accessible as much as possible.
The QR code must remain visible even when users zoom in or scroll the page, preventing it from being hidden or partially obscured accidentally. The QR code must remain fully visible even when the screen is zoomed up to 200%.
Full-screen QR Code Access
Requirement: Enable full-screen access to the QR code and provide descriptive alternative text for the QR code image.
Ensure that activating (e.g. clicking on or pressing Enter) the QR code opens it in full-screen mode for better visibility. While in full-screen, doing the same again or pressing Esc should exit full-screen mode.
Provide descriptive alternative text for the QR code image, indicating both its purpose (e.g. ‘Login QR code’) and its interactivity (e.g. ‘Click or press Enter to view in full screen’).
Clear Textual Instructions
Requirement: Provide clear textual instructions on how login works/how to perform the action.
The following text must be displayed clearly and legibly both to people and screen readers: Start the Freja app and scan this QR code with the ‘Scan’ button.
In addition, we recommend adding more information for users in accordions left of the QR code. These should include detailed instructions on how to scan the QR code with the Freja app, and detailed instructions on how to operate a screen reader.
Transaction Status Information
Requirement: Provide clear information of the login status (success, failure etc.).
This information must be displayed clearly and legibly both to people and screen readers.
Examples of important messages: ‘Successful login’, ‘Login declined’, ‘Log in with Freja eID’.
These messages may be conveyed to the screen reader using the area-live tag.