SlideShare uma empresa Scribd logo
1 de 24
Accessibility in Icinga
Flying Blind
by Feu Mourek
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
Visual Impairment
Numbers!
(numbers from colourblindawareness.org)
285 Million globally … or 1 out of these here:
Colour Vision Deficiency
(made with Color Oracle and Sketch)
Colour Vision Deficiency
(made with Color Oracle and Sketch)
Common Variants
Deuteranopia Tritanopi
a
Protanopia
Colours in Icinga
(made with Color Oracle and Sketch)
Colours in Icinga
(made with Color Oracle and Sketch)
Colours in Icinga
(made with Color Oracle and Sketch)
Keep that in mind!
(numbers from https://www.ncwit.org )
Themes can help!
See for yourself
(made with Color Oracle and Sketch)
See for yourself
(made with Color Oracle and Sketch)
What if you can’t see?
Video time!
https://www.youtube.com/watch?v=q_ATY9gimOM
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.
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.
Structure
( from developer.mozilla.org )
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; }
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;
}
Read up on ARIA
( from developer.mozilla.org )
Design with Accessibility
in mind!
( from developer.mozilla.org )

Mais conteúdo relacionado

Semelhante a FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga

Accessibility within the Web Environment
Accessibility within the Web EnvironmentAccessibility within the Web Environment
Accessibility within the Web Environment
Vision Australia
 
3. C# Guide Advance - To Print
3. C# Guide Advance - To Print3. C# Guide Advance - To Print
3. C# Guide Advance - To Print
Chinthaka Fernando
 
WP7 HUB_Introducción a Silverlight
WP7 HUB_Introducción a SilverlightWP7 HUB_Introducción a Silverlight
WP7 HUB_Introducción a Silverlight
MICTT Palma
 
Power Pointing Off The Beaten Path
Power Pointing Off The Beaten PathPower Pointing Off The Beaten Path
Power Pointing Off The Beaten Path
gmoore
 

Semelhante a FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga (20)

2007 Max Presentation - Creating Custom Flex Components
2007 Max Presentation - Creating Custom Flex Components2007 Max Presentation - Creating Custom Flex Components
2007 Max Presentation - Creating Custom Flex Components
 
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
 
Making you, and your Clients Happy, by Using Reusable Components to Build Dru...
Making you, and your Clients Happy, by Using Reusable Components to Build Dru...Making you, and your Clients Happy, by Using Reusable Components to Build Dru...
Making you, and your Clients Happy, by Using Reusable Components to Build Dru...
 
Accessibility within the Web Environment
Accessibility within the Web EnvironmentAccessibility within the Web Environment
Accessibility within the Web Environment
 
SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2
 
Advanced Topics in Continuous Deployment
Advanced Topics in Continuous DeploymentAdvanced Topics in Continuous Deployment
Advanced Topics in Continuous Deployment
 
Is accessibility the new black?
Is accessibility the new black?Is accessibility the new black?
Is accessibility the new black?
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 
Web accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introductionWeb accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introduction
 
ARIA and JavaScript Accessibility
ARIA and JavaScript AccessibilityARIA and JavaScript Accessibility
ARIA and JavaScript Accessibility
 
3. C# Guide Advance - To Print
3. C# Guide Advance - To Print3. C# Guide Advance - To Print
3. C# Guide Advance - To Print
 
Modern Notes: Databases
Modern Notes: DatabasesModern Notes: Databases
Modern Notes: Databases
 
Scala and Akka together - geek night jan 2017
Scala and Akka together - geek night jan 2017Scala and Akka together - geek night jan 2017
Scala and Akka together - geek night jan 2017
 
WP7 HUB_Introducción a Silverlight
WP7 HUB_Introducción a SilverlightWP7 HUB_Introducción a Silverlight
WP7 HUB_Introducción a Silverlight
 
What I Learned At Drupal Con Dc 2009
What I Learned At Drupal Con Dc 2009What I Learned At Drupal Con Dc 2009
What I Learned At Drupal Con Dc 2009
 
Easily enrich capella models with your own domain extensions
Easily enrich capella models with your own domain extensionsEasily enrich capella models with your own domain extensions
Easily enrich capella models with your own domain extensions
 
Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1
 
Cble assignment powerpoint activity for moodle 1
Cble assignment powerpoint activity for moodle 1Cble assignment powerpoint activity for moodle 1
Cble assignment powerpoint activity for moodle 1
 
Project Cost Estimate Ppt Sample Download
Project Cost Estimate Ppt Sample DownloadProject Cost Estimate Ppt Sample Download
Project Cost Estimate Ppt Sample Download
 
Power Pointing Off The Beaten Path
Power Pointing Off The Beaten PathPower Pointing Off The Beaten Path
Power Pointing Off The Beaten Path
 

Mais de DevOpsDays Tel Aviv

