{"id":20314,"date":"2025-07-03T09:01:19","date_gmt":"2025-07-03T07:01:19","guid":{"rendered":"https:\/\/wwwarcelona.com\/uncategorized\/accessibility-web-inclusive-design-for-2025\/"},"modified":"2026-09-07T16:09:53","modified_gmt":"2026-09-07T14:09:53","slug":"accessibility-web-inclusive-design-for-2025","status":"publish","type":"post","link":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/","title":{"rendered":"Web Accessibility: Inclusive Design by 2025"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"20314\" class=\"elementor elementor-20314 elementor-12079\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0279230 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0279230\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-60a3348\" data-id=\"60a3348\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5cef3dd elementor-widget elementor-widget-image\" data-id=\"5cef3dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1.png\" class=\"attachment-large size-large wp-image-12091\" alt=\"web accessibility\" srcset=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1.png 1024w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1-300x300.png 300w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1-150x150.png 150w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1-768x768.png 768w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1-180x180.png 180w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1-360x360.png 360w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Diverse_creative_team_designing_an_accessible_web_8e89d653-3d7e-4f8e-b3c8-5973dd484dd5_1-640x640.png 640w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-701d5bb\" data-id=\"701d5bb\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8013e68 elementor-widget elementor-widget-text-editor\" data-id=\"8013e68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\"><\/span><i><span style=\"font-weight: 400;\">Web accessibility<\/span><\/i><span style=\"font-weight: 400;\"> is no longer an option for designers, developers, and digital brands. As we move into 2025, ensuring that anyone can navigate a website, regardless of their capabilities, is an ethical, legal, and strategic requirement. <\/span> <\/p><p><span style=\"font-weight: 400;\">Through<a href=\"https:\/\/es.linkedin.com\/company\/wwwarcelona\" target=\"_blank\" rel=\"noopener\"> my experience<\/a> improving websites for clients of all kinds, I have learned that applying the WCAG 2.2 standard is not only viable, but can make the difference between an invisible website and an impactful one.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2cbb1b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2cbb1b4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-890a704\" data-id=\"890a704\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-37acb00 elementor-widget elementor-widget-heading\" data-id=\"37acb00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why is web accessibility key today?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73a4555 elementor-widget elementor-widget-text-editor\" data-id=\"73a4555\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">To begin with, it should be remembered that 15% of the world&#8217;s population lives with some type of disability. Consequently, millions of people may have visual, hearing, motor or cognitive difficulties that affect their internet browsing. So, when a site does not have <\/span><i><span style=\"font-weight: 400;\">web accessibility<\/span><\/i><span style=\"font-weight: 400;\">, it leaves out a significant part of its potential audience. On the other hand, it is essential to keep in mind that many governments already require by law that public and private places comply with certain accessibility guidelines.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4df30ed elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4df30ed\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ed05024\" data-id=\"ed05024\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-24416aa elementor-widget elementor-widget-heading\" data-id=\"24416aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What's New in WCAG 2.2\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d8f987 elementor-widget elementor-widget-text-editor\" data-id=\"1d8f987\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The <\/span><i><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines<\/span><\/i><span style=\"font-weight: 400;\"> (WCAG) are the international standard for achieving <\/span> efficient <i><span style=\"font-weight: 400;\">web accessibility<\/span><\/i><span style=\"font-weight: 400;\">. Since its launch, version 2.2 \u2014officially published in October 2023\u2014 introduces new criteria to better meet the needs of users with cognitive disabilities and interaction difficulties. In this sense, it is essential to understand these updates in order to apply them correctly.<\/span><\/p><p><span style=\"font-weight: 400;\">Among the most relevant new features are:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Focus Not Obscured (Minimum and Enhanced): Ensures that keyboard focus is always visible, even in highly visual designs.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dragging Movements: Offers alternatives for those who can&#8217;t drag accurately, which improves keyboard navigation.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Target Size (Minimum): A minimum size is set for interactive elements, making them easier for people with reduced mobility to use.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Consistent Help: Ensures that help (such as chats, FAQs, or emails) is consistent and accessible across all pages, whether public or private.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">Although these guidelines are technical, they have a direct impact on the user experience and, of course, on the legal and reputational compliance of any brand.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9e8e79d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9e8e79d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2ac2ed8\" data-id=\"2ac2ed8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c51d7f8 elementor-widget elementor-widget-image\" data-id=\"c51d7f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2.png\" class=\"attachment-large size-large wp-image-12085\" alt=\"\" srcset=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2.png 1024w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2-300x300.png 300w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2-150x150.png 150w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2-768x768.png 768w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2-180x180.png 180w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2-360x360.png 360w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_A_visually_impaired_person_using_a_laptop_with_a__aad1b6b1-b9f4-4afc-af47-f839158083e5_2-640x640.png 640w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7884beb elementor-widget elementor-widget-heading\" data-id=\"7884beb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to apply web accessibility without losing style?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94af923 elementor-widget elementor-widget-text-editor\" data-id=\"94af923\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">One of the great fears that designers usually have is that accessibility breaks with aesthetics. Even so, it is entirely possible to combine design and inclusion, and I have seen this in multiple projects with demanding clients. <\/span><\/p><p><span style=\"font-weight: 400;\">In order to get off to a good start, you need to work on a solid foundation:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Proper color contrast:<\/strong> There are tools like <\/span><i><span style=\"font-weight: 400;\">Accessible Colors<\/span><\/i><span style=\"font-weight: 400;\"> that allow you to choose attractive palettes that meet the minimum of contrast. Additionally, these tools help maintain visual consistency.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Clear and legible typography:<\/strong> avoid fonts that are too decorative and opt for left-alignment, making it easier for everyone to read.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Semantic order of the HTML code:<\/strong> it is necessary to use correctly hierarchical headings (<\/span><span style=\"font-weight: 400;\">h1<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">h2<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">h3<\/span><span style=\"font-weight: 400;\">&#8230;), <\/span><span style=\"font-weight: 400;\">main<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">nav<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">section<\/span> tags<span style=\"font-weight: 400;\">, etc. In this way, screen readers can better interpret the content.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Visible and accessible interactive elements:<\/strong> large buttons, form fields with clear labels and obvious focus states. In short, everything you need to ensure barrier-free action. <\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">With all these bases covered, a strong visual identity can be built, which is also usable, inclusive and modern.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a83e1a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a83e1a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ef86334\" data-id=\"ef86334\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-67fc161 elementor-widget elementor-widget-heading\" data-id=\"67fc161\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">ARIA Techniques: Empowering Navigation with Assistive Technology\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c85b02a elementor-widget elementor-widget-text-editor\" data-id=\"c85b02a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\"> <\/span><i><span style=\"font-weight: 400;\">Accessible Rich Internet Applications<\/span><\/i><span style=\"font-weight: 400;\"> (ARIAs) are special tags that allow screen readers to correctly interpret elements that are not native to HTML, such as sliders, tabs or pop-ups. Through my practice, I have found that their use can make a difference.<\/span><\/p><p><span style=\"font-weight: 400;\">Among the most useful ones that I have applied in complex projects, the following stand out:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">aria-label<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">aria-labelledby<\/span><span style=\"font-weight: 400;\">, which allow you to describe buttons, menus or forms in detail. They also improve user understanding.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">aria-live<\/span><span style=\"font-weight: 400;\"> to notify dynamic changes in content (such as errors in a form without refreshing the page), which facilitates smoother interaction.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">role=&#8221;dialog&#8221;,<\/span><span style=\"font-weight: 400;\"> <\/span><span style=\"font-weight: 400;\">role=&#8221;alert&#8221;,<\/span><span style=\"font-weight: 400;\"> and other roles to structure content for users with assistive technology.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">While ARIA techniques may seem advanced, once understood, they offer immense flexibility to adapt any modern design to the<\/span><span style=\"font-weight: 400;\"> most demanding<\/span> <i><span style=\"font-weight: 400;\">web accessibility<\/span><\/i>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b7ce381 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b7ce381\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9cbbf34\" data-id=\"9cbbf34\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-444848d elementor-widget elementor-widget-heading\" data-id=\"444848d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Web Accessibility Tests That Really Work\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19c5978 elementor-widget elementor-widget-text-editor\" data-id=\"19c5978\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">It is not enough to apply good practices; you have to check that everything really works. For this reason, I always combine automatic tools and manual tests in each project. <\/span><\/p><p><span style=\"font-weight: 400;\">Here are some that have been particularly good for me:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">WAVE (Web Accessibility Evaluation Tool) \u2013 performs a visual analysis of errors in real time, which allows you to act quickly.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lighthouse (integrated into Chrome DevTools) \u2013 checks accessibility, SEO, and performance score, all in one tool.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">axe DevTools \u2013 is a powerful extension for detecting accessibility issues in depth and very accurately.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Real screen readers (such as NVDA or VoiceOver) \u2013 allow you to test how a visually impaired user perceives the content. In this sense, it is an irreplaceable tool. <\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">In those projects with tight deadlines, I use <\/span><i><span style=\"font-weight: 400;\">Lighthouse<\/span><\/i><span style=\"font-weight: 400;\"> and <\/span><i><span style=\"font-weight: 400;\">axe<\/span><\/i><span style=\"font-weight: 400;\"> as quick checklists. However, I always end up reviewing with real users or, at least, simulating scenarios with screen readers.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-67cb550 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"67cb550\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8005f2d\" data-id=\"8005f2d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c45684c elementor-widget elementor-widget-image\" data-id=\"c45684c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png\" class=\"attachment-large size-large wp-image-12088\" alt=\"web accessibility\" srcset=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png 1024w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2-300x300.png 300w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2-150x150.png 150w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2-768x768.png 768w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2-180x180.png 180w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2-360x360.png 360w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2-640x640.png 640w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91eb32c elementor-widget elementor-widget-heading\" data-id=\"91eb32c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Web accessibility as a competitive advantage\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8318e77 elementor-widget elementor-widget-text-editor\" data-id=\"8318e77\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Many see<\/span> <i><span style=\"font-weight: 400;\">web accessibility<\/span><\/i><span style=\"font-weight: 400;\"> as an obligation. However, the truth is that it represents a great opportunity. In fact, accessible websites have multiple competitive advantages:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Better SEO positioning:<\/strong> Google rewards semantic order, speed, and clarity; therefore, accessibility also benefits organic visibility.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Higher conversion:<\/strong> If everyone can navigate without barriers, it is clear that more people will be able to convert.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Better brand reputation:<\/strong> Inclusive brands convey trust and values, which leads to long-term loyalty.<\/span><span style=\"font-weight: 400;\"><br><br><\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">Consequently, I have seen how websites with only small accessibility improvements have clearly improved their dwell time and conversion rate. And the most interesting thing is that all this has been achieved without drastically changing the design or investing fortunes. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-10b678a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"10b678a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c0fb280\" data-id=\"c0fb280\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bfc39ed elementor-widget elementor-widget-heading\" data-id=\"bfc39ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusions and next steps\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d9b984 elementor-widget elementor-widget-text-editor\" data-id=\"5d9b984\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">By 2025, having a visually appealing website is no longer enough. It needs to be functional, clear and for everyone. Applying the WCAG 2.2 standard, mastering ARIA techniques and properly testing your site are the keys to achieving this. That&#8217;s why <\/span><i><span style=\"font-weight: 400;\">web accessibility<\/span><\/i><span style=\"font-weight: 400;\"> should be part of your creative process from the first draft to the final publication.<\/span><\/p><p><span style=\"font-weight: 400;\">At wwwarcelona, <a href=\"https:\/\/wwwarcelona.com\/disseny-web\/\" target=\"_blank\" rel=\"noopener\">we help you review, optimise or design your website<\/a> to meet accessibility standards, without losing a shred of style or performance. Digital inclusion starts here. Write to us and we&#8217;ll make it happen.  <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>But it is totally possible to combine design and inclusion, and I have seen this in multiple projects with demanding clients.<\/p>\n","protected":false},"author":6,"featured_media":12088,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[194],"tags":[],"class_list":["post-20314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web Accessibility: Inclusive Design by 2025<\/title>\n<meta name=\"description\" content=\"Learn how to apply the WCAG 2.2 standard, ARIA techniques, and useful tests to achieve complete and aesthetic web accessibility.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Accessibility: Inclusive Design by 2025\" \/>\n<meta property=\"og:description\" content=\"Learn how to apply the WCAG 2.2 standard, ARIA techniques, and useful tests to achieve complete and aesthetic web accessibility.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/\" \/>\n<meta property=\"og:site_name\" content=\"wwwarcelona\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-03T07:01:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-07T14:09:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"wwwarcelona\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"wwwarcelona\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Accessibility: Inclusive Design by 2025","description":"Learn how to apply the WCAG 2.2 standard, ARIA techniques, and useful tests to achieve complete and aesthetic web accessibility.","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:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/","og_locale":"en_US","og_type":"article","og_title":"Web Accessibility: Inclusive Design by 2025","og_description":"Learn how to apply the WCAG 2.2 standard, ARIA techniques, and useful tests to achieve complete and aesthetic web accessibility.","og_url":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/","og_site_name":"wwwarcelona","article_published_time":"2025-07-03T07:01:19+00:00","article_modified_time":"2026-09-07T14:09:53+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png","type":"image\/png"}],"author":"wwwarcelona","twitter_card":"summary_large_image","twitter_misc":{"Written by":"wwwarcelona","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/#article","isPartOf":{"@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/"},"author":{"name":"wwwarcelona","@id":"https:\/\/wwwarcelona.com\/en\/#\/schema\/person\/cd3c580541eee0d543ce6739c9871564"},"headline":"Web Accessibility: Inclusive Design by 2025","datePublished":"2025-07-03T07:01:19+00:00","dateModified":"2026-09-07T14:09:53+00:00","mainEntityOfPage":{"@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/"},"wordCount":1035,"publisher":{"@id":"https:\/\/wwwarcelona.com\/en\/#organization"},"image":{"@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/#primaryimage"},"thumbnailUrl":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png","articleSection":["Web design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/","url":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/","name":"Web Accessibility: Inclusive Design by 2025","isPartOf":{"@id":"https:\/\/wwwarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/#primaryimage"},"image":{"@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/#primaryimage"},"thumbnailUrl":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png","datePublished":"2025-07-03T07:01:19+00:00","dateModified":"2026-09-07T14:09:53+00:00","description":"Learn how to apply the WCAG 2.2 standard, ARIA techniques, and useful tests to achieve complete and aesthetic web accessibility.","breadcrumb":{"@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/#primaryimage","url":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png","contentUrl":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/06\/u8315455948_Flat_design_illustration_comparing_an_inaccessibl_ebceccc2-bc91-4423-997a-558d346e91c8_2.png","width":1024,"height":1024,"caption":"web accessibility"},{"@type":"BreadcrumbList","@id":"https:\/\/wwwarcelona.com\/en\/web-design\/accessibility-web-inclusive-design-for-2025\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/wwwarcelona.com\/en\/web-pages-for-businesses\/"},{"@type":"ListItem","position":2,"name":"Web Accessibility: Inclusive Design by 2025"}]},{"@type":"WebSite","@id":"https:\/\/wwwarcelona.com\/en\/#website","url":"https:\/\/wwwarcelona.com\/en\/","name":"wwwarcelona","description":"Apps, Software, CRM, Webs, Ecommece, Disseny i Hosting","publisher":{"@id":"https:\/\/wwwarcelona.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wwwarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wwwarcelona.com\/en\/#organization","name":"wwwarcelona","url":"https:\/\/wwwarcelona.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wwwarcelona.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2022\/04\/wwwarcelona-logo-2.png","contentUrl":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2022\/04\/wwwarcelona-logo-2.png","width":934,"height":362,"caption":"wwwarcelona"},"image":{"@id":"https:\/\/wwwarcelona.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/wwwarcelona.com\/en\/#\/schema\/person\/cd3c580541eee0d543ce6739c9871564","name":"wwwarcelona","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6e64efb7f2550b17bc9683c96c4d396e16fd5ecfeccce9563f858b39c4a248ca?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6e64efb7f2550b17bc9683c96c4d396e16fd5ecfeccce9563f858b39c4a248ca?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6e64efb7f2550b17bc9683c96c4d396e16fd5ecfeccce9563f858b39c4a248ca?s=96&d=mm&r=g","caption":"wwwarcelona"}}]}},"_links":{"self":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=20314"}],"version-history":[{"count":1,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20314\/revisions"}],"predecessor-version":[{"id":20315,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20314\/revisions\/20315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/media\/12088"}],"wp:attachment":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=20314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=20314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/tags?post=20314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}