{"id":3040,"date":"2025-01-28T15:14:00","date_gmt":"2025-01-28T14:14:00","guid":{"rendered":"https:\/\/visionaere.de\/news\/one-website-for-all"},"modified":"2025-03-14T17:00:43","modified_gmt":"2025-03-14T16:00:43","slug":"one-website-for-all","status":"publish","type":"post","link":"https:\/\/visionaere.de\/en\/blog\/one-website-for-all\/","title":{"rendered":"One website for all"},"content":{"rendered":"\n<div class=\"wp-block-group is-style-wide-width\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1715\" height=\"1080\" src=\"https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis-web-pic-news_barrierefrei.png\" alt=\"\" class=\"wp-image-1295\" srcset=\"https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis-web-pic-news_barrierefrei.png 1715w, https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis-web-pic-news_barrierefrei-300x189.png 300w, https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis-web-pic-news_barrierefrei-1024x645.png 1024w, https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis-web-pic-news_barrierefrei-768x484.png 768w, https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis-web-pic-news_barrierefrei-1536x967.png 1536w\" sizes=\"auto, (max-width: 1715px) 100vw, 1715px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><br\/>1 Definition: What is an accessible website?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An accessible website is a website that is designed in such a way that it can be easily used by all people, regardless of their physical or mental abilities. The aim of accessibility is to provide all users with equal access to the information and functionality of the website. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Implementing accessibility on the web is not just a legal obligation. It also offers the opportunity to improve the comprehensibility of your own website as well as its SEO ranking and thus reach more users. At the same time, increased user-friendliness and accessibility benefits all users and can also mean a competitive advantage.    <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br\/>2. target groups: Who needs an accessible website?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Accessible websites are essential for the following groups:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>People with disabilities, including visual, hearing and mobility impairments<\/li>\n\n\n\n<li>Older people with age-related limitations<\/li>\n\n\n\n<li>People with technical limitations, such as slow internet connections<\/li>\n\n\n\n<li>People with reading difficulties or cognitive impairments<\/li>\n\n\n\n<li>Temporarily restricted persons, such as someone with a broken arm<\/li>\n<\/ul>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Target groups of accessible websites<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis_barrierefreiheit_gruppen_mod.svg\" alt=\"\" class=\"wp-image-1296\"\/><\/figure>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. legal obligations: Which companies and institutions must offer an accessible website from June 2025?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Accessibility Act (BFG) comes into force in June 2025. It obliges the following companies and institutions to provide accessible websites: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Public institutions:<\/strong> All state and municipal administrations, schools, universities and libraries.<\/li>\n\n\n\n<li><strong>Public service companies:<\/strong> This includes companies in the areas of public transportation, energy supply, telecommunications and healthcare services.<\/li>\n\n\n\n<li><strong>Service providers:<\/strong> Banks, insurance companies and other service providers that fulfill essential social functions.<\/li>\n\n\n\n<li><strong>E-commerce and digital platforms: <\/strong>Online retailers and operators of digital marketplaces.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These companies and institutions must ensure that their websites and mobile applications meet accessibility requirements in order to provide all users with equal access to their services and information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br\/>4 The basic principles: What are the requirements for accessible websites?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The technical requirements for accessible websites are defined in the Web Content Accessibility Guidelines (WCAG) 2.1, which are internationally recognized. The guidelines are based on four pillars: <\/p>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">The four principles of accessibility<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis__barrierefrei.svg\" alt=\"\" class=\"wp-image-1298\"\/><\/figure>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual accessibility:<\/strong> Content must be presented in such a way that it can be perceived by users. In addition to customizable font sizes and sufficient contrast between text and background, this also includes alternative texts for images or subtitles for multimedia content.   <\/li>\n\n\n\n<li><strong>Usability:<\/strong> Users must be able to navigate and operate the website. This includes comprehensible and consistent navigation elements as well as the ability to navigate using the keyboard. <\/li>\n\n\n\n<li><strong>Comprehensibility:<\/strong> The content and operation of the website must be understandable. This includes, for example, clearly structured content and the use of clear and simple language.   <\/li>\n\n\n\n<li><strong>Robustness: <\/strong>The content of the website must be compatible with different browsers and assistive technologies such as screen readers.  <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><br\/>5 Technical requirements: What needs to be considered during technical implementation?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The following points are essential when designing accessible content:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clear, standard-compliant HTML structure and navigation:<\/strong> semantically correct HTML headings (h1, h2, h3) and lists for structuring the content<\/li>\n\n\n\n<li><strong>Responsive design for different end devices:<\/strong> The design must adapt flexibly to a variety of different device types.<\/li>\n\n\n\n<li><strong>Colors and contrasts:<\/strong> Ensure sufficient color contrasts and avoid using only colors to convey information.<\/li>\n\n\n\n<li><strong>Visibility and legibility: <\/strong>Sufficient contrast between text and background, customizable font sizes.<\/li>\n\n\n\n<li><strong>Alternative text descriptions for images and graphics:<\/strong> Provide alternative texts (alt tags) for images to describe their content.<\/li>\n\n\n\n<li><strong>Descriptive links: <\/strong>Avoid vague link texts such as &#8220;click here&#8221;; instead use descriptive texts such as &#8220;find out more about our services&#8221;.<\/li>\n\n\n\n<li><strong>Forms:<\/strong> Design of forms with clear labels and instructions for the input fields and operating elements.  <\/li>\n\n\n\n<li><strong>Subtitles and transcripts for audiovisual content:<\/strong> Transcripts or subtitles should be provided for audio or audiovisual content.<\/li>\n\n\n\n<li><strong>Avoidance of barriers: <\/strong>These include, for example, flashing elements or automatic redirects.<\/li>\n\n\n\n<li><strong>Compatibility with assistive technologies:<\/strong> This includes, for example, screen readers, for which the correct use of ARIA attributes is important.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><br\/>6. process: How does an accessible website relaunch work?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A web relaunch to create an accessible website typically involves the following steps:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Phases of an accessible website relaunch<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/visionaere.de\/wp-content\/uploads\/2024\/12\/vis_prozess_barrierefreiheit.svg\" alt=\"\" class=\"wp-image-1299\"\/><\/figure>\n\n\n\n<p class=\"is-style-intro-text wp-block-paragraph\"><strong>1. analysis and planning<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Analysis: Evaluation of the existing website for barriers and identification of areas for improvement.<\/li>\n\n\n\n<li>Planning: Definition of accessibility goals and requirements based on WCAG guidelines.<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-intro-text wp-block-paragraph\"><strong>2. design<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Concept: Creation of an accessibility concept, definition of the accessibility level to be implemented (A, AA or AAA)<\/li>\n\n\n\n<li>Design and development: Creation of designs and prototypes with accessibility in mind. Implementation of the website with a focus on accessible technologies. <\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-intro-text wp-block-paragraph\"><strong>3. implementation<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Technical implementation: Consideration of technical requirements, implementation of accessible functions and content<\/li>\n\n\n\n<li>User testing: Conducting tests with different user groups and assistive technologies, including tests with people with disabilities. Use of automated and manual testing methods to ensure accessibility. <\/li>\n\n\n\n<li>Launch: Publication of the new website and continuous monitoring and feedback mechanisms for further improvement.<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-intro-text wp-block-paragraph\"><strong>4. after the launch<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Constant optimization: Continuous monitoring and improvement of accessibility<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><br\/>7. testing tools: Which software can I use to test the accessibility of my website?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The following tools can be used to check the accessibility of a website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Figma Extension strong  <\/strong><\/li>\n\n\n\n<li><strong>WAVE &#8211; Web Accessibility Evaluation Tool:<\/strong> Good free API that can be used via browser extensions, e.g. for Chrome, Firefox or Edge. It checks websites for accessibility and provides suggestions for improvement. <\/li>\n\n\n\n<li><strong>Axe DevTools:<\/strong> A browser add-on that helps developers identify and fix accessibility issues directly in the development environment.<\/li>\n\n\n\n<li><strong>BITV test  <\/strong><\/li>\n\n\n\n<li><strong>Color Contrast Analyzer<\/strong><\/li>\n\n\n\n<li><strong>Lighthouse: <\/strong>An automated open source tool from Google that performs audits for performance, accessibility and SEO.<\/li>\n\n\n\n<li><strong>Screen readers such as JAWS, NVDA: <\/strong>Assistive software that can be used to test the user experience of visually impaired users.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">By using these tools and complying with the WCAG guidelines, website operators can ensure that their digital offerings are accessible and usable for all users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is important to note that automated testing alone is not sufficient to ensure complete accessibility. To achieve good results, we recommend testing with people with disabilities to consider real user needs and assess whether the concept achieves the desired results. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is also important to see the topic of website accessibility as an ongoing process, not a one-off sprint. If you take the topic seriously, you should include regular reviews, adjustments and optimizations in the planning of your digital strategy. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visionaere Design: We support you with barrier-free web design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As an agency that is committed to social coexistence, inclusion is also important to us in the digital space. That&#8217;s why we support companies and institutions in implementing accessibility in their digital presences so that they meet the new legal requirements.   <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We benefit from our many years of experience in user-centered UI and UX design. They help us to make it easier and more informative for an increasing number of customers to visit your accessible website. We are also happy to support your own developers and designers through training and further education to ensure the long-term implementation of accessibility by your own experts.  <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"is-style-info-text wp-block-paragraph\"><strong>Keywords<\/strong><br\/>Accessibility<br\/>Accessible web design<br\/>Accessibility<br\/>Responsive design<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n<div class=\"wp-block-group is-style-wide-width has-color-light-grey-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n\n\n\n\n    <div id=\"vs-single-contact\" class=\"vs-single-contact \" >\n        <div class=\"vs-single-contact__left\">\n                            <div class=\"vs-contact__content vs-wysiwyg\">\n                    <div class=\"column is-5-tablet rich-text\">\n<h3 class=\"h3\">Conclusion &amp; recommendation: Accessibility on the web<\/h3>\n<p>For many companies and institutions, barrier-free websites will go from being optional to mandatory &#8211; from mid-2025 at the latest. If you want to make the transition stress-free, it&#8217;s best not to wait too long. <\/p>\n<p>Are you interested in a barrier-free website? Feel free to contact us at Visionaere. We look forward to working with you to break down barriers &#8211; and make your website accessible for everyone!  <\/p>\n<\/div>\n\n                <\/div>\n                    <\/div>\n        <div class=\"vs-single-contact__right\">\n            <div class=\"vs-contact__content vs-wysiwyg\">\n                <h3>Contact<\/h3>\n                                                <img decoding=\"async\" src=\"https:\/\/visionaere.de\/wp-content\/uploads\/2024\/07\/csm_visionaere-cornelius-nordt-kontakt_a055cfcd20.jpg\" loading=\"lazy\" alt=\"\" \/>\n                <p class=\"is-style-info-text\"><strong>Cornelius Nordt<\/strong><\/p>\n                <p class=\"is-style-info-text\">Gesch\u00e4ftsf\u00fchrer Business Development<\/p>\n                <p class=\"is-style-info-text\">030 78 09 66 &#8211; 81 <\/p>\n                                <div class=\"vs-contact__social-links\">\n                    <a href=\"mailto:cornelius.nordt@visionaere.de\" target=\"_blank\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\n                            <g clip-path=\"url(#clip0_487_124)\">\n                            <path d=\"M21 1C32.0444 1 41 9.95562 41 21C41 32.0444 32.0444 41 21 41C9.95562 41 1 32.0444 1 21C1 9.95562 9.95562 1 21 1Z\" stroke=\"black\" stroke-width=\"2\" stroke-miterlimit=\"10\"\/>\n                            <path d=\"M11 14V27H30V14H11ZM11.76 15.7818L17.5512 20.5038L11.76 25.2259V15.7856V15.7818ZM29.24 26.2353H11.76V26.2047L18.1554 20.9932L18.5886 21.345C19.1434 21.7962 19.8236 22.0218 20.5038 22.0218C21.184 22.0218 21.8642 21.7962 22.419 21.345L22.8522 20.9932L29.2476 26.2047V26.2353H29.24ZM29.24 25.2221L23.4488 20.5L29.24 15.7779V25.2182V25.2221ZM29.24 14.7953L21.9364 20.7485C21.1042 21.4253 19.8958 21.4253 19.0674 20.7485L11.7638 14.7953V14.7647H29.2438V14.7953H29.24Z\" fill=\"black\" stroke=\"black\"\/>\n                            <\/g>\n                            <defs>\n                            <clipPath id=\"clip0_487_124\">\n                            <rect width=\"42\" height=\"42\" fill=\"white\"\/>\n                            <\/clipPath>\n                            <\/defs>\n                        <\/svg>\n                    <\/a> \n                                            <a href=\"https:\/\/www.linkedin.com\/in\/cornelius-nordt\/\" target=\"_blank\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\n                                <g clip-path=\"url(#clip0_487_127)\">\n                                <path d=\"M21 1C32.0444 1 41 9.95562 41 21C41 32.0444 32.0444 41 21 41C9.95562 41 1 32.0444 1 21C1 9.95562 9.95562 1 21 1Z\" stroke=\"black\" stroke-width=\"2\" stroke-miterlimit=\"10\"\/>\n                                <path d=\"M16.3333 17.5H12.8333V28H16.3333V17.5Z\" fill=\"black\"\/>\n                                <path d=\"M16.3333 14.5835C16.3333 15.5547 15.6568 16.3335 14.5715 16.3335H14.5557C13.5097 16.3335 12.8333 15.5547 12.8333 14.5835C12.8333 13.6122 13.5254 12.8335 14.595 12.8335C15.6647 12.8335 16.3175 13.586 16.3333 14.5835Z\" fill=\"black\"\/>\n                                <path d=\"M29.1667 27.9911H25.7247V22.497C25.7247 21.1213 25.2292 20.1805 23.9863 20.1805C23.0389 20.1805 22.4739 20.8195 22.2218 21.432C22.1349 21.6538 22.1088 21.9556 22.1088 22.2663V28H18.6667C18.6667 28 18.7102 18.6982 18.6667 17.7396H22.1088V19.1953C22.5608 18.4941 23.3778 17.5 25.2119 17.5C27.4718 17.5 29.1667 18.9645 29.1667 22.1154V28V27.9911Z\" fill=\"black\"\/>\n                                <path d=\"M14.8401 12.6152V12.585C14.8401 12.585 14.825 12.6077 14.8174 12.6152H14.8401Z\" fill=\"black\"\/>\n                                <\/g>\n                                <defs>\n                                <clipPath id=\"clip0_487_127\">\n                                <rect width=\"42\" height=\"42\" fill=\"white\"\/>\n                                <\/clipPath>\n                                <\/defs>\n                            <\/svg>\n                        <\/a>\n                                    <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n  \n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1 Definition: What is an accessible website? An accessible website is a website that is designed in such a way that it can be easily used by all people, regardless of their physical or mental abilities. The aim of accessibility is to provide all users with equal access to the information and functionality of the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2725,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"content-type":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-3040","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-insights-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/posts\/3040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/comments?post=3040"}],"version-history":[{"count":1,"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/posts\/3040\/revisions"}],"predecessor-version":[{"id":3041,"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/posts\/3040\/revisions\/3041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/media\/2725"}],"wp:attachment":[{"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/media?parent=3040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/categories?post=3040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visionaere.de\/en\/wp-json\/wp\/v2\/tags?post=3040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}