inclusivity.html

{% extends "layout.html" %} {% block title %}Inclusivity{% endblock %}
{% block lead %}{% endblock %} {% block page_content %}

<style>
  body {
    background-image: linear-gradient(to bottom,
        #FFF7D1 25%,
        #FFECC8 50%,
        #FFECC8 75%,
        #FFB0B0 100%);
  }

  #float1 {
    background-image: url("https://static.igem.wiki/teams/5346/doodle/inclusivity-img1-removebg-preview.png");
  }

  #float2 {
    background-image: url("https://static.igem.wiki/teams/5346/doodle/inclusivity-img2-removebg-preview.png");
  }

  .presentation {
    width: 100%;
    height: 600px;
  }
</style>

<div class="col-md-3 sidebar">

</div>
<div class="col-md-9 content">

<h1>Collab with Steam Vision Foundation and Ladakh Science Foundation</h1>

<p>
  Our iGEM team partnered with two science foundations to promote synthetic and
  computational biology across schools and colleges, ensuring students from
  <b>diverse backgrounds</b> could engage with these fields. Participants came
  from regions such as Ladakh, Srinagar, Jammu, Madhya Pradesh, Assam, Delhi,
  Uttar Pradesh, Bengaluru, and Meerut. To effectively reach different age
  groups, we tailored our programs by collaborating with teachers and professors
  to address <b>specific</b> learning needs.
</p>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/ideathon/india-map-with-bg-removebg-preview.png"
    alt="India Map Locations"
  />
  <figcaption>Location of registered students all over India</figcaption>
</figure>

<p>
  To foster inclusivity in our outreach, we organized tailored programs for
  various age groups. For high school students (grades 9 through 12), we offered
  <b>"Beyond the Microscopes"</b> both online and offline, moving beyond
  conventional textbook teaching to introduce real-world applications of
  synthetic and computational biology. By emphasizing <b>hands-on learning</b>,
  we ensured all students could visualize DNA and protein structures using tools
  like PyMOL and computational resources for DNA fragment translation.
</p>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/beyond-the-microscope/beyond-the-microscope-poster.jpg"
    alt="Beyond the Microscope Poster"
  />
  <figcaption>Beyond The Microscope Poster</figcaption>
</figure>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/beyond-the-microscope/beyond-the-microscope-meeting-ss.jpg"
    alt="Beyond the Microscope Session"
  />
  <figcaption>Beyond The Microscope Session</figcaption>
</figure>
<p>
  For younger students in grades 5 through 8, we created <b>"BioMania"</b>, an
  interactive program designed to make learning accessible and enjoyable. This
  initiative simplified complex biology concepts, empowering students to think
  like young scientists. Through <b>engaging craft activities</b>, we cultivated
  curiosity and inspired all students to explore science further, regardless of
  their prior exposure or background.
</p>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/biomania/biomania-poster.jpg"
    alt="Biomania Poster"
  />
  <figcaption>BioMania Poster</figcaption>
</figure>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/biomania/booklet-collage.png"
    alt="BioMania Booklet Collage"
  />
  <figcaption>BioMania - The activity books.</figcaption>
</figure>

<p>
  Ultimately, our initiative aimed to inspire the next generation of scientists
  by fostering an inclusive environment for learning in synthetic biology across
  various age groups, utilizing both online and offline formats to enhance
  accessibility and engagement.
</p>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/ideathon/ideathon-poster.jpg"
    alt="Tech-Bio Ideathon Poster"
  />
  <figcaption>Tech-Bio Ideathon Poster</figcaption>
</figure>
<p>
  A key highlight of our outreach was the
  <b>strong participation of women</b> in the ideathon, showcasing the growing
  interest in <b>STEM</b> among female students. By fostering an environment of
  innovative thinking, we aimed to empower college students to explore synthetic
  biology and make meaningful contributions to the field.
</p>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/ideathon/stats-of-ideathon.jpg"
    alt="Gender Ratio Ideathon Stats"
  />
  <figcaption>Gender Ratio Statistics for Tech-Bio Ideathon</figcaption>
</figure>

