{"id":10084262,"date":"2023-06-01T15:27:33","date_gmt":"2023-06-01T13:27:33","guid":{"rendered":"https:\/\/www.fh-joanneum.at\/?post_type=projects&#038;p=84262"},"modified":"2023-06-02T10:27:44","modified_gmt":"2023-06-02T08:27:44","slug":"a11why-designing-web-accessibility-aesthetically","status":"publish","type":"project","link":"https:\/\/www.fh-joanneum.at\/en\/project\/a11why-designing-web-accessibility-aesthetically\/","title":{"rendered":"A11[WH]Y. Designing Web Accessibility Aesthetically"},"content":{"rendered":"<div class=\"wp-block-sidebar-layout-container margin-bottom-normal\">\n    <div\n        class=\"container-lg\"\n        style=\"--bs-gutter-x: 0;\"\n    >\n        <div\n            class=\"row\"\n            style=\"--bs-gutter-x: 0;\"\n        >\n            \n<div class=\"col-12 col-md-3 order-1 order-md-0 sidebar\">\n            \n<div\n    id=\"\"\n    class=\"wp-block-institute-card margin-bottom-normal\"\n>\n    <div class=\"container-lg\">\n                                    <div class=\"row justify-content-around\">\n                    <div class=\"col-8 col-sm-6 col-md-12\">\n                        <a\n        class=\"medien-und-design institute-card\"\n        href=\"https:\/\/www.fh-joanneum.at\/en\/institute\/design-communication\/\"\n        target=\"_self\"\n    >\n                            <div class=\"major-bg-color\">\n            <div class=\"wrapper\">\n                <div class=\"header\">\n                    <span>Institute<\/span>\n                <\/div>\n                <h4>Design &amp; Communication<\/h4>\n            <\/div>\n        <\/div>\n            <span><\/span>\n                    <\/a>\n                    <\/div>\n                <\/div>\n                        <\/div>\n<\/div>\n\n<div id=\"\" class=\"wp-block-fact-box margin-bottom-normal\">\n  <div class=\"container-lg\">\n        <div class=\"row justify-content-around\">\n            <div class=\"col-8 col-sm-6 col-md-12\">\n                <div class=\"card border border-light p-3\">\n                    <ul class=\"list-unstyled mb-0\">\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Bachelor\u2019s Thesis \n                          <\/div>\n                          <div class=\"value fw-bold\">2022<\/div>\n                        <\/li>\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Author\n                          <\/div>\n                          <div class=\"value fw-bold\">Anna Mitterhauser<\/div>\n                        <\/li>\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Major\n                          <\/div>\n                          <div class=\"value fw-bold\">Interaction Design<\/div>\n                        <\/li>\n                                              <li\n                          class=\"\"\n                        >\n                          <div class=\"label mb-1\">\n                            Supervisor\n                          <\/div>\n                          <div class=\"value fw-bold\">Dietmar Mosbacher<\/div>\n                        <\/li>\n                                          <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div\n        id=\"\"\n        class=\"wp-block-person-card margin-bottom-normal\"\n    >\n        <div class=\"container-lg\">\n            <div class=\"row justify-content-around\">\n                <div class=\"col-8 col-sm-6 col-md-12\">\n                    <a href=\"https:\/\/www.fh-joanneum.at\/en\/university\/person\/dietmar-mosbacher\"\n    class=\"person-card\">\n    <div class=\"border border-light h-100\">\n\n        <div class=\"image-wrapper\">\n            <picture>\n        <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/online.fh-joanneum.at\/JOANNEUMonline\/visitenkarte.showImage?pPersonenGruppe=3&amp;pPersonenId=8091C6E156E23FFB\"\n        alt=\"\"\n        title=\"\"\n                 onerror=\"this.src = 'https:\/\/www.fh-joanneum.at\/app\/themes\/fh\/public\/images\/avatar_dummy.e5edf9.png'\"     >\n<\/picture>\n\n        <\/div>\n        <div class=\"p-2 p-xl-3\">\n                            <p class=\"mb-1 hyphens\">Doz. (FH)<\/p>\n                        <h6>Dietmar Mosbacher<\/h6>\n                            <p class=\"mb-1 hyphens\"> MSc<\/p>\n                        <p class=\"mb-0 hyphens\">\n              Head of Postgraduate Master&#8217;s Program &#8220;Visual Communication and Image Managament&#8221;\n            <\/p>\n        <\/div>\n    <\/div>\n<\/a>                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n<\/div>\n\n<div class=\"d-none d-md-flex col-md-1 seperator-column\"><\/div>\n<div class=\"col-12 col-md-8 order-0 order-md-1\">\n     \n<div id=\"\" class=\"wp-block-text-content margin-bottom-normal\">\n    <div class=\"container-lg\">\n        <div class=\"row\">\n            <div class=\"col\">\n                <p>In today&lsquo;s society, it is essential to be able to consume information in both analog and digital form. To achieve this, content on the web must be made equally accessible to everyone. However, the integration of accessibility into web design is not yet a matter of course. Ignorance and the mistaken belief that accessibility cannot be aesthetically pleasing play a significant role in this. But how can accessibility be combined with aesthetics?<\/p>\n<p>This Bachelor&rsquo;s Thesis deals with disabilities and the resulting barriers on the Internet. Legal regulations and recognized rulesets are examined and evaluated. From existing guidelines and the analysis of best practice examples, a clear manual for the accessible design of concrete design elements emerges. This Bachelor&rsquo;s Thesis focuses on the accessibility factor without neglecting aesthetics.<\/p>\n\n            <\/div>\n        <\/div>\n            <\/div>\n<\/div>\n\n<div\n    id=\"\"\n    class=\"wp-block-image-slider margin-bottom-normal\"\n>\n    <div class=\"container-lg\">\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div class=\"swiper-outer-wrapper\">\n                    <div class=\"image-header\">\n                        <div class=\"swiper-navigation\">\n                            <div class=\"swiper-button-prev-custom\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M8 13L2 7L8 1\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                            <\/div>\n                            <div class=\"swiper-button-next-custom\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M1 1L7 7L1 13\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"swiper image-slider-swiper\">\n                        <div class=\"swiper-wrapper\">\n                                                                                                <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-1024x682.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-1024x682.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-1536x1024.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-1536x1024.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 2000px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy.jpg\"\n        alt=\"Meilin Typeface (Copy)\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Anna Mitterhauser \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2-1024x682.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2-1024x682.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2-1536x1024.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2-1536x1024.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 2000px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-2.jpg\"\n        alt=\"Meilin Typeface (Copy) 1\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Anna Mitterhauser \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3-1024x682.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3-1024x682.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3-1536x1024.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3-1536x1024.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 2000px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-3.jpg\"\n        alt=\"Meilin Typeface (Copy) 2\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Anna Mitterhauser \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5-1024x682.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5-1024x682.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5-1536x1024.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5-1536x1024.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 2000px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-5.jpg\"\n        alt=\"Meilin Typeface (Copy) 4\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Anna Mitterhauser \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6-1024x682.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6-1024x682.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6-1536x1024.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6-1536x1024.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 2000px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/meilin-typeface-copy-6.jpg\"\n        alt=\"Meilin Typeface (Copy) 5\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Anna Mitterhauser \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                                    <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-navigation-pagination\">\n                        <div class=\"swiper-button-prev-custom\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M8 13L2 7L8 1\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                        <\/div>\n                        <div class=\"swiper-pagination\"><\/div>\n                        <div class=\"swiper-button-next-custom\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M1 1L7 7L1 13\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<\/div>\n\n\n        <\/div>\n    <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":10084256,"template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10084262"}],"collection":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/users\/11"}],"version-history":[{"count":0,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10084262\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media\/10084256"}],"wp:attachment":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media?parent=10084262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}