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

 
(15 intermediate revisions by 4 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 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 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"/>  
  <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"/>
+
    <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"/>  
  <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"/>
+
    <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"/>  
  <link href="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/styles/contentpage&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/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&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 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"/>
+
    <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"/>
  <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"/>
+
    <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"/>  
  <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/navmenu-desktop&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 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-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 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/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/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/button-pill&amp;action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>  
</head>
+
    <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"/>  
<body>
+
    <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"/>
  <div class="navbar-container">
+
    <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"/>
  <nav class="navbar">
+
  </head>  
    <a class="navbar-logo" href="/Team:Vilnius-Lithuania">
+
  <body>  
    <img alt="AmebyeLogo" src="https://static.igem.org/mediawiki/2021/b/b0/T--Vilnius-Lithuania--amebyeLogo.svg"/>
+
    <div class="navbar-container">  
     AmeBye
+
      <nav class="navbar">  
    </a>
+
        <a class="bypass-block-link visually-hidden visible-when-focused" href="#main-content">Skip to main content
    <ul class="nav-menu">
+
        </a>
    </ul>
+
        <a class="navbar-logo" href="/Team:Vilnius-Lithuania">  
  </nav>
+
          <img alt="AmebyeLogo" src="https://static.igem.org/mediawiki/2021/b/b0/T--Vilnius-Lithuania--amebyeLogo.svg"/>      AmeBye  
  <div class="progress-container">
+
        </a>  
    <div class="progress-bar">
+
        <ul class="nav-menu">
    </div>
+
        </ul>  
  </div>
+
      </nav>  
  </div>
+
      <div class="progress-container">  
  <div class="background">
+
        <div class="progress-bar">
  <canvas id="background-canvas">
+
        </div>  
  </canvas>
+
      </div>  
  <div class="app-header">
+
      <div class="animation-container">  
    <h1 id="title">
+
        <script>     document.querySelector('body').classList.add("content-hidden");
    INCLUSIVITY
+
          window.addEventListener("load", function() {
    </h1>
+
            setTimeout(function() {
    <div class="app-header-image-wrapper" id="img">
+
              document.querySelector('body').classList.remove("content-hidden");
    <img alt="Header" src="https://static.igem.org/mediawiki/2021/e/eb/T--Vilnius-Lithuania--Inclusivity.JPG"/>
+
              document.querySelector('.animation-container').classList.add("loaded");
    </div>
+
              document.querySelector('.animation-container').innerHTML="";
  </div>
+
            }
  <div class="app-content">
+
                      , 200);
    <div class="app-content-text">
+
          }
    <div class="content-page-container">
+
                                );
      <h3 class="index-headline">
+
        </script>  
      Introduction
+
         <div id="loading-animation">
      </h3>
+
        </div>  
      <p>
+
        <div>Loading...
      At Vilnius-Lithuania iGEM, we recognize the importance of
+
        </div>  
      <b>
+
         <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">
         diversity and inclusion
+
         </script>  
      </b>
+
         <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">
      within the science community. We are committed to making the synthetic biology community more open and creating a learning environment where everyone feels welcome.
+
        </script>  
      </p>
+
         <script>     var animation = bodymovin.loadAnimation({
      <p>
+
            container: document.getElementById('loading-animation'),      animationData: loading_animation,      renderer: 'svg',      loop: true,      autoplay: true,    }
      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>
+
         </script>  
      <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>
+
      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
+
      </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
+
      <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>
+
         <b>
+
        Figure 1.
+
        </b>
+
         Accessibility adaptations on “6th SynBio sense” website
+
      </div>
+
 
       </div>
 
       </div>
       <p>
+
    </div>
      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
+
    <div class="background">
      <b>
+
       <canvas id="background-canvas">
        font changing function
+
      </canvas>
      </b>
+
      <canvas id="canvas-transition">
      for people with dyslexia. (Fig. 2) We also made
+
      </canvas>
      <b>
+
      <div class="app-header">
        sound recordings
+
        <div class="app-header-image-wrapper" id="img">
      </b>
+
          <h1 id="title">            INCLUSIVITY         
      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.
+
          </h1>
      </p>
+
          <img alt="Header" class="cover" src="https://static.igem.org/mediawiki/2021/e/eb/T--Vilnius-Lithuania--Inclusivity.JPG"/>
      <div class="figure-container">
+
        </div>
      <img alt="" id="Figure2" src="https://static.igem.org/mediawiki/2021/2/2d/T--Vilnius-Lithuania--modification_for_dyslexia.png"/>
+
      </div>
      <div>
+
      <div class="app-content">
        <b>
+
        <div class="app-content-text">
        Figure 2.
+
          <div class="content-page-container">
        </b>
+
            <h3 class="index-headline">          Introduction         
        Modification for dyslexia on “6th SynBio sense” website
+
            </h3>
      </div>
+
            <p>           At Vilnius-Lithuania iGEM, we recognize the importance of         
      </div>
+
              <b>            diversity and inclusion         
      <p>
+
              </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.         
      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
+
            </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.         
        printed 3D models
+
            </p>
      </b>
+
            <p>          During our consultations with practitioners working with disabilities, it was often stated that         
      of virus and protein translation as well as
+
              <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         
        tactile schemes
+
              <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>         
      </b>
+
            </p>
      of protein synthesis, synthetic biology, genetic scissors, DNA, RNA, and SARS-CoV-2 virus. (Fig. 5) 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>          Our main focus groups were people with         
      <b>
+
              <b>            vision and intellectual disabilities.         
        in Braille
+
              </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.         
      </b>
+
            </p>
      . This simplified the process greatly and helped children to follow our lecture.
+
            <h3 class="index-headline">          6th SynBio sense         
      </p>
+
            </h3>
      <div class="figure-container">
+
            <p>          As a way to make “6th SynBio sense” platform more inclusive we set several goals. First, we applied         
      <img alt="" id="Figure3" src="https://static.igem.org/mediawiki/2021/0/02/T--Vilnius-Lithuania--tactile_model.jpg"/>
+
              <b>            accessibility tools         
      <div>
+
              </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).         
        <b>
+
            </p>
        Figure 3.
+
            <div class="figure-container">
        </b>
+
              <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"/>
        Tactile schemes explaining the basics of synthetic biology
+
              <div>
      </div>
+
                <b>            Fig. 1.           
      </div>
+
                </b>            Accessibility adaptations on “6th SynBio sense” website         
      <p>
+
              </div>
      Third, we saw potential in making “6th SynBio sense” even more inclusive by
+
            </div>
      <b>
+
            <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          
        simplifying descriptions
+
              <b>           font changing function          
      </b>
+
              </b>           for people with dyslexia. (Fig. 2) We also made          
      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>           sound recordings          
      <b>
+
              </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.        
        giving clear instructions
+
            </p>  
      </b>
+
            <div class="figure-container">  
      on what is seen on the screen,
+
              <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"/>  
      <b>
+
              <div>  
        explaining complex terms
+
                <b>             Fig. 2.          
      </b>
+
                </b>           Modification for dyslexia on “6th SynBio sense” website          
      separately, adding
+
              </div>  
      <b>
+
            </div>  
        examples from real life
+
            <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          
      </b>
+
              <b>           printed 3D models          
      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.
+
              </b>           of virus and protein translation as well as          
      </p>
+
              <b>           tactile schemes          
      <div class="figure-container">
+
              </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          
      <img alt="" id="Figure4" src="https://static.igem.org/mediawiki/2021/9/96/T--Vilnius-Lithuania--simplified_description-04.png"/>
+
              <b>           in Braille.         
      <div>
+
              </b>           This simplified the process greatly and helped children to follow our lecture.        
        <b>
+
            </p>  
        Figure 4.
+
            <div class="figure-container">  
        </b>
+
              <img alt="Photograph of person reading braille." id="Figure3" src="https://static.igem.org/mediawiki/2021/0/02/T--Vilnius-Lithuania--tactile_model.jpg"/>  
        Example of simplified description
+
              <div>  
      </div>
+
                <b>             Fig. 3.          
      </div>
+
                </b>           Tactile schemes explaining the basics of synthetic biology          
      <h3 class="index-headline">
+
              </div>  
      Wiki accessibility
+
            </div>  
      </h3>
+
            <p>           Finally, we saw potential in making “6th SynBio sense” even more inclusive by          
      <p>
+
              <b>           simplifying descriptions          
      Our goal this year was to make Wiki clear, intuitive, and accessible.
+
              </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          
      </p>
+
              <b>           giving clear instructions          
      <p>
+
              </b>           on what is seen on the screen,          
      Before digging deeper into the Wiki implementation, we decided to develop it according to
+
              <b>           explaining complex terms          
      <b>
+
              </b>           separately, adding          
        WCAG documentation
+
              <b>           examples from real life          
      </b>
+
              </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.        
      [2] in order to make it
+
            </p>  
      <b>
+
            <div class="figure-container">  
        accessible
+
              <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"/>  
      </b>
+
              <div>  
      . 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>             Fig. 4.          
      <b>
+
                </b>           Example of simplified description          
        A and AA level requirements
+
              </div>  
      </b>
+
            </div>  
      . 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
+
            <h3 class="index-headline">           Wiki accessibility        
      <b>
+
            </h3>  
        testing accessibility
+
            <p>           Our goal this year was to make Wiki clear, intuitive, and accessible.        
      </b>
+
            </p>  
      of Web pages. Together we reviewed and
+
            <p>           Before digging deeper into the Wiki implementation, we decided to develop it according to          
      <b>
+
              <b>           WCAG documentation          
        confirmed
+
              </b>           [2] in order to make it          
      </b>
+
              <b>           accessible.         
      our plan that we set ourselves to fulfill.
+
              </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          
      </p>
+
              <b>           A and AA level requirements.         
      <p>
+
              </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 plan included ‘A’, ‘AA’ level requirements and optional adjustments for groups with cognitive disability and dyslexia.
+
              <b>           testing accessibility          
      </p>
+
              </b>           of Web pages. Together we reviewed and          
      <p>
+
              <b>           confirmed          
      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>           our plan that we set ourselves to fulfill.        
      <b>
+
            </p>  
        keyboard only
+
            <p>         <b> The plan included ‘A’, ‘AA’ level requirements and optional adjustments for groups with cognitive disability and dyslexia.</b>
       </b>
+
            </p>  
      , avoiding presentation that relies
+
            <p>           The ‘A’ level requirements that demanded our attention, since they were not as intuitive as the others, were: making the website accessible by      
      <b>
+
              <b>           keyboard only,        
        solely on color
+
              </b>           avoiding presentation that relies        
      </b>
+
              <b>           solely on color,         
      , paying attention that content would not have elements causing more than
+
              </b>           paying attention that content would not have elements causing more than          
      <b>
+
              <b>           three flashes per second.          
        three flashes per second.
+
              </b>  
      </b>
+
            </p>  
      </p>
+
            <p>           The AA level requirements applied in our Wiki development were: making the website responsive to          
      <p>
+
              <b>           various screen sizes,         
      The AA level requirements applied in our Wiki development were: making the website responsive to
+
              </b>           introducing          
      <b>
+
              <b>           high contrast          
        various screen sizes
+
              </b>           between pieces of text and their backgrounds, using clear headings and labels, making focus          
      </b>
+
              <b>           visible,         
      , introducing
+
              </b>           making          
      <b>
+
              <b>           consistent          
        high contrast
+
              </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>
+
            </p>  
      between pieces of text and their backgrounds, using clear headings and labels, making focus
+
            <p>           Besides the adjustments determined by WCAG protocol, we also added a couple of functionalities in the          
      <b>
+
              <b>           accessibility toolbar:          
        visible
+
              </b>           one that introduces markings for people with          
      </b>
+
              <b>           cognitive disabilities          
      , making
+
              </b>           and another that changes the font of the text to          
      <b>
+
              <b>           dyslexia-friendly.          
        consistent
+
              </b>           Cognitive disability profile adjustments include highlighting of the          
      </b>
+
              <b>           buttons, headings and links,          
      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>           which makes it easier to navigate through the most important parts of the content. Dyslexia-friendly customization changes the font to make the text          
      </p>
+
              <b>           easier to read.          
      <p>
+
              </b>           We chose to implement adjustments for the mentioned target groups, since these adjustments might not be applied with          
      Besides the adjustments determined by WCAG protocol, we also added a couple of functionalities in the
+
              <b>           external software.          
      <b>
+
              </b>  
        accessibility toolbar:
+
            </p>  
      </b>
+
            <div class="figure-container">  
      one that introduces markings for people with
+
              <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"/>  
      <b>
+
              <div>  
        cognitive disabilities
+
                <b>             Fig. 5.          
      </b>
+
                </b>           Adjustments for cognitive disability profile          
      and another that changes the font of the text to
+
              </div>  
      <b>
+
            </div>  
        dyslexia-friendly.
+
            <div class="figure-container">  
      </b>
+
              <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"/>  
      Cognitive disability profile adjustments include highlighting of the
+
              <div>  
      <b>
+
                <b>             Fig. 6.          
        buttons, headings and links,
+
                </b>           Adjustments for dyslexia          
      </b>
+
              </div>  
      which makes it easier to navigate through the most important parts of the content. Dyslexia-friendly customization changes the font to make the text
+
            </div>  
      <b>
+
            <h3 class="index-headline">           Adaptations for colorblind        
        easier to read.
+
            </h3>  
      </b>
+
            <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.        
      We chose to implement adjustments for the mentioned target groups, since these adjustments might not be applied with
+
            </p>  
      <b>
+
            <div class="figure-container center">  
        external software.
+
              <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/>  
      </b>
+
              <div>  
      </p>
+
                <b>             Fig. 7.          
      <div class="figure-container">
+
                </b>           Comparison of how colorblind people and common-type people see the selected color palette          
      <img alt="" id="Figure5" src="https://static.igem.org/mediawiki/2021/8/89/T--Vilnius-Lithuania--cognitive_disability_profile_demo.png"/>
+
              </div>  
      <div>
+
            </div>  
        <b>
+
            <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.        
        Figure 5.
+
            </p>  
        </b>
+
            <div class="figure-container">  
        Adjustments for cognitive disability profile
+
              <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"/>  
      </div>
+
              <div>  
      </div>
+
                <b>             Fig. 8.          
      <div class="figure-container">
+
                </b>           Contrast ratio evaluation          
      <img alt="" id="Figure6" src="https://static.igem.org/mediawiki/2021/f/f5/T--Vilnius-Lithuania--dyslexia_friendly_demo.png"/>
+
              </div>  
      <div>
+
            </div>  
        <b>
+
            <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.        
        Figure 6.
+
            </p>  
        </b>
+
            <div class="figure-container">  
        Adjustments for dyslexia
+
              <img alt="" id="Figure9" src="https://static.igem.org/mediawiki/2021/c/c3/T--Vilnius-Lithuania--3_down_v2_membrane_area.png"/>  
      </div>
+
              <div>  
      </div>
+
                <b>             Fig. 9.          
      <h3 class="index-headline">
+
                </b>           Colorimetric reference for diagnostic test - positive result shows as all three windows have merged colors with their corresponding outer rings          
      Adaptations for colorblind
+
              </div>  
      </h3>
+
            </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.        
      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">  
      <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"/>  
      <img alt="" id="Figure7" src="https://static.igem.org/mediawiki/2021/d/d5/T--Vilnius-Lithuania--color_palette.png"/>
+
              <div>  
      <div>
+
                <b>             Fig. 10.          
        <b>
+
                </b>           Colorimetric reference for diagnostic test - negative result shows only one red window for albumin          
        Figure 7.
+
              </div>  
        </b>
+
            </div>  
        Comparison of how colorblind people and common-type people see the selected color palette
+
            <div class="figure-container">  
      </div>
+
              <img alt="" id="Figure11" src="https://static.igem.org/mediawiki/2021/a/ae/T--Vilnius-Lithuania--3_down_v2_membrane_incorrect_area.png"/>  
      </div>
+
              <div>  
      <p>
+
                <b>             Fig. 11.          
      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. 2). We also applied this practice on the “6th Synbio sense” website, our wiki and educational powerpoint presentations.