<p>
  <i
    >"Synthetic biology is rapidly emerging, and with advancements in artificial
    intelligence and ongoing research in biology and medical sciences, now is
    the perfect time to engage with tech-enabled solutions. This convergence
    offers valuable opportunities for learning and collaboration. I commend the
    participants and organizing team for their innovative ideathon on
    sustainable solutions, which effectively inspires and empowers the next
    generation of innovators."</i
  >
  - Tsering Tashi (Scientist at Indian Space Research Organization(ISRO),
  founder of Ladakh Science Foundation)
</p>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/lsf/lsf-meeting-ss.png"
    alt="LSF meeting"
  />
  <figcaption>Ideathon - Interaction with Tsering Tashi from LSF</figcaption>
</figure>


<h1>Sowing seeds for future iGEMers</h1>
<p>
  Our team is not only focused on promoting Synthetic and Computational Biology
  but also committed to fostering future iGEMers at IISc Bengaluru. By involving
  first-year undergraduates in a collaborative project, we provided hands-on
  experience that blended Engineering and Science to create meaningful software
  solutions.
</p>
<p>
  The project introduced key topics like protein structures and functionalities,
  alongside practical tools like PyMOL for visualization. We also emphasized
  core software engineering skills such as Python packaging, Git, and
  command-line tools. This inclusive approach led to the development of Bept, a
  user-friendly tool for protein electrostatics aimed at benefiting the
  scientific community since a similar tool did not exist before. For more information, visit our official
  <a href="https://github.com/IISc-Software-iGEM/bept">Github Page</a>.
</p>
<figure>
  <img
    src="https://static.igem.wiki/teams/5346/cli/cli-inclusivity-team.png"
    alt="Bept Team"
  />
  <figcaption>Team working together for building BEPT</figcaption>
</figure>

<h1>Inclusivity Tool</h1>

<h2>What is Accessibility and Why is it Important?</h2>
<p>
  Let's first explore what accessibility means and why it's crucial. Imagine
  being a person with low vision, dyslexia, or even a member of the aging
  population. As people age, they may experience declines in vision, hearing,
  and cognitive functions. Websites that don't account for these changes can
  become increasingly difficult to use for those with disabilities. For
  instance, if a website lacks proper structure and alt tags, screen readers
  might miss important information, creating barriers between individuals with
  visual impairments and those who aren't affected.
</p>

<p>
  Accessibility ensures that everyone, regardless of their abilities or
  disabilities, can fully engage with the digital world. For many individuals
  with disabilities, daily activities can become daunting, especially when
  encountering websites or applications that are not designed with accessibility
  in mind. That's why we’ve developed the Inclusivity Tool. This comprehensive
  JavaScript plugin improves the accessibility of websites by offering a variety
  of features tailored to users with specific needs. It can be easily embedded
  in any website, enhancing the user experience for individuals with low vision,
  dyslexia, ADHD, and more.
</p>

<h2>Understanding Disabilities</h2>
<p>
  To understand the importance of accessibility better, let's briefly discuss
  some common disabilities:
</p>

<h3>Dyslexia</h3>
<p>
  Dyslexia is a specific learning disability that affects reading and language
  processing. Individuals with dyslexia often struggle with:
</p>
<ul>
  <li>
    <strong>Reading Fluency:</strong> Difficulty reading smoothly and at a
    normal pace.
  </li>
  <li>
    <strong>Word Recognition:</strong> Trouble recognizing words automatically
    and accurately.
  </li>
</ul>
<p>
  Accessible features like dyslexia-friendly fonts and simplified layouts can
  greatly enhance their reading experience.
</p>

<h3>Low Vision</h3>
<p>
  Low vision refers to a significant visual impairment that cannot be corrected
  with standard glasses, contact lenses, or medical treatment. Common
  characteristics include:
</p>
<ul>
  <li><strong>Blurred Vision:</strong> Difficulty seeing fine details.</li>
  <li>
    <strong>Blind Spots:</strong> Areas of vision loss that may hinder
    peripheral vision.
  </li>
  <li>
    <strong>Sensitivity to Light:</strong> Increased discomfort in bright
    environments.
  </li>
</ul>
<p>
  Individuals with low vision may require larger text, high-contrast colors, or
  magnification tools to navigate digital content effectively.
</p>

