Team:BOKU-Vienna/Inclusivity

Inclusivity

    Inclusion

    After more than one and a half years in the COVID-19 pandemic we got used to working more in front of our computers. But thinking back our complete life, including work, free-time activities, daily tasks, and socializing was shifted to the Internet from one day to the next. The assurance that everyone has access to health information became vital. However, now it is getting clear that the layout and design of many websites is not suited for the general public.(1) For example, our parents and grandparents may encounter some form of access barrier, even when having advanced digital skills, due to age-related impairments, e.g., visual impairment. (2)
    But not only older persons may be affected by non-accessibility. Language barriers prevent all of us to access each and every information.

    For us as an iGEM team it is very important to make our research, our documentation, and thus our wiki accessible to everyone and therefore ensure legibility and navigability. To design an accessible and user-friendly website, we have followed the guide established by the iGEM Leiden 2020 team, as well as the current guidelines for web content accessibility (W3.0). (3)

    But we also concentrated on lowering the language-barriers when publishing our promotionvideo, and our survey. Furthermore, we also made our educational lessons as accessible and conceptional as possible.

    Color blindness and its implications

    Color blindness, better known as color vision deficiency, is usually genetically inherited and affects about 1 in 12 males and 1 in 200 females in the world. There are different forms of color blindness, resulting in variable color spectrums:

    • The condition achromatopsia denotes a complete color blindness. Depending on the cause, people with achromatopsia can only see black, white and shades of grey and can have a varying degree of impact (mild - severe). This only affects a minor part of the population.
    • The most common forms of color blindness are protanopia and deuteranopia. The best-known red-green vision deficiency falls into this category. However, this does not mean that the people cannot see those colors, but simply have a harder time to distinguish red, green, yellow, orange, and brown color shades. Another form represents yellow-blue color vision deficiency. This condition often presents itself in combination with a red-green visual deficiency.

    Unfortunately, color vision deficiency can be a major hindrance in scientific research. Therefore, we designed our wiki and research accessible for people with color vision deficiency. We checked our color scheme with various software tools to achieve an adequate result, according to the conditions published by NHS and MedlinePlus.(4)(5)

    Color palette: no change, red-green deficiency, yellow-blue deficiency

    Assistive tools used:

    • Visolve
    • Colorblindly (for Google Chrome only)
    • Web development tools on Google Chrome (According to the instructions from iGEM Leiden 2020)
    Wiki view: red-green deficiency, yellow-blue deficiency

    Accessible Typography

    When designing our wiki, it was crucial to us to guarantee readability and functionality. The most important factor when determining the readability (6) is the typeface, meaning the design of the lettering, such as serifs, spacing, and font size. Sans-serif fonts, which means fonts without serifs, classify themselves as accessible and easily readable, since these types of fonts use simplified characters which stand apart from each other. Using a more simplified font allows a clearer appearance and are easier to read for users with dyslexia and visual impairment.(6) At this point it is also important to mention that there is no best typeface or font, but guidelines that grant optimal readability for all users. Generally, the recommendation here is to use a simple or familiar typeface and a limited number of font variation.(6)

    According to the above statements and as one of our main goals regarding the wiki was accessibility, we have chosen to use a combination of two license-free, sans-serif fonts for our wiki:

    We use the font Poppins for headings, and the texts of the main body is presented in the style Roboto. (7)

    Color contrast and accessibility

    The Web Content Accessibility Guidelines are an international standard for the barrier-free design of internet offers and websites. According to the Web Content Accessibility Guidelines 2.0 level AA (8), a contrast ratio of at least 4.5:1 should be accomplished for texts or images of texts. For larger texts and graphics, a contrast level (9) of 3:1 should be reached.
    The contrast ratio was determined with the help of an online Contrast Checker.
    Info about WCAG were first found at the Wiki of iGEM Team Vilnius Lithuania 2020.

    Color contrast ratios

    Language accessibility

    Not every person is able to learn a second language. Therefore, we translated our Promotion video into as many languages as we could and provided our video in 3 languages (English, German, and Korean) and 14 additional subtitles (Bahasa Indonesia, Chinese, Dutch, English, French, German, Hindi, Italian, Japanese, Korean, Malay, Norwegian, Swedish, Vietnamese) at the iGEM Video Hub.

    At this point we would like to thank our friends and families once again for their support for translating the subtitles.
    A big thank you goes to: Afiq Othman, Miftahul Jannah Hutabarat, Lycka Ståhl, Jahnvi Argarwal, Pei Fang Manyer, Johanna Lenitz, Kady Haller, Sangsun Park, and Stefan Kolar.

    Together with our partner the iGEM team TU-Eindhoven we have created a survey for the general public, which were available in English, German, and Dutch. With this we want to - again - thank our partner team for translating the survey into English.

    Inclusivity in education

    We believe that science is important for everyone. To break down barriers, we focused on reaching a wide variety of socioeconomic backgrounds. Thanks to iGEM TAU Israel, we had the chance to participate in a series of short lectures for the Agahozo-Shalom Youth Village (ASYV), a youth village for vulnerable teenage orphans of Rwanda. We also held lessons about the microbiome and how we can use bacteria to help people at the Children’s University in Vienna and at the School of Life in Groß-Sieghart for children with special needs. More information on that topic can be found at our Education wiki page.

    Gender-sensitive language

    It should go without saying that inclusivity starts in our language, but gender-sensitive language is still widely debated. Especially in German, where nouns must be either masculine, feminine or neutral, language has a huge impact on our perception of gender and gender-distribution. Our team values all humans, no matter their identity, and we did our best to reflect this in our language – be it in our survey, our newsletters or elsewhere.

    Sources

    (1) Dobransky, K., & Hargittai, E. (2021). Piercing the Pandemic Social Bubble: Disability and Social Media Use About COVID-19. American Behavioral Scientist. https://doi.org/10.1177/00027642211003146

    (2) Alexiou, G. (2020). Covid Reminds Us That Web Accessibility Helps All Users, Not Just The Enabled. Forbes. https://www.forbes.com/sites/gusalexiou/2020/08/23/covid-reminds-us-that-web-accessibility-helps-all-users-not-just-the-disabled/?sh=615067616df1

    (3) Henry, S.L. (2021). Web Content Accessibility Guidelines (WCAG) Overview. Web Accessibility Initiative https://www.w3.org/WAI/standards-guidelines/wcag/

    (4) National Health Service (2019). Colour vision deficiency (Colour Blindness). https://www.nhs.uk/conditions/colour-vision-deficiency/

    (5) Medlineplus. (2015). Color vision deficiency. https://medlineplus.gov/genetics/condition/color-vision-deficiency/

    (6) WebAim. (2021). Typefaces and Fonts. Institute for Disability Research, Policy, and Practice https://webaim.org/techniques/fonts/

    (7) My Scottish Government Resources. Typography. The Scottish Government https://resources.mygov.scot/design-standards/design-essentials/typography/

    (8) W3C. (2018). WebAim’s WCAG 2 Checklist. Institute for Disability Research, Policy, and Practice https://webaim.org/standards/wcag/checklist

    (9) WebAim. (2021). Contrast Checker. Institute for Disability Research, Policy, and Practice https://webaim.org/resources/contrastchecker/

    We thank our sponsors: