{"id":29377,"date":"2025-03-22T20:00:35","date_gmt":"2025-03-22T19:00:35","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/web-accessibility-in-angular\/"},"modified":"2025-05-30T16:19:59","modified_gmt":"2025-05-30T14:19:59","slug":"web-accessibility-in-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/","title":{"rendered":"Web Accessibility (A11y) in Angular \u2013 Introduction"},"content":{"rendered":"<div class=\"wp-post-series-box series-accessibility-in-angular-en wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-accessibility-in-angular-en69dec81d90581\" class=\"wp-post-series-box__toggle_checkbox\" type=\"checkbox\">\n\t\n\t<label\n\t\tclass=\"wp-post-series-box__label\"\n\t\t\t\t\tfor=\"collapsible-series-accessibility-in-angular-en69dec81d90581\"\n\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t<p class=\"wp-post-series-box__name wp-post-series-name\">\n\t\t\tThis is post 1 of 6 in the series <em>&ldquo;Accessibility in Angular&rdquo;<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t<div class=\"wp-post-series-box__posts\">\n\t\t\t<ol>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">Web Accessibility (A11y) in Angular \u2013 Introduction<\/span><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessibility-testing-tools\/\">Accessibility Testing Tools for Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessible-angular-routes\/\">Accessible Angular Routes<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\">ARIA roles and attributes in Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessible-angular-forms\/\">Building Accessible Forms with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-aria\/\">Why Angular ARIA in v21 is pretty neat<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p>This article will get you started into <strong>Accessibility in Angular<\/strong>, right on time for the <em>European Accessibility Act (EAA)<\/em> which will become effective on <em>June 28th 2025<\/em>, but more on that later. We'll cover the history of Web Accessibility, the <em>Web Content Accessibility Guidelines (WCAG)<\/em>, and of course the <em>EAA<\/em> itself. So make sure to follow it to be prepared for the EAA and to learn how to make your <em>Angular Apps<\/em> more accessible.<\/p>\n<p>The article is intended for developers, product owners, and anyone interested in making their <em>Angular Apps<\/em> more accessible. It's also the first edition kicking of our <strong>A11y blog series<\/strong>, which will cover topics such as:<\/p>\n<ul>\n<li><strong>Web Accessibility Introduction<\/strong> (this post): An overview of the history, statistics and regulatory framework of Web Accessibility.<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessibility-testing-tools\/\"><strong>Accessibility Testing Tools<\/strong><\/a>: My top picks for testing your Angular app for accessibility issues.<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessible-angular-routes\/\"><strong>Accessible Angular Routes<\/strong><\/a>: Quick wins to enhance your app's accessibility using the <em>Angular Router<\/em>.<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\"><strong>ARIA roles and attributes<\/strong><\/a>: Best practices for implementing WAI-ARIA roles and attributes in <em>Angular<\/em>.<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessible-angular-forms\/\"><strong>Accessible Angular Forms<\/strong><\/a>: Guidelines for building <em>Angular<\/em> forms that everyone can use.<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/?p=30390\" title=\" **Enhancing A11y with CDK**\"> <strong>Enhancing A11y with CDK<\/strong><\/a>: Exploring some elements of the <em>Angular CDK<\/em> a11y package.<\/li>\n<\/ul>\n<h2>Brief History of Web Accessibility<\/h2>\n<p>Tim Berners-Lee, the inventor of the World Wide Web, envisioned it as a platform for <strong>universal access<\/strong> regardless of <strong>physical or cognitive abilities<\/strong>.<br \/>\nThe term <strong>accessibility<\/strong> (short A11y, like I18n) refers to the design of products, devices, services, or environments for people with disabilities.<\/p>\n<h3>Disability Statistics<\/h3>\n<p>While estimates suggest that one in four individuals in the EU has some form of disability, finding exact data is challenging. Therefore, we focus on <strong>Germany<\/strong> using the <a href=\"https:\/\/www.gbe-bund.de\/gbe\/isgbe.information?p_uid=gast&amp;p_aid=97012225&amp;p_sprache=E&amp;p_thema_id=3637&amp;p_thema_id2=3600&amp;p_thema_id3=4800&amp;p_thema_id4=4800\">numbers of the <em>Statistische Bundesamt<\/em><\/a> (Federal Statistical Office of Germany) from 2023:<\/p>\n<ul>\n<li>7.86m people (9.4% of the pop.) in Germany have a <strong>severe disability<\/strong><\/li>\n<li>1.85m people (2.2% of the pop.) have problems with <strong>cerebral disorders<\/strong>, mental and psychological disabilities<\/li>\n<li>1.63m people (2.0% of the pop.) have problems with <strong>mobility impairments<\/strong><\/li>\n<li>329k people (0.4% of the pop.) are considered <strong>blind or have severe vision impairment<\/strong><\/li>\n<li>324k people (0.4% of the pop.) are considered <strong>deaf or have severe hearing impairment<\/strong><\/li>\n<\/ul>\n<p>Although this data is specific to Germany, they offer insight into the broader prevalence of disabilities across Europe.<br \/>\nHowever, I think it's important to note that good A11y practices <strong>benefit<\/strong> not only people with disabilities but <strong>everybody<\/strong>.<br \/>\nFor example, captions on videos help non-native speakers and those in noisy environments.<br \/>\nHere is an image by Microsoft showing the benefits of A11y for all kinds of <strong>circumstances<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/a11y-toolkit.webp\" alt=\"A11y for everyone\" \/><\/p>\n<h3>W3C and the Web Accessibility Initiative (WAI)<\/h3>\n<p>In 1997, the World Wide Web Consortium (W3C) launched the <strong>Web Accessibility Initiative<\/strong> (WAI) to systematically address accessibility issues.<br \/>\nThe WAI develops guidelines, called <strong>Web Content Accessibility Guidelines<\/strong> (WCAG) \u2013 version 1.0 released in 1999 \u2013 and continues to provide resources to make the web more accessible.<\/p>\n<h2>Web Content Accessibility Guidelines (WCAG)<\/h2>\n<p>The WCAG guidelines offer an internationally recognized framework for creating accessible web content and applications. The latest version, WCAG 2.2, was published in December 2023. Both WCAG 2.1 and 2.2 are widely adopted in regulatory standards across Europe and North America.<\/p>\n<p>For a deep dive, check out the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/\">WCAG 2.2 Quick Reference<\/a>. Here are some key points:<\/p>\n<h3>The Four Principles<\/h3>\n<p>The WCAG 2.2 guidelines are built and structured on four core principles that form the foundation for creating accessible digital content:<\/p>\n<ul>\n<li>\ud83d\udc40 <strong><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/#principle1\">Perceivable<\/a><\/strong>: Information must be presented in ways that users can perceive.<\/li>\n<li>\ud83d\udd79\ufe0f <strong><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/#principle2\">Operable<\/a><\/strong>: Interface components must be operable across various devices and inputs.<\/li>\n<li>\ud83e\udde0 <strong><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/#principle3\">Understandable<\/a><\/strong>: Content and navigation should be clear and easy to comprehend.<\/li>\n<li>\ud83d\udee1\ufe0f <strong><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/#principle4\">Robust<\/a><\/strong>: Content must work reliably with current and future technologies, including assistive devices.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/a11y-wcag-4-principles.png\" alt=\"The Four Principles\" \/><\/p>\n<p>Illustration <a href=\"https:\/\/periscope.com\/news\/covid-19-accessibility-and-e-comm\/\">source<\/a>.<\/p>\n<h3>Levels of Conformance<\/h3>\n<p>WCAG defines three levels of conformance:<\/p>\n<ul>\n<li>\ud83e\udd49 <strong>Level A:<\/strong> The minimum level. It addresses the <strong>essential A11y features<\/strong> required for basic interaction. While meeting Level A ensures that essential content is accessible, some barriers may still exist.<\/li>\n<li>\ud83e\udd48 <strong>Level AA:<\/strong> Building upon Level A, this level targets the <strong>most significant and common barriers<\/strong>. It enhances the UX by improving readability, navigation, and overall usability, and is widely regarded as the standard for many legal and organizational requirements (EAA!).<\/li>\n<li>\ud83e\udd47 <strong>Level AAA:<\/strong> Representing the highest standard of A11y, includes the most <strong>rigorous criteria<\/strong>. Although achieving AAA ensures maximum accessibility, it may not be feasible for all types of content and is typically applied to specialized cases where the highest level of A11y is required.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/a11y-levels.png\" alt=\"WCAG 3 levels of conformance\" \/><\/p>\n<p>So our recommendation (well and the lawmakers also have that opinion) is to aim for <strong>Level AA<\/strong> compliance, as it strikes a balance between A11y and practicality (aka affordability).<\/p>\n<h2>European Accessibility Act (EAA)<\/h2>\n<p>The European Accessibility Act (EAA) is a new (actually it's from 2019) <strong>EU directive<\/strong> that has to be fully implemented by <em>June 28th 2025<\/em>.<br \/>\nBased upon the mentioned WCAG 2.2, the EAA sets clear rules to ensure that web applications, websites, and other online services are accessible to everyone, including people with disabilities.<br \/>\nIn essence, digital tools must be designed to remove barriers, allowing all users to access information and services without difficulty.<\/p>\n<p>By focusing on web applications, the EAA pushes businesses and developers to create user-friendly, accessible online experiences.<br \/>\nThe law helps people with disabilities have the same opportunities and also encourages innovation in web design and development.<br \/>\nIn short, the EAA is a key step toward making the internet a more inclusive and in the end, more enjoyable space for all.<\/p>\n<p>The EAA source (hint: don't follow this link): <a href=\"https:\/\/eur-lex.europa.eu\/legal-content\/EN\/TXT\/?uri=CELEX%3A32019L0882\"><a href=\"https:\/\/eur-lex.europa.eu\/legal-content\/EN\/TXT\/?uri=CELEX%3A32019L0882\">https:\/\/eur-lex.europa.eu\/legal-content\/EN\/TXT\/?uri=CELEX%3A32019L0882<\/a><\/a><\/p>\n<h3>National Implementation of the EU Directive<\/h3>\n<p>While we won\u2019t cover every detail here, here are some examples of national implementations of the EAA. Interestingly, even though Switzerland is not an EU member, they were the first country implementing the EAA into national law \ud83d\ude00<\/p>\n<ul>\n<li>\ud83c\udde8\ud83c\udded <strong>Switzerland<\/strong>: Accessibility Standard 3.0 (eCH-0059) \u2013 <em>June 2020<\/em>\n<ul>\n<li>Official Website: <a href=\"https:\/\/www.ech.ch\/en\/standards\/ech-0059\/\">ech.ch\/en\/standards\/ech-0059\/<\/a> (German \/ French)<\/li>\n<\/ul>\n<\/li>\n<li>\ud83c\udde9\ud83c\uddea <strong>Germany<\/strong> Barrierefreiheitsst\u00e4rkungsgesetz (BFSG) \u2013 <em>July 2022<\/em>\n<ul>\n<li>Private website about the BFSG: <a href=\"https:\/\/bfsg-gesetz.de\/\">bfsg-gesetz.de<\/a> (German)<\/li>\n<\/ul>\n<\/li>\n<li>\ud83c\udde6\ud83c\uddf9 <strong>Austria<\/strong>: Barrierefreiheitsgesetz (BaFG) \u2013 <em>July 2023<\/em>\n<ul>\n<li>Austrian camber of commerce: <a href=\"https:\/\/www.wko.at\/ce-kennzeichnung-normen\/informationen-zum-barrierefreiheitsgesetz\">About the BaFG<\/a> (German)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Affected online services include<\/h3>\n<p>The EAA impacts a variety of digital services, including<\/p>\n<ul>\n<li>\ud83d\udcda <strong>E-books<\/strong>: Digital (e.g. academic) books that enable the circulation and consultation of a mostly textual and graphical intellectual work.<\/li>\n<li>\ud83d\uded2 <strong>E-commerce<\/strong>: Retail websites and mobile applications that facilitate online transactions are required to meet accessibility standards.<\/li>\n<li>\ud83c\udfe6 <strong>Online banking<\/strong>: Online and mobile banking platforms must be accessible, ensuring that financial services are usable for everyone.<\/li>\n<li>\ud83d\ude8c <strong>Public &amp; transportation services<\/strong>: In some cases, the Act also touches on digital services in areas like transport (e.g., online ticketing and check-in services) and audiovisual media services. However, note that public sector websites and mobile apps are governed by a different EU directive (the Web Accessibility Directive).<\/li>\n<\/ul>\n<p>Although the EAA covers many services, there are areas where its application may still be ambiguous or unclear. For example, the EAA does not explicitly mention <strong>Angular<\/strong> or <strong>JavaScript<\/strong> frameworks, but it does require that certain web applications and websites are accessible to everyone.<\/p>\n<p>Make sure to follow our <strong>A11y blog series<\/strong> to be prepared for the EAA and to learn how to make your <em>Angular Apps<\/em> more accessible.<\/p>\n<h2>Accessibility Workshop<\/h2>\n<p>For those looking to deepen their <em>Angular<\/em> expertise, we offer a range of workshops \u2013 both in English and German:<\/p>\n<ul>\n<li>\u267f <a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-accessibility-workshop\/\"><strong>Accessibility Workshop<\/strong><\/a><\/li>\n<li>\ud83d\udcc8 <a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-best-practices\/\"><strong>Best Practices Workshop<\/strong><\/a> (including accessibility related topics)<\/li>\n<li>\ud83d\ude80 <a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-performance-optimization-workshop\/\"><strong>Performance Workshop<\/strong><\/a><\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>In this post, we explored the fundamentals of web accessibility \u2014 from its history and key statistics to the regulatory landscape, including the upcoming European Accessibility Act.<br \/>\nWhether you\u2019re a developer, designer, or business owner, understanding and implementing accessibility best practices is essential for creating inclusive <em>Angular Apps<\/em> for everyone.<\/p>\n<p>This blog post was written by <a href=\"https:\/\/alex.thalhammer.name\">Alexander Thalhammer<\/a>. Follow me on <a href=\"https:\/\/at.linkedin.com\/in\/thalhammer\">Linkedin<\/a>, <a href=\"https:\/\/twitter.com\/LX_T\">X<\/a> or <a href=\"https:\/\/github.com\/L-X-T\">giThub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is post 1 of 6 in the series &ldquo;Accessibility in Angular&rdquo; Web Accessibility (A11y) in Angular \u2013 Introduction Accessibility Testing Tools for Angular Accessible Angular Routes ARIA roles and attributes in Angular Building Accessible Forms with Angular Why Angular ARIA in v21 is pretty neat This article will get you started into Accessibility in [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":29279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-29377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-accessibility-in-angular-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web Accessibility (A11y) in Angular \u2013 Introduction - ANGULARarchitects<\/title>\n<meta name=\"description\" content=\"This post will get you started into Accessibility in Angular, right on time for the European Accessibility Act on June 28th 2025.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Accessibility (A11y) in Angular \u2013 Introduction - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This post will get you started into Accessibility in Angular, right on time for the European Accessibility Act on June 28th 2025.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-22T19:00:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-30T14:19:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"885\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alexander Thalhammer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LX_T\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Thalhammer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\"},\"author\":{\"name\":\"Alexander Thalhammer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\"},\"headline\":\"Web Accessibility (A11y) in Angular \u2013 Introduction\",\"datePublished\":\"2025-03-22T19:00:35+00:00\",\"dateModified\":\"2025-05-30T14:19:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\"},\"wordCount\":1284,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\",\"name\":\"Web Accessibility (A11y) in Angular \u2013 Introduction - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg\",\"datePublished\":\"2025-03-22T19:00:35+00:00\",\"dateModified\":\"2025-05-30T14:19:59+00:00\",\"description\":\"This post will get you started into Accessibility in Angular, right on time for the European Accessibility Act on June 28th 2025.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg\",\"width\":1500,\"height\":885,\"caption\":\"Accessibility Hero\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Accessibility (A11y) in Angular \u2013 Introduction\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\",\"name\":\"Alexander Thalhammer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"caption\":\"Alexander Thalhammer\"},\"sameAs\":[\"https:\/\/x.com\/LX_T\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Accessibility (A11y) in Angular \u2013 Introduction - ANGULARarchitects","description":"This post will get you started into Accessibility in Angular, right on time for the European Accessibility Act on June 28th 2025.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Web Accessibility (A11y) in Angular \u2013 Introduction - ANGULARarchitects","og_description":"This post will get you started into Accessibility in Angular, right on time for the European Accessibility Act on June 28th 2025.","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/","og_site_name":"ANGULARarchitects","article_published_time":"2025-03-22T19:00:35+00:00","article_modified_time":"2025-05-30T14:19:59+00:00","og_image":[{"width":1500,"height":885,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg","type":"image\/jpeg"}],"author":"Alexander Thalhammer","twitter_card":"summary_large_image","twitter_creator":"@LX_T","twitter_misc":{"Written by":"Alexander Thalhammer","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/"},"author":{"name":"Alexander Thalhammer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45"},"headline":"Web Accessibility (A11y) in Angular \u2013 Introduction","datePublished":"2025-03-22T19:00:35+00:00","dateModified":"2025-05-30T14:19:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/"},"wordCount":1284,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/","name":"Web Accessibility (A11y) in Angular \u2013 Introduction - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg","datePublished":"2025-03-22T19:00:35+00:00","dateModified":"2025-05-30T14:19:59+00:00","description":"This post will get you started into Accessibility in Angular, right on time for the European Accessibility Act on June 28th 2025.","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/accessibility-hero.jpg","width":1500,"height":885,"caption":"Accessibility Hero"},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Web Accessibility (A11y) in Angular \u2013 Introduction"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45","name":"Alexander Thalhammer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","caption":"Alexander Thalhammer"},"sameAs":["https:\/\/x.com\/LX_T"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/29377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=29377"}],"version-history":[{"count":10,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/29377\/revisions"}],"predecessor-version":[{"id":30437,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/29377\/revisions\/30437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/29279"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=29377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=29377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=29377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}