Accessible Login – WCAG AA Login & Registration
| 开发者 | anblik |
|---|---|
| 更新时间 | 2026年8月5日 00:25 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0 |
| 版权: | 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 (optional — off by default) — replace
/wp-login.phpwith a slug you choose (e.g./my-secret-door); when you enable it, the old URL can return 404 to block automated brute-force scanners. - 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). The default /wp-login.php URL will return 404 for unauthenticated visitors, which blocks the vast majority of automated brute-force scanners.
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.1.2
This is a large accessibility release. Six new features have been added, and all of them keep the login, registration and password screens conforming to WCAG 2.2 Level AA.
- 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.