WordPress plugin

Widget appearance and positioning

How to configure the AccessYes widget button position, corner offsets, colour, size, and accessible label. Covers desktop and mobile settings independently.

Updated

In this article: Full guide to positioning and styling the AccessYes widget button. Covers corner selection, pixel offsets, button colour, button size, and the accessible label — with guidance on avoiding conflicts with other fixed elements on the page.

All appearance settings are in AccessYes → Appearance in the WordPress admin. Changes take effect immediately without republishing or clearing a cache.

Widget position

The widget button is a floating element that stays fixed to the screen regardless of scrolling. You can place it in any of the four corners.

Desktop and mobile positions are configured separately. This matters because fixed elements like chat launchers, cookie banners, and sticky headers vary between desktop and mobile layouts. You might want the widget in the bottom-right corner on desktop but the bottom-left on mobile.

Available positions

  • Bottom-right (default) — the most common position; works for most sites that don’t already have something in this corner
  • Bottom-left — the right choice if your desktop or mobile layout already has a chat widget, cookie consent button, or similar element in the bottom-right
  • Top-right — available but uncommon; suits certain editorial or portfolio layouts
  • Top-left — available; useful for sites where the top-left corner is consistently clear
Tip

If you use CookieYes for cookie consent, its consent banner typically occupies the bottom of the screen on first load. On mobile, a bottom-right accessibility widget can overlap the banner. Move the widget to the bottom-left on mobile to keep both visible.

Offset from screen edges

The offset controls how far the button sits from the edges of the screen in pixels. The default is 20px for both horizontal and vertical on both desktop and mobile.

When to increase the offset

Increase the horizontal or vertical offset when:

  • A sticky header or footer occupies the edge of the screen and the button is hidden behind it
  • Your theme has a bottom bar (tab bar, persistent navigation) on mobile
  • A chat launcher’s trigger area is larger than it appears and overlaps the accessibility button
  • The button clips off screen on very narrow devices

When to decrease the offset

The default 20px is conservative. If your layout is clean and the button sits comfortably without any overlap, you can reduce the offset to bring the button closer to the corner. Reducing below 8px is not recommended — the button should have visible breathing room from the screen edge.

Button colour

The button colour sets the background of the floating circular button. The accessibility icon inside the button is always white.

The default colour is #1863DC, the AccessYes brand blue. For most sites this works without conflict, but you should change it to match your site’s primary colour.

Colour contrast requirement

Because the icon inside the button is white, the button’s background colour must have a contrast ratio of at least 3:1 against white to meet WCAG 2.1 AA for non-text elements. The contrast ratio against white of #1863DC is 4.1:1, which passes.

To check a custom colour, use a contrast checker before deploying. If your brand colour does not meet 3:1 against white, use a darker shade for the button specifically.

Colour against the page background

The button also needs to be visible against the page backgrounds it floats over. On pages with varied backgrounds (hero images, white sections, dark sections), check that the button colour is distinguishable at each transition. A strong mid-blue or dark colour typically performs well across varied backgrounds.

Button size

The button size sets the diameter of the circular button in pixels.

The default is 48px, which:

  • Meets WCAG 2.5.8 (Target Size, Minimum, AA, WCAG 2.2) which requires 24×24px minimum
  • Exceeds WCAG 2.5.5 (Target Size, Enhanced, AAA) which recommends 44×44px
  • Is comfortably tappable on mobile, where finger precision is lower than mouse precision

Guidance on resizing

Reduce the button size only if you have a specific layout constraint that the default size conflicts with. A smaller button is harder to activate for visitors with motor impairments, tremors, or who use touch devices.

If you do reduce the size, test that the button remains fully visible in its corner position at the reduced size at common viewport widths and on physical mobile devices.

Increasing the button size beyond 48px is supported but not commonly needed. If you do increase it, verify the button does not visually dominate or overlay important page content in the initial viewport.

Button label (accessible name)

The button label is the text announced by screen readers when the widget button receives focus. It is not visible on the button itself — the button shows only the accessibility icon. The label is the aria-label attribute on the button element.

The default label is “Accessibility widget”, which is descriptive and appropriate for English-language sites.

When to change the label

Change the label if:

  • Your site is in a language other than English and you are not using language auto-detection. For example, a French-language site should use “Widget d’accessibilité”.
  • Your organisation has a specific terminology preference. For example, some organisations use “Accessibility tools” rather than “Accessibility widget”.

Do not set the label to something non-descriptive like “Open” or “Menu” — screen reader users need to know what this button does before they activate it.

Testing your configuration

After making appearance changes, test the widget in multiple contexts:

  1. Private browsing window — see the site as a first-time visitor sees it, without any cached session or admin toolbar affecting the view
  2. Mobile device — check the position and offset on a physical phone. Simulators do not always accurately represent how fixed positioning behaves on real hardware
  3. With other fixed elements active — if you use a cookie banner or chat launcher, confirm the widget does not overlap these when both are simultaneously visible
  4. Keyboard navigation — Tab to the widget button and confirm the focus ring is visible against the page background in the button’s corner