### CSS for Gradient Backgrounds Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html Provides CSS examples for creating gradient backgrounds with varying color stops and contrast levels. Includes examples for valid gradients and notes on potential issues. ```css .grd { padding: 15px; } .gradient-1 { color: white; background-image: linear-gradient(160deg, rebeccapurple 0%, purple 78.66%); } .gradient-2 { color: white; background-image: linear-gradient(160deg, rgb(195, 195, 255) 0%, rgb(0, 0, 0) 78.66%); } .gradient-3 { color: white; background-image: linear-gradient(160deg, asdpojs 0%, rgb(0, 0, 0) 78.66%); } .gradient-4 { color: white; background-image: linear-gradient(160deg, green 0%, rgb(0, 0, 0) 25%, darkblue 50%, rgb(39, 39, 153) 100%); } .gradient-5 { color: white; background-image: linear-gradient(160deg, #3500c5 0%, hsl(305, 70%, 14%) 100%); } ``` -------------------------------- ### CSS Color Definitions (HWB) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the HWB color space. ```css /* HWB */ .hwb { color: hwb(14 0% 0%); } ``` -------------------------------- ### CSS Color Definitions (OKLab) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the OKLab color space. ```css /* OKLab */ .oklab { color: oklab(60% 0.1 0.2); } ``` -------------------------------- ### Link with Pseudo Elements Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html This example demonstrates a link styled with pseudo-elements, which can be used for decorative purposes or to add content before or after the link text. ```css .pseudo:before { content: 'psuedo before '; color: red; } .pseudo:after { content: ' pseudo end'; color: green; } ``` ```html A link with pseudo elements. ``` -------------------------------- ### CSS Color Definitions (Hex) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the Hex color space. ```css /* Hex */ .hex { color: #FF5733; background: #33bbff; } ``` -------------------------------- ### JavaScript Console Log Link Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html This example shows a link that executes a JavaScript `console.log` command when clicked. Use with caution as it can be used for various purposes. ```javascript javascript:console.log('hacked') ``` -------------------------------- ### Instantiate Sa11y with Custom Options Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/pass.html Instantiate the Sa11y accessibility tool with various configuration options. This example shows how to set the scan root, readability root, ignored elements, specific link detection, SPA routing, and customize the 'About' panel content. ```javascript // Instantiate Sa11y.Lang.addI18n(Sa11yLangEnUS.strings); const sa11y = new Sa11y.Sa11y({ checkRoot: "body", readabilityRoot: "main", containerIgnore: 'footer', linksToFlag: "a[href^='https://www.dev.']", linkIgnoreSpan: '.sr-only-example', detectSPArouting: true, headless: false, selectorPath: true, showHinPageOutline: true, panelPosition: 'left', aboutHeader: 'Help', aboutContent: '

Help

Questions? Review the accessibility guide. This text is fully customizable via the aboutContent prop.

Report bugs & feedback

