Set up the accessibility menu on your site

In short. Your SGEN site ships with a floating accessibility icon that lets visitors choose high contrast, larger text, reduced motion, and underlined links — all remembered across pages for up to 30 days. You turn it on once in Dashboard → Settings → Accessibility menu, pick a corner, and choose which presets to expose. The overlay runs quietly after that.

On this page: What is this for? · Good use cases · What NOT to use this for · Scope · Fields · How this connects to other features · Before you start · Where to go · Steps · What success looks like · Troubleshooting · Examples

How to set up the accessibility menu on your site

What is this for?

Your SGEN site ships with a small accessibility overlay — a wheelchair-style icon that floats in the corner of every page. When a visitor clicks it, they get a panel of accessibility preferences:

• High-contrast mode
• Larger text
• Reduced motion
• Underline links
• A reset button

Once they pick what they want, your site remembers their choices and applies the matching styles automatically on every page they load — for the rest of that visit and across return visits within the window you configure.

As the site owner, your job is to:

• Keep the overlay turned on
• Pick a corner placement that works with your layout
• Choose which presets to expose

Once configured, the menu runs quietly — visitors never need to log in, fill out a form, or ask you to enable anything. They open the menu, pick their preferences, and the site adapts.

A visitor who turns on accessibility mode will see your site with their preferences applied immediately, and those preferences carry through every page they navigate to during their visit.

They do not have to re-pick on every page. That continuity is what separates a real accessibility menu from a one-page novelty.

Good use cases

• You sell to customers with diverse vision needs. Older customers often appreciate larger text and stronger contrast — the overlay delivers that without rebuilding your theme.
• You run an editorial site with long-form articles. Reduced motion and higher contrast are popular comfort settings for readers. Turning the overlay on is a one-time decision that pays off on every article view.
• Your industry has accessibility expectations in the buyer's checklist. Education, healthcare, government, finance, and large enterprise customers often check for an accessibility menu before they commit. Turning yours on signals you take it seriously.
• You want visitors to opt in to comfort, not compliance. The overlay is not a substitute for proper semantic HTML and color contrast — it is a respectful courtesy that lets visitors opt into stronger settings when they need them.
• You are launching into a new market or vertical. An accessibility menu signals professionalism and broad readiness — buyers checking your site for the first time form a positive first impression.

What NOT to use this for

• Do not treat the menu as a substitute for accessible design. If your colors fail contrast checks, the overlay does not absolve you. Fix the theme first, then offer the menu as a comfort layer on top.
• Do not use the menu to A/B test font sizes or color schemes. It is a visitor preference tool, not a marketing experiment. Use Themes or the Theme Editor for design changes.
• Do not rely on the menu for legal accessibility compliance certification. Compliance is a process — the menu is one helpful artifact in it. Talk to a specialist for formal audits.
• Do not customize the menu's individual toggles or rebrand the icon. The presentation is fixed by the theme. If you need a custom widget, build it outside the overlay.
• Do not pre-toggle preferences on behalf of visitors. The opt-in is the visitor's choice. Defaulting High Contrast on for everyone defeats the point — visitors who do not need it will be confused.

Scope

The accessibility menu applies to every page of your live site once you turn the master toggle on. There is no per-page configuration — the overlay is either on for the whole site or off.

• Covers: all public-facing pages including the homepage, product pages, blog posts, the cart, and checkout.
• Does not cover: your admin dashboard (the overlay is for visitor-facing pages only).
• Visitor memory: the visitor's preference is stored in their browser and remembered for however many days you configure (default 30). Each visitor's state is independent of every other visitor's.
• Mobile: the corner icon is visible and functional on mobile viewports. The overlay panel is touch-friendly.
• Custom pages: pages built in the page builder inherit the overlay automatically — no additional configuration needed.

Fields

How this connects to other features