+
                </b>           Colorimetric reference for diagnostic test - non-functional test shows all three blue windows          
      </p>
+
              </div>  
      <div class="figure-container">
+
            </div>  
      <img alt="" id="Figure8" src="https://static.igem.org/mediawiki/2021/2/2b/T--Vilnius-Lithuania--contrast_ratio.png"/>
+
            <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.        
      <div>
+
            </p>  
        <b>
+
            <div class="figure-container">  
        Figure 8.
+
              <img alt="" id="Figure12" src="https://static.igem.org/mediawiki/2021/0/0f/T--Vilnius-Lithuania--Diagnostic_test_colors.png"/>  
        </b>
+
              <div>  
        Contrast ratio evaluation
+
                <b>             Fig. 12.          
      </div>
+
                </b>           Colorimetric reference for the diagnostic test - overall reading scheme          
      </div>
+
              </div>  
      <p>
+
            </div>  
      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.
+
          </div>  
      </p>
+
          <div class="references-wrapper">  
      <div class="figure-container">
+
            <div class="breaker">  
      <img alt="" id="Figure9" src="https://static.igem.org/mediawiki/2021/c/c3/T--Vilnius-Lithuania--3_down_v2_membrane_area.png"/>
+
            </div>  
      <div>
+
            <h2>           References        
        <b>
