How to Meet the WCAG 2.4.11 Guideline?

When an item is selected using the keyboard, the focus should always be at least partially visible. This helps users navigate your content easily without losing track of where they are.

One way to achieve this is by using CSS to control focus styles. Adjust properties like outline, border, or box-shadow to make sure the focused element stands out. If you have elements like sticky headers or pop-ups, ensure they don’t cover the focused item. As a general rule, try to avoid overlapping content whenever possible to prevent accessibility issues.

How to Meet the WCAG 2.4.12 Guideline?

When an element receives keyboard focus, it should remain fully visible. No part of it should be hidden behind sticky headers, pop-ups, toolbars, or any other on-screen elements.

To prevent this issue, use CSS properties like scroll-padding and scroll-margin to adjust how content moves into view when focused. Proper use of z-index can also help ensure that focusable elements remain in clear sight. Test your interface with keyboard navigation to check that nothing is being blocked or hidden.

How to Meet the WCAG 2.4.13 Guideline?

The best way to meet WCAG 2.4.13 guideline is by having a clear and visible focus indicator. A simple method is adding an outline around the focused element that is at least 2 CSS pixels thick and has enough contrast to stand out from the background.

If your site uses different focus styles—like changing colors, adding underlines, or modifying borders—you need to make sure these changes are strong enough to be noticeable. The contrast between the focused and non-focused state should be clear, and the area of change should be large enough so users can easily see where the focus is.

How to Meet the WCAG 2.5.7 Guideline?

Users should always have an alternative to dragging movements. Not everyone can perform drag-and-drop actions easily, so it’s important to provide a simpler way to achieve the same result.

For drag-and-drop interfaces, allow users to click/tap on an item to "pick it up" and then click/tap again to "drop" it. This eliminates the need for continuous dragging.

For interactive maps, add clear directional buttons that allow users to pan the view without dragging.

For carousels, include previous/next buttons or small navigation dots so users can move between slides easily.

For sliders, let users click or tap directly on the slider track to move to a specific position, instead of forcing them to drag the handle.

How to Meet the WCAG 2.5.8 Guideline?

To follow this guideline, make sure interactive elements like buttons, links, and icons are at least 24 by 24 CSS pixels in size. If resizing them isn't an option, ensure they have enough space around them so users don’t accidentally tap the wrong target.

A simple way to check this is by imagining a 24-pixel circular area centered on each target. No other target should overlap this space. While the guideline technically allows very small targets, keeping them too close together can cause users to tap the wrong one by mistake. Spacing them properly improves accuracy and makes navigation easier, especially for those using touchscreens or assistive devices.

How to Meet the WCAG 3.2.6 Guideline?

If your website or app includes a help feature, keep it in the same order across all pages. This means that whether it’s a help button, a chat option, or a support link, its focus order should always stay the same relative to other elements.

This rule is about how users navigate through the page using a keyboard or assistive technology. The visual placement of the help feature doesn’t have to be identical, but it’s a good practice to keep it consistent. When help options appear in a predictable place, users can find them more easily without having to search every time.

How to Meet the WCAG 3.3.7 Guideline?

To meet these guidelines, you must avoid making users enter the same information multiple times in a process. If they’ve already provided certain details—like their shipping address on an e-commerce site—there should be an option to reuse that information instead of typing it again.

For example, when asking for a billing address, provide a simple "Same as shipping address" checkbox. If users do need to enter the same details again, prefill the fields based on what they entered earlier. This saves time and reduces errors, making forms much easier to complete.

How to Meet the WCAG 3.3.8 Guideline?

The best way to meet this guideline is to avoid cognitive function tests in authentication. This means users shouldn't have to solve puzzles, remember complex passwords, or complete CAPTCHA challenges just to log in.

If a cognitive test is part of the authentication process, offer an alternative. Some options include:

• Biometric login (fingerprint or face recognition)
• OAuth authentication (signing in through Google, Apple, etc.)
• Physical security keys or dongles
• App-based verification (approving login requests through a separate app)

Providing these alternatives makes it easier for all users—especially those with cognitive or learning disabilities—to log in securely.

How to Meet the WCAG 3.3.9 Guideline?

Make sure users can log in without relying on memory-based tasks like recalling passwords or solving CAPTCHAs. Instead, offer options that simplify authentication, such as:

• Password managers that auto-fill login details
• Biometric login (fingerprint or face recognition)
• Copy-paste support for entering credentials
• Passkeys or security keys for a hassle-free login experience