Conflicting CSS

Moving toggle and panel position

Developers can override the placement of Sa11y's toggle/control panel using CSS variables or CSS shadow parts. Since 4.0.0.

CSS variables

This is the best method to change the panel position. These two variables will adjust the horizontal and vertical positioning.

:root {
  --sa11y-toggle-x-offset: 18px; /* Horizontally adjust (right to left) */
  --sa11y-toggle-y-offset: 15px; /* Vertically adjust (bottom to top) */
}

Shadow parts

Alternative panel positioning method requiring manual adjustment, offering greater creative control to override default styling of toggle and panel.

sa11y-control-panel::part(toggle) {
  bottom: 15px;
  inset-inline-end: 18px;
}

sa11y-control-panel::part(panel) {
  bottom: 25px;
  inset-inline-end: 42px;
}

Hidden or unreachable annotations

Sometimes annotations are unreachable because of conflicting CSS or because the issue is in a hidden location on the page. Using custom CSS or the Customizer within WordPress, you can adjust elements on the page when Sa11y is active. Since 3.0.0.

Find the element you would like to change, and add [data-sa11y-active="true"] before it.

Try: For each example, use a mouse or keyboard alt A to toggle Sa11y on and off.

Example #1

A simple example of revealing a hidden <div>.

[data-sa11y-active="true"] #dog {display: block;}

Example #2

Open all accordion panels to make it easier to review the page.

[data-sa11y-active="true"] .accordion-collapse {display: block;}