Team:Grenoble Alpes/Inclusion

PyoBuster - Safety

Inclusion - Wiki For All

Introduction

Whether in the scientific field or not, a great deal of information can be found on the Internet. Nevertheless, digital spaces are not necessarily adapted to be accessible to all. Moreover, with the progress of technology and the context of globalization, it is possible to adapt each content according to the characteristics of the user. Indeed, whether it is the age with the "child modes" or parental controls, the language with the different translators, the places or even the capacities of each other, a solution can be proposed in order to try to remove the barriers that can slow down communication.


Throughout our research, we realized how important it was to raise awareness about genetic engineering and GMOs. We tried to educate on these matters during our project by vulgarisation on the social media, interventions in different events and by collaboration with the Lausanne, Nantes, Sorbonne, Montpellier and Saclay teams to create original video content on our research. But we wanted to go even further. We wanted our work to be accessible to a majority and this is why we decided to create a collaboration with other teams to work on how to make our wikis as accessible as possible. As knowledge and science should belong to everyone, we tried to conceive our wikis so that persons with intellectual disabilities, motor disabilities, visual or hearing impairment could easily access our work. It was important for us to work on this project with other teams, as we wanted to get as many ideas as possible so we could get all points of view.

All together we developed some rules to follow to increase the accessibility of our wiki. They were established using local standard website guidelines, scientific research and Marburg 2018 work on the matter.


As we didn’t want this work to be limited to our collaboration, we did a campaign on our social media to share the tips we could gather during our work to all the other teams so that a maximum wikis could be accessible.

The Basics of Web Development

A. Properly structuring a webpage and its content (HTML)

HTML5, started in 2014, following on from HTML4, it has a lot to offer.
With a total of 113 tags that can be used to structure, format, or embed content, HTML by itself is already a big toolbox. To know all of its tags, and what their use is, isn’t conventional, most junior developers will skip on some of them, and certainly some of the seniors.

Even if there are many ways of doing things by only using HTML, we need to keep in mind that we must not try to reinvent the wheel. It is entirely possible to achieve the same visual goal using tags such as <table> or <ul> (unordered list) or by using CSS styling or JS functions. Yet it will always be better to use those HTML tags because browsers, software and referencing crawlers will seek for them first. They structure the document, and if the person visiting the website uses a non-graphical browser, such as screen-readers or software that only display the texts of a website, they will have the utmost importance as no CSS or JS will help them understand what is displayed.

Thus, it is important to remember those few good practices:

  • Separate section or parts of your page using <section> or <div>
  • Use tags <h1> to <h4> to mark the importance of a title (you can then modify its size using CSS)
  • Do not forget the attributes alt="" or title="" for your medias
  • Use the family of attributes aria (Accessible Rich Internet Applications), these are made to offer plenty of information to non-graphical browsers
  • Use the tags <ul>, <ol> and <li> to create lists
  • Check that your page is navigable using only your keyboard, and that you can select elements using only your tab key

B. The best styling practices to make things simple, yet attractive (CSS)

When HTML isn't enough anymore, styling your pages using CSS is the next step, yet there are a few rules to remember if you don't want your page to be a sore to the eye of your readers. Once again, remember to try your most to not give importance to your elements using only CSS, they also must be using the correct HTML tags.

Here is a non-exhaustive list of rules to respect to make your website readable:

  • Do not use flashy or blinking elements
  • Do not make your elements move around too much, they can move at first and then stop, or move continuously if they are background elements
  • Try and make your styling simple, organised and readable for desktops, laptops, and even mobiles readers
  • Use simple font families, prefer monospace, or sans serif fonts as they are easier to read, also don't make your text too small
  • Try to always think about how your colors interact with your background, keep a high enough contrast, try to get in the place of colorblind users

C. Dynamic pages for the sake of practicality (JavaScript)

JavaScript makes your pages dynamic, by hiding, revealing, scaling, coloring elements following user interactions. Dynamism is important to make your pages appealing and is useful to make readers stay on your page longer, but always remember to not overdo it. The frontier between the beautiful and the too much is sometimes very thin.

Again, here is a list of principles to follow when using javascript:

  • Scripts only complements CSS and HTML and should not replace either
  • Js can be useful to give the reader an easier, friendlier, faster navigation, or even more complex stuff like animating elements but it should not hide or add stuff that would or wouldn't be normally visible
  • Make sure that your scripts run on most of the devices, or adapt in consequence

