Accessible ARIA Labels for Indian E‑commerce + Alt Text for Complex Charts, Maps & EMI Tables

WAVE and Lighthouse scream about missing names the moment Indian retail sites ship festival carousels, EMI calculators, and pin-code coverage maps. Fixing the errors improves both accessibility and automated QA noise. Use the patterns below when localising for INR flows.

ARIA labels for sort, filter, and promo chips

• append state: "Sort by price: Popularity, currently selected"
• Provide verbose labels for “COD available” icons (do not rely on colour alone)
• Expose flash-sale timers with aria-live="polite" only when users opt in

EMI and offers tables

Data tables need <th scope="col"> headers with plain language (“Monthly EMI” not only “EMI”). If designs use cards instead of tables, maintain a visually hidden table or definition list for assistive tech.

Complex charts (gold rates, stock widgets)

Provide a downloadable CSV or textual summary listing the same data points surfaced visually. Title the chart, reference units (INR, grams), and disclose time zone for intraday feeds.

Maps: delivery radius & store locators

Offer search by pin code with textual results (“Available in 110001 — ETA 2 days”). For map pins, expose a list view mirroring markers. Announce dynamic updates when users change filters.

Alt text for lifestyle imagery

Marketing photos still need concise alt when they convey merchandising context (“Cotton kurta with maroon embroidery”). Decorative festival backgrounds should use alt="" and CSS backgrounds instead of meaningful <img> without alternative text.

Stack references

Combine this guide with React contrast + keyboard traps and statutory context in RPwD / GIGW checklist.