Accessibility (a11y) in templates

Přejít na obsah v češtině

Accessibility (often abbreviated as A11y) means creating websites and apps that are usable by all people, including those with disabilities. For digital businesses, especially e-shops, accessibility is not only a matter of inclusivity and better user experience, but also a legal necessity.

Why Accessibility Matters

Reach a Broader Audience: By considering users with disabilities, businesses open their services to millions more potential customers.
Improve Usability: Enhancements made for accessibility often benefit all users.
Stay Legally Compliant: European laws mandate accessibility, especially for public and commercial services.

Benefits for E-commerce

Better SEO: Accessible sites tend to have better structure, boosting search visibility.
Higher Conversions: A better user experience leads to more completed purchases.
Legal Risk Prevention: Non-compliance can lead to lawsuits and fines.

Legal Framework & Key Standards

EU Directive 2016/2102: Requires accessibility of public sector websites and apps. Compliance can be demonstrated through EN 301 549 (based on WCAG 2.1).
EU Directive 2019/882 (EAA): Expands accessibility obligations to a wide range of digital products and services, including e-shops. Effective from June 28, 2025.
Czech Law 424/2023 Sb.: Implements the EAA into national legislation.
EN 301 549: Harmonized standard for ICT accessibility; integrates WCAG 2.1.
WCAG 2.1 / 2.2: International guidelines defining levels of accessibility (A, AA, AAA) based on four principles: Perceivable, Operable, Understandable, Robust.
EN 17161 & EN 17210: Focus on inclusive design processes and the accessibility of built environments.

Shared Responsibility on the Shoptet Platform

Achieving accessibility is a joint effort:

Shoptet (Platform Owner)

Shoptet is responsible for the core structure and functionality of the e-shop platform. This includes:

Ensuring semantic and accessible DOM structure
Providing default color schemes with sufficient contrast
Enabling robust keyboard navigation
Ensuring accessible forms with proper labeling and error messaging

Template Creators (Partners)

Template creators are responsible for:

Adhering to semantic HTML structure
Ensuring visual styles maintain contrast and clarity
Respecting keyboard operability and focus behavior
Avoiding accessibility regressions when overriding base styles or layout

Widget & Add-on Creators (JavaScript/CSS Injectors)

Add-ons cannot modify the core HTML but can dynamically inject JavaScript and CSS into the page. They must:

Ensure all dynamic widgets (e.g. popups, modals, carousels) meet WCAG 2.1 (AA) requirements
Support full keyboard navigation within widgets
Manage focus states, ARIA roles, and correct tab order
Provide documentation on accessibility behavior and expected interaction

Shop Owners

Shop owners manage the content and are responsible for:

Writing accessible text content (headings, alt texts, link descriptions)
Ensuring readability and structure
Adding accessible multimedia content (captions, transcripts, alt text)

Note: Full accessibility can’t be guaranteed without collaboration among all parties.

Requirements for Templates and Add-ons

All code deployed on the platform (templates or widgets) must align with WCAG 2.1 (AA level):

Semantic HTML
WAI-ARIA usage only when necessary
Keyboard Navigation and logical focus order
Color Contrast & Alt Text
Responsive Design
Accessible Forms
Predictable UI Behavior
Accessibility Documentation & Testing

Testing Accessibility

Effective testing requires a combination of automated and manual checks:

Automated Tools

Manual Testing

Tab through all interactive elements
Test with screen readers (NVDA, VoiceOver)
Check modals, dropdowns, and dynamic content

Device & Browser Testing

Responsive behavior across devices
Zoom functionality up to 200%
Compatibility with major browsers

Developer Recommendations

Start Early: Bake accessibility into your design process
Design Simply: Avoid overly complex UI elements
Stick to WCAG 2.1 (AA)
Collect Feedback from real users
Update Regularly
Train Your Team

Accessible Component Libraries

Resources

FAQ

What standard should I follow when building accessible templates or add-ons?

WCAG 2.1, level AA. For legal compliance (especially under the EAA), EN 301 549 should also be followed.

Do I always need to use ARIA roles?

Only when native HTML elements don’t provide the needed semantics. Prefer semantic HTML over ARIA when possible.

Is automated testing enough?

No. Automated tools are great for spotting basic issues, but manual testing (keyboard, screen reader) is essential.

Who is responsible for accessibility on Shoptet e-shops?

It’s a shared responsibility between Shoptet (platform), partners (templates and widgets), and shop owners (content).

What limitations do add-ons have in affecting accessibility?

Add-ons can only inject JavaScript or CSS. They cannot modify the core HTML structure, so they must ensure accessibility for any custom widget behavior or UI they introduce.

When will accessibility requirements be mandatory?

The European Accessibility Act becomes effective from June 28, 2025. Compliance is expected by then.

Přístupnost (často zkracovaná jako A11y) znamená vytváření webových stránek a aplikací, které jsou použitelné pro všechny lidi, včetně těch se zdravotním postižením. Pro digitální podniky, zejména e-shopy, není přístupnost jen otázkou inkluzivity a lepší uživatelské zkušenosti, ale také právní nutností.

Proč je přístupnost důležitá

Oslovení širšího publika: Zohledněním uživatelů se zdravotním postižením firmy zpřístupňují své služby milionům dalších potenciálních zákazníků.
Zlepšení použitelnosti: Vylepšení provedená kvůli přístupnosti často prospívají všem uživatelům.
Dodržení legislativy: Evropské zákony vyžadují přístupnost, zejména pro veřejné a komerční služby.

Přínosy pro e-commerce

