diff --git a/wiki/pages/inclusivity.html b/wiki/pages/inclusivity.html index 0d835bfab55f98082ca1ef5fed1db52b669f7227..4d26f0d015e7fa07306baea92a53510a3f3a192f 100644 --- a/wiki/pages/inclusivity.html +++ b/wiki/pages/inclusivity.html @@ -152,9 +152,20 @@ <li>Font Switch Feature: We introduced a <b>font-switching option</b> that allows users to toggle between standard fonts and dyslexia-friendly fonts like Dyslexie and OpenDyslexic. These fonts are designed with heavier bottom weights and distinct character shapes, making it easier for dyslexic users to differentiate between letters.<li> <li>Avoiding Italics and Underlining: In the body text, we avoided using italics and underlining—both of which can distort the visual form of words—following guidelines from the British Dyslexia Association. Instead, we relied on bold formatting to highlight important text.<li> <li>Letter Spacing: We ensured that text had <b>larger letters</b>, which makes it easier for dyslexic users to track lines of text without losing their place. This design choice was based on recommendations from accessibility experts in the International Dyslexia Journal.<li> + <ul> + <div class="image-container" style="display: flex; justify-content: center;"> + <img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic18.png" alt="ibd_figure" class="shadowed-image" style="width: 50%; max-width: 500px;"> + </div> + <h4>3. High Contrast and Readability for Low Vision and Color Blindness/h4> + <h5>Why We Focused on This?</h5> + <p>Individuals with low vision or color blindness face challenges in distinguishing between colors and reading small, low-contrast text. According to the World Blind Union and research on low-vision accessibility, high-contrast color schemes and adjustable text sizes are critical for making digital content readable.</p> + <h5>How We Implemented It?</h5> + <ul> + <li>Clean Design: We used a <b>minimalistic design</b>, ensuring that each page was free from distracting elements like unnecessary images, animations, or banners. This helps users focus on the core content without being sidetracked.<li> + <li>Clear Headings: Each section of the wiki was broken down into <b>concise, clearly labeled headings</b>, making it easier for users to skim and locate the information they need. This approach is supported by research from the Journal of Attention Disorders.<li> <ul> <div class="image-container" style="display: flex; justify-content: center;"> - <img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic18.png" alt="ibd_figure" class="shadowed-image" style="width: 50%; max-width: 500px;"> + <img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic9.png" alt="ibd_figure" class="shadowed-image" style="width: 60%; max-width: 600px;"> </div> </div> </div>