', }); ``` -------------------------------- ### Initialize Sa11y with English Strings Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/iframes.html Initializes Sa11y with English localization strings. This is a common setup step before using Sa11y's features. ```javascript Sa11y.Lang.addI18n(Sa11yLangEn.strings); const sa11y = new Sa11y.Sa11y({}); ``` -------------------------------- ### CSS Color Definitions (OKLCH) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the OKLCH color space. ```css /* OKLCH */ .oklch { color: oklch(60% 0.2 40); } ``` -------------------------------- ### CSS Color Definitions (Display P3) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the Display P3 color space. ```css /* Display P3 */ .display-p3 { color: color(display-p3 1 0.3 0.2); } .display-p3-bg { color: color(display-p3 1 0.3 0.2); background: color(display-p3 0.9 0 0.7 / 1); } ``` -------------------------------- ### CSS Color Definitions (Lab) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the Lab color space. ```css /* Lab */ .lab { color: lab(60% 50 20); } ``` -------------------------------- ### CSS Color Definitions (Named Colors) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses named colors. ```css /* Named color */ .aliceblue { color: aliceblue; } .rebeccapurple { color: rebeccapurple; } ``` -------------------------------- ### Normalize Alt Attribute Example Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html Demonstrates an example of an image tag with an alt attribute that requires normalization. This is often used to clean up redundant or descriptive text within alt attributes. ```html Image of a photo of a turtledove. ``` -------------------------------- ### CSS Color Definitions (HSLA) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the HSLA color space. ```css /* HSLA */ .hsla { color: hsla(115, 100%, 60%, 0.5); background: hsl(115, 100%, 14%); } ``` -------------------------------- ### Initialize Sa11y with Axe-core Integration Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/axe.html Instantiate Sa11y with specific configurations for custom checks and external developer checks. This setup is necessary to enable Sa11y to listen for and process axe-core results. ```javascript // Instantiate Sa11y.Lang.addI18n(Sa11yLangEn.strings); const sa11y = new Sa11y.Sa11y({ customChecks: 'listen', externalDeveloperChecks: true, // Suppress Sa11y's internal developer checks. autoDetectShadowComponents: true, exportResultsPlugin: true, checkRoot: "body", readabilityRoot: "main", containerIgnore: 'footer', linksToFlag: "a[href^='https://www.dev.']", linkIgnoreSpan: '.sr-only-example', }); ``` -------------------------------- ### CSS Color Definitions (LCH) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the LCH color space. ```css /* LCH */ .lch { color: lch(60% 80 40); } ``` -------------------------------- ### CSS Color Definitions (HSL) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the HSL color space. ```css /* HSL */ .hsl { color: hsl(14, 100%, 60%); background: hsl(0, 100%, 24%); } ``` -------------------------------- ### CSS Color Definitions (RGB) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the RGB color space. ```css /* RGB */ .rgb { color: rgb(51, 187, 255); background: rgb(255, 217, 0); } ``` -------------------------------- ### CSS Color Definitions (RGBA) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the RGBA color space. ```css /* RGBA */ .rgba { color: rgba(255, 51, 224, 0.5); background: rgba(3, 249, 3, 1); } ``` -------------------------------- ### Basic Text and CSS Example Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/warnings.html This snippet shows a simple text variable and a CSS rule. It's included to demonstrate that non-code text within the document is ignored. ```javascript const test = "test"; ``` ```css circle { fill: gold; stroke: darkgoldenrod; stroke-width: 2px; } ``` ```javascript const test2 = "test2"; ``` -------------------------------- ### Table with Semantic Headings Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html This example shows a table structure where headings are not semantically marked as ``, leading to accessibility issues. Proper use of `` is crucial. ```html
Event Time Location
Keynote 9:00 AM Auditorium
Lunch 12:00 PM Skyline Room
**fake heading** Closing Dinner 5:00 PM Metropolitan Room
``` -------------------------------- ### CSS Color Definitions (Rec. 2020) Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html This example uses the Rec. 2020 color space. ```css /* Rec. 2020 */ .rec2020 { color: color(rec2020 0.9 0.4 0.2); } ``` -------------------------------- ### CSS for External Links with Pseudo-element Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html CSS to add an indicator to external links (href starting with 'http' but not 'hr.ubc.ca') and links with the 'cta-button--icon' class. ```css .text-formatted a[href^="http"]::after, .link-external::after { position: relative; top: 0.125em; display: inline-block; width: 0.875em; height: 1em; margin-left: 0.25em; content: url("https://www.torontomu.ca/etc.clientlibs/ryecms/static/clientlib-site/resources/images/tmu_logo.svg") / "Testing"; } ``` -------------------------------- ### CSS for Overlay and Content Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html CSS rules for creating a background container with an image, an overlay, and centered content. ```css .background-container { position: relative; width: 100px; height: 100px; overflow: hidden; } .background-image-comp { width: 100%; height: 100%; object-fit: cover; } .overlay-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0, 0, 0, 0.5); } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; color: white; text-align: center; } ``` -------------------------------- ### Initialize Sa11y with Dynamic Root Checking Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/traveling-root.html Initializes Sa11y with a specific `checkRoot` selector. Use this to target dynamic content areas in SPAs. The `headerIgnoreSpan` and `headerIgnoreStrings` options are also configured. ```javascript Sa11y.Lang.addI18n(Sa11yLangEn.strings); const sa11y = new Sa11y.Sa11y({ checkRoot: '.sa11y-active', headerIgnoreSpan: '.anchor-js', headerIgnoreStrings: '(IGNORED)', autoDetectShadowComponents: true, }); ``` -------------------------------- ### Initialize Sa11y with Default Settings Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html Initializes the Sa11y accessibility checker with default options for body analysis and language detection. Listen for completion events. ```javascript Sa11y.Lang.addI18n(Sa11yLangEn.strings); const sa11y = new Sa11y.Sa11y({ checkRoot: 'body', autoDetectShadowComponents: true, langOfPartsCache: 1, langOfPartsPlugin: true, // contrastAlgorithm: 'APCA' // AA, AAA }); document.addEventListener('sa11y-check-complete', (e) => { console.log(e.detail); }); ``` -------------------------------- ### Configure Sa11y with Multiple Roots Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/multi-roots.html Initialize Sa11y with a list of CSS selectors for root elements to check. Set `ignoreContentOutsideRoots` to true to only scan within these specified roots. Use `containerIgnore` to exclude specific elements from the checks within the roots. ```javascript Sa11y.Lang.addI18n(Sa11yLangEn.strings); const sa11y = new Sa11y.Sa11y({ checkRoot: '#root1, #root2, #rootThatDoesNotExist', ignoreContentOutsideRoots: true, containerIgnore: '.ignore, #ignoreMe2', }); ``` -------------------------------- ### Initialize TinyMCE for Live Editing Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/live-editable.html Initializes the TinyMCE editor for an editable region, enabling inline editing and configuring toolbars for content manipulation. ```javascript tinymce.init({ selector: '#editable-region', // change this value according to your HTML license_key: 'gpl', plugins: 'image lists table', toolbar: 'blocks bold italic underline strikethrough blockquote image numlist indent outdent bullist table tabledelete', inline: true, }); ``` -------------------------------- ### Attach Shadow DOM Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html This JavaScript code demonstrates how to attach a shadow root to an element and inject HTML content into it. ```javascript const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' }); shadowRoot.innerHTML = 'Some text in English'; ``` -------------------------------- ### Initialize Tableau Visualization Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/other.html This JavaScript code initializes a Tableau visualization, adjusting its size based on the container's width. It ensures the Tableau API is loaded. ```javascript var divElement = document.getElementById('viz1681528526890'); var vizElement = divElement.getElementsByTagName('object')[0]; if (divElement.offsetWidth > 800) { vizElement.style.width = '945px'; vizElement.style.height = '447px'; } else if (divElement.offsetWidth > 500) { vizElement.style.width = '945px'; vizElement.style.height = '447px'; } else { vizElement.style.width = '100%'; vizElement.style.height = '427px'; } var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); ``` -------------------------------- ### Link Text: Same Name, Different URL Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html Links with the same visible text but different destinations can confuse users. Ensure unique and descriptive link text for each unique URL. ```html some link or some link ``` ```html uses aria label or learn more ``` -------------------------------- ### Define Web Component for Contrast Card Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html Defines a custom Web Component that uses Shadow DOM to apply styles to slotted content. Useful for creating reusable UI elements with encapsulated styling. ```javascript customElements.define('contrast-card', class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { const bg = this.getAttribute('bg-color') || '#fff'; const slottedColor = this.getAttribute('slotted-color') || 'inherit'; this.shadowRoot.innerHTML = `
`; } }); ``` -------------------------------- ### Run Axe-core Checks and Process Results Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/axe.html Listen for the 'sa11y-custom-checks' event, then run axe-core on specified elements. Configure axe-core rules to avoid duplication and process the results, formatting them for Sa11y. ```javascript document.addEventListener('sa11y-custom-checks', () => { axe.run(['main'], { // Turn off some of axe-core checks to prevent duplication of issues. rules: { 'color-contrast': { enabled: false }, 'image-alt': { enabled: false }, 'heading-order': { enabled: false }, 'image-redundant-alt': { enabled: false }, 'p-as-heading': { enabled: false }, }, elementRef: true, iframes: false, preload: false, resultTypes: ['violations'], }).then((results) => { results.violations.forEach((violation) => { violation.nodes.forEach((node) => { const selector = node.target[0]; const element = document.querySelector(selector); if (!element) return; // Format failure summary. const parts = node.failureSummary.split('\n'); const firstLine = parts[0]; const listItems = parts.slice(1).map(line => `
  • ${sa11y.sanitizeHTML(line.trim())}.
    • `).join(''); const formatted = `${firstLine}`; // HTML of element. const html = sa11y.sanitizeHTML(node.html); const htmlCode = sa11y.truncateString(html, 120); // Push results. sa11y.results.push({ element: node.element.tagName === 'HTML' ? undefined : node.element, type: 'error', content: `${violation.description}. 
    ${htmlCode}
    ${formatted} Learn more about this axe-core issue.`, inline: true, position: 'beforebegin', external: true, // IMPORTANT: Pass in 'external: true' }); }); }); const allDone = new CustomEvent('sa11y-resume'); document.dispatchEvent(allDone); }); }); ``` -------------------------------- ### CSS Color Definitions Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html Demonstrates various CSS color formats including RGB, RGBA, Hex, HSL, HSLA, Display P3, Lab, LCH, OKLab, OKLCH, HWB, named colors, and Rec. 2020. ```css /* RGB */ .rgb { color: rgb(51, 187, 255); background: rgb(255, 217, 0); } /* RGBA */ .rgba { color: rgba(255, 51, 224, 0.5); background: rgba(3, 249, 3, 1); } /* Hex */ .hex { color: #FF5733; background: #33bbff; } /* HSL */ .hsl { color: hsl(14, 100%, 60%); background: hsl(0, 100%, 24%); } /* HSLA */ .hsla { color: hsla(115, 100%, 60%, 0.5); background: hsl(115, 100%, 14%); } /* Display P3 */ .display-p3 { color: color(display-p3 1 0.3 0.2); } .display-p3-bg { color: color(display-p3 1 0.3 0.2); background: color(display-p3 0.9 0 0.7 / 1); } /* Lab */ .lab { color: lab(60% 50 20); } /* LCH */ .lch { color: lch(60% 80 40); } /* OKLab */ .oklab { color: oklab(60% 0.1 0.2); } /* OKLCH */ .oklch { color: oklch(60% 0.2 40); } /* HWB */ .hwb { color: hwb(14 0% 0%); } /* Named color */ .aliceblue { color: aliceblue; } .rebeccapurple { color: rebeccapurple; } /* Rec. 2020 */ .rec2020 { color: color(rec2020 0.9 0.4 0.2); } ``` -------------------------------- ### CSS Placeholder Styling with Color Spaces Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html Applies a specific color to the placeholder text of an input element using a color function from a display P3 color space. ```css #input-2::placeholder { color: color(display-p3 0.1098 0.6902 0.9647); } ``` -------------------------------- ### Initialize Sa11y for iFrame Content Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/editable-iframe.html Add internationalization strings and then initialize Sa11y to check accessibility within an iFrame. Ensure the iFrame content is loaded before initializing. ```javascript Sa11y.Lang.addI18n(Sa11yLangEn.strings); setTimeout(() => { const fixedRoots = document.querySelector('iframe').contentWindow.document.body.querySelector('main'); const sa11y = new Sa11y.Sa11y({ fixedRoots: [fixedRoots], ignoreAriaOnElements: 'h2', }); }, 100); ``` -------------------------------- ### PDF Link Warning Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html Links pointing to PDF documents should be clearly indicated to users, often with a warning or an icon, so they know a file download is imminent. ```html Download the [Admissions Handbook (PDF)](https://www.example.com?=test1.pdf) ``` ```html [Course Outline (PDF)](https://www.example.com?=test2.pdf) ``` ```html [Cheatsheet (PDF)](https://www.example.com?=test3.pdf) ``` -------------------------------- ### CSS Font Size and Weight Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html Applies specific font sizes and weights using CSS. ```css .size24 { font-size: 24px; } .weight700 { font-weight: 700; } ``` -------------------------------- ### Dynamically Update and Re-check Root Elements Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/traveling-root.html Demonstrates updating the active element and re-checking accessibility after DOM changes. This is useful for SPAs where content areas shift. Each `resetAll(false)` ensures a clean state before `checkAll()` is called. ```javascript setTimeout(() => { sa11y.resetAll(false); sa11y.checkAll(); }, 400); ``` ```javascript setTimeout(() => { document.querySelector('#first').classList.remove('sa11y-active'); document.querySelector('main').classList.add('sa11y-active'); sa11y.resetAll(false); sa11y.checkAll(); }, 900); ``` ```javascript setTimeout(() => { document.querySelector('main').classList.remove('sa11y-active'); document.querySelector('footer').classList.add('sa11y-active'); sa11y.resetAll(false); sa11y.checkAll(); }, 1900); ``` ```javascript setTimeout(() => { document.querySelector('footer').classList.remove('sa11y-active'); sa11y.resetAll(false); sa11y.checkAll('#all'); document.querySelector('#all').classList.add('sa11y-active'); }, 3000); ``` -------------------------------- ### Add RTL Language Support Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/rtl.html Use Sa11y.Lang.addI18n to load translation strings for RTL languages. Ensure the correct language object is imported and passed. ```javascript Sa11y.Lang.addI18n(Sa11yLangEnUS.strings); const sa11y = new Sa11y.Sa11y({}); ``` -------------------------------- ### CSS for Sub and Sup Elements Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html Sets font size and positioning for subscript and superscript elements. Ensures they maintain relative sizing and baseline alignment. ```css sub, sup { font-size: 75%; line-height: 1.5; position: relative; vertical-align: baseline; } ``` -------------------------------- ### Link Text: Stop Words Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html Avoid using generic phrases like 'click here' or directional symbols as link text. Provide descriptive text that explains the link's destination or purpose. ```html Click here to view our programs ``` ```html Next > ``` ```html < Previous ``` ```html ← Left ``` ```html « Previous ``` -------------------------------- ### Initialize Sa11y for Accessibility Checks Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/live-editable.html Initializes the Sa11y accessibility checker after a delay, targeting a specific editable region and configuring ignore rules for certain elements and containers. ```javascript Sa11y.Lang.addI18n(Sa11yLangEn.strings); setTimeout(() => { const sa11y = new Sa11y.Sa11y({ checkRoot: '#editable-region', ignoreAriaOnElements: 'h2', containerIgnore: '.tox-editor-header \*, .ed11y-ignore \*', // ignoreContentOutsideRoots: true, initialHeadingLevel: [ { selector: '#h4-root', previousHeading: 2, }, ], }); }, 100); ``` -------------------------------- ### Old Sa11y Bookmarklet Source: https://github.com/ryersondmp/sa11y/blob/master/src/bookmarklet/bookmarklet.html This is an older version of the Sa11y bookmarklet that directly injects an older script file. Use this if the newer version has compatibility issues. ```javascript javascript:(function(){ const inject = document.createElement("script"); inject.src = "https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@latest/bookmarklet/sa11y-en.js"; document.body.appendChild(inject); })(); ``` -------------------------------- ### Tables with Missing Headers Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html Tables lacking proper header cells (``) can be difficult to navigate for screen reader users. Ensure all tables have clear and semantic headers. ```html
    Event Name Time Location
    Keynote 9:00 AM Auditorium
    Lunch 12:00 PM Skyline Room
    Closing Dinner 5:00 PM Metropolitan Room
    ``` -------------------------------- ### CSS Pseudo-element for Content Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html CSS rule to add the text 'Before' after an element with the class 'asc'. ```css .asc:after { content: "Before"; } ``` -------------------------------- ### Sa11y Bookmarklet (DE) Source: https://github.com/ryersondmp/sa11y/blob/master/src/bookmarklet/bookmarklet.html This bookmarklet injects the German language version of the Sa11y script. It is intended for users who prefer the Sa11y interface in German. ```javascript javascript:(function(){ const inject = document.createElement("script"); inject.src = "https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@latest/bookmarklet/de.js"; document.body.appendChild(inject); })(); ``` -------------------------------- ### Empty Hyperlinks with Children Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html Empty hyperlinks with only decorative elements like icon fonts or SVGs should be flagged. Ensure they have accessible names if they are not purely decorative. ```html ``` ```html ``` ```html ``` ```html ``` -------------------------------- ### Link Text: Long URLs Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/index.html Displaying long URLs as link text can be cumbersome. Consider using descriptive link text instead. ```html https://sa11y.netlify.app/developers/custom-checks/ ``` ```html https://sa11y.netlify.app ``` -------------------------------- ### Sa11y Bookmarklet Template Source: https://github.com/ryersondmp/sa11y/blob/master/src/bookmarklet/bookmarklet.html This bookmarklet injects the Sa11y script into the current page. It includes logic to handle security policy violations and provides user feedback if Sa11y cannot be loaded or if the bookmarklet is being tested. ```javascript javascript:(function(){ const sa11yDialog = document.getElementById("sa11y-csp"); const sa11yScripts = document.querySelectorAll("script[src*='sa11y']"); const createAlert = (message) => { if (document.querySelector("#sa11y-csp")) return; const sa11yDialog = document.createElement("div"); sa11yDialog.id = "sa11y-csp"; sa11yDialog.role = "dialog"; sa11yDialog.textContent = message; sa11yDialog.style.position = "fixed"; sa11yDialog.style.display = "block"; sa11yDialog.style.bottom = "50px"; sa11yDialog.style.right = "50px"; sa11yDialog.style.margin = "auto 0"; sa11yDialog.style.width = "400px"; sa11yDialog.style.zIndex = "10000"; sa11yDialog.style.color = "#000000"; sa11yDialog.style.padding = "10px 80px 10px 10px"; sa11yDialog.style.backgroundColor = "#fff"; sa11yDialog.style.border = "5px solid #ff0000"; sa11yDialog.style.fontWeight = "bold"; sa11yDialog.style.fontSize = "17px"; sa11yDialog.style.fontFamily = "system-ui, sans-serif"; sa11yDialog.style.boxShadow = "0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15)"; sa11yDialog.style.borderRadius = "5px"; sa11yDialog.setAttribute("role", "alert"); document.body.appendChild(sa11yDialog); const closeButton = document.createElement("button"); closeButton.id = "csp-close"; closeButton.textContent = "Close"; closeButton.style.position = "absolute"; closeButton.style.top = "10px"; closeButton.style.color = "#000"; closeButton.style.right = "10px"; closeButton.style.padding = "5px 10px"; closeButton.style.backgroundColor = "#f6f6f6"; closeButton.style.border = "2px solid #949494"; closeButton.style.borderRadius = "5px"; closeButton.style.cursor = "pointer"; closeButton.style.fontSize = "15px"; sa11yDialog.appendChild(closeButton); closeButton.addEventListener("click", () => { sa11yDialog.remove(); }); const close = document.getElementById("csp-close"); setTimeout(() => close.focus(), 300); document.addEventListener("keyup", (event) => { if (event.key === 'Escape') { sa11yDialog.remove(); } }); }; const securityListener = () => { if (typeof sa11y === 'undefined') { createAlert('This website has a security policy that prevents Sa11y from working on its pages. Press Escape to dismiss this message.'); } }; const url = window.location.href; if (url.includes('bookmarklet') && url.includes('sa11y')) { createAlert('Drag the "Sa11y" button into your bookmarks bar. Then click the bookmark on any webpage.'); } else if (sa11yDialog == null && sa11yScripts.length === 0) { const inject = document.createElement("script"); inject.src = "https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@latest/bookmarklet/v2.js"; inject.onerror = () => { createAlert('This website has a security policy that prevents Sa11y from working on its pages. Press Escape to dismiss this message.'); }; document.body.appendChild(inject); } else { location.reload(); } document.addEventListener("securitypolicyviolation", securityListener); setTimeout(() => document.removeEventListener("securitypolicyviolation", securityListener), 100); })() ``` -------------------------------- ### JavaScript Custom Element: ElementDetails Source: https://github.com/ryersondmp/sa11y/blob/master/sandbox/dev.html Defines a custom HTML element 'element-details' that attaches a shadow DOM with cloned template content. ```javascript customElements.define( "element-details", class extends HTMLElement { constructor() { super(); const template = document.getElementById( "element-details-template" ).content; const shadowRoot = this.attachShadow({ mode: "open", }).appendChild(template.cloneNode(true)); } } ); ``` -------------------------------- ### CSS Input Styling Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html Styles an input element with specific text and placeholder colors. ```css #input-2 { color: #676767; } #input-2::placeholder { color: lightgrey } ``` -------------------------------- ### Create Custom Element with Shadow DOM Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/errors.html Defines a custom HTML element 'shadow-test' that utilizes Shadow DOM to encapsulate its internal structure and styling. This is useful for creating reusable, isolated UI components. ```javascript class shadowTest extends HTMLElement { constructor() { super(); } connectedCallback() { if (!this.initialized) { const shadow = this.attachShadow({ mode: 'open' }); let wrapper = document.createElement('div'); wrapper.setAttribute('class', 'wrapper'); wrapper.innerHTML = `

    Header skip in the shadow DOM

    ALL CAPS IN THE SHADOW DOM

    ` shadow.appendChild(wrapper); this.initialized = true; } } } customElements.define('shadow-test', shadowTest); document.querySelectorAll('.shadow-root').forEach((el) => { let testShadowElement = document.createElement('shadow-test'); el.append(testShadowElement); }) ``` -------------------------------- ### CSS Link Color Source: https://github.com/ryersondmp/sa11y/blob/master/docs/examples/contrast.html Defines a specific color for links. ```css .link-low { color: rgb(136, 199, 255); } ``` -------------------------------- ### Detect URL Changes with History API Source: https://github.com/ryersondmp/sa11y/blob/master/docs/demo/en/other.html This JavaScript code demonstrates detecting URL changes, simulating single-page application behavior. It appends a link after a delay and uses the History API to modify the URL, with a reset function. ```javascript window.addEventListener('load', (event) => { const myTimeout = setTimeout(test, 1000); const myTimeout2 = setTimeout(test2, 6000); function test() { document.getElementById("demo").innerHTML = `click here`; } function test2() { document.getElementById("demo2").innerHTML = `learn more`; } }); const btn = document.getElementById("btn-test"); btn.textContent = "click me to change URL"; btn.addEventListener("click", (e) => { window.history.replaceState('test', 'Home', 'index.html'); const reset = () => { window.history.replaceState('test1', 'Other', 'other.html') }; setTimeout(reset, 1000); }, false); ```