[{"data":1,"prerenderedAt":45},["ShallowReactive",2],{"\u002Fapi\u002Fpage\u002Fskills\u002Fsumi-shopify\u002Fshopify-performance-a11y":3,"PageBody_rig6oWsAyIB5MjWHrV4C3AlTL3UAaFk60uC3HmH6U":37},{"title":4,"description":5,"plugin":6,"kind":7,"references":8,"source":9,"heading":10,"toc":11,"locale":36},"shopify-performance-a11y","Core Web Vitals and WCAG 2.2 AA for Shopify themes - LCP image priority and preload, lazy loading by section position, responsive sizes, font loading with font_face, CSS\u002FJS loading, app script and app block bloat, CLS from images, app blocks and banners, INP on variant and cart interactions; e-commerce accessibility patterns for product cards, sale prices, variant pickers, galleries, filters, cart drawer dialogs, quantity steppers, and announcements. Use when building or auditing layout\u002Ftheme.liquid, header, hero, product, collection, cart or search sections, snippets\u002F*card*.liquid, snippets\u002F*price*.liquid, facets, or when Lighthouse, CrUX, the Shopify web performance report, axe or a manual a11y review flags issues.","sumi-shopify","skill",1,"plugins\u002Fsumi-shopify\u002Fskills\u002Fshopify-performance-a11y\u002FSKILL.md","Shopify Performance and Accessibility",[12,15,18,21,24,27,30,33],{"id":13,"text":14},"lcp","LCP",{"id":16,"text":17},"cls","CLS",{"id":19,"text":20},"fonts-and-css","Fonts and CSS",{"id":22,"text":23},"javascript-and-apps","JavaScript and apps",{"id":25,"text":26},"accessibility-patterns-summary","Accessibility patterns (summary)",{"id":28,"text":29},"ai-slop-tells","AI slop tells",{"id":31,"text":32},"done-checklist","Done checklist",{"id":34,"text":35},"e-commerce-accessibility-patterns-wcag-2-2-aa","E-commerce Accessibility Patterns (WCAG 2.2 AA)","en",["Island",38],{"key":39,"result":40},"PageBody_rig6oWsAyIB5MjWHrV4C3AlTL3UAaFk60uC3HmH6U",{"head":41},{"style":42},[43],{"innerHTML":44},".prose[data-v-1545ba8e]{max-width:var(--measure-prose)}.prose[data-v-1545ba8e] h2{margin-block:var(--space-8) var(--space-4)}.prose[data-v-1545ba8e] h3{margin-block:var(--space-6) var(--space-3)}.prose[data-v-1545ba8e] h4{margin-block:var(--space-5) var(--space-3);font-family:var(--font-mono);font-variation-settings:\"wdth\" var(--mono-width-label);font-size:var(--text-small);text-transform:uppercase;letter-spacing:var(--text-label-ls);color:var(--color-text-muted)}.prose[data-v-1545ba8e] ol,.prose[data-v-1545ba8e] p,.prose[data-v-1545ba8e] ul{margin-block-end:var(--space-4)}.prose[data-v-1545ba8e] li{margin-block-end:var(--space-2)}.prose[data-v-1545ba8e] ol,.prose[data-v-1545ba8e] ul{padding-inline-start:var(--space-5)}.prose[data-v-1545ba8e] li:has(.task-box){list-style:none}.prose[data-v-1545ba8e] .task-box{width:.8em;height:.8em;border:var(--border-width) solid var(--color-border);vertical-align:baseline;margin-inline-end:var(--space-2);display:inline-block}.prose[data-v-1545ba8e] code{padding:1px var(--space-1);background:var(--color-surface-sunk);border:var(--border-width) solid var(--color-border)}.prose[data-v-1545ba8e] pre{padding:var(--space-4);background:var(--color-surface-sunk);border:var(--border-width) solid var(--color-border);margin-block-end:var(--space-5);overflow-x:auto}.prose[data-v-1545ba8e] pre code{background:0 0;border:0;padding:0}.prose[data-v-1545ba8e] .table-scroll{max-width:none;margin-block-end:var(--space-5);overflow-x:auto}.prose[data-v-1545ba8e] table{border-collapse:collapse;width:100%;min-width:32rem;font-size:var(--text-small);line-height:var(--text-small-lh)}.prose[data-v-1545ba8e] td,.prose[data-v-1545ba8e] th{padding:var(--space-3) var(--space-4);text-align:start;vertical-align:top;border-block-start:var(--divider-width) solid var(--color-divider)}.prose[data-v-1545ba8e] th{font-family:var(--font-mono);font-variation-settings:\"wdth\" var(--mono-width-label);font-size:var(--text-label);letter-spacing:var(--text-label-ls);text-transform:uppercase;color:var(--color-text-muted);border-block-end:var(--border-width) solid var(--color-border)}.prose[data-v-1545ba8e] blockquote{margin:0 0 var(--space-5);border-inline-start:var(--seam-width) solid var(--color-seam);color:var(--color-text-muted);padding-inline-start:var(--space-4)}.prose[data-v-1545ba8e] hr{margin-block:var(--space-7);border:0;border-block-start:var(--divider-width) solid var(--color-divider)}.prose[data-v-1545ba8e] pre,.prose[data-v-1545ba8e] table{max-width:none}",1791464219238]