+
            </h2>  
        Figure 9.
+
            <div class="references-container">  
        </b>
+
              <div class="number">           1.          
        Colorimetric reference for diagnostic test - positive result shows as all three windows have merged colors with their corresponding outer rings
+
              </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          
      <p>
+
                </a>  
      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.
+
              </div>  
      </p>
+
              <div class="number">           2.          
      <div class="figure-container">
+
              </div>  
      <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>           Caldwell, B., Cooper, M., Reid, L. G., Vanderheiden, G., Chisholm, W., Slatin, J., &amp; White, J. (2018). Web content accessibility guidelines (WCAG) 2.1.          
      <div>
+
                <a href="https://www.w3.org/TR/WCAG21/" target="_blank">             To the guidelines          
        <b>
+
                </a>  
        Figure 10.
+
              </div>  
        </b>
+
              <div class="number">           3.          
        Colorimetric reference for diagnostic test - negative result shows only one red window for albumin
+
              </div>  
      </div>
+
              <div>           Colour Blind Awareness is a Community Interest Company. (n.d.). Colour Blindness. Colourblindawareness. Retrieved October 5, 2021.          
      </div>
+
                <a href="https://www.colourblindawareness.org/colour-blindness/" target="_blank">             To the article          
      <div class="figure-container">
+
                </a>  
      <img alt="" id="Figure11" src="https://static.igem.org/mediawiki/2021/a/ae/T--Vilnius-Lithuania--3_down_v2_membrane_incorrect_area.png"/>