THE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider Security
THE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider SecurityTHE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider Security
THE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider Security
DevOpsDays Tel Aviv
 
HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB
HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearBHOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB
HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB
DevOpsDays Tel Aviv
 
DON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, Firefly
DON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, FireflyDON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, Firefly
DON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, Firefly
DevOpsDays Tel Aviv
 

Mais de DevOpsDays Tel Aviv (20)

YOUR OPEN SOURCE PROJECT IS LIKE A STARTUP, TREAT IT LIKE ONE, EYAR ZILBERMAN...
YOUR OPEN SOURCE PROJECT IS LIKE A STARTUP, TREAT IT LIKE ONE, EYAR ZILBERMAN...YOUR OPEN SOURCE PROJECT IS LIKE A STARTUP, TREAT IT LIKE ONE, EYAR ZILBERMAN...
YOUR OPEN SOURCE PROJECT IS LIKE A STARTUP, TREAT IT LIKE ONE, EYAR ZILBERMAN...
 
GRAPHQL TO THE RES(T)CUE, ELLA SHARAKANSKI, Salto
GRAPHQL TO THE RES(T)CUE, ELLA SHARAKANSKI, SaltoGRAPHQL TO THE RES(T)CUE, ELLA SHARAKANSKI, Salto
GRAPHQL TO THE RES(T)CUE, ELLA SHARAKANSKI, Salto
 
MICROSERVICES ABOVE THE CLOUD - DESIGNING THE INTERNATIONAL SPACE STATION FOR...
MICROSERVICES ABOVE THE CLOUD - DESIGNING THE INTERNATIONAL SPACE STATION FOR...MICROSERVICES ABOVE THE CLOUD - DESIGNING THE INTERNATIONAL SPACE STATION FOR...
MICROSERVICES ABOVE THE CLOUD - DESIGNING THE INTERNATIONAL SPACE STATION FOR...
 
THE (IR)RATIONAL INCIDENT RESPONSE: HOW PSYCHOLOGICAL BIASES AFFECT INCIDENT ...
THE (IR)RATIONAL INCIDENT RESPONSE: HOW PSYCHOLOGICAL BIASES AFFECT INCIDENT ...THE (IR)RATIONAL INCIDENT RESPONSE: HOW PSYCHOLOGICAL BIASES AFFECT INCIDENT ...
THE (IR)RATIONAL INCIDENT RESPONSE: HOW PSYCHOLOGICAL BIASES AFFECT INCIDENT ...
 
PRINCIPLES OF OBSERVABILITY // DANIEL MAHER, DataDog
PRINCIPLES OF OBSERVABILITY // DANIEL MAHER, DataDogPRINCIPLES OF OBSERVABILITY // DANIEL MAHER, DataDog
PRINCIPLES OF OBSERVABILITY // DANIEL MAHER, DataDog
 
NUDGE AND SLUDGE: DRIVING SECURITY WITH DESIGN // J. WOLFGANG GOERLICH, Duo S...
NUDGE AND SLUDGE: DRIVING SECURITY WITH DESIGN // J. WOLFGANG GOERLICH, Duo S...NUDGE AND SLUDGE: DRIVING SECURITY WITH DESIGN // J. WOLFGANG GOERLICH, Duo S...
NUDGE AND SLUDGE: DRIVING SECURITY WITH DESIGN // J. WOLFGANG GOERLICH, Duo S...
 
(Ignite) TAKE A HIKE: PREVENTING BATTERY CORROSION - LEAH VOGEL, CHEGG
(Ignite) TAKE A HIKE: PREVENTING BATTERY CORROSION - LEAH VOGEL, CHEGG(Ignite) TAKE A HIKE: PREVENTING BATTERY CORROSION - LEAH VOGEL, CHEGG
(Ignite) TAKE A HIKE: PREVENTING BATTERY CORROSION - LEAH VOGEL, CHEGG
 
BUILDING A DR PLAN FOR YOUR CLOUD INFRASTRUCTURE FROM THE GROUND UP, MOSHE BE...
BUILDING A DR PLAN FOR YOUR CLOUD INFRASTRUCTURE FROM THE GROUND UP, MOSHE BE...BUILDING A DR PLAN FOR YOUR CLOUD INFRASTRUCTURE FROM THE GROUND UP, MOSHE BE...
BUILDING A DR PLAN FOR YOUR CLOUD INFRASTRUCTURE FROM THE GROUND UP, MOSHE BE...
 
THE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider Security
THE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider SecurityTHE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider Security
THE THREE DISCIPLINES OF CI/CD SECURITY, DANIEL KRIVELEVICH, Cider Security
 
THE PLEASURES OF ON-PREM, TOMER GABEL
THE PLEASURES OF ON-PREM, TOMER GABELTHE PLEASURES OF ON-PREM, TOMER GABEL
THE PLEASURES OF ON-PREM, TOMER GABEL
 
