FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga

Editor's Notes

• #2: Hello everyone! Todays topic is “flying blind - accessibiilty in icinga”, where I want to walk you through the worlds of people with visual impairments! The internet has a lot of barriers for people with impairments. I’ll give you an overview on how to improve your websites and what to pay attention to when using the internet,so that those people can be included in our activities and make more valuable contribute to our discussions! be interactive more examples (video / code) give examples of companies that focus on accessibility more stories
• #3: But before we dive into that, my name is Feu Mourek and my pronouns are they / them. I started out as a developer at Icinga and nowadays my job title is “development advocate“. That means I am basically the “development community interface”. And I really like changing things up to see how they look!
• #4: The definition of accessibility, according to the Cambridge Business English Dictionary, is “the quality or characteristic of something that makes it possible to approach, enter, or use it“
• #5: The main focus today will be visual Impairment. This includes colour vision deficiency and complete inability to interact with visual elements. First we’ll have a look at the numbers:
• #6: There are roughly 285 million blind & vision impaired people out there. That is just a little less than the entire population of the States! Roughly 1 in 11 people! That’s a lot! And 98% of U.S.-based webpages are not accessible to the disability community from a legal perspective, according to the 2020 Web Accessibility Annual Report. Let’s try to get this number down!
• #7: Our eyes have three cones for colour vision: red, green and blue. Those allow us humans to see the spectrum we can, by mixing those three colours together. But, as all things in our bodies, those can malfunction.
• #8: In most cases, they won’t be completely unable to distinguish between certain colours. It’s just a little harder. But since we want to be inclusive to everyone I’ll just be looking at actual colour blindness from here on, where one of the cones doesn’t work at all.
• #9: The three cones correspond to the three variants: Deuteranopia and Protanopia, commonly referred to as Red-Green blindness And the rarer form of Tritanopia, sometimes called Yellow-Blue blindness
• #10: To give you a better picture of what this looks like in practise: The squares in the first row are the unaltered Icinga colours. Below, I have simulated what they look like with the three variants of colour blindness.
• #11: This is what the tactical overview looks like with the default theme. As you can see, especially if you look at the labels in the legend, the colours for the states are rather difficult to tell apart.
• #12: While you could still understand the information from the context in the donut, this is not possible in the service grid. In the second picture, which services are Critical? Or in the third, which are pending?
• #13: And this is why an accessible design is important. There are a lot of people affected and you usually don’t even know! And it’s crucial that we don’t withhold important information from them.
• #14: Icinga Web has a colour blind theme. It doesn’t just work with hues, but also with different stages of brightness to signal severity.
• #15: Here the pictures for comparison: Without the theme. - pause - And with it enabled.
• #16: The colours in the grid view are also distinguishable now. Every state has both a distinguishing colour and a brightness, that helps figure out which items are more important at that moment.
• #17: Designing for people who can not see at all is a little different, as you can imagine. The colours and shapes don’t matter at all in this case, so in order to design for blindness, you need to understand how they “see”
• #18: https://www.youtube.com/watch?v=q_ATY9gimOM
• #19: Weighted means that a document is split into different sections and does not have to be read through from top to bottom. Header, Navigation elements (search bar?), Main Content, Sign up form, Footer
• #20: Weighted means that a document is split into different sections and does not have to be read through from top to bottom. Header, Navigation elements (search bar?), Main Content, Sign up form, Footer
• #21: In order for a screen reader to know what to read out in which order, you need to separate structure from styling in the HTML. This means no <br> tags. Make those spaces your CSS!
• #22: Weighted means that a document is split into different sections and does not have to be read through from top to bottom. Header, Navigation elements (search bar?), Main Content, Sign up form, Footer
• #23: Weighted means that a document is split into different sections and does not have to be read through from top to bottom. Header, Navigation elements (search bar?), Main Content, Sign up form, Footer
• #24: ARIA means Accessible Rich Internet Application Aria is a set of attributes that define ways to make web more accessible. It supplements HTML so that interactions can be passed to assistive technologies more easily.
• #25: So if you want to build a webpage or -application, take the time to think about your audience!