+
              </div>  
      <div>
+
            </div>  
        <b>
+
          </div>  
        Figure 11.
+
        </div>  
        </b>
+
        <div class="index-container">  
        Colorimetric reference for diagnostic test - non-functional test shows all three blue windows
+
          <div class="index-header">
      </div>
+
          </div>  
      </div>
+
          <div class="index-content">
      <p>
+
          </div>  
      These two examples perfectly show that a reference guide could enhance reading assistance for users with various visual impairments. Reading instructions in figure 12 are proposed implementation.
+
        </div>  
      </p>
+
      </div>  
      <div class="figure-container">
+
      <footer>  
      <img alt="" id="Figure12" src="https://static.igem.org/mediawiki/2021/0/0f/T--Vilnius-Lithuania--Diagnostic_test_colors.png"/>
+
        <div class="logo-igem">  
      <div>
+
          <object data="https://static.igem.org/mediawiki/2021/f/ff/T--Vilnius-Lithuania--iGEM-2021.svg">  
        <b>
+
          </object>  
        Figure 12.
+
        </div>  
        </b>
+
        <div class="social-container">  
        Colorimetric reference for the diagnostic test - overall reading scheme
+
          <div>FOLLOW US
      </div>
+
          </div>  
      </div>
+
          <div>  
    </div>