• Themes — Your theme decides what colors and fonts the accessibility menu adapts. A strong-contrast default theme makes the High Contrast toggle a smaller jump; a low-contrast theme means it does heavier work.
• Custom Codes — You can layer additional CSS on top of the accessibility classes to refine how a specific page or section behaves when High Contrast is on. Use sparingly — the default behavior is usually what you want.
• Cookies & Privacy notice — The accessibility preference is stored in the visitor's session, not as a tracking cookie. It does not need a consent banner of its own. Your existing cookie banner remains its own concern.
• Site Settings → Accessibility — The on/off toggle and the corner-placement choice live in Settings. This page tells you how to use the feature; the Settings page is where you turn it on and pick a corner.

Before you start

• Check both browsers — desktop and mobile. The corner icon needs space in both. If you have a chat widget or a scroll-to-top button in the bottom-right, pick a different corner before going live so they do not overlap.
• Decide which presets to enable. The four presets — High Contrast, Larger Text, Reduce Motion, Underline Links — can each be turned on or off. If your theme already underlines all links, you might hide the Underline Links toggle.
• Preview your theme's high-contrast palette. When High Contrast turns on, your site swaps to a high-contrast palette automatically. Preview the swap on your most-visited pages so you know the mapping is sensible.
• Set your remember-for policy. The default is 30 days, which fits most sites. High-frequency-visit sites might prefer 7 days; editorial or archive sites might prefer 90.
• Confirm your theme is current. Older themes built before the accessibility menu was introduced may not include the high-contrast palette mapping. If you are on a custom or older theme, verify with support that it is compatible.

Where to go

Dashboard → Settings → Accessibility menu

The master toggle, corner-placement picker, per-preset on/off choices, and the remember-for field all live on a single Settings page. There is no separate page builder, no separate theme tab — one Settings page covers everything.

Steps — Turn on the accessibility menu and pick your defaults

1. Open Dashboard → Settings → Accessibility menu

From your admin dashboard, click Settings in the left sidebar, then click Accessibility menu in the Settings tab list. You will land on a single page with five sections:

• Master toggle
• Corner placement
• Available presets
• Remember-for
• Preview

2. Flip the master toggle to On

Click the master toggle at the top of the page. The corner placement, presets, and remember-for sections become editable. The live Preview pane on the right updates immediately to show the wheelchair icon in your current corner choice.

3. Pick the corner placement that fits your site

The corner picker offers four options: Bottom-right, Bottom-left, Top-right, and Top-left. Bottom-right is the visitor convention and the default. Pick a different corner only if you already have a chat widget or scroll-to-top button in the bottom-right. The live Preview pane re-renders immediately with the new placement so you can confirm it works against your hero and footer.

4. Choose which presets to expose

Each of the four presets has its own on/off toggle in the Available presets section. Turn off any preset that does not apply to your theme.

• High contrast — swaps your theme palette to a higher-contrast variant for readers who need stronger separation between text and background.
• Larger text — bumps the body font size up by roughly 25% for readers who find your default size small.
• Reduce motion — pauses decorative animations, transitions, or autoplay videos. Useful for visitors with vestibular sensitivity.
• Underline links — adds an underline to every link in body content. Useful when your theme uses color alone to indicate links.

5. Set the remember-for value

The remember-for field accepts a number of days. The default of 30 fits most sites. Lower it for very high-frequency-return sites; raise it for editorial or archive sites where visitors return weeks later.

6. Click Save and verify on your live site

Click Save at the bottom of the page. You should see a green confirmation toast. Open your live site in a fresh browser tab — the wheelchair icon should be in the corner you picked. Click it, toggle High Contrast, and watch the page repaint.

What success looks like

The wheelchair icon appears in the corner you picked on every page of your live site. When a visitor clicks it, the overlay panel slides up with your enabled presets. When they toggle High Contrast, the page repaints immediately. When they navigate to a second page, the High Contrast styles persist — they do not have to re-pick. When they close the browser and return the next day, the styles are still applied.

If a visitor wants to clear their preferences, the overlay has a small Reset button that removes everything and returns the site to your default presentation.

