Difference between revisions of "Team:Vilnius-Lithuania/Inclusivity"

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

Latest revision as of 01:12, 22 October 2021

INCLUSIVITY

Header

Introduction

At Vilnius-Lithuania iGEM, we recognize the importance of diversity and inclusion within the science field. 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 inclusivity field.

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 discourage pupils from fulfilling their academic potential later in life. Moreover, 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 the 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 audience 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).

Illustration of how our page looks originally, for people with deuteranopia, protanopia and tritanopia
Fig. 1. Accessibility adaptations on “6th SynBio sense” website

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.

Illustration comparing original text and text modified for dyslexia
Fig. 2. Modification for dyslexia on “6th SynBio sense” website

We also 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.

Photograph of person reading braille.
Fig. 3. Tactile schemes explaining the basics of synthetic biology

Finally, 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.

Illustration comparing regular text and its version in simple language.
Fig. 4. Example of simplified description

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, specializing 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 demanded our attention, since they were not 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.

Wiki screencapture showing how cognitive disability profile works.
Fig. 5. Adjustments for cognitive disability profile
Wiki screencapture showing how dyslexia friendly profile works.
Fig. 6. Adjustments for dyslexia

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 for our visual identity 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.

Illustration of our original visual identity compared to what is seen by people with deuteranopia, protanopia and tritanopia.
Fig. 7. Comparison of how colorblind people and common-type people see the selected color palette

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.

Illustration of used contrast ratio in our web design.
Fig. 8. Contrast ratio evaluation

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.

Fig. 9. Colorimetric reference for diagnostic test - positive result shows as all three windows have merged colors with their corresponding outer rings

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.

Fig. 10. Colorimetric reference for diagnostic test - negative result shows only one red window for albumin
Fig. 11. Colorimetric reference for diagnostic test - non-functional test shows all three blue windows

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.

Fig. 12. Colorimetric reference for the diagnostic test - overall reading scheme

References

1.
Aginskaitė, S., Gečaitė, K., & Jonikaitis, G. (2018). Internetas visiems: prieinamos skaitmeninės informacijos rengimo vadovas. To the article
2.
Caldwell, B., Cooper, M., Reid, L. G., Vanderheiden, G., Chisholm, W., Slatin, J., & White, J. (2018). Web content accessibility guidelines (WCAG) 2.1. To the guidelines
3.
Colour Blind Awareness is a Community Interest Company. (n.d.). Colour Blindness. Colourblindawareness. Retrieved October 5, 2021. To the article