Accessible Login – WCAG AA Login & Registration
| 开发者 | anblik |
|---|---|
| 更新时间 | 2026年9月12日 11:42 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Accessible Login transforms the default WordPress login, lost-password, password-reset and registration screens into a fully accessible, mobile-friendly experience that conforms to WCAG 2.2 Level AA out of the box — without sacrificing any of the visual customization power that site owners expect from a modern login plugin.
Live demo: Try the accessible login demo »
Why this plugin?
This plugin approaches login customization with accessibility as the starting point. Its defaults, palettes and customization options are designed around WCAG 2.2 AA requirements — colour combinations are checked for contrast, focus indicators are preserved, and target sizes are kept within recommended bounds — so that customizing the login screen does not come at the expense of accessibility.
Key features
- 10 hand-tuned, WCAG 2.2 AA compliant color palettes — pick one during the 1-minute setup wizard and apply it instantly. Or design your own; the plugin never forces a palette on you.
- Custom backend login URL with a real block (optional — off by default) — replace
/wp-login.phpwith a slug you choose (e.g./my-secret-door). With blocking on, the old URL returns a generic 404 for every logged-out request — all HTTP methods including POST and all actions — so brute-force bots cannot even submit credentials there. Logged-out visits to/wp-adminalso return 404 instead of a redirect that would reveal your hidden URL. - Accessible branded login emails — the WordPress password-reset, welcome and password-changed emails become a small accessible HTML template: your logo with alt text, readable 16 px text, and the action link as a large high-contrast button plus a copy-paste address. Every colour is contrast-checked before sending; anything failing falls back to audited colours. On WooCommerce stores, one click applies the same accessible palette to the WooCommerce email settings.
- Save-time contrast enforcement — the same WCAG pairs the live checker shows are now enforced when you press Save: a colour change that would break a required pair is rejected with a precise explanation (which pair, measured ratio, required ratio) and the previous colours are kept. The plugin can no longer be saved into an inaccessible state.
- Logo upload + customization — your logo, your dimensions, your alt text, your link target (defaults to your homepage, never wordpress.org).
- Five layout styles — centered, minimal, split-left, split-right, full background image.
- Background customization — solid color, image upload, overlay opacity, or one of four CSS-only patterns (dots, grid, waves).
- Typography control — pick from system, Inter, Poppins, classic sans, serif or monospace; minimum 16 px enforced.
- Show / hide password toggle — satisfies WCAG 2.2 SC 3.3.8 Accessible Authentication.
- Caps-lock warning — announces to screen readers via aria-live.
- 3 px focus ring with 2 px offset — meets the new WCAG 2.2 SC 2.4.11/2.4.13 focus requirements.
- 44 × 44 default target size (24 × 24 enforced minimum) — meets WCAG 2.2 SC 2.5.8.
- Reflows cleanly at 320 px — no horizontal scrolling on the smallest phones.
- prefers-reduced-motion respected — animations disabled for users who request it.
- Windows High Contrast / forced-colors mode supported.
- Settings export / import — JSON-based, useful for migrating between sites.
- Structured layout controls — fine-tune corner radius, form width and padding, input height, button weight, focus-indicator width and a card-shadow toggle. Every value is bounded to a WCAG-safe range; the plugin does not accept arbitrary CSS, JavaScript or PHP.
- Real-time contrast checker — every important colour pair is checked live against WCAG (4.5:1 text, 7:1 AAA, 3:1 for borders and focus) as you pick colours, shown with a symbol and words, never colour alone.
- Cognitive accessibility boosters (WCAG 2.2 SC 3.3.7 / 3.3.8) — an optional "You are signed in" hold screen with an adjustable 1–5 second delay and a live region, plus a contextual "Need help signing in?" help drawer with your own guidance text.
- Accessible password strength meter — strength shown in words (Weak / Fair / Good / Strong) with friendly suggestions, never by colour alone.
- Accessibility health check — a dashboard widget scores your login screen out of 100, checking every contrast pair plus text size, target size, field height and focus-ring width.
- Front-end login block & shortcode — place the accessible form anywhere with
[accessible_login]or the "Accessible Login" block, carrying the same accessible styling and a signed-in state with logout. - WooCommerce styling bridge (optional) — applies the same accessible colours, focus states and target sizes to the WooCommerce "My Account" login and registration forms.
- Reset to defaults with a single click.
- Semantic versioning + DB schema versioning — safe automatic migrations on upgrade.
- Translation-ready — all strings wrapped in
__()with theananyoo-accessible-logintext domain.
- JAWS, NVDA, VoiceOver (macOS & iOS), TalkBack (Android)
- Keyboard-only navigation
- Color Contrast Analyzer
- Browser zoom up to 400 %
- Deque AXE
- Google Lighthouse
- wave.webaim.org
- Plugin home & documentation
- Live demo
- More accessibility plugins from Ananyoo — further WordPress accessibility plugins are in active development.
- Support & contact
安装:
- Upload the
ananyoo-accessible-loginfolder to the/wp-content/plugins/directory, or install via Plugins → Add New → Upload Plugin. - Activate the plugin through the Plugins menu in WordPress.
- You will see a welcome notice. Click Start the 1-minute setup to pick one of the 10 accessible palettes (or skip to use the default).
- Visit Accessible Login in the admin sidebar to fine-tune colors, logo, layout, custom URL and more.
屏幕截图:
![The accessible login form embedded anywhere with the [accessible_login] shortcode or block.](https://cdn.jsdelivr.net/wp/ananyoo-accessible-login/assets/screenshot-9.png)
常见问题:
Does this work with my existing theme?
Yes. The plugin only customizes the WordPress login / register / lost-password / reset screens (the screens that live at wp-login.php), not your public theme.
Will it break if I disable the plugin?
No. Deactivating restores the default WordPress login screen exactly as it was. Your settings are preserved so you can reactivate later. Whether deleting the plugin removes your stored settings depends on your preference — see "What happens to my settings when I delete the plugin?" below.
What happens to my settings when I delete the plugin?
You decide. On the Advanced tab there is a section called "When the plugin is deleted" with two choices:
- Keep all data (recommended, default) — settings remain in the database after deletion, so re-installing the plugin restores everything exactly as it was. Best for accidental deletes, updates that route through "delete + re-install", or temporary troubleshooting.
- Remove all data (clean uninstall) — all plugin settings, palette choice, logo reference and any plugin-created rows are permanently deleted on uninstall. Choose this when you are removing the plugin for good or want a clean database.
Can I really change the login URL?
Yes. On the Login URL & Security tab, set a custom slug (e.g. my-secret-door). With Block direct access on, /wp-login.php returns a generic 404 for every logged-out request — every HTTP method (including POST, so bots cannot submit credentials there) and every action. Logged-out visits to /wp-admin also return 404 rather than redirecting, because that redirect would hand your hidden login URL to anyone who typed /wp-admin. admin-ajax.php and admin-post.php keep working for the logged-out requests themes and plugins legitimately make, logged-in users are never blocked, and with blocking off both URLs simply work side by side (mirror mode). Every link WordPress generates — lost-password, reset emails, logout, post passwords, privacy confirmations — already points at your custom slug, so nothing legitimate ever needs the old URL.
Does it work with CAPTCHA plugins (reCAPTCHA, Turnstile, hCaptcha)?
Yes. The plugin loads the genuine WordPress login page — it never replaces it — and enhances the standard form through WordPress's own login hooks. So third-party CAPTCHA plugins that use those same hooks render and validate normally, including when you have set a custom login URL. For the best accessibility we recommend Cloudflare Turnstile or hCaptcha's accessible mode, which are generally friendlier to screen-reader and keyboard users than Google reCAPTCHA v2's "I'm not a robot" checkbox. The choice is entirely yours — the plugin imposes none.
What if I want a completely custom color, not from your palettes?
The palettes are starting points, not jail cells. Every individual color is exposed as its own WordPress color picker on the Colors & Palette tab — change as many or as few as you like.
Is the show/hide password toggle a security risk?
No. It only reveals the password the user themselves typed, in their own browser, after they explicitly click the toggle. WCAG 2.2 SC 3.3.8 recommends this exact pattern for accessible authentication.
How do I migrate settings to another site?
Open Advanced → Export settings, copy the JSON, and paste it into Advanced → Import settings on the other site.
Does it work in multisite / network installs?
Yes. Each site has its own settings, including its own uninstall preference. On a network uninstall, each site's choice is respected independently — site A can keep its data while site B wipes its data in the same uninstall pass.
How is this different from other custom-login plugins?
It is built with accessibility as the primary design goal rather than an afterthought: defaults, palettes and options are chosen with WCAG 2.2 AA in mind, and the customization controls are bounded so that common accessibility pitfalls (low contrast, hidden focus, tiny targets) are avoided by design.
Where can I report a bug or request a feature?
更新日志:
1.2.3
- Valid HTML: the empty action="" attribute is removed from the two settings screen forms. The W3C Nu checker reports action="" as an error, "Bad value for attribute action on element form: Must be non-empty". A form with no action attribute submits to the current URL, which is exactly what action="" was doing, so saving settings behaves identically.
- No accessibility change. novalidate stays, so the plugin's own validation and error messaging continue to handle WCAG 3.3.1 and 3.3.3; no label, ARIA, landmark or focus behaviour is touched. WCAG 2.2 AA is unaffected.
- These forms are on wp-admin screens only, so this never affected the public site. Fixed so the plugin's own markup is clean throughout.
- Fixed — the "Block direct access to wp-login.php" switch no longer turns itself off. Since 1.0.0 the sanitizer reset this setting on every save that came from a tab without the switch on it — so saving the Colors, General or any other tab silently disabled the block again. This was the root cause of the block appearing "not to work". The setting now only changes when the Security tab itself is saved.
- Readme: shortened the 1.2.0 upgrade notice to meet the wordpress.org 300-character limit (flagged by Plugin Check). No code changes; functionality is identical to 1.2.0.
- Security fix — the wp-login.php block is now a real block. Previous versions only blocked plain GET requests and whitelisted several actions on the raw URL, which meant a POSTed brute-force attempt against
/wp-login.phpstill reached the WordPress authentication layer even with blocking on. With Block direct access enabled, every logged-out request to/wp-login.php— all HTTP methods, all actions — now receives a generic 404 before any credential processing can run. All legitimate flows (login, logout, lost password, reset links, post passwords, privacy confirmations) already travel through your custom slug, because the plugin rewrites every URL WordPress generates. - Security fix — /wp-admin no longer reveals the hidden login URL. Previously a logged-out visit to
/wp-admin/was redirected toyour-custom-slug?redirect_to=…, printing the "secret" slug in the address bar for anyone to read. Those requests now return the same generic 404.admin-ajax.phpandadmin-post.phpare exempt (they serve legitimate logged-out requests), and logged-in users are never affected. With blocking off, mirror mode is honest: both URLs work. - The 404 is self-contained — a minimal, accessible, theme-independent page (proper lang attribute, heading, dark-mode aware) that renders identically on classic and block themes and carries no fingerprint that a login plugin intercepted the request.
- New — accessible branded login emails (WordPress core). The password-reset, new-user welcome and password-changed emails are now sent as a small accessible HTML template: your logo (from the Logo tab, or the Site Icon) with proper alt text,
langattribute, 16 px left-aligned text, and the action link as a large high-contrast button that is underlined — plus the same address repeated as plain text for copy-paste. Colours come from your palette but are contrast-checked at send time; any pair below WCAG AA falls back to audited colours, so the email can never go out unreadable. Politely steps aside if another plugin already made the email HTML. Can be switched off on the General tab. - New — one-click accessible WooCommerce emails. WooCommerce sends its own store emails with its own colour settings. On stores, the General tab now has "Apply palette to WooCommerce emails": it writes contrast-safe values into the WooCommerce email base, background and text colours and sets your logo as the email header image.
- Colour system — contrast is now enforced at save time. The live checker on the Colors tab was advisory; a colour that failed could still be saved. The same thirteen WCAG pairs (4.5:1 text, 3:1 UI) are now verified when you press Save — a change that would break a pair is rejected, the previous colours are kept for that pair, and the notice tells you exactly which pair failed, at what ratio, and what it needs.
- Colour system — the WooCommerce bridge now paints its own surface. The bridge previously set text and link colours against a form background it never painted, so a theme's own background could silently break the audited pairs. The My Account login, registration and lost/reset-password cards now get the palette's form background and primary text colour, secondary text and link-hover colours are exported, links inside the forms are underlined (never colour alone), and the button hover state re-asserts the button text colour so a theme hover rule can never bleed in.
- Fixed — default palette focus ring. Ananyoo Classic shipped
#facc15(1.5:1 on white) as its focus ring; it is now#a16207(4.9:1 on white, 4.5:1 on the page background), matching the audited defaults new installs already received. - Compatibility: tested up to WordPress 7.1.
- New — Real-time contrast checker (Colors tab): As you pick colours or apply a palette, each colour is checked live against WCAG right next to its field, shown as a colour-coded pill — 4.5:1 for normal text (AA), 7:1 (AAA) and 3:1 for borders, focus and the focus ring. Each result shows a symbol and words together, never colour alone, names what it is checked against, and a polite spoken summary reports the overall tally. This helps you avoid a low-contrast palette before you save it.
- New — Cognitive accessibility boosters (WCAG 2.2, SC 3.3.7 and SC 3.3.8): An optional "You are signed in" hold screen shows a clear success message with a short, adjustable delay (1 to 5 seconds) before moving the user to their account. It uses a polite live region and a no-JavaScript meta-refresh fallback, with a "Continue now" link for people who do not want to wait. A second option adds a contextual help drawer on the login screen — a native disclosure ("Need help signing in?") with your own guidance text, so users get help without leaving the page.
- New — Accessible password strength meter: On the set-password and registration fields, users now see the strength in words — Weak, Fair, Good or Strong — along with short, friendly suggestions on how to make the password stronger. Strength is never shown by colour alone, so it works for colour-blind users and in high-contrast mode.
- New — Accessibility health check (Admin dashboard widget): A summary widget on the WordPress dashboard gives your login screen an accessibility score out of 100. It checks every colour pair for contrast and confirms your text size, target size, field height and focus-ring width meet the WCAG thresholds, listing anything that needs attention.
- New — Front-end login block and shortcode: You can now place the accessible login form anywhere on your site using the [accessible_login] shortcode or the "Accessible Login" block in the editor. The embedded form carries the same accessible colours, focus states and target sizes as the main login screen, and shows a signed-in state with a logout link when the user is already logged in.
- New — WooCommerce styling bridge (optional): When enabled, the plugin's accessible colours, focus states and target sizes are applied to the WooCommerce "My Account" login and registration forms, so shops get a consistent, accessible sign-in experience.
- Admin: changed the sidebar menu icon from the generic accessibility glyph to a key (dashicons-admin-network), which better signals a login/registration plugin. Cosmetic admin-only change.
- Admin: WordPress admin notices (e.g. the core "Search engine visibility" notice) now appear above the settings-page header band instead of inside it, by adding a wp-header-end marker. Settings-screen only; no front-end or functional changes.
- Accessibility (WCAG 1.3.1 / region best practice): all login-screen content is now contained within landmarks. The tagline and footer text (printed after the form) are wrapped in a contentinfo landmark, and WordPress's screen-reader "Log In" heading is moved into the landmark. Resolves the AXE "All page content should be contained by landmarks" findings. No settings or visual changes.
- Listing tidy-up: simplified the display name (removed "2.2" from the title), moved the Links section to the foot of the listing, added a Live demo link after the intro, and removed a duplicated author-credit paragraph. No functional or code changes; settings and behaviour are unchanged.
- Display name updated to "Accessible Login – WCAG 2.2 AA Login & Registration" for clarity and discoverability. No functional or code changes; settings and behaviour are unchanged.
- readme links and documentation references refreshed.
- Full WCAG 2.2 Level AA experience across all four screens — login, lost-password, password-reset and registration — developed and tested with the Deque AXE engine, Google Lighthouse, and the JAWS, NVDA, VoiceOver and TalkBack screen readers.
- Ten accessible colour palettes plus full per-colour control through the WordPress colour picker, each maintaining AA contrast.
- Optional custom backend login URL (off by default) with a reserved-word blocklist; when enabled it can return 404 on
/wp-login.phpfor unauthenticated visitors to block automated brute-force scanners. - Logo upload with configurable dimensions, alt text and link target; ships with a neutral, locally-served default placeholder logo (no external requests).
- Five layout styles, background image / overlay / pattern controls, and typography control with a 16 px minimum.
- Accessible show/hide password toggle (SC 3.3.8), Caps Lock screen-reader warning, ARIA error announcements, a 3 px focus ring with 2 px offset (SC 2.4.11 / 2.4.13), and a configurable 44 x 44 px default target size (SC 2.5.8).
- Reflows cleanly at 320 px and at 200% / 400% zoom (SC 1.4.4 / 1.4.10); honours
prefers-reduced-motionand Windows forced-colors mode. - Structured, WCAG-bounded layout controls (corner radius, form width and padding, input height, button weight, focus-indicator width, card-shadow toggle). The plugin does not accept arbitrary CSS, JavaScript or PHP.
- All dynamic CSS is delivered through the WordPress stylesheet enqueue system; no inline style or script blocks are printed into the login markup.
- Settings export / import via JSON, reset-to-defaults, a first-run setup wizard, and a user-controlled clean-uninstall option (multisite-aware).
- Independently audited against WCAG 2.2 AA and remediated; default settings are seeded from a bundled JSON file so a fresh install is accessibility-clean out of the box.
- Requires WordPress 5.9 or higher.
- Translation-ready with the
ananyoo-accessible-logintext domain.