Vyšší SEO: Přístupné weby mají často lepší strukturu, což zvyšuje viditelnost ve vyhledávačích.
Vyšší konverze: Lepší uživatelská zkušenost vede k více dokončeným nákupům.
Prevence právních rizik: Nedodržení přístupnosti může vést k žalobám a pokutám.

Právní rámec a klíčové standardy

Směrnice EU 2016/2102: Vyžaduje přístupnost webů a aplikací veřejného sektoru. Shoda může být prokázána pomocí EN 301 549 (založeno na WCAG 2.1).
Směrnice EU 2019/882 (EAA): Rozšiřuje povinnost přístupnosti na široké spektrum digitálních produktů a služeb, včetně e-shopů. Účinná od 28. června 2025.
Zákon ČR 424/2023 Sb.: Implementuje EAA do národní legislativy.
EN 301 549: Harmonizovaná norma pro přístupnost ICT; zahrnuje WCAG 2.1.
WCAG 2.1 / 2.2: Mezinárodní směrnice definující úrovně přístupnosti (A, AA, AAA) na základě čtyř principů: Vnímatelnost, Ovládatelnost, Srozumitelnost, Robustnost.
EN 17161 & EN 17210: Zaměřují se na procesy inkluzivního designu a přístupnost fyzického prostředí.

Společná odpovědnost na platformě Shoptet

Dosažení přístupnosti je společným úsilím:

Shoptet (vlastník platformy)

Shoptet odpovídá za základní strukturu a funkčnost platformy e-shopu. To zahrnuje:

Zajištění sémantické a přístupné struktury DOM
Poskytování výchozích barevných schémat s dostatečným kontrastem
Umožnění robustní navigace pomocí klávesnice
Zajištění přístupných formulářů se správným označením a hlášením chyb

Tvůrci šablon (partneři)

Tvůrci šablon odpovídají za:

Dodržování sémantické struktury HTML
Zajištění dostatečného kontrastu a čitelnosti vizuálních prvků
Respektování ovládání přes klávesnici a správného chování fokusu
Zabránění regresi přístupnosti při úpravách stylů nebo rozložení

Tvůrci widgetů a doplňků (JavaScript/CSS)

Doplňky nemohou měnit jádrovou HTML strukturu, ale mohou dynamicky vkládat JavaScript a CSS. Musí:

Zajistit, že všechny dynamické prvky (např. popupy, modály, karusely) splňují požadavky WCAG 2.1 (úroveň AA)
Podporovat úplnou navigaci pomocí klávesnice
Spravovat fokus, role ARIA a správné pořadí tabulátoru
Poskytnout dokumentaci popisující chování z hlediska přístupnosti a očekávanou interakci

Majitelé obchodů

Majitelé obchodů spravují obsah a jsou odpovědní za:

Psání přístupného textového obsahu (nadpisy, alt texty, popisy odkazů)
Zajištění čitelnosti a struktury
Přidávání přístupného multimediálního obsahu (titulky, přepisy, alt text)

Poznámka: Plné zajištění přístupnosti je možné pouze spoluprací všech stran.

Požadavky na šablony a doplňky

Veškerý kód nasazený na platformě (šablony nebo widgety) musí být v souladu s WCAG 2.1 (úroveň AA):

Sémantické HTML
Používání WAI-ARIA pouze v nutných případech
Navigace klávesnicí a logické pořadí fokusu
Kontrast barev a alternativní texty
Responzivní design
Přístupné formuláře
Předvídatelné chování rozhraní
Dokumentace a testování přístupnosti

Testování přístupnosti

Efektivní testování vyžaduje kombinaci automatizovaných a manuálních kontrol:

Automatizované nástroje

Manuální testování

Procházení všech interaktivních prvků pomocí klávesy Tab
Testování s čtečkami obrazovky (NVDA, VoiceOver)
Kontrola modálů, rozbalovacích nabídek a dynamického obsahu

Testování na zařízeních a prohlížečích

Responzivní chování napříč zařízeními
Funkčnost přiblížení až na 200 %
Kompatibilita s hlavními prohlížeči

Doporučení pro vývojáře

Začněte včas: Zahrňte přístupnost už do návrhu
Navrhujte jednoduše: Vyhněte se zbytečně složitým prvkům rozhraní
Držte se WCAG 2.1 (AA)
Získávejte zpětnou vazbu od reálných uživatelů
Pravidelně aktualizujte
Školte svůj tým

Knihovny přístupných komponent

Zdroje

FAQ

Jaký standard mám dodržovat při tvorbě přístupných šablon nebo doplňků?

WCAG 2.1, úroveň AA. Pro právní soulad (zejména dle EAA) by se měl dodržovat i EN 301 549.

Musím vždy používat ARIA role?

Pouze pokud nativní HTML prvek neposkytuje potřebnou sémantiku. Vždy upřednostněte sémantické HTML před ARIA.

Stačí automatizované testování?

Ne. Automatické nástroje pomohou odhalit základní problémy, ale manuální testování (klávesnice, čtečka obrazovky) je nezbytné.

Kdo odpovídá za přístupnost v e-shopech Shoptet?

Je to sdílená odpovědnost mezi platformou Shoptet, partnery (šablony a widgety) a majiteli obchodů (obsah).

Jaká omezení mají doplňky ohledně přístupnosti?

Doplňky mohou pouze vkládat JavaScript nebo CSS. Nemohou měnit HTML strukturu, a proto musí zajistit přístupnost u všech vlastních komponent, které přidávají.

Od kdy bude přístupnost povinná?

Evropský zákon o přístupnosti (EAA) vstupuje v platnost 28. června 2025. Do té doby se očekává plný soulad.