Ready or not, the EAA is here
Strategies to future-proof UX that meets EU legal standardsThe EAA requires digital accessibility to accommodate all users with different needsAccessibility for digital products is no longer optional — it’s a necessity with the upcoming enforcement of the European Accessibility Act .Until now, European standards such as EN 301 549 have required only the public sector to comply with the Web Content Accessibility Guidelines. So only government agencies or businesses that sell information and communication technologyto government agencies have needed to meet accessibility specifications.As of June 2025, this will be expanded into the private sector in the European Union — including e-commerce, restaurants, and banking services.Are you thinking any of the following?Does the EAA apply to me or the business I work for?What is the WCAG and what does it require?How much work is needed make my UX designs compliant?I get it — it’s time-consuming to understand the grueling details of a legislative act, but it’s vital to realize how it directly impacts you and your business.What is the European Accessibility Act ?The EAA is a “directive” that aims to improve accessibility in products and services in EU member states. This ensures people with disabilities can successfully access any digital product — ranging from writing an email on a laptop to checking-in at the doctor’s office with an iPad.The directive was enacted in 2019, but will become enforced on June 28, 2025 for any new products.The EAA is a EU directive that follows EN 301 549 and WCAG 2.1 requirementsEAA requirementsTo comply with the EAA, you need to follow the European “standard,” EN 301 549. EN 301 549 includes many clauses covering accessibility for a broad range of ICT — from native mobile applications to electronic hardware.The clauses circling the web and software incorporate the Web Content Accessibility Guidelines2.1, Level AA.Who does the EAA apply to?The EAA impacts all 27 member states of the EU. This includes countries such as France, Spain, and Sweden.Not only do EU member states need to comply, but any company that does business with the member states — even if the company isn’t based in the EU. For example, if a person in Italy accesses an e-commerce website based in the United States, the website must comply with the EAA.What does WCAG require?WCAG offers internationally recognized standards for digital accessibility. These standards are developed by the World Wide Web Consortiumand are constantly evolving to account for changes in HTML and assistive technologies.The EAA and EN 301 549 require conformance to WCAG 2.1, Level AA standards. But what does that mean exactly?WCAG versionsNew versions of WCAG are periodically released to accommodate to the internet’s evolution. As methods and technologies are deprecated and replaced, it’s important to update standards to ensure accessibility is met.The most current version of WCAG is 2.2, which was released in October 2023. Though the EAA and EN 301 549 currently require WCAG 2.1, it’s expected they will be updated to include the WCAG 2.2 version.WCAG has released 3 versions between 2008 and 2023WCAG conformance “levels”WCAG includes 3 levels of conformance: Level A, Level AA, and Level AAA. Level A offers guidelines for the most basic accessibility considerations, while Level AAA reaches the widest degree of accessibility.Each success criteriain WCAG has a conformance level. For instance, SC 1.1.1is Level A, while SC 2.4.12is Level AAA.To conform to a certain WCAG level, the digital product must also conform to the level below it. So if your website is Level AA, it passes both Level A and AA success criteria.WCAG’s “levels” refer to the degree of accessibility your digital product complies withDesign strategies for EAA complianceWCAG standards are dense, and it takes time to incorporate them into your UX design process. But there are strategies you can start using now to meet most of the requirements to comply with the EAA.1. Color contrast ratioDesigners must create color palettes that support a high color contrast ratio for content like text or UI components. You can check color contrast ratios with tools such as WebAIM’s Contrast Checker.Small textmust have a color contrast ratio of 4.5:1 with its backgroundLarge textmust have a contrast ratio of 3:1 with its backgroundUI components, like buttons, should have a color contrast ratio of 3:1 with its backgroundColor should not be used alone to convey meaning; semantic color also needs a text label or appropriate iconFor more details, visit WCAG 1.4-Distinguishable.Don’t use color alone to convey meaning, such as errors or warnings on text fields2. Keyboard functionalitySome users can’t use a mouse or their laptop’s trackpad. Users who are blind or have limited hand mobility use their keyboard or other assistive technologies, and must be able to operate the product with their preferred input method.All user actions are doable from a keyboard, except for freehand movementsKeyboard users must not encounter a keyboard trapKeyboard users have a way to turn off or remap keyboard shortcuts made up of single-character keysFor more details, visit WCAG 2.1-Keyboard accessible.Example of keyboard tab/ focus order for a restaurant’s website3. Multimedia featuresAll users, whether they are blind, hard-of-hearing, or have a learning disability, must be able to access the information any multimedia provides.Provide captions for any pre-recorded audio that is time-basedProvide an audio description for pre-recorded videosProvide captions for all live video contentFor more details, visit WCAG 1.2-Time based media.Example of a live news broadcast with closed captioning4. Headings and labelsWhen headings and labels aren’t used properly or aren’t used at all, users have a hard time processing content and completing tasks — from reading an article to filling out a form.Provide clear headings and labels that describe the page content or input fieldEnsure labels and headings that visually convey structure and relationships are programmatically associated to their contentEnsure individual cells in a data tables are programmatically associated to their parent column or row headerFor more details, visit WCAG 1.3-Adaptable.Ensure the heading tags properly convey the web-page’s content structure5. Support screen readersMany people use screen readers, such as NVDA or JAWS, so they can use any website or software. Ensuring digital products are compatible with screen readers seem challenging, but there are ways to proactively support screen readers.Use semantic HTML elements, like <button>, and avoid non-semantic elements, like <div> and <span>, that don’t contain built-in meaningProvide a text alternative for meaningful images using the alt attributeEnsure all interactive elements have a corresponding name, role, and valueEnsure the focus indicator is always visible so the user knows where they are in the interfaceFor more details, visit WCAG 4.1-Compatible.Tools to use for an accessible design processTo help meet WCAG 2.1, Level AA standards, there are tools you can incorporate in your UX process to create accessible designs and hand them over to your development team.1. WAVEWAVE is a free accessibility evaluation tool developed by WebAIM. WAVE offers multiple browser extensions for Chrome, Firefox, and Edge. After adding the extension to your preferred browser, all you have to do is visit your website and activate WAVE to get an automated evaluation.Note: Automated tools only find about a third of accessibility issues, so a manual evaluation is still needed after using WAVE.WAVE is a free accessibility evaluation tool that works on any live websitePros of WAVE:Offers multiple extensions for your preferred browserAllows you to easily see the tab order and structure of a web-pageProvides recommendations on how to correct accessibility issuesCons of WAVE:The icons representing potential accessibility issues are overwhelming and difficult to understand which icon goes to which element2. StarkStark offers a plug-in for both Figma and Sketch that designers can use to thoroughly check and annotate UX designs for developer hand-off. This ensures that developers know the specifics for alt text, tab order, and heading levels.Stark’s plug-in for Figma allows you to annotate designs and check color contrast ratiosPros of Stark:Offers a range of features to check designs for contrast and typography issues, as well as annotate for developer hand-offProvides color suggestions when the color contrast ratio doesn’t meet WCAG, Level AA requirementsProvides a vision simulator to test designs against different types of color blindnessCons of Stark:It can be difficult to select the correct layer when annotating designsSome advanced features in the plug-in are paid to use3. JAWSJAWSis one of the most commonly used screen readers. JAWS allows users with limited vision to access and use digital products, and is beneficial to test your digital product with to ensure it’s compatible with screen readers.Note: JAWS’ free version only allows you to use it for 45 minutes before restarting, and is best used on Chrome or Firefox browsers.JAWS screen reader running on a Mac through the Parallels virtual machinePros of JAWS:Ability to highly customize the JAWS settings, such as the voice synthesizerProvides output both through audio and braille devicesFreedom Scientific offers trainings to learn how to use JAWSCons of JAWS:Includes a steep learning curve compared to other screen readersOnly accessible through a Windows operating systemHas a limited free version–must pay to access the full versionConclusionReady or note, the European Accessibility Actwill be enforced on June 28, 2025. So any companythat provides ICT or operates digital products that an EU citizen can use is subject to the EAA.Any new product introduced to the market must comply with WCAG 2.1, Level AA to meet the requirements of the EAA and EN 301 549.Web accessibility is no longer optional — it’s essential. Though building inclusive products is the right thing to do, you may be subject to legal action if you avoid it. Is your digital product ready?SourcesWCAG by Level Access, “EN 301 549 Conformance: An Overview”Accessibility Works, “European Accessibility Act Compliance Requirements: The Next GDPR”WCAG by Level Access, “The European Accessibility Act: Technical Aspects of Compliance”European Union, “Types of legislation”W3C Web Accessibility Initiative, “WCAG 2 Overview”W3C, “WCAG 2.1 Guidelines”Ready or not, the EAA is here was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
#ready #not #eaa #here
Ready or not, the EAA is here
Strategies to future-proof UX that meets EU legal standardsThe EAA requires digital accessibility to accommodate all users with different needsAccessibility for digital products is no longer optional — it’s a necessity with the upcoming enforcement of the European Accessibility Act .Until now, European standards such as EN 301 549 have required only the public sector to comply with the Web Content Accessibility Guidelines. So only government agencies or businesses that sell information and communication technologyto government agencies have needed to meet accessibility specifications.As of June 2025, this will be expanded into the private sector in the European Union — including e-commerce, restaurants, and banking services.Are you thinking any of the following?Does the EAA apply to me or the business I work for?What is the WCAG and what does it require?How much work is needed make my UX designs compliant?I get it — it’s time-consuming to understand the grueling details of a legislative act, but it’s vital to realize how it directly impacts you and your business.What is the European Accessibility Act ?The EAA is a “directive” that aims to improve accessibility in products and services in EU member states. This ensures people with disabilities can successfully access any digital product — ranging from writing an email on a laptop to checking-in at the doctor’s office with an iPad.The directive was enacted in 2019, but will become enforced on June 28, 2025 for any new products.The EAA is a EU directive that follows EN 301 549 and WCAG 2.1 requirementsEAA requirementsTo comply with the EAA, you need to follow the European “standard,” EN 301 549. EN 301 549 includes many clauses covering accessibility for a broad range of ICT — from native mobile applications to electronic hardware.The clauses circling the web and software incorporate the Web Content Accessibility Guidelines2.1, Level AA.Who does the EAA apply to?The EAA impacts all 27 member states of the EU. This includes countries such as France, Spain, and Sweden.Not only do EU member states need to comply, but any company that does business with the member states — even if the company isn’t based in the EU. For example, if a person in Italy accesses an e-commerce website based in the United States, the website must comply with the EAA.What does WCAG require?WCAG offers internationally recognized standards for digital accessibility. These standards are developed by the World Wide Web Consortiumand are constantly evolving to account for changes in HTML and assistive technologies.The EAA and EN 301 549 require conformance to WCAG 2.1, Level AA standards. But what does that mean exactly?WCAG versionsNew versions of WCAG are periodically released to accommodate to the internet’s evolution. As methods and technologies are deprecated and replaced, it’s important to update standards to ensure accessibility is met.The most current version of WCAG is 2.2, which was released in October 2023. Though the EAA and EN 301 549 currently require WCAG 2.1, it’s expected they will be updated to include the WCAG 2.2 version.WCAG has released 3 versions between 2008 and 2023WCAG conformance “levels”WCAG includes 3 levels of conformance: Level A, Level AA, and Level AAA. Level A offers guidelines for the most basic accessibility considerations, while Level AAA reaches the widest degree of accessibility.Each success criteriain WCAG has a conformance level. For instance, SC 1.1.1is Level A, while SC 2.4.12is Level AAA.To conform to a certain WCAG level, the digital product must also conform to the level below it. So if your website is Level AA, it passes both Level A and AA success criteria.WCAG’s “levels” refer to the degree of accessibility your digital product complies withDesign strategies for EAA complianceWCAG standards are dense, and it takes time to incorporate them into your UX design process. But there are strategies you can start using now to meet most of the requirements to comply with the EAA.1. Color contrast ratioDesigners must create color palettes that support a high color contrast ratio for content like text or UI components. You can check color contrast ratios with tools such as WebAIM’s Contrast Checker.Small textmust have a color contrast ratio of 4.5:1 with its backgroundLarge textmust have a contrast ratio of 3:1 with its backgroundUI components, like buttons, should have a color contrast ratio of 3:1 with its backgroundColor should not be used alone to convey meaning; semantic color also needs a text label or appropriate iconFor more details, visit WCAG 1.4-Distinguishable.Don’t use color alone to convey meaning, such as errors or warnings on text fields2. Keyboard functionalitySome users can’t use a mouse or their laptop’s trackpad. Users who are blind or have limited hand mobility use their keyboard or other assistive technologies, and must be able to operate the product with their preferred input method.All user actions are doable from a keyboard, except for freehand movementsKeyboard users must not encounter a keyboard trapKeyboard users have a way to turn off or remap keyboard shortcuts made up of single-character keysFor more details, visit WCAG 2.1-Keyboard accessible.Example of keyboard tab/ focus order for a restaurant’s website3. Multimedia featuresAll users, whether they are blind, hard-of-hearing, or have a learning disability, must be able to access the information any multimedia provides.Provide captions for any pre-recorded audio that is time-basedProvide an audio description for pre-recorded videosProvide captions for all live video contentFor more details, visit WCAG 1.2-Time based media.Example of a live news broadcast with closed captioning4. Headings and labelsWhen headings and labels aren’t used properly or aren’t used at all, users have a hard time processing content and completing tasks — from reading an article to filling out a form.Provide clear headings and labels that describe the page content or input fieldEnsure labels and headings that visually convey structure and relationships are programmatically associated to their contentEnsure individual cells in a data tables are programmatically associated to their parent column or row headerFor more details, visit WCAG 1.3-Adaptable.Ensure the heading tags properly convey the web-page’s content structure5. Support screen readersMany people use screen readers, such as NVDA or JAWS, so they can use any website or software. Ensuring digital products are compatible with screen readers seem challenging, but there are ways to proactively support screen readers.Use semantic HTML elements, like <button>, and avoid non-semantic elements, like <div> and <span>, that don’t contain built-in meaningProvide a text alternative for meaningful images using the alt attributeEnsure all interactive elements have a corresponding name, role, and valueEnsure the focus indicator is always visible so the user knows where they are in the interfaceFor more details, visit WCAG 4.1-Compatible.Tools to use for an accessible design processTo help meet WCAG 2.1, Level AA standards, there are tools you can incorporate in your UX process to create accessible designs and hand them over to your development team.1. WAVEWAVE is a free accessibility evaluation tool developed by WebAIM. WAVE offers multiple browser extensions for Chrome, Firefox, and Edge. After adding the extension to your preferred browser, all you have to do is visit your website and activate WAVE to get an automated evaluation.Note: Automated tools only find about a third of accessibility issues, so a manual evaluation is still needed after using WAVE.WAVE is a free accessibility evaluation tool that works on any live websitePros of WAVE:Offers multiple extensions for your preferred browserAllows you to easily see the tab order and structure of a web-pageProvides recommendations on how to correct accessibility issuesCons of WAVE:The icons representing potential accessibility issues are overwhelming and difficult to understand which icon goes to which element2. StarkStark offers a plug-in for both Figma and Sketch that designers can use to thoroughly check and annotate UX designs for developer hand-off. This ensures that developers know the specifics for alt text, tab order, and heading levels.Stark’s plug-in for Figma allows you to annotate designs and check color contrast ratiosPros of Stark:Offers a range of features to check designs for contrast and typography issues, as well as annotate for developer hand-offProvides color suggestions when the color contrast ratio doesn’t meet WCAG, Level AA requirementsProvides a vision simulator to test designs against different types of color blindnessCons of Stark:It can be difficult to select the correct layer when annotating designsSome advanced features in the plug-in are paid to use3. JAWSJAWSis one of the most commonly used screen readers. JAWS allows users with limited vision to access and use digital products, and is beneficial to test your digital product with to ensure it’s compatible with screen readers.Note: JAWS’ free version only allows you to use it for 45 minutes before restarting, and is best used on Chrome or Firefox browsers.JAWS screen reader running on a Mac through the Parallels virtual machinePros of JAWS:Ability to highly customize the JAWS settings, such as the voice synthesizerProvides output both through audio and braille devicesFreedom Scientific offers trainings to learn how to use JAWSCons of JAWS:Includes a steep learning curve compared to other screen readersOnly accessible through a Windows operating systemHas a limited free version–must pay to access the full versionConclusionReady or note, the European Accessibility Actwill be enforced on June 28, 2025. So any companythat provides ICT or operates digital products that an EU citizen can use is subject to the EAA.Any new product introduced to the market must comply with WCAG 2.1, Level AA to meet the requirements of the EAA and EN 301 549.Web accessibility is no longer optional — it’s essential. Though building inclusive products is the right thing to do, you may be subject to legal action if you avoid it. Is your digital product ready?SourcesWCAG by Level Access, “EN 301 549 Conformance: An Overview”Accessibility Works, “European Accessibility Act Compliance Requirements: The Next GDPR”WCAG by Level Access, “The European Accessibility Act: Technical Aspects of Compliance”European Union, “Types of legislation”W3C Web Accessibility Initiative, “WCAG 2 Overview”W3C, “WCAG 2.1 Guidelines”Ready or not, the EAA is here was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
#ready #not #eaa #here
·13 Vue