{"id":6,"date":"2026-06-05T19:40:06","date_gmt":"2026-06-05T19:40:06","guid":{"rendered":"https:\/\/demo-wcag-wordpress.doubledev.org\/?page_id=6"},"modified":"2026-06-05T19:40:06","modified_gmt":"2026-06-05T19:40:06","slug":"wcag-retail-accessibility-demo","status":"publish","type":"page","link":"https:\/\/demo-wcag-wordpress.doubledev.org\/?page_id=6","title":{"rendered":"WCAG Retail Accessibility Demo"},"content":{"rendered":"    <div class='wrd-store-wrap'>\n        <header class='wrd-hero wrd-fail'\n                data-wcag='1.4.3 Contrast Minimum'\n                data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html'\n                data-scenario='Low contrast hero text is difficult to read.'>\n            <p class='wrd-kicker'>Big Weekend Sale<\/p>\n            <h1>DemoMart Online Retail Store<\/h1>\n            <p>Intentional WCAG 2.2 failures are built into this page for training and demo purposes.<\/p>\n            <a class='wrd-shop-link wrd-fail'\n               href='#products'\n               data-wcag='2.4.4 Link Purpose In Context'\n               data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/link-purpose-in-context.html'\n               data-scenario='The link text does not describe the destination.'>Click here<\/a>\n        <\/header>\n\n        <nav class='wrd-nav' aria-label='Retail demo navigation'>\n            <a href='#products'>Products<\/a>\n            <a href='#checkout'>Checkout<\/a>\n            <a href='#support'>Support<\/a>\n        <\/nav>\n\n        <main>\n            <section id='products' class='wrd-section'>\n                <h2>Featured Products<\/h2>\n\n                <h4 class='wrd-fail'\n                    data-wcag='2.4.6 Headings and Labels'\n                    data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/headings-and-labels.html'\n                    data-scenario='Heading jumps from H2 to H4 and makes page structure unclear.'>Popular Deals<\/h4>\n\n                <div class='wrd-grid'>\n                    <article class='wrd-card'>\n                        <img class='wrd-fail'\n                             src='https:\/\/dummyimage.com\/360x220\/dedede\/222222.png&text=Running+Shoes'\n                             data-wcag='1.1.1 Non-text Content'\n                             data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/non-text-content.html'\n                             data-scenario='Product image is missing alt text.'>\n                        <h3>Running Shoes<\/h3>\n                        <p class='wrd-price'>$79.99<\/p>\n                        <button class='wrd-small-target wrd-fail'\n                                data-wcag='2.5.8 Target Size Minimum'\n                                data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html'\n                                data-scenario='Clickable add-to-cart target is too small.'>+<\/button>\n                    <\/article>\n\n                    <article class='wrd-card'>\n                        <svg class='wrd-text-image wrd-fail'\n                             viewBox='0 0 320 100'\n                             data-wcag='1.4.5 Images of Text'\n                             data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/images-of-text.html'\n                             data-scenario='Sale information is rendered as an image of text.'>\n                            <rect width='320' height='100'><\/rect>\n                            <text x='20' y='58'>50% OFF TODAY ONLY<\/text>\n                        <\/svg>\n                        <h3>Luxury Watch<\/h3>\n                        <p class='wrd-color-only wrd-fail'\n                           data-wcag='1.4.1 Use of Color'\n                           data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/use-of-color.html'\n                           data-scenario='Sale status is conveyed only by color.'>Sale items are shown in red.<\/p>\n                        <button>Add to Cart<\/button>\n                    <\/article>\n\n                    <article class='wrd-card'>\n                        <a class='wrd-icon-link wrd-fail'\n                           href='#wishlist'\n                           data-wcag='4.1.2 Name, Role, Value'\n                           data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/name-role-value.html'\n                           data-scenario='Icon-only link has no accessible name.'>\n                            <span aria-hidden='true'>\u2661<\/span>\n                        <\/a>\n                        <h3>Wireless Headphones<\/h3>\n                        <p class='wrd-price'>$129.00<\/p>\n                        <div class='wrd-fake-button wrd-fail'\n                             onclick='alert(\"Added to cart\")'\n                             data-wcag='2.1.1 Keyboard'\n                             data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/keyboard.html'\n                             data-scenario='Clickable div cannot be used reliably with keyboard only.'>Add to Cart<\/div>\n                    <\/article>\n                <\/div>\n            <\/section>\n\n            <section id='checkout' class='wrd-section wrd-checkout'>\n                <h2>Checkout<\/h2>\n\n                <form action='#' method='post'>\n                    <div class='wrd-field wrd-fail'\n                         data-wcag='3.3.2 Labels or Instructions'\n                         data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/labels-or-instructions.html'\n                         data-scenario='Email field uses placeholder only and has no visible label.'>\n                        <input type='email' placeholder='Email address'>\n                    <\/div>\n\n                    <div class='wrd-field wrd-fail'\n                         data-wcag='2.5.3 Label in Name'\n                         data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/label-in-name.html'\n                         data-scenario='Visible text says Search Products, but accessible name says Find Store Items.'>\n                        <button aria-label='Find Store Items'>Search Products<\/button>\n                    <\/div>\n\n                    <div class='wrd-field wrd-fail'\n                         data-wcag='1.3.1 Info and Relationships'\n                         data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/info-and-relationships.html'\n                         data-scenario='Required field is indicated visually but not programmatically.'>\n                        <label for='wrd-card-number'>Card Number <span class='wrd-red'>*<\/span><\/label>\n                        <input id='wrd-card-number' type='text'>\n                    <\/div>\n\n                    <div class='wrd-field wrd-fail'\n                         data-wcag='3.3.3 Error Suggestion'\n                         data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/error-suggestion.html'\n                         data-scenario='Error message does not explain how to fix the problem.'>\n                        <label for='wrd-coupon'>Coupon Code<\/label>\n                        <input id='wrd-coupon' type='text' value='BADCODE'>\n                        <p class='wrd-error'>Invalid.<\/p>\n                    <\/div>\n\n                    <div class='wrd-field wrd-fail'\n                         data-wcag='3.2.2 On Input'\n                         data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/on-input.html'\n                         data-scenario='Changing the shipping select unexpectedly submits\/changes context.'>\n                        <label for='wrd-shipping'>Shipping Method<\/label>\n                        <select id='wrd-shipping' onchange='document.body.classList.toggle(\"wrd-surprise\")'>\n                            <option>Ground<\/option>\n                            <option>Express<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <button class='wrd-fail wrd-no-focus'\n                            data-wcag='2.4.7 Focus Visible'\n                            data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/focus-visible.html'\n                            data-scenario='Keyboard focus indicator is intentionally removed.'>Place Order<\/button>\n                <\/form>\n            <\/section>\n\n            <section id='support' class='wrd-section'>\n                <h2>Customer Support<\/h2>\n\n                <table class='wrd-data-table wrd-fail'\n                       data-wcag='1.3.1 Info and Relationships'\n                       data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/info-and-relationships.html'\n                       data-scenario='Data table does not use TH header cells.'>\n                    <tr>\n                        <td>Department<\/td>\n                        <td>Hours<\/td>\n                        <td>Phone<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Returns<\/td>\n                        <td>9 AM - 5 PM<\/td>\n                        <td>555-1000<\/td>\n                    <\/tr>\n                <\/table>\n\n                <div class='wrd-fail'\n                     tabindex='5'\n                     data-wcag='2.4.3 Focus Order'\n                     data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/focus-order.html'\n                     data-scenario='Positive tabindex creates confusing keyboard focus order.'>\n                    Special keyboard trap-prone promo area.\n                <\/div>\n\n                <button class='wrd-fail'\n                        id='wrd-duplicate-id'\n                        data-wcag='4.1.1 Parsing'\n                        data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/parsing.html'\n                        data-scenario='Duplicate IDs can break assistive technology relationships.'>Track Order<\/button>\n                <button id='wrd-duplicate-id'>Track Return<\/button>\n\n                <a class='wrd-fail'\n                   href='#hidden-offer'\n                   aria-hidden='true'\n                   data-wcag='4.1.2 Name, Role, Value'\n                   data-link='https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/name-role-value.html'\n                   data-scenario='Focusable link is hidden from assistive technology.'>Hidden assistive tech link<\/a>\n            <\/section>\n        <\/main>\n\n        <div class='wrd-actions'>\n            <button type='button' id='wrd-show-fails'>Show me all non compliant html elements.<\/button>\n            <button type='button' id='wrd-audit'>Audit<\/button>\n            <button type='button' id='wrd-fines'>Fines<\/button>\n        <\/div>\n\n        <div id='wrd-fines-panel' class='wrd-modal' hidden>\n            <div class='wrd-modal-box'>\n                <button type='button' id='wrd-close-fines' class='wrd-close'>Close<\/button>\n                <h2>Possible ADA Title III Fines Demo<\/h2>\n                <p>This is a demo estimate, not legal advice.<\/p>\n                <table>\n                    <tr>\n                        <th>Scenario<\/th>\n                        <th>Possible civil penalty<\/th>\n                    <\/tr>\n                    <tr>\n                        <td>First violation<\/td>\n                        <td>Up to $75,000, subject to applicable inflation-adjusted limits under 28 CFR 85.5.<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Subsequent violation<\/td>\n                        <td>Up to $150,000, subject to applicable inflation-adjusted limits under 28 CFR 85.5.<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Other exposure<\/td>\n                        <td>Remediation costs, attorney fees, settlement costs, monitoring, and court orders.<\/td>\n                    <\/tr>\n                <\/table>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo-wcag-wordpress.doubledev.org\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo-wcag-wordpress.doubledev.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo-wcag-wordpress.doubledev.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo-wcag-wordpress.doubledev.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo-wcag-wordpress.doubledev.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":0,"href":"https:\/\/demo-wcag-wordpress.doubledev.org\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo-wcag-wordpress.doubledev.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}