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.