What to do if it does not work

If you save the page but the icon does not appear on your live site:

• Reload the live site with the cache disabled. Sometimes a CDN or your browser is serving an older version of the page. A hard reload or a private window confirms the new state.
• Check that the master toggle is On. This is the single most common miss. Re-open Dashboard → Settings → Accessibility menu and confirm the toggle is green.
• Confirm the corner you picked is not behind another widget. If you have a chat widget in the bottom-right and the icon is also in the bottom-right, they will overlap. Pick a different corner and save.
• Try a private browsing window. If you have ever clicked the icon on this site as an admin, your own session may already be in the "preferences stored" state. A private window gives you a fresh visitor view.
• Check your Theme. Some custom themes hide certain components by default. If your theme predates the accessibility menu in SGEN, talk to support to confirm the theme has been updated.

If the icon appears but the High Contrast toggle does not seem to do anything visually:

• Check your theme's high-contrast palette. Themes ship with a default mapping; if your theme has a custom palette, the high-contrast variant may not have been defined. Open Themes and confirm the high-contrast palette is set.
• Check Custom Codes for overrides. If custom CSS was added, it may be overriding the accessibility classes. Pause the relevant Custom Codes entry and reload to confirm.

Examples

Four real scenarios showing how sites configure the accessibility menu for their context.

Example 1: Turning on the menu before a holiday push

Your site is preparing for its busiest two months of the year. The owner reviews the site checklist and notices the accessibility menu is off. They open Dashboard → Settings → Accessibility menu and:

• Flip the master toggle on
• Leave bottom-right as the corner
• Leave all four presets enabled
• Leave remember-for at 30 days

They click Save and reload the live store. The wheelchair icon now appears on every product page, the cart, and checkout. Internal QA confirms the icon does not overlap the chat widget at any viewport, the High Contrast toggle produces a sensible repaint, and Larger Text makes cart-button labels easier to read on small-screen devices. They go live the same afternoon.

Over the holiday push, roughly one in two hundred visitors enables at least one preset — small but meaningful, and zero customer support tickets about it.

Example 2: Moving the icon to avoid a chat-widget overlap

Your site has a live-chat widget anchored to the bottom-right corner. When the admin turns on the accessibility menu, the icon overlaps with the chat bubble. They open the Settings page, change the corner picker from bottom-right to bottom-left, click Save, and reload the storefront.

The wheelchair icon is now in the bottom-left. The chat bubble remains in the bottom-right. A returning visitor on a 1280px laptop sees both clearly without overlap. The admin tests on a 375px mobile viewport — the icon and the chat bubble are still in opposite corners and do not collide.

Total time from problem to fix: under three minutes.

Example 3: Narrowing the preset list to match the theme

Your site runs a high-contrast editorial theme. The theme already underlines every link in body copy, every color choice already passes contrast checks, and there is no autoplay video or looping animation anywhere on the site. Of the four presets, only Larger Text is genuinely additive for visitors.

The admin opens Dashboard → Settings → Accessibility menu, flips the master toggle on, and turns OFF:

• High Contrast
• Reduce Motion
• Underline Links

Leaving only Larger Text enabled. After saving, the accessibility overlay shows visitors a single, focused choice. The menu is cleaner and matches the design discipline of the theme.

Example 4: Tuning the remember-for value for a subscription audience

Your site offers a monthly subscription. Subscribers return regularly — often daily during the first week after a new order ships, then with longer gaps. The admin reasons that a preference set during signup might feel stale two months later.

After a team discussion, they pick 14 days as the remember-for value. This covers the peak return-visit window (first two weeks after a shipment) without lingering through two full subscription cycles.

Next steps

• See the Themes customer doc for how High Contrast maps to your theme palette.
• See the Custom Codes customer doc if you ever need to layer additional CSS on top of the accessibility classes.
• See the Site Settings overview customer doc for the full list of Settings tabs and what each one controls.