Every option is optional. Unknown keys and invalid values are ignored with a console warning prefixed [shayach].
Options
| Option | Type | Description |
|---|---|---|
language | "auto" | "he" | "ar" | "ru" | "en" | Default panel language. 'auto' uses the page's lang attribute when it is he, ar, ru or en, otherwise Hebrew. A visitor's own choice always wins. default: "auto" |
statementUrl | string | http(s) or relative URL of the site's accessibility statement page. When set, the panel footer links to it. |
icon | object | |
icon.position | "auto" | "top-right" | "top-left" | "upper-right" | "upper-left" | "middle-right" | "middle-left" | "lower-right" | "lower-left" | "bottom-right" | "bottom-left" | 'auto' is bottom-right on RTL pages and bottom-left on LTR pages. upper and lower sit a quarter and three quarters of the way down the screen. A visitor who moves the button (see draggable) sees their own choice. default: "auto" |
icon.offsetX | number | Distance in px from the side edge. Ignored by the edge-tab shape. default: 20, min 0, max 200 |
icon.offsetY | number | Distance in px from the top or bottom edge. For middle it shifts the button down from the center; for upper and lower it is the margin kept at the top and bottom of the screen. default: 20, min 0, max 200 |
icon.size | number | Button height in px. default: 56, min 44, max 96 |
icon.shape | "circle" | "rounded" | "pill" | "edge-tab" | default: "circle" |
icon.background | string | CSS color. Default: theme.primary. |
icon.foreground | string | CSS color for the symbol and label. Default: black or white, whichever contrasts more. Replaced automatically if below 4.5:1 contrast. |
icon.labelText | string | Custom visible label for the pill and edge-tab shapes. Default: the word for accessibility in the panel language. max length 40 |
icon.labelLanguage | "he" | "ar" | "ru" | "en" | Fix the built-in label's language instead of following the panel language. |
icon.mobile | object | Overrides for screens up to 640px wide. |
icon.mobile.position | "top-right" | "top-left" | "upper-right" | "upper-left" | "middle-right" | "middle-left" | "lower-right" | "lower-left" | "bottom-right" | "bottom-left" | |
icon.mobile.offsetX | number | min 0, max 200 |
icon.mobile.offsetY | number | min 0, max 200 |
icon.mobile.size | number | min 44, max 96 |
icon.draggable | boolean | Visitors can drag the button to one of the ten positions, or choose one in the panel's button position card. Their choice is saved only in their own browser and Reset settings removes it. false keeps the button where you put it and hides the card. default: true |
theme | object | Panel colors (any CSS color). Text colors that fall below 4.5:1 contrast are replaced with black or white automatically and a warning is logged. |
theme.primary | string | Header, selected tiles and tile icons. Default #1f5eff. |
theme.onPrimary | string | Text and icons on the primary color. Default: black or white, whichever contrasts more. |
theme.background | string | Panel background. Default #ffffff. |
theme.text | string | Panel text. Default #1d1d1f. |
theme.muted | string | Secondary text. Default #5f6672. |
theme.border | string | Tile and divider borders. Default #d5dbe7. |
theme.surface | string | Subtle highlight backgrounds. Default #f3f6ff. |
theme.scrollbar | string | Scrollbar thumb inside the panel and the statement window. Default: theme.primary. Below 3:1 against theme.surface (WCAG 1.4.11) it is replaced with theme.text, with a warning. |
statement | object | Data for the generated accessibility statement. Missing required items are listed on the statement page instead of being invented. |
statement.organizationName | | Legal or public name of the organization. Required for a complete statement. |
statement.organizationDescription | | One line describing the organization or the site. |
statement.commitment | | Your commitment to accessibility, in your own words. |
statement.updatedAt | string | Date the statement was last reviewed, as YYYY-MM-DD. Required for a complete statement. |
statement.conformanceLevel | "A" | "AA" | "AAA" | Only set a level your site was actually audited at; the statement never claims a level you did not set. |
statement.additionalStandards | array | Other standards the site was checked against, for example WCAG 2.2 AA. |
statement.adjustments | array | Accessibility adjustments the site offers. Required for a complete statement. |
statement.reviewFrequency | | How often accessibility is reviewed, for example every 6 months. |
statement.measures | array | Measures taken to keep the site accessible, such as audits or staff training. |
statement.browsers | array | Browsers the site was tested with. |
statement.assistiveTech | array | Assistive technologies the site was tested with. |
statement.knownLimitations | array | Known parts of the site that are not accessible. |
statement.thirdPartyPages | array | Pages or content provided by third parties that you do not control. |
statement.exemptions | array | Parts of the site for which you rely on a legal exemption. |
statement.stage | object | Use when the site is still being made accessible. |
statement.stage.description | | Current stage of the accessibility work. |
statement.stage.completionDate | string | Planned completion date, as YYYY-MM-DD. |
statement.stage.alternatives | | Alternatives available until the work is done. |
statement.temporaryNotices | array | Short-lived notices, such as a page that is being fixed. |
statement.physicalArrangements | | Accessibility arrangements at the physical premises. Required unless noPhysicalService is true. |
statement.noPhysicalService | boolean | Set true when the organization has no physical place that serves the public. |
statement.coordinator | object | The accessibility coordinator. Either coordinator or contact is required. |
statement.coordinator.name | | Contact person's name. |
statement.coordinator.phone | string | Phone number, digits with optional + ( ) - and spaces. |
statement.coordinator.email | string | Email address. |
statement.coordinator.other | | Any other way to reach them, such as a fax number or postal address. |
statement.contact | object | A general accessibility contact. Either coordinator or contact is required. |
statement.contact.name | | Contact person's name. |
statement.contact.phone | string | Phone number, digits with optional + ( ) - and spaces. |
statement.contact.email | string | Email address. |
statement.contact.other | | Any other way to reach them, such as a fax number or postal address. |
Usage
<script>
window.A11yConfig = {
language: "he",
icon: { position: "bottom-right" }
};
</script>
<script src="https://shayach.co.il/v1/widget.js" defer></script>Schema URL: https://shayach.co.il/v1/config.schema.json