Line 1: | Line 1: | ||
− | + | <html> | |
− | <html> | + | <head> |
− | <head> | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/main&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | <link | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/fonts&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/background&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/contentpage-desktop&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/contentpage-mobile&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/sideindex-desktop&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | <link | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/sideindex-mobile&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/navbar&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/navmenu-desktop&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/navmenu-mobile&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/accesibility-menu-desktop&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | <link | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/accesibility-menu-mobile&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/button-pill&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/footer&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/table&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | + | <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/bypass-block&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | |
− | <link | + | </head> |
− | + | <body> | |
− | + | <div class="navbar-container"> | |
− | + | <nav class="navbar"> | |
− | + | <a class="bypass-block-link visually-hidden visible-when-focused" href="#main-content">Skip to main content | |
− | <link | + | </a> |
− | + | <a class="navbar-logo" href="/Team:Vilnius-Lithuania"> | |
− | + | <img alt="AmebyeLogo" src="https://static.igem.org/mediawiki/2021/b/b0/T--Vilnius-Lithuania--amebyeLogo.svg"/> AmeBye | |
− | + | </a> | |
− | + | <ul class="nav-menu"> | |
− | <link | + | </ul> |
− | + | </nav> | |
− | + | <div class="progress-container"> | |
− | + | <div class="progress-bar"> | |
− | + | </div> | |
− | <link | + | </div> |
− | + | <div class="animation-container"> | |
− | + | <script> document.querySelector('body').classList.add("content-hidden"); | |
− | + | window.addEventListener("load", function() { | |
− | + | setTimeout(function() { | |
− | <link | + | document.querySelector('body').classList.remove("content-hidden"); |
− | + | document.querySelector('.animation-container').classList.add("loaded"); | |
− | + | document.querySelector('.animation-container').innerHTML=""; | |
− | + | } | |
− | + | , 200); | |
− | <link | + | } |
− | + | ); | |
− | + | </script> | |
− | + | <div id="loading-animation"> | |
− | + | </div> | |
− | <link | + | <div>Loading... |
− | + | </div> | |
− | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/lottie&action=raw&ctype=text/javascript" type="text/javascript"> | |
− | + | </script> | |
− | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/loading_animation&action=raw&ctype=text/javascript" type="text/javascript"> | |
− | <link | + | </script> |
− | + | <script> var animation = bodymovin.loadAnimation({ | |
− | + | container: document.getElementById('loading-animation'), animationData: loading_animation, renderer: 'svg', loop: true, autoplay: true, } | |
− | + | ); | |
− | + | </script> | |
− | <link | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <link | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <link | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <link | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <link | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </head> | + | |
− | <body> | + | |
− | <div class="navbar-container"> | + | |
− | <nav class="navbar"> | + | |
− | <a | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <a class="navbar-logo" href="/Team:Vilnius-Lithuania"> | + | |
− | <img | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </a> | + | |
− | <ul class="nav-menu"></ul> | + | |
− | </nav> | + | |
− | <div class="progress-container"><div class="progress-bar"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
− | <div class="app-content"> | + | </div> |
− | <div class="app-content-text"> | + | <div class="background"> |
− | <div class="content-page-container"> | + | <canvas id="background-canvas"> |
− | <h3 class="index-headline">Introduction</h3> | + | </canvas> |
− | <p> | + | <canvas id="canvas-transition"> |
− | + | </canvas> | |
− | <b> diversity and inclusion </b> within the science community. We | + | <div class="app-header"> |
− | + | <h1 id="title"> INCLUSIVITY | |
− | + | </h1> | |
− | </p> | + | <div class="app-header-image-wrapper" id="img"> |
− | <p> | + | <img alt="Header" class="cover" src="https://static.igem.org/mediawiki/2021/e/eb/T--Vilnius-Lithuania--Inclusivity.JPG"/> |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="app-content"> | |
− | + | <div class="app-content-text"> | |
− | + | <div class="content-page-container"> | |
− | + | <h3 class="index-headline"> Introduction | |
− | + | </h3> | |
− | </p> | + | <p> At Vilnius-Lithuania iGEM, we recognize the importance of |
− | <p> | + | <b> diversity and inclusion |
− | + | </b> within the science community. We are committed to making the synthetic biology community more open and creating a learning environment where everyone feels welcome. | |
− | + | </p> | |
− | <b> | + | <p> On 2024 September 1st changes of article 14 of the Education Law of the Republic of Lithuania comes into force and a new inclusive education chapter begins. Every general education school should be ready to accept and educate students with disabilities. However, currently not enough measures are taken to reach this goal. We learned this from numerous calls with special pedagogues, students with disabilities and others working in the field of inclusivity. |
− | + | </p> | |
− | + | <p> During our consultations with practitioners working with disabilities, it was often stated that | |
− | + | <b> negative experiences in school, pessimistic outlook coming from the teachers and lack of exposure to the inclusivity of universities | |
− | </b> | + | </b> disencourage pupils from fulfilling their academic potential later in life. As one of our consultants, Dr. Barbara R. Heard, an associate biology professor who focuses on inclusive education, claimed, there are still many complicated areas relating to inclusive education, read full consultation |
− | + | <a href="https://2021.igem.org/Team:Vilnius-Lithuania/Human_Practices " target="”_blank”"> here | |
− | + | </a> . According to her, it is crucial to focus on changing the outlook on the problem to induce progress. This and other consultations inspired us to become the change ourselves. While planning our educational activities and thinking about the design and presentation of our project, we followed an inclusive approach. | |
− | + | </p> | |
− | + | <p> Our main focus groups were people with | |
− | + | <b> vision and intellectual disabilities | |
− | <a | + | </b> . First, we chose people with visual impairments due to the fact that most of the education material is visual - it takes the form of illustrations, graphs etc. This means people with impaired vision do not have a chance to learn more specific subjects like synthetic biology. Second, individuals with cognitive disabilities were chosen due to common underestimation of their abilities. Meaning that such people might not receive information on complex yet significant topics of contemporary society like vaccines, GMO’s etc. |
− | + | </p> | |
− | + | <h3 class="index-headline"> 6th SynBio sense | |
− | + | </h3> | |
− | + | <p> As a way to make “6th SynBio sense” platform more inclusive we set several goals. First, we applied | |
− | </a> | + | <b> accessibility tools |
− | + | </b> to the platform’s web page. As mentioned above, we made sure that the website is accessible for color blind people, by choosing the right color palette and keeping the right contrast ratio between text and background (Fig. 1). | |
− | + | </p> | |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure1" src="https://static.igem.org/mediawiki/2021/6/6d/T--Vilnius-Lithuania--website_adaptation-03.png"/> | |
− | + | <div> | |
− | </p> | + | <b> Fig. 1. |
− | <p> | + | </b> Accessibility adaptations on “6th SynBio sense” website |
− | + | </div> | |
− | <b> vision and intellectual disabilities </b> . First, we chose | + | </div> |
− | + | <p> What is more, as the website contains a lot of written information, it was important for us that it is readable for everyone, therefore we applied a | |
− | + | <b> font changing function | |
− | + | </b> for people with dyslexia. (Fig. 2) We also made | |
− | + | <b> sound recordings | |
− | + | </b> of the provided information for users, who have vision deficiency. In general, we tried to keep the design of the website minimalistic and with as few distractions as possible, to keep the main focus on the augmented reality models and provided information. | |
− | + | </p> | |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure2" src="https://static.igem.org/mediawiki/2021/2/2d/T--Vilnius-Lithuania--modification_for_dyslexia.png"/> | |
− | </p> | + | <div> |
− | <h3 class="index-headline">6th SynBio sense</h3> | + | <b> Fig. 2. |
− | <p> | + | </b> Modification for dyslexia on “6th SynBio sense” website |
− | + | </div> | |
− | + | </div> | |
− | + | <p> Second, we wanted to make 3D models accessible for the blind. To reach the goal, we teamed up with a biology teacher Gintaras Nenartavičius from the Lithuanian Center for the Development of the Blind and Visually Impaired. We learned about the most used educational tools and decided to implement this knowledge into our project. After thorough consultations with an expert teacher and 3D printing specialist, we | |
− | + | <b> printed 3D models | |
− | + | </b> of virus and protein translation as well as | |
− | + | <b> tactile schemes | |
− | </p> | + | </b> of protein synthesis, synthetic biology, genetic scissors, DNA, RNA, and SARS-CoV-2 virus. (Fig. 3) To test out the tools ourselves, we prepared a lesson for the students at the same institution. At first, we thought it would be rather challenging to educate people that lack one of the most commonly used senses. However, our experience was positive. Pupils were attentive and their teacher assisted us in handing out tactile models and explaining what is pictured there. Moreover, headings with some explanations of what is seen in the picture were provided |
− | <div class="figure-container"> | + | <b> in Braille |
− | <img | + | </b> . This simplified the process greatly and helped children to follow our lecture. |
− | + | </p> | |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure3" src="https://static.igem.org/mediawiki/2021/0/02/T--Vilnius-Lithuania--tactile_model.jpg"/> | |
− | + | <div> | |
− | <div> | + | <b> Fig. 3. |
− | <b> Fig. 1. </b> Accessibility adaptations on “6th SynBio sense” | + | </b> Tactile schemes explaining the basics of synthetic biology |
− | + | </div> | |
− | </div> | + | </div> |
− | </div> | + | <p> Third, we saw potential in making “6th SynBio sense” even more inclusive by |
− | <p> | + | <b> simplifying descriptions |
− | + | </b> of each model to make them suitable for people with intellectual disabilities. This idea came after encountering an Istanbul convention adapted to autistic people. We contacted a representative from the National Agency for Education Inclusivity department to help us and review our adapted texts. As we found, the key things to an inclusive text are | |
− | + | <b> giving clear instructions | |
− | + | </b> on what is seen on the screen, | |
− | <b> font changing function </b> for people with dyslexia. (Fig. 2) | + | <b> explaining complex terms |
− | + | </b> separately, adding | |
− | + | <b> examples from real life | |
− | + | </b> and keeping to the main idea of the text. We also used “Internet for everyone” [1] guide for any extensive inquires. Simplified descriptions currently are only in Lithuanian and can be accessed while previewing the text information. | |
− | + | </p> | |
− | + | <div class="figure-container"> | |
− | </p> | + | <img alt="" id="Figure4" src="https://static.igem.org/mediawiki/2021/9/96/T--Vilnius-Lithuania--simplified_description-04.png"/> |
− | <div class="figure-container"> | + | <div> |
− | <img | + | <b> Fig. 4. |
− | + | </b> Example of simplified description | |
− | + | </div> | |
− | + | </div> | |
− | + | <h3 class="index-headline"> Wiki accessibility | |
− | <div> | + | </h3> |
− | <b> Fig. 2. </b> Modification for dyslexia on “6th SynBio sense” | + | <p> Our goal this year was to make Wiki clear, intuitive, and accessible. |
− | + | </p> | |
− | </div> | + | <p> Before digging deeper into the Wiki implementation, we decided to develop it according to |
− | </div> | + | <b> WCAG documentation |
− | <p> | + | </b> [2] in order to make it |
− | + | <b> accessible | |
− | + | </b> . WCAG stands for Web Content Accessibility Guidelines. It is a document that includes many recommendations to make Web content more accessible. We set ourselves a goal to make our Wiki meet as many as possible of the WCAG | |
− | + | <b> A and AA level requirements | |
− | + | </b> . WCAG contains a rich list of specifications and in order to affirm our plan, which of them are the most sensible to realize, we organized a consultation with Jurij Nesvat - a testing engineer, who specializes in | |
− | + | <b> testing accessibility | |
− | + | </b> of Web pages. Together we reviewed and | |
− | + | <b> confirmed | |
− | + | </b> our plan that we set ourselves to fulfill. | |
− | + | </p> | |
− | + | <p> The plan included ‘A’, ‘AA’ level requirements and optional adjustments for groups with cognitive disability and dyslexia. | |
− | + | </p> | |
− | + | <p> The ‘A’ level requirements that required our attention, since they might not have been as intuitive as the others, were: making the website accessible by | |
− | + | <b> keyboard only | |
− | + | </b> , avoiding presentation that relies | |
− | + | <b> solely on color | |
− | + | </b> , paying attention that content would not have elements causing more than | |
− | + | <b> three flashes per second. | |
− | + | </b> | |
− | + | </p> | |
− | </p> | + | <p> The AA level requirements applied in our Wiki development were: making the website responsive to |
− | <div class="figure-container"> | + | <b> various screen sizes |
− | <img | + | </b> , introducing |
− | + | <b> high contrast | |
− | + | </b> between pieces of text and their backgrounds, using clear headings and labels, making focus | |
− | + | <b> visible | |
− | + | </b> , making | |
− | <div> | + | <b> consistent |
− | <b> Fig. 3. </b> Tactile schemes explaining the basics of | + | </b> navigation and identification. These requirements were the ones that we focused on, since the thoughtful implementation of them is exactly what contributes to reaching our goal related to Wiki development. |
− | + | </p> | |
− | </div> | + | <p> Besides the adjustments determined by WCAG protocol, we also added a couple of functionalities in the |
− | </div> | + | <b> accessibility toolbar: |
− | <p> | + | </b> one that introduces markings for people with |
− | + | <b> cognitive disabilities | |
− | + | </b> and another that changes the font of the text to | |
− | + | <b> dyslexia-friendly. | |
− | + | </b> Cognitive disability profile adjustments include highlighting of the | |
− | + | <b> buttons, headings and links, | |
− | + | </b> which makes it easier to navigate through the most important parts of the content. Dyslexia-friendly customization changes the font to make the text | |
− | + | <b> easier to read. | |
− | + | </b> We chose to implement adjustments for the mentioned target groups, since these adjustments might not be applied with | |
− | + | <b> external software. | |
− | <b> examples from real life </b> and keeping to the main idea of | + | </b> |
− | + | </p> | |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure5" src="https://static.igem.org/mediawiki/2021/8/89/T--Vilnius-Lithuania--cognitive_disability_profile_demo.png"/> | |
− | + | <div> | |
− | </p> | + | <b> Fig. 5. |
− | <div class="figure-container"> | + | </b> Adjustments for cognitive disability profile |
− | <img | + | </div> |
− | + | </div> | |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure6" src="https://static.igem.org/mediawiki/2021/f/f5/T--Vilnius-Lithuania--dyslexia_friendly_demo.png"/> | |
− | + | <div> | |
− | <div><b> Fig. 4. </b> Example of simplified description</div> | + | <b> Fig. 6. |
− | </div> | + | </b> Adjustments for dyslexia |
− | <h3 class="index-headline">Wiki accessibility</h3> | + | </div> |
− | <p> | + | </div> |
− | + | <h3 class="index-headline"> Adaptations for colorblind | |
− | + | </h3> | |
− | </p> | + | <p> Throughout the project, one of the priorities was to make sure that it is accessible to people with colorblindness. Color vision deficiency affects approximately 1 in 12 men (8 percent) and 1 in 200 (0,5 percent) women. [3] There are several main types of color blindness: deuteranopia (red-green color blindness), protanopia (red color blindness), Tritanopia (blue-yellow color blindness). One member of our team has protanopia as well, so this adaptation was especially important for us. He helped to choose the best color palette for the whole project and checked contrast ratios between colors. Therefore the colors we chose are easy to distinguish for people with all major color blindness types (Fig. 7). We used these colors in all visuals used for the project, on the “6th Synbio sense” website, our wiki and educational powerpoint presentations. |
− | <p> | + | </p> |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure7" src="https://static.igem.org/mediawiki/2021/d/d5/T--Vilnius-Lithuania--color_palette.png"/> | |
− | + | <div> | |
− | + | <b> Fig. 7. | |
− | + | </b> Comparison of how colorblind people and common-type people see the selected color palette | |
− | + | </div> | |
− | + | </div> | |
− | + | <p> Despite the right choice of colors, it is essential to maintain the right contrast ratio of text and background. According to Web Content Accessibility Guidelines (WCAG) 2.1 AA rating success criterion 1.43, the visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, and also, large-scale text (with at least 18 points or 14 points bold) and images of large-scale text must have a contrast ratio of at least 3:1 [2] (Fig. 8). We also applied this practice on the “6th Synbio sense” website, our wiki and educational powerpoint presentations. | |
− | + | </p> | |
− | + | <div class="figure-container"> | |
− | <b> testing accessibility </b> of Web pages. Together we reviewed | + | <img alt="" id="Figure8" src="https://static.igem.org/mediawiki/2021/2/2b/T--Vilnius-Lithuania--contrast_ratio.png"/> |
− | + | <div> | |
− | </p> | + | <b> Fig. 8. |
− | <p> | + | </b> Contrast ratio evaluation |
− | + | </div> | |
− | + | </div> | |
− | </p> | + | <p> We thought about applications for colorblind people not only when creating a graphic and web design, but also when designing a prototype of our diagnostic test. As the sole color shift from blue to red may be indistinguishable and slight tone differences could slip through the eyes of the end user we included reference color circles for extra measures. If a person is infected with amebiasis, diagnostic test outside color equalize with inner membrane color in all three windows so that person could better interpret results. |
− | <p> | + | </p> |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure9" src="https://static.igem.org/mediawiki/2021/c/c3/T--Vilnius-Lithuania--3_down_v2_membrane_area.png"/> | |
− | + | <div> | |
− | + | <b> Fig. 9. | |
− | + | </b> Colorimetric reference for diagnostic test - positive result shows as all three windows have merged colors with their corresponding outer rings | |
− | <b> three flashes per second. </b> | + | </div> |
− | </p> | + | </div> |
− | <p> | + | <p> A similar effect goes to negative results - if a person is not infected or diagnostic test is not functional at the particular moment at least one of all windows will not have merged colorimetric response with outer ring. |
− | + | </p> | |
− | + | <div class="figure-container"> | |
− | + | <img alt="" id="Figure10" src="https://static.igem.org/mediawiki/2021/1/16/T--Vilnius-Lithuania--3_down_v2_membrane_albumin_correct_area.png"/> | |
− | + | <div> | |
− | <b> visible </b> , making <b> consistent </b> navigation and | + | <b> Fig. 10. |
− | + | </b> Colorimetric reference for diagnostic test - negative result shows only one red window for albumin | |
− | + | </div> | |
− | + | </div> | |
− | </p> | + | <div class="figure-container"> |
− | <p> | + | <img alt="" id="Figure11" src="https://static.igem.org/mediawiki/2021/a/ae/T--Vilnius-Lithuania--3_down_v2_membrane_incorrect_area.png"/> |
− | + | <div> | |
− | + | <b> Fig. 11. | |
− | <b> accessibility toolbar: </b> one that introduces markings for | + | </b> Colorimetric reference for diagnostic test - non-functional test shows all three blue windows |
− | + | </div> | |
− | + | </div> | |
− | <b> dyslexia-friendly. </b> Cognitive disability profile | + | <p> These two examples perfectly show that a reference guide could enhance reading assistance for users with various visual impairments. Reading instructions (Fig. 12) are proposed implementation. |
− | + | </p> | |
− | <b> buttons, headings and links, </b> which makes it easier to | + | <div class="figure-container"> |
− | + | <img alt="" id="Figure12" src="https://static.igem.org/mediawiki/2021/0/0f/T--Vilnius-Lithuania--Diagnostic_test_colors.png"/> | |
− | + | <div> | |
− | <b> easier to read. </b> We chose to implement adjustments for the | + | <b> Fig. 12. |
− | + | </b> Colorimetric reference for the diagnostic test - overall reading scheme | |
− | + | </div> | |
− | </p> | + | </div> |
− | <div class="figure-container"> | + | </div> |
− | <img | + | <div class="references-wrapper"> |
− | + | <div class="breaker"> | |
− | + | </div> | |
− | + | <h2> References | |
− | + | </h2> | |
− | <div> | + | <div class="references-container"> |
− | <b> Fig. 5. </b> Adjustments for cognitive disability profile | + | <div class="number"> 1. |
− | </div> | + | </div> |
− | </div> | + | <div> Aginskaitė, S., Gečaitė, K., & Jonikaitis, G. (2018). Internetas visiems: prieinamos skaitmeninės informacijos rengimo vadovas. |
− | <div class="figure-container"> | + | <a href="https://lnf.lt/wp-content/uploads/2018/12/Internetas_visiems.pdf" target="_blank"> To the article |
− | <img | + | </a> |
− | + | </div> | |
− | + | <div class="number"> 2. | |
− | + | </div> | |
− | + | <div> Caldwell, B., Cooper, M., Reid, L. G., Vanderheiden, G., Chisholm, W., Slatin, J., & White, J. (2018). Web content accessibility guidelines (WCAG) 2.1. | |
− | <div><b> Fig. 6. </b> Adjustments for dyslexia</div> | + | <a href="https://www.w3.org/TR/WCAG21/" target="_blank"> To the guidelines |
− | </div> | + | </a> |
− | <h3 class="index-headline">Adaptations for colorblind</h3> | + | </div> |
− | <p> | + | <div class="number"> 3. |
− | + | </div> | |
− | + | <div> Colour Blind Awareness is a Community Interest Company. (n.d.). Colour Blindness. Colourblindawareness. Retrieved October 5, 2021. | |
− | + | <a href="https://www.colourblindawareness.org/colour-blindness/" target="_blank"> To the article | |
− | + | </a> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="index-container"> | |
− | + | <div class="index-header"> | |
− | + | </div> | |
− | + | <div class="index-content"> | |
− | + | </div> | |
− | + | </div> | |
− | </p> | + | </div> |
− | <div class="figure-container"> | + | <footer> |
− | <img | + | <div class="logo-igem"> |
− | + | <object data="https://static.igem.org/mediawiki/2021/f/ff/T--Vilnius-Lithuania--iGEM-2021.svg"> | |
− | + | </object> | |
− | + | </div> | |
− | + | <div class="social-container"> | |
− | <div> | + | <div>FOLLOW US |
− | <b> Fig. 7. </b> Comparison of how colorblind people and | + | </div> |
− | + | <div> | |
− | </div> | + | <a class="placeholder-social-icon" href="https://www.facebook.com/VilniusiGEM"> |
− | </div> | + | <img src="https://static.igem.org/mediawiki/2021/3/36/T--Vilnius-Lithuania--facebook.svg"/> |
− | <p> | + | </a> |
− | + | <a class="placeholder-social-icon" href="https://www.instagram.com/igem_vilnius/"> | |
− | + | <img src="https://static.igem.org/mediawiki/2021/6/64/T--Vilnius-Lithuania--instagram.svg"/> | |
− | + | </a> | |
− | + | <a class="placeholder-social-icon" href="https://www.linkedin.com/company/vilnius-igem/"> | |
− | + | <img src="https://static.igem.org/mediawiki/2021/e/e7/T--Vilnius-Lithuania--linkedin.svg"/> | |
− | + | </a> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="mail-container"> | |
− | </p> | + | <div>CONTACT US |
− | <div class="figure-container"> | + | </div> |
− | <img | + | <a href="mailto:info@vilniusigem.lt">info@vilniusigem.lt |
− | + | </a> | |
− | + | </div> | |
− | + | <div class="grid-sponsors"> | |
− | + | <div> | |
− | <div><b> Fig. 8. </b> Contrast ratio evaluation</div> | + | <div> |
− | </div> | + | <object data="https://static.igem.org/mediawiki/2021/d/dc/T--Vilnius-Lithuania--VU.svg"> |
− | <p> | + | </object> |
− | + | </div> | |
− | + | <div> | |
− | + | <object data="https://static.igem.org/mediawiki/2021/b/bf/T--Vilnius-Lithuania--Termofisher.svg"> | |
− | + | </object> | |
− | + | </div> | |
− | + | <div> | |
− | + | <object data="https://static.igem.org/mediawiki/2021/1/10/T--Vilnius-Lithuania--CityOfVilnius.svg"> | |
− | + | </object> | |
− | + | </div> | |
− | </p> | + | </div> |
− | <div class="figure-container"> | + | <div> |
− | <img | + | <div> |
− | + | <object data="https://static.igem.org/mediawiki/2021/b/bb/T--Vilnius-Lithuania--GMC.svg"> | |
− | + | </object> | |
− | + | </div> | |
− | + | <div> | |
− | <div> | + | <object data="https://static.igem.org/mediawiki/2021/9/98/T--Vilnius-Lithuania--Nanodiagnostika.svg"> |
− | <b> Fig. 9. </b> Colorimetric reference for diagnostic test - | + | </object> |
− | + | </div> | |
− | + | <div> | |
− | </div> | + | <object data="https://static.igem.org/mediawiki/2021/1/16/T--Vilnius-Lithuania--Telesoftas.svg"> |
− | </div> | + | </object> |
− | <p> | + | </div> |
− | + | <div> | |
− | + | <object data="https://static.igem.org/mediawiki/2021/7/70/T--Vilnius-Lithuania--Kopicentras.svg"> | |
− | + | </object> | |
− | + | </div> | |
− | </p> | + | </div> |
− | <div class="figure-container"> | + | <div> |
− | <img | + | <div> |
− | + | <object data="https://static.igem.org/mediawiki/2021/d/df/T--Vilnius-Lithuania--SnapGene.svg"> | |
− | + | </object> | |
− | + | </div> | |
− | + | <div> | |
− | <div> | + | <object data="https://static.igem.org/mediawiki/2021/3/3e/T--Vilnius-Lithuania--Laborama.svg"> |
− | <b> Fig. 10. </b> Colorimetric reference for diagnostic test - | + | </object> |
− | + | </div> | |
− | </div> | + | <div> |
− | </div> | + | <object data="https://static.igem.org/mediawiki/2021/c/c1/T--Vilnius-Lithuania--Biotecha.svg"> |
− | <div class="figure-container"> | + | </object> |
− | <img | + | </div> |
− | + | <div> | |
− | + | <object data="https://static.igem.org/mediawiki/2021/4/4f/T--Vilnius-Lithuania--Grida.svg"> | |
− | + | </object> | |
− | + | </div> | |
− | <div> | + | </div> |
− | <b> Fig. 11. </b> Colorimetric reference for diagnostic test - | + | |
− | + | ||
− | </div> | + | |
− | </div> | + | |
− | <p> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </p> | + | |
− | <div class="figure-container"> | + | |
− | <img | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div> | + | |
− | <b> Fig. 12. </b> Colorimetric reference for the diagnostic test | + | |
− | + | ||
− | </div> | + | |
− | </div> | + | |
− | </div> | + | |
− | <div class="references-wrapper"> | + | |
− | <div class="breaker"></div> | + | |
− | <h2>References</h2> | + | |
− | <div class="references-container"> | + | |
− | <div class="number">1.</div> | + | |
− | <div> | + | |
− | + | ||
− | + | ||
− | + | ||
− | <a | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </a> | + | |
− | </div> | + | |
− | <div class="number">2.</div> | + | |
− | <div> | + | |
− | + | ||
− | + | ||
− | + | ||
− | <a href="https://www.w3.org/TR/WCAG21/" target="_blank"> | + | |
− | + | ||
− | </a> | + | |
− | </div> | + | |
− | <div class="number">3.</div> | + | |
− | <div> | + | |
− | + | ||
− | + | ||
− | + | ||
− | <a | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </a> | + | |
− | </div> | + | |
− | </div> | + | |
− | </div> | + | |
− | </div> | + | |
− | <div class="index-container"> | + | |
− | <div class="index-header"></div> | + | |
− | <div class="index-content"></div> | + | |
− | </div> | + | |
− | </div> | + | |
− | <footer> | + | |
− | <div class="logo-igem"> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div class="social-container"> | + | |
− | <div>FOLLOW US</div> | + | |
− | <div> | + | |
− | <a | + | |
− | + | ||
− | + | ||
− | + | ||
− | <img | + | |
− | + | ||
− | + | ||
− | </a> | + | |
− | <a | + | |
− | + | ||
− | + | ||
− | + | ||
− | <img | + | |
− | + | ||
− | + | ||
− | </a> | + | |
− | <a | + | |
− | + | ||
− | + | ||
− | + | ||
− | <img | + | |
− | + | ||
− | + | ||
− | </a> | + | |
− | </div> | + | |
− | </div> | + | |
− | <div class="mail-container"> | + | |
− | <div>CONTACT US</div> | + | |
− | <a href="mailto:info@vilniusigem.lt">info@vilniusigem.lt</a> | + | |
− | </div> | + | |
− | <div class="grid-sponsors"> | + | |
− | <div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | </div> | + | |
− | <div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | </div> | + | |
− | <div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | <div> | + | |
− | <object | + | |
− | + | ||
− | + | ||
− | </div> | + | |
− | </div> | + | |
</div> | </div> | ||
− | </footer> | + | </footer> |
− | </div> | + | </div> |
− | <script | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/navigationTabs&action=raw&ctype=text/javascript" type="text/javascript"> |
− | + | </script> | |
− | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/background&action=raw&ctype=text/javascript" type="text/javascript"> | |
− | + | </script> | |
− | <script | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/contentpage&action=raw&ctype=text/javascript" type="text/javascript"> |
− | + | </script> | |
− | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/navbar&action=raw&ctype=text/javascript" type="text/javascript"> | |
− | + | </script> | |
− | <script | + | <script> contentPage( "Sections", true, 300, ) </script> |
− | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/GlslCanvas&action=raw&ctype=text/javascript" type="text/javascript"> | |
− | + | </script> | |
− | + | <script src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/backgroundTransition&action=raw&ctype=text/javascript" type="text/javascript"> | |
− | <script | + | </script> |
− | + | ||
− | + | ||
− | + | ||
− | <script> | + | |
− | + | ||
− | + | ||
− | <script | + | |
− | + | ||
− | + | ||
− | + | ||
− | <script | + | |
− | + | ||
− | + | ||
− | + | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 13:39, 16 October 2021
INCLUSIVITY
Introduction
At Vilnius-Lithuania iGEM, we recognize the importance of diversity and inclusion within the science community. We are committed to making the synthetic biology community more open and creating a learning environment where everyone feels welcome.
On 2024 September 1st changes of article 14 of the Education Law of the Republic of Lithuania comes into force and a new inclusive education chapter begins. Every general education school should be ready to accept and educate students with disabilities. However, currently not enough measures are taken to reach this goal. We learned this from numerous calls with special pedagogues, students with disabilities and others working in the field of inclusivity.
During our consultations with practitioners working with disabilities, it was often stated that negative experiences in school, pessimistic outlook coming from the teachers and lack of exposure to the inclusivity of universities disencourage pupils from fulfilling their academic potential later in life. As one of our consultants, Dr. Barbara R. Heard, an associate biology professor who focuses on inclusive education, claimed, there are still many complicated areas relating to inclusive education, read full consultation here . According to her, it is crucial to focus on changing the outlook on the problem to induce progress. This and other consultations inspired us to become the change ourselves. While planning our educational activities and thinking about the design and presentation of our project, we followed an inclusive approach.
Our main focus groups were people with vision and intellectual disabilities . First, we chose people with visual impairments due to the fact that most of the education material is visual - it takes the form of illustrations, graphs etc. This means people with impaired vision do not have a chance to learn more specific subjects like synthetic biology. Second, individuals with cognitive disabilities were chosen due to common underestimation of their abilities. Meaning that such people might not receive information on complex yet significant topics of contemporary society like vaccines, GMO’s etc.
6th SynBio sense
As a way to make “6th SynBio sense” platform more inclusive we set several goals. First, we applied accessibility tools to the platform’s web page. As mentioned above, we made sure that the website is accessible for color blind people, by choosing the right color palette and keeping the right contrast ratio between text and background (Fig. 1).
![](https://static.igem.org/mediawiki/2021/6/6d/T--Vilnius-Lithuania--website_adaptation-03.png)
What is more, as the website contains a lot of written information, it was important for us that it is readable for everyone, therefore we applied a font changing function for people with dyslexia. (Fig. 2) We also made sound recordings of the provided information for users, who have vision deficiency. In general, we tried to keep the design of the website minimalistic and with as few distractions as possible, to keep the main focus on the augmented reality models and provided information.
![](https://static.igem.org/mediawiki/2021/2/2d/T--Vilnius-Lithuania--modification_for_dyslexia.png)
Second, we wanted to make 3D models accessible for the blind. To reach the goal, we teamed up with a biology teacher Gintaras Nenartavičius from the Lithuanian Center for the Development of the Blind and Visually Impaired. We learned about the most used educational tools and decided to implement this knowledge into our project. After thorough consultations with an expert teacher and 3D printing specialist, we printed 3D models of virus and protein translation as well as tactile schemes of protein synthesis, synthetic biology, genetic scissors, DNA, RNA, and SARS-CoV-2 virus. (Fig. 3) To test out the tools ourselves, we prepared a lesson for the students at the same institution. At first, we thought it would be rather challenging to educate people that lack one of the most commonly used senses. However, our experience was positive. Pupils were attentive and their teacher assisted us in handing out tactile models and explaining what is pictured there. Moreover, headings with some explanations of what is seen in the picture were provided in Braille . This simplified the process greatly and helped children to follow our lecture.
![](https://static.igem.org/mediawiki/2021/0/02/T--Vilnius-Lithuania--tactile_model.jpg)
Third, we saw potential in making “6th SynBio sense” even more inclusive by simplifying descriptions of each model to make them suitable for people with intellectual disabilities. This idea came after encountering an Istanbul convention adapted to autistic people. We contacted a representative from the National Agency for Education Inclusivity department to help us and review our adapted texts. As we found, the key things to an inclusive text are giving clear instructions on what is seen on the screen, explaining complex terms separately, adding examples from real life and keeping to the main idea of the text. We also used “Internet for everyone” [1] guide for any extensive inquires. Simplified descriptions currently are only in Lithuanian and can be accessed while previewing the text information.
![](https://static.igem.org/mediawiki/2021/9/96/T--Vilnius-Lithuania--simplified_description-04.png)
Wiki accessibility
Our goal this year was to make Wiki clear, intuitive, and accessible.
Before digging deeper into the Wiki implementation, we decided to develop it according to WCAG documentation [2] in order to make it accessible . WCAG stands for Web Content Accessibility Guidelines. It is a document that includes many recommendations to make Web content more accessible. We set ourselves a goal to make our Wiki meet as many as possible of the WCAG A and AA level requirements . WCAG contains a rich list of specifications and in order to affirm our plan, which of them are the most sensible to realize, we organized a consultation with Jurij Nesvat - a testing engineer, who specializes in testing accessibility of Web pages. Together we reviewed and confirmed our plan that we set ourselves to fulfill.
The plan included ‘A’, ‘AA’ level requirements and optional adjustments for groups with cognitive disability and dyslexia.
The ‘A’ level requirements that required our attention, since they might not have been as intuitive as the others, were: making the website accessible by keyboard only , avoiding presentation that relies solely on color , paying attention that content would not have elements causing more than three flashes per second.
The AA level requirements applied in our Wiki development were: making the website responsive to various screen sizes , introducing high contrast between pieces of text and their backgrounds, using clear headings and labels, making focus visible , making consistent navigation and identification. These requirements were the ones that we focused on, since the thoughtful implementation of them is exactly what contributes to reaching our goal related to Wiki development.
Besides the adjustments determined by WCAG protocol, we also added a couple of functionalities in the accessibility toolbar: one that introduces markings for people with cognitive disabilities and another that changes the font of the text to dyslexia-friendly. Cognitive disability profile adjustments include highlighting of the buttons, headings and links, which makes it easier to navigate through the most important parts of the content. Dyslexia-friendly customization changes the font to make the text easier to read. We chose to implement adjustments for the mentioned target groups, since these adjustments might not be applied with external software.
![](https://static.igem.org/mediawiki/2021/8/89/T--Vilnius-Lithuania--cognitive_disability_profile_demo.png)
![](https://static.igem.org/mediawiki/2021/f/f5/T--Vilnius-Lithuania--dyslexia_friendly_demo.png)
Adaptations for colorblind
Throughout the project, one of the priorities was to make sure that it is accessible to people with colorblindness. Color vision deficiency affects approximately 1 in 12 men (8 percent) and 1 in 200 (0,5 percent) women. [3] There are several main types of color blindness: deuteranopia (red-green color blindness), protanopia (red color blindness), Tritanopia (blue-yellow color blindness). One member of our team has protanopia as well, so this adaptation was especially important for us. He helped to choose the best color palette for the whole project and checked contrast ratios between colors. Therefore the colors we chose are easy to distinguish for people with all major color blindness types (Fig. 7). We used these colors in all visuals used for the project, on the “6th Synbio sense” website, our wiki and educational powerpoint presentations.
![](https://static.igem.org/mediawiki/2021/d/d5/T--Vilnius-Lithuania--color_palette.png)
Despite the right choice of colors, it is essential to maintain the right contrast ratio of text and background. According to Web Content Accessibility Guidelines (WCAG) 2.1 AA rating success criterion 1.43, the visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, and also, large-scale text (with at least 18 points or 14 points bold) and images of large-scale text must have a contrast ratio of at least 3:1 [2] (Fig. 8). We also applied this practice on the “6th Synbio sense” website, our wiki and educational powerpoint presentations.
![](https://static.igem.org/mediawiki/2021/2/2b/T--Vilnius-Lithuania--contrast_ratio.png)
We thought about applications for colorblind people not only when creating a graphic and web design, but also when designing a prototype of our diagnostic test. As the sole color shift from blue to red may be indistinguishable and slight tone differences could slip through the eyes of the end user we included reference color circles for extra measures. If a person is infected with amebiasis, diagnostic test outside color equalize with inner membrane color in all three windows so that person could better interpret results.
![](https://static.igem.org/mediawiki/2021/c/c3/T--Vilnius-Lithuania--3_down_v2_membrane_area.png)
A similar effect goes to negative results - if a person is not infected or diagnostic test is not functional at the particular moment at least one of all windows will not have merged colorimetric response with outer ring.
![](https://static.igem.org/mediawiki/2021/1/16/T--Vilnius-Lithuania--3_down_v2_membrane_albumin_correct_area.png)
![](https://static.igem.org/mediawiki/2021/a/ae/T--Vilnius-Lithuania--3_down_v2_membrane_incorrect_area.png)
These two examples perfectly show that a reference guide could enhance reading assistance for users with various visual impairments. Reading instructions (Fig. 12) are proposed implementation.
![](https://static.igem.org/mediawiki/2021/0/0f/T--Vilnius-Lithuania--Diagnostic_test_colors.png)