<h3>Attention Deficit Hyperactivity Disorder (ADHD)</h3>
<p>
  ADHD is a neurodevelopmental disorder characterized by difficulties with
  attention, hyperactivity, and impulsiveness. Symptoms may include:
</p>
<ul>
  <li>
    <strong>Inattention:</strong> Trouble focusing, staying on task, or
    following through on instructions.
  </li>
  <li>
    <strong>Hyperactivity:</strong> Excessive movement and difficulty remaining
    still.
  </li>
  <li>
    <strong>Impulsivity:</strong> Making hasty decisions without considering the
    consequences.
  </li>
</ul>
<p>
  Individuals with ADHD may benefit from features that reduce distractions, such
  as “Read-Focus” tools that highlight content and dim surrounding areas.
</p>

<h3>Epilepsy</h3>
<p>
  Epilepsy is a neurological disorder that causes recurrent seizures due to
  abnormal electrical activity in the brain. Seizures can vary in severity and
  may include:
</p>
<ul>
  <li>
    <strong>Generalized Seizures:</strong> Affecting both sides of the brain,
    leading to loss of consciousness or convulsions.
  </li>
  <li>
    <strong>Focal Seizures:</strong> Starting in one area of the brain, possibly
    causing unusual sensations or behaviors.
  </li>
</ul>
<p>
  Individuals with photosensitive epilepsy can be triggered by flashing lights
  or rapid visual changes, making it essential for websites to avoid such
  elements. High-contrast themes and simple color palettes can help reduce risks
  for these users.
</p>

<h3>Color Blindness</h3>
<p>
  Color blindness is a visual impairment that affects the perception of colors.
  The most common forms include:
</p>
<ul>
  <li><strong>Protanopia:</strong> Inability to perceive red light.</li>
  <li><strong>Deuteranopia:</strong> Difficulty distinguishing green light.</li>
  <li><strong>Tritanopia:</strong> Inability to see blue light.</li>
  <li>
    <strong>Achromatopsia:</strong> Inability to see any color, resulting in
    grayscale vision.
  </li>
</ul>
<p>
  Individuals with color blindness may confuse certain colors and rely on
  contrast and brightness to differentiate elements. Designing websites with
  sufficient contrast and using patterns or text labels can improve
  accessibility for those with color blindness.
</p>

<h2>How the Inclusivity Tool Helps Everyone</h2>
<p>
  The Inclusivity Tool is designed to enhance accessibility across websites,
  benefiting everyone involved. Here’s how it can help:
</p>

<ul>
  <li>
    <strong>Empowering Users with Disabilities:</strong> The tool offers various
    features specifically tailored to assist individuals with different needs,
    from those with low-vision to individuals with dyslexia. By incorporating
    customizable options, users can adapt their browsing experience to suit
    their preferences and requirements, making the digital world more
    accessible.
  </li>

  <li>
    <strong>Creating Awareness:</strong> By implementing the Accessibility Tool,
    website owners demonstrate their commitment to accessibility. This can help
    raise awareness about the importance of inclusivity, prompting other
    organizations to follow suit. As more websites adopt accessibility features,
    it sets a standard for others to prioritize inclusivity in their design and
    content.
  </li>

  <li>
    <strong>Encouraging Better Design Practices:</strong> The use of
    accessibility tools encourages developers to think critically about how they
    design websites and applications. It promotes best practices in web
    development, ensuring that all users, regardless of their abilities, have a
    positive experience online.
  </li>

  <li>
    <strong>Facilitating Community Engagement:</strong> With enhanced
    accessibility, more individuals can engage with scientific content,
    participate in discussions, and provide feedback. This increased interaction
    can lead to a more informed and engaged public, further bridging the gap
    between science and society.
  </li>

  <li>
    <strong>Driving Innovation:</strong> By promoting accessibility, we
    encourage innovation in how information is presented and shared. As more
    organizations invest in accessibility tools, new technologies and solutions
    will emerge, improving the overall landscape of digital accessibility.
  </li>
</ul>

<figure>
  <img
    src="https://static.igem.wiki/teams/5346/inclusivity-tool/toolbar.png"
    alt="Image of our toolbar plugin"
  />
</figure>

<h2>How to Use the Tool</h2>
<p>
  To integrate the Inclusivity Tool into your website, follow the steps below:
</p>
<pre>
    <p> First, clone the repository into your project’s static folder if you're using an HTML-based structure:</p>
    <code>
        git clone https://github.com/IISc-Software-iGEM/Accessibility-Tool.git
    </code>
    <p> Next, include the following script in the head section of your HTML file:</p>
    <code>
        <p>In the layout.html file insert this piece of code in the head tag. Then run the website as usual now you will see the plugin implemented </p>
        &lt;script src="{{ url_for('static', filename = 'Functions.js')}}"&gt;&lt;/script&gt;
    </code>
</pre>

<h2>Features</h2>
<p>
  The Inclusivity Tool offers an array of features designed to enhance
  accessibility:
</p>

<ul>
  <li><strong>Predefined Accessibility Presets:</strong></li>
  <ul>
    <li>
      <strong>Color Blindness:</strong> Offers presets for users with
      Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
    </li>
    <li>
      <strong>Low Vision:</strong> Enhances the website's readability by zooming
      in on the content.
    </li>
    <li>
      <strong>ADHD:</strong> Activates the "Read-Focus" feature, which
      highlights the focused area of the page while dimming the surrounding
      content.
    </li>
    <li>
      <strong>Dyslexia:</strong> Adapts the font to OpenDyslexic, a typeface
      specifically designed to assist individuals with dyslexia in reading text
      more easily.
    </li>
    <li>
      <strong>Epilepsy:</strong> Provides a high-contrast theme to reduce the
      risk of triggering seizures in users with photosensitive epilepsy.
    </li>
  </ul>

  <li><strong>Contrast and Color Adjustments:</strong></li>
  <img
    src="https://static.igem.wiki/teams/5346/inclusivity-tool/color.png"
    alt="Color Palette"
  />
  <ul>
    <li>
      <strong>Invert Colors:</strong> Reverses the website’s color scheme to
      make content more distinguishable.
    </li>
    <li>
      <strong>Grayscale Mode:</strong> Converts the website’s colors to shades
      of gray for users who prefer or require low-color environments.
    </li>
    <li>
      <strong>Low Saturation:</strong> Reduces the intensity of the website’s
      colors for better legibility.
    </li>
    <li>
      <strong>High Saturation:</strong> Enhances color intensity for users who
      need more contrast between elements.
    </li>
  </ul>

  <li><strong>Mouse Cursor Customization:</strong></li>
  <img
    src="https://static.igem.wiki/teams/5346/inclusivity-tool/cursor.png"
    alt="Cursor Tab"
  />
  <ul>
    <li>
      Change the mouse cursor to white for better visibility against dark
      backgrounds.
    </li>
    <li>
      Change the mouse cursor to black for better visibility against light
      backgrounds.
    </li>
  </ul>

  <li><strong>Text and Content Adjustments:</strong></li>
  <img
    src="https://static.igem.wiki/teams/5346/inclusivity-tool/font.png"
    alt="Font Tab"
  />
  <ul>
    <li>Increase or decrease the overall font size of the webpage content.</li>
    <li>Adjust the width of paragraph text to enhance readability.</li>
  </ul>

  <li><strong>General Settings:</strong></li>
  <img
    src="https://static.igem.wiki/teams/5346/inclusivity-tool/general.png"
    alt="General Tab"
  />
  <ul>
    <li>Magnify specific content on the website to improve visibility.</li>
    <li>Zoom out to view more content at once.</li>
    <li>
      Highlight all links on the page for easier navigation. Links are
      unhighlighted when hovered over.
    </li>
    <li>
      Highlight all buttons for improved interaction, with the highlight
      disappearing on hover.
    </li>
    <li>
      Enable "Read-Mode" to switch to a high-contrast, black-and-white theme
      designed for optimal readability.
    </li>
    <li>
      Activate "Read-Focus" to dim surrounding content and keep the user's focus
      on the current area of interest.
    </li>
  </ul>

  <li><strong>Reset Settings:</strong></li>
  <img
    src="https://static.igem.wiki/teams/5346/inclusivity-tool/reset.png"
    alt="Reset Tab"
  />
  <p>Reset all custom settings and revert the website to its default state.</p>
</ul>

  <!--  -->

  

</div>

{% endblock %}