0

Hey guys, I am running into an accessibility problem and I was wondering if anyone here has had similar struggles and could help me resolve my issue.   Some context: I am working on a form which, due to requirements from the business, is built using various snippets on a page. So technically the form is one long page, with several snippets that have their visibility turned on/off based on the user input (for example by clicking the "next step" button). So, when this button gets clicked it seems to the user as though it's a new page, whilst technically it's just a new section. However, because of this, the keyboard focus often stays on the "next step" button at the bottom of the page. For accessibility reasons I want the focus to shift back to the top of the page. When the first element of the section is an interactive element this is easily done by calling a set-focus action through a Nanoflow. The problem arises when the section starts with a piece of text, something which can't be focussed on without some hacking. Often the keyboard focus is then set below the first piece of text, making it hard to understand the logic and flow of the page for visually impaired users.   Things I have tried: - Using aria-live & aria-relevant to have a screen-reader spell out this text. Sometimes this works, other times it does not work completely. - Using an HTML element widget to force a tabindex -1 on the text section, making it focusable by keyboards through a JS action. Problem here is that it gets a bit messy and this is not the preferred solution by the business.   Does anyone know of a good way in which I can ensure accessibility for our visually impaired users whilst not relying on "hacked" solutions as much as possible?   Please let me know if I need to clarify something some more. Thanks in advance!

asked 2025-07-22

1 answers