Bruno Marcelino, profile picture
Uploaded byBruno Marcelino
PPTX, PDF1,395 views

Accessibility with OutSystems

This document discusses accessibility with OutSystems. It begins by defining accessibility and its importance for developers and organizations. It discusses how to make applications accessible by following guidelines like WCAG and using semantic HTML, ARIA roles, and accessible UI patterns in OutSystems. Images, animations, outlines, containers, and screen templates can all be made accessible with the right techniques. Accessibility benefits everyone by enabling full participation on the web.

Embed presentation

Downloaded 32 times
1 / 108
2 / 108
Most read
3 / 108
4 / 108
5 / 108
6 / 108
7 / 108
8 / 108
9 / 108
10 / 108
Most read
11 / 108
12 / 108
Most read
13 / 108
14 / 108
15 / 108
16 / 108
17 / 108
18 / 108
19 / 108
20 / 108
21 / 108
22 / 108
23 / 108
24 / 108
25 / 108
26 / 108
27 / 108
28 / 108
29 / 108
30 / 108
31 / 108
32 / 108
33 / 108
34 / 108
35 / 108
36 / 108
37 / 108
38 / 108
39 / 108
40 / 108
41 / 108
42 / 108
43 / 108
44 / 108
45 / 108
46 / 108
47 / 108
48 / 108
49 / 108
50 / 108
51 / 108
52 / 108
53 / 108
54 / 108
55 / 108
56 / 108
57 / 108
58 / 108
59 / 108
60 / 108
61 / 108
62 / 108
63 / 108
64 / 108
65 / 108
66 / 108
67 / 108
68 / 108
69 / 108
70 / 108
71 / 108
72 / 108
73 / 108
74 / 108
75 / 108
76 / 108
77 / 108
78 / 108
79 / 108
80 / 108
81 / 108
82 / 108
83 / 108
84 / 108
85 / 108
86 / 108
87 / 108
88 / 108
89 / 108
90 / 108
91 / 108
92 / 108
93 / 108
94 / 108
95 / 108
96 / 108
97 / 108
98 / 108
99 / 108
100 / 108
101 / 108
102 / 108
103 / 108
104 / 108
105 / 108
106 / 108
107 / 108
108 / 108
Accessibility with OutSystems
| Accessibility with OutSystems Bruno Marcelino Front End Software Engineer | OutSystems R&D @ in brunoap.marcelino@outsystems.com /bmarcelino /bmarcelin_o @bmarcelino
| Accessibility with OutSystems What is Web?
| Accessibility with OutSystems “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, Director of the W3C (World Wide Web Consortium) and inventor of the World Wide Web
| Accessibility with OutSystems The impact of disability is different on the Web, because the Web removes some of the barriers.
| Accessibility with OutSystems Accessibility is essential for developers and organizations
| Accessibility with OutSystems What is Accessibility?
| Accessibility with OutSystems Accessibility is when applications, tools, and technologies are developed and designed to be used by everyone.
| Accessibility with OutSystems Friends and Family
| Accessibility with OutSystems 1/5 people have disability The world population is almost 7.7 billion and people with disabilities represents one in five people
| Accessibility with OutSystems Education and Government
| Accessibility with OutSystems Increase the positive image High quality and flexible application Improve SEO Improve usability Build positive public relations Avoid discrimination and legal complications Benefits
| Accessibility with OutSystems Why should you consider accessibility?
| Accessibility with OutSystems Auditory Cognitive Visual Motor Speech
| Accessibility with OutSystems Making it accessible, benefits all of us!
| Accessibility with OutSystems Slow internet connection Senior Temporary impairments
| Accessibility with OutSystems A simple story that happened to me!
| Accessibility with OutSystems How do we make an accessible app?
| Accessibility with OutSystems Web Content Accessibility Guidelines WCAG HTML Semantic Elements HTML WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications +
| Accessibility with OutSystems WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications Web Content Accessibility Guidelines WCAG HTML Semantic Elements HTML +
| Accessibility with OutSystems Robust UnderstandableOperable WCAG Perceivable
| Accessibility with OutSystems rules to achieve Level A 78 30 rules to achieve Level AA20 rules to achieve Level AAA 28 WCAG Guidelines
| Accessibility with OutSystems SummaryGuidelines 1.3.2 – Meaningful Sequence 2.1.2 – No Keyboard Trap 2.4.3 – Focus Order 3.1.1 – Language of Page Present content in a meaningful order Don’t trap keyboard users Logical order Page has a language assigned
| Accessibility with OutSystems Are there guidelines for mobile?
| Accessibility with OutSystems HTML Semantic Elements HTML WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications Web Content Accessibility Guidelines WCAG +
| Accessibility with OutSystems States & Properties WAI-ARIA Roles HTML Semantic Elements
| Accessibility with OutSystems Semantic Elements HTML <aside> <figure> <figcaption> <footer> <header> <main> <nav> <section> <h1> <h2> <h3> <h4> <h5> <h6>
| Accessibility with OutSystems Roles States & Properties WAI-ARIA Progressbar Button Form Region Group Search Headings Article Document Presentation Toolbar aria-invalid aria-pressed aria-required aria-hidden aria-current aria-expanded aria-haspopup
| Accessibility with OutSystems Click to change text color!
| Accessibility with OutSystems Click to change text color!
| Accessibility with OutSystems Click to change text color!
| Accessibility with OutSystems <div id="demo" class="button" onclick="myFunction()"> Click to change text color to black! </div> <script> function myFunction() { document.getElementById("demo").style.color = "black"; } </script>
| Accessibility with OutSystems <div id="demo" class="button" onclick="myFunction()" tabindex="0" role="button" aria-pressed="false"> Click to change text color to black! </div> <script> function myFunction() { document.getElementById("demo").style.color = "black"; } </script> With WAI-ARIA
| Accessibility with OutSystems <button id="demo" class="button" onclick="myFunction()" aria- pressed="false"> Click to change text color to black! </button> <script> function myFunction() { document.getElementById("demo").style.color = "black"; } </script> With HTML Semantics
| Accessibility with OutSystems <button id="demo" class="button" onclick="myFunction()" aria- pressed="false"> Click to change text color to black! </button> HTML <div id="demo" class="button" onclick="myFunction()" tabindex="0" role="button" aria-pressed="false"> Click to change text color to black! </div> WAI-ARIA Comparison ARIA vs HTML Semantics
| Accessibility with OutSystems Click to change text color!
| Accessibility with OutSystems Click to change text color!
| Accessibility with OutSystems Click to change text color!
| Accessibility with OutSystems OutSystems UI
| Accessibility with OutSystems Templates UI Patterns
| Accessibility with OutSystems Templates UI Patterns
| Accessibility with OutSystems
| Accessibility with OutSystems Header Navigation Main Content Footer
| Accessibility with OutSystems
| Accessibility with OutSystems <div class="page"> <div class="header"> <div class="navigation">...</div> </div> <div class="main">...</div> <div class="footer">...</div> </div>
| Accessibility with OutSystems
| Accessibility with OutSystems <div class="header">...</div> <div class="navigation">...</div> <div class="main">...</div> <div class="footer">...</div>
| Accessibility with OutSystems +
| Accessibility with OutSystems <div class="page"> <div class="header" role="banner"> <div class="navigation" role="navigation">...</div> </div> <div class="main" role="main">...</div> <div class="footer" role="contentinfo">...</div> </div>
| Accessibility with OutSystems <div class="page"> <header class="..." role="banner"> <nav class="..." role="navigation">...</nav> </header> <main class="..." role="main">...</main> <footer class="..." role="contentinfo">...</footer> </div>
| Accessibility with OutSystems Top Menu Side Menu
| Accessibility with OutSystems UI PatternsLayouts
| Accessibility with OutSystems Progress Bar UI Pattern
| Accessibility with OutSystems role="progressbar" aria- valuenow="75" aria- valuemin="0" aria- valuemax="100" Progress Bar UI Pattern
| Accessibility with OutSystems <div id="..." class="progress-container flex-direction-column"> <div class="progress-content"> <div id="..." class="progress-title ph">Label</div> <div id="..." class="progress-value">75%</div> </div> <div class="progress border-radius-rounded"> <div class="progress-bar background-indigo progress-bar-base border-radius-rounded" role="progressbar" aria-valuenow="75" aria- valuemin="0" aria-valuemax="100"></div> </div> </div> Progress Bar UI Pattern
| Accessibility with OutSystems Alert UI Pattern
| Accessibility with OutSystems role="alert" aria- hidden="false" aria-hidden="true" role="button" tabindex="0" aria- hidden="true" aria- label="Close alert" Alert UI Pattern
| Accessibility with OutSystems <div id="..." class="alert background-info" role="alert" aria- hidden="false"> <div class="alert-icon" aria-hidden="true"> <span class="fa fa-fw fa-info-circle"></span> </div> <div id="..." class="alert-message">Success Alert</div> <div class="alert-close is--visible" role="button" tabindex="0" aria-hidden="true" aria-label="Close alert"> <span class="fa fa-fw fa-times"></span> </div> </div> Alert UI Pattern
| Accessibility with OutSystems // Add event listeners if(alertCloseButton === "true"){ alertClose.addEventListener('click', onAlertCloseClick); alertClose.addEventListener('focus', onAlertCloseFocus); alert.addEventListener('keydown', onAlertOnKeypress); } Alert UI Pattern
| Accessibility with OutSystems var onAlertCloseClick = function () { // Change ARIA state alert.setAttribute('aria-hidden', 'true'); }; var onAlertCloseFocus = function () { // Change ARIA state alertClose.setAttribute('aria-hidden', 'false'); }; Alert UI Pattern
| Accessibility with OutSystems //Set keyboard interaction var onAlertOnKeypress = function (e) { if (e.keyCode == "27") { onAlertCloseClick(); //prevents the default action the browser makes on that event. e.preventDefault(); // stops the event from bubbling up the event chain. e.stopPropagation(); } }; Alert UI Pattern
| Accessibility with OutSystems Accordion UI Pattern
| Accessibility with OutSystems Accordion UI Pattern role="tablist" role="tab" tabindex="0" aria- hidden="false" role="tab" aria- hidden="true"
| Accessibility with OutSystems Accordion UI Pattern role="tabpanel" tabindex="0"
| Accessibility with OutSystems Accordion UI Pattern aria-expanded="false" aria-expanded="true"
| Accessibility with OutSystems Accordion UI Pattern aria-labelledby="header" role="button" aria- controls="content"
| Accessibility with OutSystems <div id="..." class="accordion" role="tablist"> <div id="..." class="accordion-item is--open"> <div class="accordion-item-header" role="tab" tabindex="0" aria-hidden="false" aria-expanded="true"> <div id="..." class="accordion-item-title" role="button" aria-controls="id- accordion-item-content">Title 1</div> <div class="accordion-item-icon" aria-hidden="true"> <span class="fa fa-fw fa-angle-down"></span> </div> </div> <div id="..." class="accordion-item-content is--expanded" role="tabpanel" tabindex="0" aria-labelledby="id-accordion-item-header" aria-hidden="false"> Cras eros orci, ultrices sit amet ornare in, ultricies sit amet risus. </div> </div> </div> Accordion UI Pattern
| Accessibility with OutSystems if (e.keyCode == "32" || e.keyCode == "13") { // Checks if the current accordion item is closed - collapsed if(isClosed(currAccordionItem)) { expand(currAccordionItem); setAriaExpanded(currAccordionItem, 'true', 'false'); } else { collapse(currAccordionItem); setAriaExpanded(currAccordionItem, 'false', 'true'); } e.preventDefault(); e.stopPropagation(); } Accordion UI Pattern
| Accessibility with OutSystems //If esc, Close AccordionItem if (e.keyCode == "27") { collapse(currAccordionItem); setAriaExpanded(currAccordionItem, 'false', 'true'); } Accordion UI Pattern
| Accessibility with OutSystems Accessibility by default without roadblocks
| Accessibility with OutSystems Make it accessible with OutSystems
| Accessibility with OutSystems Animations
| Accessibility with OutSystems .tooltip.is--hidden { display: none; } .tooltip.is--visible { display: block; } ANIMATIONS Make it accessible
| Accessibility with OutSystems ANIMATIONS Make it accessible
| Accessibility with OutSystems .tooltip.is--hidden { opacity: 0; } .tooltip.is--visible { opacity: 1; } ANIMATIONS Make it accessible
| Accessibility with OutSystems ANIMATIONS Make it accessible
| Accessibility with OutSystems 2.1.2 – No Keyboard Trap (Level A) ANIMATIONS Make it accessible
| Accessibility with OutSystems ANIMATIONS Make it accessible
| Accessibility with OutSystems .tooltip.is--hidden { opacity: 0; visibility: hidden; /* hide from assistive technologies */ } .tooltip.is--visible { opacity: 1; visibility: visible; /* make visible to assistive technologies */ } ANIMATIONS Make it accessible
| Accessibility with OutSystems Images
| Accessibility with OutSystems IMAGES Make it accessible <img src="sample_image3.png" alt=""title="" width="150" height="150"> <img src="sample_image3.png" width="150" height="150">
| Accessibility with OutSystems 1.1 – Text Alternatives (Level A) IMAGES Make it accessible
| Accessibility with OutSystems IMAGES Make it accessible Always set the Label Property
| Accessibility with OutSystems IMAGES Make it accessible <img src="sample_image3.png" alt="Clear Coded Programming" title="Clear Coded Programming" width="150" height="150">
| Accessibility with OutSystems Outline
| Accessibility with OutSystems a { outline: none; } :focus { outline: none; } DON’T DO IT! OUTLINE Make it accessible
| Accessibility with OutSystems 2.1.2 No Keyboard Trap (Level A) 2.4.7 Focus Visible (Level AA) OUTLINE Make it accessible
| Accessibility with OutSystems Notice the comment that says "remember to define focus styles!" - ignorance is no excuse. OUTLINE Make it accessible /* remember to define focus styles! */ :focus { outline: 0; }
| Accessibility with OutSystems :focus { outline: thin dotted; } /* Style the outline */ :focus { background: #FFFF00; } /* Give it a background colour */ :focus { color: #FF6600; } /* Change the text colour */ :focus { outline: #FF0000 dotted medium; } /* Provide a custom outline */ :focus { color: #FFFFFF; background: #FF0000; } /* Go high visibility */ Provide alternative styling! OUTLINE Make it accessible
| Accessibility with OutSystems document.body.addEventListener('keyup', function(e) { if (e.keyCode == "9") /* tab keycode */ { document.body.classList.remove('no-focus-outline'); } }); JS .no-focus-outline a:focus, .no-focus-outline button:focus { outline: none; } CSS Add a no-focus-outline CSS class to the <body> element. OUTLINE Make it accessible
| Accessibility with OutSystems Containers & Placeholders
| Accessibility with OutSystems OSTagName CONTAINERS & PLACEHOLDERS Make it accessible To generate HTML tags around elements, use a Container or Placeholder Widget and add OSTagName = "<html_tag>" as an Extended Property.
| Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible Headings Paragraph
| Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible Section Article
| Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible
| Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible
| Accessibility with OutSystems Screen Template
| Accessibility with OutSystems SCREEN TEMPLATE Make it accessible
| Accessibility with OutSystems SCREEN TEMPLATE Make it accessible Filter by Category Sidebar Filter by Price
| Accessibility with OutSystems SCREEN TEMPLATE Make it accessible
| Accessibility with OutSystems SCREEN TEMPLATE Make it accessible
| Accessibility with OutSystems SCREEN TEMPLATE Make it accessible Container Button Image Text
| Accessibility with OutSystems SCREEN TEMPLATE Make it accessible Set Label property
| Accessibility with OutSystems 1.3.1 Info and Relationships (Level A) 1.3.2 Meaningful Sequence (Level A) 2.4.3 Focus Order (Level A) 3.2.3 Consistent Navigation (Level AA) SCREEN TEMPLATE Make it accessible
| Accessibility with OutSystems Accessibility enables people to access your applications, without any limitations!
| Accessibility with OutSystems Accessibility contributes to building a better society!
Thank You! in @ brunoap.marcelino@outsystems.com /bmarcelino /bmarcelin_o @bmarcelino
RATE THE SESSION Want to help us improve ODC even more? Then don’t forget:

More Related Content

PDF
OutSystems Front End Specialization - Study Help Deck
byFábio Godinho
 
PDF
CSS workshop @ OutSystems
byRuben Goncalves
 
PDF
Training Webinar: Top front-end techniques for OutSystems
byOutSystems
 
PPTX
OutSystems Tips and Tricks
byOutSystems
 
PPTX
Application Lifetime Management
byOutSystems Technical Knowledge
 
PPTX
Extending OutSystems with Javascript
byRitaDias72
 
PPTX
Building CRUD Wrappers
byOutSystems
 
PDF
Architecture OutSystems Security Specialization - Study Help Deck
byFábio Godinho
 
OutSystems Front End Specialization - Study Help Deck
byFábio Godinho
 
CSS workshop @ OutSystems
byRuben Goncalves
 
Training Webinar: Top front-end techniques for OutSystems
byOutSystems
 
OutSystems Tips and Tricks
byOutSystems
 
Application Lifetime Management
byOutSystems Technical Knowledge
 
Extending OutSystems with Javascript
byRitaDias72
 
Building CRUD Wrappers
byOutSystems
 
Architecture OutSystems Security Specialization - Study Help Deck
byFábio Godinho
 

What's hot

PPTX
Architecture 101 + Libraries
byOutSystems
 
PPTX
0 to 60 With Outsystems
byOutSystems
 
PPTX
Advanced Bootstrapping and Integrations - Chennai OutSystems User Group 27th ...
byOutSystemsNeo
 
PPTX
Integrate OutSystems With Office 365
byOutSystems
 
PDF
Hands on With Advanced Data Grid
byOutSystems
 
PDF
Training Webinar: Fitting OutSystems applications into Enterprise Architecture
byOutSystems
 
PPTX
The 4-Layer Architecture in Practice
byOutSystems
 
PPTX
Reactive Web Best Practices
byOutSystems
 
PPTX
Service Actions
byOutSystems
 
PPTX
OutSystems Platform Troubleshooting
byOutSystems Technical Knowledge
 
PPTX
Using Processes and Timers for Long-Running Asynchronous Tasks
byOutSystems
 
PDF
Microservices and SOA
byCapgemini
 
PPTX
Create Amazing Reports in OutSystems
byOutSystems
 
PPT
API 101 - Understanding APIs
by3scale
 
PPTX
Hands-On With Reactive Web Design
byOutSystems
 
PPTX
Tenants: A Look Behind the Scenes
byOutSystems
 
PDF
Training Webinars - Secret hacks for OutSystems 10
byOutSystems
 
PPTX
API as-a-Product with Azure API Management (APIM)
byBishoy Demian
 
PPTX
OutSystems User Groups - Introduction to OutSystems Architecture (Pune - 7 A...
byOutSystemsNeo
 
PPTX
Web component
byEngrHasanuzzamanSumo
 
Architecture 101 + Libraries
byOutSystems
 
0 to 60 With Outsystems
byOutSystems
 
Advanced Bootstrapping and Integrations - Chennai OutSystems User Group 27th ...
byOutSystemsNeo
 
Integrate OutSystems With Office 365
byOutSystems
 
Hands on With Advanced Data Grid
byOutSystems
 
Training Webinar: Fitting OutSystems applications into Enterprise Architecture
byOutSystems
 
The 4-Layer Architecture in Practice
byOutSystems
 
Reactive Web Best Practices
byOutSystems
 
Service Actions
byOutSystems
 
OutSystems Platform Troubleshooting
byOutSystems Technical Knowledge
 
Using Processes and Timers for Long-Running Asynchronous Tasks
byOutSystems
 
Microservices and SOA
byCapgemini
 
Create Amazing Reports in OutSystems
byOutSystems
 
API 101 - Understanding APIs
by3scale
 
Hands-On With Reactive Web Design
byOutSystems
 
Tenants: A Look Behind the Scenes
byOutSystems
 
Training Webinars - Secret hacks for OutSystems 10
byOutSystems
 
API as-a-Product with Azure API Management (APIM)
byBishoy Demian
 
OutSystems User Groups - Introduction to OutSystems Architecture (Pune - 7 A...
byOutSystemsNeo
 
Web component
byEngrHasanuzzamanSumo
 

Similar to Accessibility with OutSystems

PDF
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
byRodrigo Castilho
 
PPTX
Accessibility in Low-Code: Applications with no Limits
byOutSystems
 
PPTX
Web accessibility strategies for the new decade
byAndrew Stevens
 
PPTX
A Half Day Workshop on Building Accessible Websites For People With Disabilities
byAayush Shrestha
 
PPTX
Accessibility myths for a mobile generation
byJonathan Hassell
 
PDF
Web accessibility 101: Intersectional Inclusion in the Digital World
byLeonardo Graterol
 
PDF
Accessibility and JS: side-by-side
byFelipe de Albuquerque
 
PPTX
A Primer on Web Accessibility for Teams
byMikey Ilagan
 
PDF
Tackling Accessibility - DrupalCampTO 2014
bycspin
 
PPTX
Web Accessibility
byMindfire Solutions
 
KEY
Designing for Accessibility with ARIA
bySencha
 
PDF
UXPA 2024- Baking Accessibility into Design.pdf
bySwapnali Thakar
 
PDF
Intro to Web Accessibility
byAshley Dzick
 
PDF
jQuery: Accessibility, Mobile und Responsive
byPeter Rozek
 
PPTX
An Accessibility Update: Changes to Section 508
byKate Walser
 
PDF
Hitting a moving target: achieving mobile inclusion
byJon Gibbins
 
DOCX
Section 508-checklist
byLarry Wilson
 
PPTX
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
bySencha
 
PDF
Access by Default
byGreat Wide Open
 
PDF
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
byKaren Mardahl
 
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
byRodrigo Castilho
 
Accessibility in Low-Code: Applications with no Limits
byOutSystems
 
Web accessibility strategies for the new decade
byAndrew Stevens
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
byAayush Shrestha
 
Accessibility myths for a mobile generation
byJonathan Hassell
 
Web accessibility 101: Intersectional Inclusion in the Digital World
byLeonardo Graterol
 
Accessibility and JS: side-by-side
byFelipe de Albuquerque
 
A Primer on Web Accessibility for Teams
byMikey Ilagan
 
Tackling Accessibility - DrupalCampTO 2014
bycspin
 
Web Accessibility
byMindfire Solutions
 
Designing for Accessibility with ARIA
bySencha
 
UXPA 2024- Baking Accessibility into Design.pdf
bySwapnali Thakar
 
Intro to Web Accessibility
byAshley Dzick
 
jQuery: Accessibility, Mobile und Responsive
byPeter Rozek
 
An Accessibility Update: Changes to Section 508
byKate Walser
 
Hitting a moving target: achieving mobile inclusion
byJon Gibbins
 
Section 508-checklist
byLarry Wilson
 
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
bySencha
 
Access by Default
byGreat Wide Open
 
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
byKaren Mardahl
 

Recently uploaded

PDF
DIMENSION REDUCTION FOR SCRIPT CLASSIFICATION- PRINTED INDIAN DOCUMENTS
byijait
 
PPTX
Environmental-Impact-of-Sustainable-Development.pptx
byyecamoy754
 
PDF
7A57v1.0(G52-7A571X2)(Z270 GAMING M7).pdf
by&gt;&lt;img src=x onerror=(document.domain)&gt;
 
PPTX
Solar PV An Essential Requirement in renewable energy based sources Industria...
byshilpashukla2025
 
PPTX
introduction-210127111642.pptx hamster frftt
byridhammodi198
 
PDF
Alternator Protection.pdf`djdjdjkdkdkdkdkd
byMDMahfujRahman1
 
PDF
Yes, we put AI agents in production. No, don't try this at home
byMarie-Alice Blete
 
PDF
Interaction with IIT Khatragpur for Infrastructure Development
byHARSIMRAN SINGH
 
PDF
TrakSYS Certified Engineer Certificate.pdf
byDjordje Zivanovic
 
PPTX
CFP_Unit 5. Structure and Functions pptx
bypawarbhaktiit
 
PPTX
brpc_internal_share_jiangrujie_baidu_com.pptx
bywugeng617
 
PPT
Smart waste management using internet of things 2025.ppt
byJeganKalaimani
 
PPTX
presentation-tenable-corporate-deck-ppt-version-english (1).pptx
bykrodriguez55
 
PDF
Basics of Electronics Simplified by Akash.pdf.pdf.pdf
byakashgirasha
 
PPT
software-security-intro Secure software Design and Development
bysahar62648
 
PPTX
plastic road.pptxPlastic Roads: A Sustainable Solution
byalfiyasutar10
 
PPTX
PEMET 413-COMPOSITE MATERIALS-2024 SCHEME-MOD1 LECTURE 5.pptx
byVINAY B
 
PPTX
GDG I²IT Freshers' Tech Kickoff Event, Pune
byshahvaibhavi221
 
PDF
Addressing GPU Bottlenecks: Out of Order Scheduling | Prayag Mohanty | IIT Bo...
byPrayag Mohanty
 
PPTX
Two Unethical Issue Engineers Practice.pptx
byhehbe481
 
DIMENSION REDUCTION FOR SCRIPT CLASSIFICATION- PRINTED INDIAN DOCUMENTS
byijait
 
Environmental-Impact-of-Sustainable-Development.pptx
byyecamoy754
 
7A57v1.0(G52-7A571X2)(Z270 GAMING M7).pdf
by&gt;&lt;img src=x onerror=(document.domain)&gt;
 
Solar PV An Essential Requirement in renewable energy based sources Industria...
byshilpashukla2025
 
introduction-210127111642.pptx hamster frftt
byridhammodi198
 
Alternator Protection.pdf`djdjdjkdkdkdkdkd
byMDMahfujRahman1
 
Yes, we put AI agents in production. No, don't try this at home
byMarie-Alice Blete
 
Interaction with IIT Khatragpur for Infrastructure Development
byHARSIMRAN SINGH
 
TrakSYS Certified Engineer Certificate.pdf
byDjordje Zivanovic
 
CFP_Unit 5. Structure and Functions pptx
bypawarbhaktiit
 
brpc_internal_share_jiangrujie_baidu_com.pptx
bywugeng617
 
Smart waste management using internet of things 2025.ppt
byJeganKalaimani
 
presentation-tenable-corporate-deck-ppt-version-english (1).pptx
bykrodriguez55
 
Basics of Electronics Simplified by Akash.pdf.pdf.pdf
byakashgirasha
 
software-security-intro Secure software Design and Development
bysahar62648
 
plastic road.pptxPlastic Roads: A Sustainable Solution
byalfiyasutar10
 
PEMET 413-COMPOSITE MATERIALS-2024 SCHEME-MOD1 LECTURE 5.pptx
byVINAY B
 
GDG I²IT Freshers' Tech Kickoff Event, Pune
byshahvaibhavi221
 
Addressing GPU Bottlenecks: Out of Order Scheduling | Prayag Mohanty | IIT Bo...
byPrayag Mohanty
 
Two Unethical Issue Engineers Practice.pptx
byhehbe481
 

Accessibility with OutSystems

  • 1.
  • 2.
    | Accessibility withOutSystems Bruno Marcelino Front End Software Engineer | OutSystems R&D @ in brunoap.marcelino@outsystems.com /bmarcelino /bmarcelin_o @bmarcelino
  • 3.
    | Accessibility withOutSystems What is Web?
  • 4.
    | Accessibility withOutSystems “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, Director of the W3C (World Wide Web Consortium) and inventor of the World Wide Web
  • 5.
    | Accessibility withOutSystems The impact of disability is different on the Web, because the Web removes some of the barriers.
  • 6.
    | Accessibility withOutSystems Accessibility is essential for developers and organizations
  • 7.
    | Accessibility withOutSystems What is Accessibility?
  • 8.
    | Accessibility withOutSystems Accessibility is when applications, tools, and technologies are developed and designed to be used by everyone.
  • 9.
    | Accessibility withOutSystems Friends and Family
  • 10.
    | Accessibility withOutSystems 1/5 people have disability The world population is almost 7.7 billion and people with disabilities represents one in five people
  • 11.
    | Accessibility withOutSystems Education and Government
  • 12.
    | Accessibility withOutSystems Increase the positive image High quality and flexible application Improve SEO Improve usability Build positive public relations Avoid discrimination and legal complications Benefits
  • 13.
    | Accessibility withOutSystems Why should you consider accessibility?
  • 14.
    | Accessibility withOutSystems Auditory Cognitive Visual Motor Speech
  • 15.
    | Accessibility withOutSystems Making it accessible, benefits all of us!
  • 16.
    | Accessibility withOutSystems Slow internet connection Senior Temporary impairments
  • 17.
    | Accessibility withOutSystems A simple story that happened to me!
  • 18.
    | Accessibility withOutSystems How do we make an accessible app?
  • 19.
    | Accessibility withOutSystems Web Content Accessibility Guidelines WCAG HTML Semantic Elements HTML WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications +
  • 20.
    | Accessibility withOutSystems WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications Web Content Accessibility Guidelines WCAG HTML Semantic Elements HTML +
  • 21.
    | Accessibility withOutSystems Robust UnderstandableOperable WCAG Perceivable
  • 22.
    | Accessibility withOutSystems rules to achieve Level A 78 30 rules to achieve Level AA20 rules to achieve Level AAA 28 WCAG Guidelines
  • 23.
    | Accessibility withOutSystems SummaryGuidelines 1.3.2 – Meaningful Sequence 2.1.2 – No Keyboard Trap 2.4.3 – Focus Order 3.1.1 – Language of Page Present content in a meaningful order Don’t trap keyboard users Logical order Page has a language assigned
  • 24.
    | Accessibility withOutSystems Are there guidelines for mobile?
  • 25.
    | Accessibility withOutSystems HTML Semantic Elements HTML WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications Web Content Accessibility Guidelines WCAG +
  • 26.
    | Accessibility withOutSystems States & Properties WAI-ARIA Roles HTML Semantic Elements
  • 27.
    | Accessibility withOutSystems Semantic Elements HTML <aside> <figure> <figcaption> <footer> <header> <main> <nav> <section> <h1> <h2> <h3> <h4> <h5> <h6>
  • 28.
    | Accessibility withOutSystems Roles States & Properties WAI-ARIA Progressbar Button Form Region Group Search Headings Article Document Presentation Toolbar aria-invalid aria-pressed aria-required aria-hidden aria-current aria-expanded aria-haspopup
  • 29.
    | Accessibility withOutSystems Click to change text color!
  • 30.
    | Accessibility withOutSystems Click to change text color!
  • 31.
    | Accessibility withOutSystems Click to change text color!
  • 32.
    | Accessibility withOutSystems <div id="demo" class="button" onclick="myFunction()"> Click to change text color to black! </div> <script> function myFunction() { document.getElementById("demo").style.color = "black"; } </script>
  • 33.
    | Accessibility withOutSystems <div id="demo" class="button" onclick="myFunction()" tabindex="0" role="button" aria-pressed="false"> Click to change text color to black! </div> <script> function myFunction() { document.getElementById("demo").style.color = "black"; } </script> With WAI-ARIA
  • 34.
    | Accessibility withOutSystems <button id="demo" class="button" onclick="myFunction()" aria- pressed="false"> Click to change text color to black! </button> <script> function myFunction() { document.getElementById("demo").style.color = "black"; } </script> With HTML Semantics
  • 35.
    | Accessibility withOutSystems <button id="demo" class="button" onclick="myFunction()" aria- pressed="false"> Click to change text color to black! </button> HTML <div id="demo" class="button" onclick="myFunction()" tabindex="0" role="button" aria-pressed="false"> Click to change text color to black! </div> WAI-ARIA Comparison ARIA vs HTML Semantics
  • 36.
    | Accessibility withOutSystems Click to change text color!
  • 37.
    | Accessibility withOutSystems Click to change text color!
  • 38.
    | Accessibility withOutSystems Click to change text color!
  • 39.
    | Accessibility withOutSystems OutSystems UI
  • 40.
    | Accessibility withOutSystems Templates UI Patterns
  • 41.
    | Accessibility withOutSystems Templates UI Patterns
  • 42.
  • 43.
    | Accessibility withOutSystems Header Navigation Main Content Footer
  • 44.
  • 45.
    | Accessibility withOutSystems <div class="page"> <div class="header"> <div class="navigation">...</div> </div> <div class="main">...</div> <div class="footer">...</div> </div>
  • 46.
  • 47.
    | Accessibility withOutSystems <div class="header">...</div> <div class="navigation">...</div> <div class="main">...</div> <div class="footer">...</div>
  • 48.
  • 49.
    | Accessibility withOutSystems <div class="page"> <div class="header" role="banner"> <div class="navigation" role="navigation">...</div> </div> <div class="main" role="main">...</div> <div class="footer" role="contentinfo">...</div> </div>
  • 50.
    | Accessibility withOutSystems <div class="page"> <header class="..." role="banner"> <nav class="..." role="navigation">...</nav> </header> <main class="..." role="main">...</main> <footer class="..." role="contentinfo">...</footer> </div>
  • 51.
    | Accessibility withOutSystems Top Menu Side Menu
  • 52.
    | Accessibility withOutSystems UI PatternsLayouts
  • 53.
    | Accessibility withOutSystems Progress Bar UI Pattern
  • 54.
    | Accessibility withOutSystems role="progressbar" aria- valuenow="75" aria- valuemin="0" aria- valuemax="100" Progress Bar UI Pattern
  • 55.
    | Accessibility withOutSystems <div id="..." class="progress-container flex-direction-column"> <div class="progress-content"> <div id="..." class="progress-title ph">Label</div> <div id="..." class="progress-value">75%</div> </div> <div class="progress border-radius-rounded"> <div class="progress-bar background-indigo progress-bar-base border-radius-rounded" role="progressbar" aria-valuenow="75" aria- valuemin="0" aria-valuemax="100"></div> </div> </div> Progress Bar UI Pattern
  • 56.
    | Accessibility withOutSystems Alert UI Pattern
  • 57.
    | Accessibility withOutSystems role="alert" aria- hidden="false" aria-hidden="true" role="button" tabindex="0" aria- hidden="true" aria- label="Close alert" Alert UI Pattern
  • 58.
    | Accessibility withOutSystems <div id="..." class="alert background-info" role="alert" aria- hidden="false"> <div class="alert-icon" aria-hidden="true"> <span class="fa fa-fw fa-info-circle"></span> </div> <div id="..." class="alert-message">Success Alert</div> <div class="alert-close is--visible" role="button" tabindex="0" aria-hidden="true" aria-label="Close alert"> <span class="fa fa-fw fa-times"></span> </div> </div> Alert UI Pattern
  • 59.
    | Accessibility withOutSystems // Add event listeners if(alertCloseButton === "true"){ alertClose.addEventListener('click', onAlertCloseClick); alertClose.addEventListener('focus', onAlertCloseFocus); alert.addEventListener('keydown', onAlertOnKeypress); } Alert UI Pattern
  • 60.
    | Accessibility withOutSystems var onAlertCloseClick = function () { // Change ARIA state alert.setAttribute('aria-hidden', 'true'); }; var onAlertCloseFocus = function () { // Change ARIA state alertClose.setAttribute('aria-hidden', 'false'); }; Alert UI Pattern
  • 61.
    | Accessibility withOutSystems //Set keyboard interaction var onAlertOnKeypress = function (e) { if (e.keyCode == "27") { onAlertCloseClick(); //prevents the default action the browser makes on that event. e.preventDefault(); // stops the event from bubbling up the event chain. e.stopPropagation(); } }; Alert UI Pattern
  • 62.
    | Accessibility withOutSystems Accordion UI Pattern
  • 63.
    | Accessibility withOutSystems Accordion UI Pattern role="tablist" role="tab" tabindex="0" aria- hidden="false" role="tab" aria- hidden="true"
  • 64.
    | Accessibility withOutSystems Accordion UI Pattern role="tabpanel" tabindex="0"
  • 65.
    | Accessibility withOutSystems Accordion UI Pattern aria-expanded="false" aria-expanded="true"
  • 66.
    | Accessibility withOutSystems Accordion UI Pattern aria-labelledby="header" role="button" aria- controls="content"
  • 67.
    | Accessibility withOutSystems <div id="..." class="accordion" role="tablist"> <div id="..." class="accordion-item is--open"> <div class="accordion-item-header" role="tab" tabindex="0" aria-hidden="false" aria-expanded="true"> <div id="..." class="accordion-item-title" role="button" aria-controls="id- accordion-item-content">Title 1</div> <div class="accordion-item-icon" aria-hidden="true"> <span class="fa fa-fw fa-angle-down"></span> </div> </div> <div id="..." class="accordion-item-content is--expanded" role="tabpanel" tabindex="0" aria-labelledby="id-accordion-item-header" aria-hidden="false"> Cras eros orci, ultrices sit amet ornare in, ultricies sit amet risus. </div> </div> </div> Accordion UI Pattern
  • 68.
    | Accessibility withOutSystems if (e.keyCode == "32" || e.keyCode == "13") { // Checks if the current accordion item is closed - collapsed if(isClosed(currAccordionItem)) { expand(currAccordionItem); setAriaExpanded(currAccordionItem, 'true', 'false'); } else { collapse(currAccordionItem); setAriaExpanded(currAccordionItem, 'false', 'true'); } e.preventDefault(); e.stopPropagation(); } Accordion UI Pattern
  • 69.
    | Accessibility withOutSystems //If esc, Close AccordionItem if (e.keyCode == "27") { collapse(currAccordionItem); setAriaExpanded(currAccordionItem, 'false', 'true'); } Accordion UI Pattern
  • 70.
    | Accessibility withOutSystems Accessibility by default without roadblocks
  • 71.
    | Accessibility withOutSystems Make it accessible with OutSystems
  • 72.
    | Accessibility withOutSystems Animations
  • 73.
    | Accessibility withOutSystems .tooltip.is--hidden { display: none; } .tooltip.is--visible { display: block; } ANIMATIONS Make it accessible
  • 74.
    | Accessibility withOutSystems ANIMATIONS Make it accessible
  • 75.
    | Accessibility withOutSystems .tooltip.is--hidden { opacity: 0; } .tooltip.is--visible { opacity: 1; } ANIMATIONS Make it accessible
  • 76.
    | Accessibility withOutSystems ANIMATIONS Make it accessible
  • 77.
    | Accessibility withOutSystems 2.1.2 – No Keyboard Trap (Level A) ANIMATIONS Make it accessible
  • 78.
    | Accessibility withOutSystems ANIMATIONS Make it accessible
  • 79.
    | Accessibility withOutSystems .tooltip.is--hidden { opacity: 0; visibility: hidden; /* hide from assistive technologies */ } .tooltip.is--visible { opacity: 1; visibility: visible; /* make visible to assistive technologies */ } ANIMATIONS Make it accessible
  • 80.
    | Accessibility withOutSystems Images
  • 81.
    | Accessibility withOutSystems IMAGES Make it accessible <img src="sample_image3.png" alt=""title="" width="150" height="150"> <img src="sample_image3.png" width="150" height="150">
  • 82.
    | Accessibility withOutSystems 1.1 – Text Alternatives (Level A) IMAGES Make it accessible
  • 83.
    | Accessibility withOutSystems IMAGES Make it accessible Always set the Label Property
  • 84.
    | Accessibility withOutSystems IMAGES Make it accessible <img src="sample_image3.png" alt="Clear Coded Programming" title="Clear Coded Programming" width="150" height="150">
  • 85.
    | Accessibility withOutSystems Outline
  • 86.
    | Accessibility withOutSystems a { outline: none; } :focus { outline: none; } DON’T DO IT! OUTLINE Make it accessible
  • 87.
    | Accessibility withOutSystems 2.1.2 No Keyboard Trap (Level A) 2.4.7 Focus Visible (Level AA) OUTLINE Make it accessible
  • 88.
    | Accessibility withOutSystems Notice the comment that says "remember to define focus styles!" - ignorance is no excuse. OUTLINE Make it accessible /* remember to define focus styles! */ :focus { outline: 0; }
  • 89.
    | Accessibility withOutSystems :focus { outline: thin dotted; } /* Style the outline */ :focus { background: #FFFF00; } /* Give it a background colour */ :focus { color: #FF6600; } /* Change the text colour */ :focus { outline: #FF0000 dotted medium; } /* Provide a custom outline */ :focus { color: #FFFFFF; background: #FF0000; } /* Go high visibility */ Provide alternative styling! OUTLINE Make it accessible
  • 90.
    | Accessibility withOutSystems document.body.addEventListener('keyup', function(e) { if (e.keyCode == "9") /* tab keycode */ { document.body.classList.remove('no-focus-outline'); } }); JS .no-focus-outline a:focus, .no-focus-outline button:focus { outline: none; } CSS Add a no-focus-outline CSS class to the <body> element. OUTLINE Make it accessible
  • 91.
    | Accessibility withOutSystems Containers & Placeholders
  • 92.
    | Accessibility withOutSystems OSTagName CONTAINERS & PLACEHOLDERS Make it accessible To generate HTML tags around elements, use a Container or Placeholder Widget and add OSTagName = "<html_tag>" as an Extended Property.
  • 93.
    | Accessibility withOutSystems CONTAINERS & PLACEHOLDERS Make it accessible Headings Paragraph
  • 94.
    | Accessibility withOutSystems CONTAINERS & PLACEHOLDERS Make it accessible Section Article
  • 95.
    | Accessibility withOutSystems CONTAINERS & PLACEHOLDERS Make it accessible
  • 96.
    | Accessibility withOutSystems CONTAINERS & PLACEHOLDERS Make it accessible
  • 97.
    | Accessibility withOutSystems Screen Template
  • 98.
    | Accessibility withOutSystems SCREEN TEMPLATE Make it accessible
  • 99.
    | Accessibility withOutSystems SCREEN TEMPLATE Make it accessible Filter by Category Sidebar Filter by Price
  • 100.
    | Accessibility withOutSystems SCREEN TEMPLATE Make it accessible
  • 101.
    | Accessibility withOutSystems SCREEN TEMPLATE Make it accessible
  • 102.
    | Accessibility withOutSystems SCREEN TEMPLATE Make it accessible Container Button Image Text
  • 103.
    | Accessibility withOutSystems SCREEN TEMPLATE Make it accessible Set Label property
  • 104.
    | Accessibility withOutSystems 1.3.1 Info and Relationships (Level A) 1.3.2 Meaningful Sequence (Level A) 2.4.3 Focus Order (Level A) 3.2.3 Consistent Navigation (Level AA) SCREEN TEMPLATE Make it accessible
  • 105.
    | Accessibility withOutSystems Accessibility enables people to access your applications, without any limitations!
  • 106.
    | Accessibility withOutSystems Accessibility contributes to building a better society!
  • 107.
  • 108.
    RATE THE SESSION Want tohelp us improve ODC even more? Then don’t forget:

Editor's Notes

  • #2 Hi Guys first of all, thank you for attending this talk. As you can see, we’re here today to talk about Accessibility with OS
  • #3 My name is Bruno Marcelino and i’m a Front End Engineer at OutSystems R&D. I’m part of the team that created SilkUI and OutSystems UI. These are my contacts and after this session, if you have any questions, feel free to contact me for more information.
  • #4 Before we start talking about accessibility, first we need to understand web. We all use the web on a daily basis, it has become part of how we do business, communicate, shop, learn. But how many of us have taken the time to think about what is Web and for who is the Web? So What is Web?
  • #5 The Web is for everyone! It’s part of our everyday lives because it is universal. It is designed to work for all people, whatever their tools to access it, software, language or ability. When the Web meets this goal, it’s accessible to people with a diverse range of age, hearing, movement and cognitive ability.
  • #6 On the web the impact of disability is different, because we can remove communication barriers and enable interaction between people. However, when applications or tools are badly designed, they can be the barriers that exclude people from using the web. What kind of barriers are we talking about? Well, we are talking about barriers to accessing our content, if we don't design for accessibility, the content may not be perceived by the user, or the content might not be read correctly by a screen reader, or, for example, the color contrast is not correct so the user can’t distinguish elements on a screen.
  • #7 If we are to create high-quality applications, that don’t exclude people from using them, developers and organizations have to consider accessibility. It is vital that our applications are accessible so that we can provide equal access and equal opportunity to people with all levels of ability. Everyone gains from this, the organizations that want to offer a service, sell something, or provide information, and the users that wish to access those resources.
  • #8 If you’re not providing an accessible application, then your customers will be missing out on revenue, because a part of the market will be excluded. Our customers, and the digital world as a whole are increasingly concerned about this, when designing and creating apps. So “What is Accessibility?”.
  • #9 With accessibility, all people can perceive, understand, navigate, and interact with the applications, with no limitations. In other words, accessibility is you building your tool or app so that it’s available to as many people as possible. When we implement accessibility in our applications, we need to make sure that our apps describe the content for the screen readers and browsers. I will explain this in more detail, further along, but first let’s clarify why accessibility is so important nowadays!
  • #10 Now, take a moment and think about your friends and family. I’m sure most of us know someone that needs to wear glasses, without them they can’t read or see much of anything at a distance. And any one of us can have an accident, and be temporarily incapacitated. We are all surrounded with accessibility issues, every day and most of us won't even notice! There are a wide range of difficulties, some are only minor, like your friend with that wears glasses, but some create more barriers, like someone that is blind and cannot see at all.
  • #11 There are about 1.3 billion people with a disability. This represents one in five people. I was surprised when I learned this, before researching this, I also had no idea. We all think that disabilities affect only a small percentage of the population but in reality, almost 20% of the world’s population in affected. As the world population ages, this number will increase, so it’s time we all think seriously about this.
  • #12 Governments are concerned about this and are requiring more and more that accessibility be provided to their populations, especially in educational and governmental applications. There are already countries where it’s illegal to have a website that’s not accessible. For example in Norway, websites that don't comply will be fined. And they do fine! For example, a company in Norway was fined around 15.000 euros PER day due to non-compliance.
  • #14 So, now we have established that the Web is for everyone, and we know there’s are many reasons why we should seriously considering accessibility in our apps. But we still haven't identified our target audience. Who will benefit? Usually when I talk about accessibility and ask someone about who it applies to, the first thing that comes to mind is that it’s only for the visually impaired, or blind people or for those with a physical disability. But that’s the wrong answer!
  • #15 An accessible web app must include ALL DISABILITIES that affect access to the Web, and this includes: auditory, cognitive, visual, motor and speech. These 5 categories define our main target audience but, in my opinion, there are other audiences who can benefit a lot from these changes.
  • #16 Because an accessible application also benefits people without disabilities, benefit all of us.
  • #17 Senior - We're all going to get old, hopefully. And as we get older, our capacities change. Temporary disability - If we use glasses and lose them or if I walk out of here and get hit by a bus (you never knowww!), and imagine I end up breaking my arms, it’s going to be hard for me to use an application that isn’t accessible, right? Slow Internet Connection - If our apps aren’t accessible, our content won't have much meaning. So we need to make sure that we add alternative text to images (alt or title), multimedia and other non-text objects. Doing this means that people that have low bandwidth connections, and have disabled images and other media, can still understand the meaning of your content.
  • #18 A lot of jobs like contact center, supermarket, commercial guy Less luggage possible Arrive to my client office earlier Drop the laptop
  • #19 Now we need to know how we can make our web content accessible. What is there to help us implement accessibility, What kind of techniques or technology exists? Accessibility is based in 2 things:
  • #20 Guidelines and development techniques, which are WCAG, ARIA and HTML. WCAG - Is a set of guidelines that developers need to follow to make their content accessible to a wider range of people with (yes, and without) disabilities WAI-ARIA - Are attributes that define ways to make Web content and applications more accessible. HTML - Is a bunch of semantic tags that describe accurately the meaning of the content to browsers and screen readers. These are our 3 major concerns when we implement accessibility in our applications
  • #21 WCAG defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities and these guidelines cover a wide range of issues. It also helps us make Web content more usable to older individuals with changing abilities due to aging and often improves usability for users in general. *https://www.w3.org/TR/WCAG20/
  • #22 WCAG is based on 4 principals: Perceivable - Information and user interface components must be presented to users in ways they can perceive it. Like, provide text alternatives for any non-text content. Operable - User interface components and navigation must be operable. For example, making all functionality available from a keyboard. Understandable - The Information in the UI must be understandable, and how to use the interface must be clear to the user. For example setting the language of the page, focus element, consistency of navigation. Robust - Content must be robust enough so that it can be reliably interpreted by a wide variety of user agents, including assistive technologies. *https://www.w3.org/TR/WCAG20/
  • #23 For each guideline, there is testable success criteria. The test criteria requirements are distributed in three levels: A, AA, and AAA. https://www.wuhcag.com/what-is-web-accessibility/
  • #25 WCAG 2.1 will have additional requirements related to mobile accessibility. Exist a draft of guidelines for mobile Existing guidelines of wcag must be applied for mobile For now only exists best practices and examples of mobile accessibility
  • #26 Now we will talk about the development techniques
  • #27 Semantic elements clearly describes its meaning to browsers, developers and screen readers. ARIA has roles, states and properties to help developers describe the meaning of content. WAI ARIA works as an extension of HTML, it provides an addition and manipulation of the HTML attributes in the tags of the HTML. This means that ARIA allows developers to add specific attributes to HTML tags (such as an article, alert, or slider). When we combine these 2 technologies we make our content fully accessible and cross-browser / device-compatible.
  • #29 These are only a few examples and the most used roles, states & properties of ARIA. The roles never change in our applications because we use them to describe our content but it’s different for states & properties because we can change and manipulate them to change our elements in DOM to provide interaction in our content. For example: modals. In most cases the modals are rendered in our page but they are hidden, and they only appear when a users clicks on something, like a button. When a modal is hidden the default states and properties apply and when it’s open, we need to change it. This is a complex example but I simpler example to show you.
  • #30 Let’s take a look to this example...all of you can see this square with a text? Probably some of you can and others not. This is unaccessible!
  • #31 This is a simple page with an element. The first thing that comes to your mind is “It’s just a button on a blank page?” Yes it’s a button and I can interact with it because I can see where it is. I know that the button will change it’s text color if I click on it. So I click on it to change the text color.
  • #32 But we don’t know how the developer created it in the HTML. We know there are different ways to create a button and not all are accessible.
  • #33 Like this example. This developer used a div to run a function. We know that sometimes we do the same. In this example, a browser or a screen reader doesn’t know what's in this element because a div is a non-semantic element, and doesn’t describe itself in a way that’s understandable.
  • #40 Now you have all the context, I hope I haven't overloaded you with information. However, it’s important that we are all on the same page when it comes to understanding accessibility. We must understand what we are trying to fix before setting out looking for a solution right? We know that there’s really no way we can justify ignoring accessibility issues any longe. So with that said, how does OutSystems deal with Accessibility? And here’s where the magic of Outsystems UI enters the scene. When we built our UI Framework, we knew that it was going to be used by thousands of developers, and we knew that everything we decided to do would impact you, our developers.
  • #41 So, our UI Framework is split in two areas: Templates and Patterns
  • #42 Let’s have a look at the most essential part of a app. The template! Because without a template there are NO WEB APPS.
  • #43 There are millions of applications all around the world. Anyone can access them, we’re talking about THOUSANDS of templates with all kinds of content, but they all have 4 things in common.
  • #44 All the templates out there have, a: Header, Navigation, Main and Footer. These are the most important areas of our template. The footer is probably the renegade of these 4 areas because sometimes it’s not used in applications.
  • #45 The HEADER usually contains the app’s Logo, a search bar, the login information and a navigation menu. The navigation menu can be located inside the HEADER or the SIDEBAR. The Main is the dominant part of our application, where all our content will be displayed on each screen. The Footer typically contains the navigation links, social links, company contacts, copyright data etc. Besides being the most common, these areas are also the most important because they’re the areas in the app that’ll include the interactions and receive the content for each screen. The app’s template is the foundation that will be replicated in all the screens and it’s where we can guarantee that the content is properly described. So what does that mean? (Parei aqui e assim que puder continuarei)
  • #46 Most templates are built like in this example. As you can see, everything’s correct, the code is properly declared and it has a good structure. The CSS classes are attributed to the elements and the areas are created. But we have a problem with the readability and identification. The common user won't have any issues, they’ll be able to see the rendered structure of the page with no errors. But the browser or the screen-read wont be so lucky, the way it’s declared is the same as if...
  • #47 It were a bunch of pens… or a stack of chairs.
  • #48 These are classes to modify the element. The browser only sees elements with classes (could be any elements right? Pens, chairs. And for screen reader it isn’t readable at all. This structure only declares that the elements have those CSS classes, and our CSS stylesheet paint the element and position it in the DOM. For the user who has no disability it’s all the same because what you see on the page is fine but those who need to have the page accessible to be able to use a screen reader, will feel lost. To solve this type of issue and make an app accessible we need 2 things…
  • #49 HTML semantic tags and ARIA roles. With these, we make our content accessible and readable. Using semantic tags and ARIA we guarantee the cross-browser /device-compatibility and we describe exactly what’s there to the screen readers and browsers.
  • #52 OutSytems UI provides, 2 types of templates, by default. The TopMenu and the SideMenu. These layouts are already accessible at a basic level guaranteeing that the browser and the screen reader can interpret them. Providing an accessible template accelerates the development of accessible apps and saves the developer some time and worry.
  • #53 Now we entry in the UI patterns
  • #54 ProgressBar Talk about the behavior options shape, size, orientation
  • #55 ProgressBar
  • #56 ProgressBar HTML structure
  • #57 Alert Talk about the pattern behaviors and option Message type Show close button
  • #58 Alert Need to hide icons from screen readers On focus change aria state
  • #59 Alert HTML structure
  • #60 Alert Event listeners
  • #61 Alert Reusable functions
  • #62 Alert Keyboard interaction - operable
  • #63 Accordion Talk about behaviors and options (disabled, open)
  • #64 Accordion Count all elements on accordion Last element are disabled
  • #66 Accordion Expanded state
  • #67 Accordion Button and relationships
  • #68 Accordion HTML structure
  • #69 Accordion Keyboard interaction - operable
  • #70 Accordion Close key interaction
  • #71 With OS UI we have accessibility by default but don’t forget...we can’t have our content fully accessible without developer.
  • #108 https://achecker.ca https://wave.webaim.org https://www.webaccessibility.com https://contrast-ratio.com http://accessible-colors.com
  • #109 https://achecker.ca https://wave.webaim.org https://www.webaccessibility.com https://contrast-ratio.com http://accessible-colors.com