CONFIGURATION MANAGEMENT IN THE CLOUD NATIVE ERA, SHAHAR MINTZ, EggPack
CONFIGURATION MANAGEMENT IN THE CLOUD NATIVE ERA, SHAHAR MINTZ, EggPackCONFIGURATION MANAGEMENT IN THE CLOUD NATIVE ERA, SHAHAR MINTZ, EggPack
CONFIGURATION MANAGEMENT IN THE CLOUD NATIVE ERA, SHAHAR MINTZ, EggPack
 
SOLVING THE DEVOPS CRISIS, ONE PERSON AT A TIME, CHRISTINA BABITSKI, Develeap
SOLVING THE DEVOPS CRISIS, ONE PERSON AT A TIME, CHRISTINA BABITSKI, DeveleapSOLVING THE DEVOPS CRISIS, ONE PERSON AT A TIME, CHRISTINA BABITSKI, Develeap
SOLVING THE DEVOPS CRISIS, ONE PERSON AT A TIME, CHRISTINA BABITSKI, Develeap
 
OPTIMIZING PERFORMANCE USING CONTINUOUS PRODUCTION PROFILING ,YONATAN GOLDSCH...
OPTIMIZING PERFORMANCE USING CONTINUOUS PRODUCTION PROFILING ,YONATAN GOLDSCH...OPTIMIZING PERFORMANCE USING CONTINUOUS PRODUCTION PROFILING ,YONATAN GOLDSCH...
OPTIMIZING PERFORMANCE USING CONTINUOUS PRODUCTION PROFILING ,YONATAN GOLDSCH...
 
HOW TO SCALE YOUR ONCALL OPERATION, AND SURVIVE TO TELL, ANTON DRUKH
HOW TO SCALE YOUR ONCALL OPERATION, AND SURVIVE TO TELL, ANTON DRUKHHOW TO SCALE YOUR ONCALL OPERATION, AND SURVIVE TO TELL, ANTON DRUKH
HOW TO SCALE YOUR ONCALL OPERATION, AND SURVIVE TO TELL, ANTON DRUKH
 
HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB
HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearBHOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB
HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB
 
(Ignite) WHAT'S BURNING THROUGH YOUR CLOUD BILL - GIL BAHAT, CIDER SECURITY
(Ignite) WHAT'S BURNING THROUGH YOUR CLOUD BILL - GIL BAHAT, CIDER SECURITY(Ignite) WHAT'S BURNING THROUGH YOUR CLOUD BILL - GIL BAHAT, CIDER SECURITY
(Ignite) WHAT'S BURNING THROUGH YOUR CLOUD BILL - GIL BAHAT, CIDER SECURITY
 
SLO DRIVEN DEVELOPMENT, ALON NATIV, Tomorrow.io
SLO DRIVEN DEVELOPMENT, ALON NATIV, Tomorrow.ioSLO DRIVEN DEVELOPMENT, ALON NATIV, Tomorrow.io
SLO DRIVEN DEVELOPMENT, ALON NATIV, Tomorrow.io
 
ONBOARDING IN LOCKDOWN, HILA FOX, Augury
ONBOARDING IN LOCKDOWN, HILA FOX, AuguryONBOARDING IN LOCKDOWN, HILA FOX, Augury
ONBOARDING IN LOCKDOWN, HILA FOX, Augury
 
DON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, Firefly
DON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, FireflyDON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, Firefly
DON'T PANIC: GETTING YOUR INFRASTRUCTURE DRIFT UNDER CONTROL, ERAN BIBI, Firefly
 
KEYNOTE | WHAT'S COMING IN THE NEXT 10 YEARS OF DEVOPS? // ELLEN CHISA, bolds...
KEYNOTE | WHAT'S COMING IN THE NEXT 10 YEARS OF DEVOPS? // ELLEN CHISA, bolds...KEYNOTE | WHAT'S COMING IN THE NEXT 10 YEARS OF DEVOPS? // ELLEN CHISA, bolds...
KEYNOTE | WHAT'S COMING IN THE NEXT 10 YEARS OF DEVOPS? // ELLEN CHISA, bolds...
 

Último

Último (20)

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 

FLYING BLIND - ACCESSIBILITY IN MONITORING, FEU MOUREK, Icinga

Notas do Editor

  1. 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
  2. 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!
  3. 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“
  4. 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:
  5. 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!
  6. 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.
  7. 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.
  8. 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
  9. 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.
  10. 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.
  11. 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?
  12. 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.
  13. Icinga Web has a colour blind theme. It doesn’t just work with hues, but also with different stages of brightness to signal severity.
  14. Here the pictures for comparison: Without the theme. - pause - And with it enabled.
  15. 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.
  16. 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”
  17. https://www.youtube.com/watch?v=q_ATY9gimOM
  18. 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
  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. 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!
  21. 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
  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. 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.
  24. So if you want to build a webpage or -application, take the time to think about your audience!