Inclusivity

Collab with Steam Vision Foundation and Ladakh Science Foundation

Our iGEM team partnered with two science foundations to promote synthetic and computational biology across schools and colleges, ensuring students from diverse backgrounds 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 specific learning needs.

India Map Locations
Location of registered students all over India

To foster inclusivity in our outreach, we organized tailored programs for various age groups. For high school students (grades 9 through 12), we offered "Beyond the Microscopes" both online and offline, moving beyond conventional textbook teaching to introduce real-world applications of synthetic and computational biology. By emphasizing hands-on learning, we ensured all students could visualize DNA and protein structures using tools like PyMOL and computational resources for DNA fragment translation.

Beyond the Microscope Poster
Beyond The Microscope Poster
Beyond the Microscope Session
Beyond The Microscope Session

For younger students in grades 5 through 8, we created "BioMania", an interactive program designed to make learning accessible and enjoyable. This initiative simplified complex biology concepts, empowering students to think like young scientists. Through engaging craft activities, we cultivated curiosity and inspired all students to explore science further, regardless of their prior exposure or background.

Biomania Poster
BioMania Poster
BioMania Booklet Collage
BioMania - The activity books.

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.

Tech-Bio Ideathon Poster
Tech-Bio Ideathon Poster

A key highlight of our outreach was the strong participation of women in the ideathon, showcasing the growing interest in STEM 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.

Gender Ratio Ideathon Stats
Gender Ratio Statistics for Tech-Bio Ideathon

"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." - Tsering Tashi (Scientist at Indian Space Research Organization(ISRO), founder of Ladakh Science Foundation)

LSF meeting
Ideathon - Interaction with Tsering Tashi from LSF

Sowing seeds for future iGEMers

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.

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 Github Page.

Bept Team
Team working together for building BEPT

Inclusivity Tool

What is Accessibility and Why is it Important?

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.

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.

Understanding Disabilities

To understand the importance of accessibility better, let's briefly discuss some common disabilities:

Dyslexia

Dyslexia is a specific learning disability that affects reading and language processing. Individuals with dyslexia often struggle with:

  • Reading Fluency: Difficulty reading smoothly and at a normal pace.
  • Word Recognition: Trouble recognizing words automatically and accurately.

Accessible features like dyslexia-friendly fonts and simplified layouts can greatly enhance their reading experience.

Low Vision

Low vision refers to a significant visual impairment that cannot be corrected with standard glasses, contact lenses, or medical treatment. Common characteristics include:

  • Blurred Vision: Difficulty seeing fine details.
  • Blind Spots: Areas of vision loss that may hinder peripheral vision.
  • Sensitivity to Light: Increased discomfort in bright environments.

Individuals with low vision may require larger text, high-contrast colors, or magnification tools to navigate digital content effectively.

Attention Deficit Hyperactivity Disorder (ADHD)

ADHD is a neurodevelopmental disorder characterized by difficulties with attention, hyperactivity, and impulsiveness. Symptoms may include:

  • Inattention: Trouble focusing, staying on task, or following through on instructions.
  • Hyperactivity: Excessive movement and difficulty remaining still.
  • Impulsivity: Making hasty decisions without considering the consequences.

Individuals with ADHD may benefit from features that reduce distractions, such as “Read-Focus” tools that highlight content and dim surrounding areas.

Epilepsy

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:

  • Generalized Seizures: Affecting both sides of the brain, leading to loss of consciousness or convulsions.
  • Focal Seizures: Starting in one area of the brain, possibly causing unusual sensations or behaviors.

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.

Color Blindness

Color blindness is a visual impairment that affects the perception of colors. The most common forms include:

  • Protanopia: Inability to perceive red light.
  • Deuteranopia: Difficulty distinguishing green light.
  • Tritanopia: Inability to see blue light.
  • Achromatopsia: Inability to see any color, resulting in grayscale vision.

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.

How the Inclusivity Tool Helps Everyone

The Inclusivity Tool is designed to enhance accessibility across websites, benefiting everyone involved. Here’s how it can help:

  • Empowering Users with Disabilities: 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.
  • Creating Awareness: 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.
  • Encouraging Better Design Practices: 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.
  • Facilitating Community Engagement: 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.
  • Driving Innovation: 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.
Image of our toolbar plugin

How to Use the Tool

To integrate the Inclusivity Tool into your website, follow the steps below:

    

First, clone the repository into your project’s static folder if you're using an HTML-based structure:

git clone https://github.com/IISc-Software-iGEM/Accessibility-Tool.git

Next, include the following script in the head section of your HTML file:

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

<script src="static/Functions.js"></script>

Features

The Inclusivity Tool offers an array of features designed to enhance accessibility:

  • Predefined Accessibility Presets:
    • Color Blindness: Offers presets for users with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
    • Low Vision: Enhances the website's readability by zooming in on the content.
    • ADHD: Activates the "Read-Focus" feature, which highlights the focused area of the page while dimming the surrounding content.
    • Dyslexia: Adapts the font to OpenDyslexic, a typeface specifically designed to assist individuals with dyslexia in reading text more easily.
    • Epilepsy: Provides a high-contrast theme to reduce the risk of triggering seizures in users with photosensitive epilepsy.
  • Contrast and Color Adjustments:
  • Color Palette
    • Invert Colors: Reverses the website’s color scheme to make content more distinguishable.
    • Grayscale Mode: Converts the website’s colors to shades of gray for users who prefer or require low-color environments.
    • Low Saturation: Reduces the intensity of the website’s colors for better legibility.
    • High Saturation: Enhances color intensity for users who need more contrast between elements.
  • Mouse Cursor Customization:
  • Cursor Tab
    • Change the mouse cursor to white for better visibility against dark backgrounds.
    • Change the mouse cursor to black for better visibility against light backgrounds.
  • Text and Content Adjustments:
  • Font Tab
    • Increase or decrease the overall font size of the webpage content.
    • Adjust the width of paragraph text to enhance readability.
  • General Settings:
  • General Tab
    • Magnify specific content on the website to improve visibility.
    • Zoom out to view more content at once.
    • Highlight all links on the page for easier navigation. Links are unhighlighted when hovered over.
    • Highlight all buttons for improved interaction, with the highlight disappearing on hover.
    • Enable "Read-Mode" to switch to a high-contrast, black-and-white theme designed for optimal readability.
    • Activate "Read-Focus" to dim surrounding content and keep the user's focus on the current area of interest.
  • Reset Settings:
  • Reset Tab

    Reset all custom settings and revert the website to its default state.