+
            <a class="placeholder-social-icon" href="https://www.facebook.com/VilniusiGEM">  
    <div class="references-wrapper">
+
              <img src="https://static.igem.org/mediawiki/2021/3/36/T--Vilnius-Lithuania--facebook.svg"/>  
      <div class="breaker">
+
            </a>
      </div>
+
            <a class="placeholder-social-icon" href="https://www.instagram.com/igem_vilnius/">  
      <h2>
+
              <img src="https://static.igem.org/mediawiki/2021/6/64/T--Vilnius-Lithuania--instagram.svg"/>  
      References
+
            </a>
      </h2>
+
            <a class="placeholder-social-icon" href="https://www.linkedin.com/company/vilnius-igem/">  
      <div class="references-container">
+
              <img src="https://static.igem.org/mediawiki/2021/e/e7/T--Vilnius-Lithuania--linkedin.svg"/>  
      <div class="number">
+
            </a>
        1.
+
          </div>  
      </div>
+
        </div>  
      <div>
+
        <div class="mail-container">  
        Aginskaitė, S., Gečaitė, K., &amp; Jonikaitis, G. (2018). Internetas visiems: prieinamos skaitmeninės informacijos rengimo vadovas.
+
          <div>CONTACT US
        <a href="https://lnf.lt/wp-content/uploads/2018/12/Internetas_visiems.pdf" target="_blank">
