Problem/Motivation
On the maintenance mode settings form (/admin/config/development/maintenance), the description of the "Put site into maintenance mode" checkbox ends with:
Authorized users can log in directly via the user login page.
where the link wraps only the words "user login", leaving " page." outside the anchor. The string lives in core/modules/system/src/Form/SiteMaintenanceModeForm.php (line 89 in 11.x).
Two accessibility problems follow:
- Link purpose (WCAG 2.4.4). Read from a screen reader's links list or rotor, the link text is the partial phrase "user login": the object of the sentence is "user login page", and "page" is stranded outside the link. "User login" on its own is not a meaningful link target the way "user login page" is (see #11). The "permission" link earlier in the same sentence has the same shape. This is cross-platform and independent of any screen reader quirk.
- Run-together announcement on iOS VoiceOver. The description is associated with the checkbox via aria-describedby. When iOS VoiceOver reads the computed description, it drops the whitespace at the link boundary, so the description is announced as "... via the user loginpage." Retesting narrowed this to iOS specifically (see #10): macOS VoiceOver with Safari and Chrome reads the phrase correctly, and desktop Chromium's computed accessible description contains the space. It only reproduces on a real iOS device. An earlier version of this summary called it cross-engine; that was wrong, since on an iPhone every browser is WebKit under the same VoiceOver layer.
Device testing of both candidate wordings (see #12) showed that either the MR's wording or the Interface Text Standards quoted style fixes the iOS announcement, so the announcement is no longer the deciding factor. What remains is the link purpose question.
Automated checkers do not flag either problem (an axe-core scan of the page reports zero WCAG A/AA violations); this is only catchable by manual screen reader review.
Steps to reproduce
Link purpose (any platform):
- Log in as an administrator with a screen reader running.
- Go to /admin/config/development/maintenance.
- Open the links list or rotor: the login link reads "user login" rather than "user login page".
Run-together announcement (iOS device only):
- On an iPhone or iPad with VoiceOver, log in as an administrator and go to the same form.
- Focus the "Put site into maintenance mode" checkbox and listen to the announced description: "user loginpage" is read as one word.
Proposed resolution
Move "page" inside the anchor so the link text is the complete phrase and the phrase is a single text node:
Authorized users can log in directly via the <a href="/user/login">user login page</a>.
This fixes the link purpose and, because the whole phrase sits inside one element, also removes the iOS run-together announcement. It is a one-line string change; existing translations will need updating since the source string changes.
The alternative raised in #4 is the Interface Text Standards quoted style, 'user login' page, with quotes around the link and "page" outside it. On-device testing (#12) confirmed that also fixes the iOS announcement, but the link text remains the partial phrase "user login". The wording decision is with the maintainers.
The "permission" link in the same string could get the same treatment here or in a follow-up.
Remaining tasks
MR !16609 targets main and CI is green. Needs a subsystem maintainer decision on the wording (full phrase inside the link vs the Interface Text Standards quoted style), then review.
User interface changes
The login link on the maintenance mode form gains the word "page"; no other visual change.
API changes
None.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #15 | user-login-page.png | 135.92 KB | mgifford |
Issue fork drupal-3615469
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
ykhalid commentedComment #4
quietone commentedThis change doesn't follow the User Interface Standards for Interface Text which states:
And this pattern is used throughout core. This needs at least subsystem maintainer review before we make this change. And, if we do, the standards may need to be updated and then all instances in core.
Comment #5
quietone commentedOh, and changes are made on main first, then backported.
Comment #6
smustgrave commentedCan you update the MR to main please as mentioned in #5
Comment #7
ykhalid commentedDone. The MR now targets main and the branch is rebased, same two line change as before.
On comment #4, fair point about the interface text standard, so here is some background on why I went this way. I'm blind, and I found this while setting up maintenance mode on my own site with VoiceOver. The checkbox description gets announced with "user loginpage" mashed into one word, because when the accessible description is computed, the link text and the text right after it get joined with no separator. Moving "page" inside the link fixes that, and as a bonus the link text now says where the link actually goes, the user login page, instead of half a phrase.
The quoted style from the standard, 'user login' page, would most likely fix the mashed together announcement too, since the closing quote separates the words. So if the maintainers would rather stay consistent with the standard, I'm completely fine changing the MR to that. I mainly care that screen reader users stop hearing "loginpage". Whichever direction you pick, I'm glad to update the MR, and if the no-quotes version is preferred I can help with a follow up for the standards page. Note for anyone clicking the live preview: it fails because the Tugboat recipe sets COMPOSER_ROOT_VERSION to main-dev, which composer rejects as an invalid version string, so it looks like the preview tooling has not caught up with MRs that target main. Also, if I'm not wrong, this issue might be a Regression. I can’t really recall which version of Drupal I was running but never saw this type of issue before on Drupal.
Comment #8
ykhalid commentedComment #9
ironnuts commentedCould this be a bug in 'VoiceOver'? Is there a more generic way of testing the bug with a screen reader? Or is there a reason why if the mashing of 'loginpage' occurs in VoiceOver it will occur with other screen readers?
Comment #10
ykhalid commentedUpdate: I retested on three setups against a Drupal 11.4.5 site:
macOS VoiceOver, Safari and Chrome: the description reads correctly, "user login page", three words.
Desktop Chromium's computed accessible description, read straight from the accessibility tree: the space is present, "user login page."
iOS VoiceOver, Safari and Chrome: still announces "user loginpage" as one word at the end of the checkbox description.
So I need to narrow what I wrote earlier: the run-together is not in the desktop browsers' computed description, it is specific to how iOS VoiceOver reads the aria-describedby text across the link boundary. iOS VoiceOver is the most used mobile screen reader, so the announcement problem is real for a lot of people administering sites from a phone, but it is narrower than I first described, and I plan to report the iOS side to Apple separately.
The link purpose half of this issue is unchanged by any of that: the link text says "user login" while the destination is the user login page, and that markup is identical on every supported branch. Moving "page" inside the link addresses the link text, and as a side effect gives iOS VoiceOver a single text run with nothing to join wrongly. If the maintainers prefer the quoted style from the interface text standard instead, that would most likely also fix the iOS announcement, since the closing quote separates the runs either way.
Comment #11
ironnuts commentedRe: #10. I
I agree. There are two related issues, I think. Whether the audio is comprehensible. When words are mashed together to make a word, 'loginpage' that makes no sense and does not exist in the dictionary, that is one issue. The other issue is that even if the audio is clear because 'user' and 'login' are both dictionary words and not mashed into one, the phrase 'user login' is not clear and not meaningful so should be changed to 'user login page' because that is comprehensible to the listener.
Comment #12
ykhalid commentedSome real device data that should hopefully help regarding Comment #4.
I run a Drupal 11.4.5 production site, so I applied both candidate wordings to my own maintenance form and tested each with VoiceOver on an actual iPhone.
The MR's wording, with "user login page" fully inside the anchor: the checkbox description reads cleanly, "via the user login page", no run together.
The Interface Text Standards style from #4, "via the 'user login' page" with quotes around the link and "page" outside it: this also reads cleanly on the iPhone. The closing quote sits at the link boundary instead of a space, so nothing gets swallowed. That confirms with a device what I guessed in Comment #7, either wording fixes the announcement problem.
So the announcement is no longer the deciding factor. What remains is exactly the link purpose point oily made in Comment #11, and there the two wordings are not equal. Moving through the page by links alone, the standards style announces the link as just "user login", while the MR wording announces "user login page". Only the second tells you where the link goes when the link text is all you hear, which is how many screen reader users navigate. It reads more complete for sighted users in context too.
On the standard itself, my reading is that the single quote rule is for referring to pages by their title, as in the 'Search settings' example, where 'Search settings' is the page's actual name. "User login page" is a descriptive phrase, not a title, the login page's title is "Log in". So I do not think putting the full phrase inside the anchor conflicts with the standard's intent. I've also been thinking, looking at the standard page, one option is adding an accessibility note to it: when the page reference is itself a link, the whole phrase belongs inside the link. And if consistency wins and the quoted style is preferred here, I can live with that, it fixes the announcement, though it leaves the link purpose half unaddressed.
Comment #13
ykhalid commentedComment #14
mgiffordCleaning up code from:
Authorized users can log in directly via the <a href=":user-login">user login page</a>.Also, this solution seems very straight forward.
Comment #15
mgiffordThis is a simple change. Providing before/after and marking it RTBC.
Comment #16
quietone commentedUpdating the title per Title guidelines.
Removing tag because @mgifford is an Accessibility topic maintainer.