FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga
•Download as PPTX, PDF•
0 likes•66 views
Do you know what it feels like to navigate as someone who can’t distinguish between green and red - looking at those badges that tell you whether something is broken or a-okay? I’ll give you a quick look into what it feels like with some examples from the monitoring tool Icinga Web 2. We all tend to forget, that not everyone sees the world like we do. In this talk I’ll be walking you through different views in Icinga Web 2 with side-by-side comparisons for the default views and how different kinds of vision impairments affect those. The talks also features a few suggestions on how to improve colour schemes and making websites and webapps better to navigate with screen readers!
Recommended
Recommended
More Related Content
Similar to FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga
Similar to FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga (20)
More from DevOpsDays Tel Aviv
More from DevOpsDays Tel Aviv (20)
Recently uploaded
Recently uploaded (20)
FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga
- 1. Accessibility in Icinga Flying Blind by Feu Mourek
- 3. the quality or characteristic of something that makes it possible to approach, enter, or use it /ɪkˈses·əˈbɪl·ɪ·t̬i/ noun (Definition of accessibility from the Cambridge Business English Dictionary © Cambridge University Press) Accessibility
- 5. Numbers! (numbers from colourblindawareness.org) 285 Million globally … or 1 out of these here:
- 6. Colour Vision Deficiency (made with Color Oracle and Sketch)
- 7. Colour Vision Deficiency (made with Color Oracle and Sketch)
- 9. Colours in Icinga (made with Color Oracle and Sketch)
- 10. Colours in Icinga (made with Color Oracle and Sketch)
- 11. Colours in Icinga (made with Color Oracle and Sketch)
- 12. Keep that in mind! (numbers from https://www.ncwit.org )
- 13. Themes can help!
- 14. See for yourself (made with Color Oracle and Sketch)
- 15. See for yourself (made with Color Oracle and Sketch)
- 16. What if you can’t see?
- 18. Structure Content needs to be weighted If it is not, there is no way of telling what is important, without looking at everything. While styling can tell sighted people what to focus on, we need to look at the structure too.
- 19. Static content A lot of websites use iframes and other widgets that they do not control directly. To these cases you need to pay special attention, and maybe add an alternative description to what they are supposed to show. The alternative descriptions are also needed for images, which you need to describe in the alt attribute.
- 21. State changes ARIA provides attributes for declaring the current state of a UI widget. aria-checked: indicates the state of a checkbox or radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation Use CSS attribute selectors to alter the visual appearance based on the state changes HTML: <li role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</li> CSS: [aria-checked="true"] { font-weight: bold; }
- 22. Visibility changes When content visibility is changed (i.e., an element is hidden or shown), developers should change the aria-hidden property value. Use this to declare CSS to visually hide an element using display:none. Because if something isn’t visible, it doesn’t mean it isn’t there. CSS: div[aria-hidden="true"] { display: none; }
- 23. Read up on ARIA ( from developer.mozilla.org )
- 24. Design with Accessibility in mind! ( from developer.mozilla.org )
Editor's Notes
- 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
- 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!
- 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“
- 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:
- 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!
- 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.
- 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.
- 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
- 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.
- 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.
- 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?
- 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.
- Icinga Web has a colour blind theme. It doesn’t just work with hues, but also with different stages of brightness to signal severity.
- Here the pictures for comparison: Without the theme. - pause - And with it enabled.
- 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.
- 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”
- https://www.youtube.com/watch?v=q_ATY9gimOM
- 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
- 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
- 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!
- 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
- 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
- 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.
- So if you want to build a webpage or -application, take the time to think about your audience!