Adapting your content to people with disabilities

A. Those disabilities that impair web navigation

Many disabilities have consequences in regard of web navigation, we can think of:


  • Visually impaired people (color blindness, glaucoma, cataract, blindness, ...)
  • Hearing impaired people
  • Intellectual disabilities (dyslexia, ADHD, down syndrome, learning disability, ...)
  • Motor disabilities (not being able to use a mouse, a keyboard, ...)

B. Focus on colors

  • Colors must be contrasted throughout the site so that they can be distinguished by everyone. As a consequence, some combinations should be avoided, such as green with (either?) red, brown or blue. There are many combinations to avoid and many sites can help you visualize if your content is accessible to all (see tools and bibliography below).
  • For colors that are involved in figures such as graphics, legends, etc ... Think about adding patterns or textures rather than just varying colors.
  • It is preferable to highlight a text rather than changing only the color.
  • When a form is failed or incomplete, the indication should be at least an iconography (like a cross) or a text, rather than only surrounding the field in a colored way.

C. Focus on texts

  • Small font sizes are to be avoided. It is recommended to use simple and easily readable typography, such as Luciole, Helvetica, Arial and Gilles Sans. Avoid the use of so-called "serial" fonts such as Times and Arial Narrow.
  • Avoid writing whole sentences in uppercase. These texts can be read by software for the visually impaired, and give the impression of shouting, which is not very pleasant.
  • Do not use animated text (flashing or moving text) for convenience.
  • Favour written texts rather than texts contained on an image.
  • Prefer to use text in relative (em/rem) units rather than pixels, as the former is more suitable when zooming or scalling web pages.

D. The tools that can help you

Our Color Blindness tool

To be as inclusive as possible concerning visually impaired people, we wanted to give our wiki an extra feature. You can find it at the top right of your screen, at the end of the navigation bar. Those rainbow glasses will let you chose one from the eight known types of colorblindness. When clicking one of them, we wanted to adapt the colors used on our wiki to fit the vision of the people concerned, so that their navigation is simplified, meaning it would change the colors of specific elements so that everything is contrasted enough. You can deselect a theme by clicking on it a second time, thus going back to normal colors.

Unfortunately, or fortunately, depending on the point of view, we did not require such tool as we tried our best to make our wiki contrasted everywhere, so that colorblindness won't affect the navigation. Thus we decided to show you how it worked so that you can reuse it on your own website.

You will find below, two boxes, containing two rectangles of different colors and a text overlapping them. For someone without disabilities, those are easily distinguishable, but it may not be the case for everyone. By using the dropdown menu between the two of them, you can visualize how colorblind people will see the box. You can then use our tool (the glasses) to see how it affect the result, and how it makes the navigation easier for everyone.

Normal Protanopia Protanomaly Deuteranopia Deuteranomaly Tritanopia Tritanomaly Achromatopsia Achromatomaly
Text
Text

This colorblindness simulator has been made using ressources from this github repository. The simulation is not proven to depict reality at a 100% certainty.

The dropdown menu is the filter that allows you to see how the selected type sees, results are on the box of the right. Our tool allows you to adapt the colors to the selected kind of colorblind. Hence, if you want to see how our tool may help, select the same type on both tool menu and dropdown menu.

To modify the styling, specifically the colors of your elements, we are using themes. To use differents themes you have to specify in your CSS files the following code:
:root { --color-blindness-1: #CF0000; --color-blindness-2: #0000CF; --color-blindness-3: #00CF00; --color-blindness-4: #593298; }
[data-theme="deuteranopia"] { --color-blindness-1: #CF00CA; --color-blindness-2: #8700CF; --color-blindness-3: #12CF32; --color-blindness-4: #593298; }

The :root theme, is the theme applied by default on your page. You can then switch theme, to use, for example, the "deuteranopia" one. To switch between two themes, you then have to call this JS code:
document.documentElement.setAttribute("data-theme", theme);.
It is then possible, like on our wiki, to switch themes using a dropdown, buttons, ... You can also remember the current theme chosen by the user by storing it in localStorage or sessionStorage.

Lastly, to apply the styling made in those themes, you have to follow this terminology:
background-color: var(--color-blindness-1);
When switching between themes, the background-color (or any style, depending on what you are doing) will automatically change and take the new color.

Bibliography