+
          </div>  
        To the article
+
          <a href="mailto:info@vilniusigem.lt">info@vilniusigem.lt
        </a>
+
          </a>  
      </div>
+
        </div>  
      <div class="number">
+
        <div class="grid-sponsors">  
        2.
+
          <div>  
      </div>
+
            <div>
      <div>
+
              <object data="https://static.igem.org/mediawiki/2021/d/dc/T--Vilnius-Lithuania--VU.svg">  
        Caldwell, B., Cooper, M., Reid, L. G., Vanderheiden, G., Chisholm, W., Slatin, J., &amp; White, J. (2018). Web content accessibility guidelines (WCAG) 2.1.
+
              </object>  
        <a href="https://www.w3.org/TR/WCAG21/" target="_blank">
+
            </div>  
        To the guidelines
+
            <div>  
        </a>
+
              <object data="https://static.igem.org/mediawiki/2021/b/bf/T--Vilnius-Lithuania--Termofisher.svg">  
      </div>
+
              </object>  
      <div class="number">
+
            </div>  
        3.
+
            <div>  
      </div>
+
              <object data="https://static.igem.org/mediawiki/2021/1/10/T--Vilnius-Lithuania--CityOfVilnius.svg">  
      <div>
+
              </object>  
        Colour Blind Awareness is a Community Interest Company. (n.d.). Colour Blindness. Colourblindawareness. Retrieved October 5, 2021.
+
            </div>  
        <a href="https://www.colourblindawareness.org/colour-blindness/" target="_blank">
+
          </div>  
        To the article
+
          <div>
        </a>
+
            <div>
      </div>
+
              <object data="https://static.igem.org/mediawiki/2021/b/bb/T--Vilnius-Lithuania--GMC.svg">  
      </div>
+
              </object>  
    </div>
+
            </div>  
    </div>
+
            <div>  
    <div class="index-container">
+
              <object data="https://static.igem.org/mediawiki/2021/9/98/T--Vilnius-Lithuania--Nanodiagnostika.svg">  
    <div class="index-header">
+
              </object>  
    </div>
+
            </div>  
    <div class="index-content">
+
            <div>  
    </div>
+
              <object data="https://static.igem.org/mediawiki/2021/1/16/T--Vilnius-Lithuania--Telesoftas.svg">  
    </div>
+
              </object>  
  </div>
+
            </div>  
  <footer>
+
            <div>  
    <div class="logo-igem">
+
              <object data="https://static.igem.org/mediawiki/2021/7/70/T--Vilnius-Lithuania--Kopicentras.svg">  
    <object data="https://static.igem.org/mediawiki/2021/f/ff/T--Vilnius-Lithuania--iGEM-2021.svg">
+
              </object>  
    </object>
+
            </div>  
    </div>
+
          </div>  
    <div class="social-container">
+
          <div>
    <div>
+
            <div>
      FOLLOW US
+
              <object data="https://static.igem.org/mediawiki/2021/d/df/T--Vilnius-Lithuania--SnapGene.svg">  
    </div>
+
              </object>  
    <div>
+
            </div>  
      <div class="placeholder-social-icon">
+
            <div>  
      </div>
+
              <object data="https://static.igem.org/mediawiki/2021/3/3e/T--Vilnius-Lithuania--Laborama.svg">  
      <div class="placeholder-social-icon">
+
              </object>  
      </div>
+
            </div>  
      <div class="placeholder-social-icon">
+
            <div>  
      </div>
+
              <object data="https://static.igem.org/mediawiki/2021/c/c1/T--Vilnius-Lithuania--Biotecha.svg">
    </div>
+
              </object>
    </div>
+
            </div>
    <div class="mail-container">
+
            <div>
    <div>
+
              <object data="https://static.igem.org/mediawiki/2021/4/4f/T--Vilnius-Lithuania--Grida.svg">  
      CONTACT US
+
              </object>  
    </div>
+
            </div>  
    <a href="mailto:info@vilniusigem.lt">
+
          </div>  
      info@vilniusigem.lt
+
        </div>
    </a>
+
      </footer>  
    </div>
+
    </div>
    <div class="grid-sponsors">
+
    <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">
    <div>
+
    </script>  
      <object data="https://static.igem.org/mediawiki/2021/d/dc/T--Vilnius-Lithuania--VU.svg">
+
    <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">
      </object>
+
    </script>  
    </div>
+
    <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">
    <div>
+
    </script>  
      <object data="https://static.igem.org/mediawiki/2021/b/bb/T--Vilnius-Lithuania--GMC.svg">
+
    <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">
      </object>
+
    </script>  
    </div>
+
    <script>     contentPage(        "Sections",        true,        300,      )   </script>
    <div>
+
    <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">
      <object data="https://static.igem.org/mediawiki/2021/d/df/T--Vilnius-Lithuania--SnapGene.svg">
+
    </script>  
      </object>
+
    <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">
    </div>
+
    </script>
    <div>
+
  </body>
      <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/9/98/T--Vilnius-Lithuania--Nanodiagnostika.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/1/16/T--Vilnius-Lithuania--Telesoftas.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/7/70/T--Vilnius-Lithuania--Kopicentras.svg">
+
      </object>
+
    </div>
+
    <div>
+
      <object data="https://static.igem.org/mediawiki/2021/4/4f/T--Vilnius-Lithuania--Grida.svg">
+
      </object>
+
    </div>
+
    </div>
+
  </footer>
+
  </div>
+
  <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">
+
  </script>
+
  <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 src="https://2021.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/scripts/contentpage&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>
+
</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