Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessibility with
OutSystems
| Accessibility with OutSystems
Bruno
Marcelino
Front End Software Engineer | OutSystems
R&D
@
in
brunoap.marcelino@outsys...
| Accessibility with OutSystems
What is Web?
| Accessibility with OutSystems
“The power of the Web is in its universality.
Access by everyone regardless of disability ...
| Accessibility with OutSystems
The impact of disability is different on the
Web, because the Web removes some of
the barr...
| 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 ...
| 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 disa...
| Accessibility with OutSystems
Education and Government
| Accessibility with OutSystems
Increase the positive
image
High quality and flexible
application
Improve SEO
Improve usab...
| 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 Accessi...
| Accessibility with OutSystems
WAI-ARIA
Web Accessibility Initiative –
Accessible Rich Internet
Applications
Web Content
...
| 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
W...
| Accessibility with OutSystems
SummaryGuidelines
1.3.2 – Meaningful Sequence
2.1.2 – No Keyboard Trap
2.4.3 – Focus Order...
| Accessibility with OutSystems
Are there guidelines
for mobile?
| Accessibility with OutSystems
HTML
Semantic Elements
HTML WAI-ARIA
Web Accessibility
Initiative – Accessible
Rich Intern...
| Accessibility with OutSystems
States & Properties
WAI-ARIA
Roles
HTML
Semantic Elements
| Accessibility with OutSystems
Semantic
Elements
HTML
<aside> <figure> <figcaption> <footer>
<header> <main> <nav> <secti...
| Accessibility with OutSystems
Roles
States &
Properties
WAI-ARIA
Progressbar Button Form Region
Group Search Headings Ar...
| 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!...
| Accessibility with OutSystems
<div id="demo" class="button" onclick="myFunction()" tabindex="0"
role="button" aria-press...
| Accessibility with OutSystems
<button id="demo" class="button" onclick="myFunction()" aria-
pressed="false">
Click to ch...
| Accessibility with OutSystems
<button id="demo" class="button" onclick="myFunction()" aria-
pressed="false">
Click to ch...
| 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 clas...
| Accessibility with OutSystems
| Accessibility with OutSystems
<div class="header">...</div>
<div class="navigation">...</div>
<div class="main">...</div...
| Accessibility with OutSystems
+
| Accessibility with OutSystems
<div class="page">
<div class="header" role="banner">
<div class="navigation" role="naviga...
| Accessibility with OutSystems
<div class="page">
<header class="..." role="banner">
<nav class="..." role="navigation">....
| 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 Ba...
| Accessibility with OutSystems
<div id="..." class="progress-container flex-direction-column">
<div class="progress-conte...
| Accessibility with OutSystems Alert
UI Pattern
| Accessibility with OutSystems
role="alert" aria-
hidden="false"
aria-hidden="true" role="button"
tabindex="0" aria-
hidd...
| Accessibility with OutSystems
<div id="..." class="alert background-info" role="alert" aria-
hidden="false">
<div class=...
| Accessibility with OutSystems
// Add event listeners
if(alertCloseButton === "true"){
alertClose.addEventListener('click...
| Accessibility with OutSystems
var onAlertCloseClick = function () {
// Change ARIA state
alert.setAttribute('aria-hidden...
| Accessibility with OutSystems
//Set keyboard interaction
var onAlertOnKeypress = function (e) {
if (e.keyCode == "27") {...
| Accessibility with OutSystems Accordion
UI Pattern
| Accessibility with OutSystems Accordion
UI Pattern
role="tablist"
role="tab"
tabindex="0" aria-
hidden="false"
role="tab...
| 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--op...
| Accessibility with OutSystems
if (e.keyCode == "32" || e.keyCode == "13") {
// Checks if the current accordion item is c...
| Accessibility with OutSystems
//If esc, Close AccordionItem
if (e.keyCode == "27") {
collapse(currAccordionItem);
setAri...
| 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...
| Accessibility with OutSystems ANIMATIONS
Make it accessible
| Accessibility with OutSystems
.tooltip.is--hidden {
opacity: 0;
}
.tooltip.is--visible {
opacity: 1;
}
ANIMATIONS
Make i...
| 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 ...
| Accessibility with OutSystems
Images
| Accessibility with OutSystems IMAGES
Make it accessible
<img src="sample_image3.png" alt=""title=""
width="150" height="...
| 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...
| 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.
...
| Accessibility with OutSystems
:focus { outline: thin dotted; } /* Style the outline */
:focus { background: #FFFF00; } /...
| Accessibility with OutSystems
document.body.addEventListener('keyup', function(e) {
if (e.keyCode == "9") /* tab keycode...
| Accessibility with OutSystems
Containers & Placeholders
| Accessibility with OutSystems
OSTagName
CONTAINERS & PLACEHOLDERS
Make it accessible
To generate HTML tags around elemen...
| 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 Ord...
| 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:
Upcoming SlideShare
Loading in …5
×

Accessibility with OutSystems

This is a presentation about accessibility with technical content. Between development best practices, styles, markup for screen readers, and keyboard navigation, a lot goes into creating accessible websites that meet industry standards. Learn what you can do to make your web apps accessible to everyone. You can see the video presentation on youtube: https://www.youtube.com/watch?v=NEzFfBs0GL4

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Accessibility with OutSystems

  1. 1. Accessibility with OutSystems
  2. 2. | Accessibility with OutSystems Bruno Marcelino Front End Software Engineer | OutSystems R&D @ in brunoap.marcelino@outsystems.com /bmarcelino /bmarcelin_o @bmarcelino
  3. 3. | Accessibility with OutSystems What is Web?
  4. 4. | 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
  5. 5. | Accessibility with OutSystems The impact of disability is different on the Web, because the Web removes some of the barriers.
  6. 6. | Accessibility with OutSystems Accessibility is essential for developers and organizations
  7. 7. | Accessibility with OutSystems What is Accessibility?
  8. 8. | Accessibility with OutSystems Accessibility is when applications, tools, and technologies are developed and designed to be used by everyone.
  9. 9. | Accessibility with OutSystems Friends and Family
  10. 10. | 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
  11. 11. | Accessibility with OutSystems Education and Government
  12. 12. | 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
  13. 13. | Accessibility with OutSystems Why should you consider accessibility?
  14. 14. | Accessibility with OutSystems Auditory Cognitive Visual Motor Speech
  15. 15. | Accessibility with OutSystems Making it accessible, benefits all of us!
  16. 16. | Accessibility with OutSystems Slow internet connection Senior Temporary impairments
  17. 17. | Accessibility with OutSystems A simple story that happened to me!
  18. 18. | Accessibility with OutSystems How do we make an accessible app?
  19. 19. | Accessibility with OutSystems Web Content Accessibility Guidelines WCAG HTML Semantic Elements HTML WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications +
  20. 20. | Accessibility with OutSystems WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications Web Content Accessibility Guidelines WCAG HTML Semantic Elements HTML +
  21. 21. | Accessibility with OutSystems Robust UnderstandableOperable WCAG Perceivable
  22. 22. | Accessibility with OutSystems rules to achieve Level A 78 30 rules to achieve Level AA20 rules to achieve Level AAA 28 WCAG Guidelines
  23. 23. | 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
  24. 24. | Accessibility with OutSystems Are there guidelines for mobile?
  25. 25. | Accessibility with OutSystems HTML Semantic Elements HTML WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications Web Content Accessibility Guidelines WCAG +
  26. 26. | Accessibility with OutSystems States & Properties WAI-ARIA Roles HTML Semantic Elements
  27. 27. | Accessibility with OutSystems Semantic Elements HTML <aside> <figure> <figcaption> <footer> <header> <main> <nav> <section> <h1> <h2> <h3> <h4> <h5> <h6>
  28. 28. | 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
  29. 29. | Accessibility with OutSystems Click to change text color!
  30. 30. | Accessibility with OutSystems Click to change text color!
  31. 31. | Accessibility with OutSystems Click to change text color!
  32. 32. | 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>
  33. 33. | 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
  34. 34. | 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
  35. 35. | 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
  36. 36. | Accessibility with OutSystems Click to change text color!
  37. 37. | Accessibility with OutSystems Click to change text color!
  38. 38. | Accessibility with OutSystems Click to change text color!
  39. 39. | Accessibility with OutSystems OutSystems UI
  40. 40. | Accessibility with OutSystems Templates UI Patterns
  41. 41. | Accessibility with OutSystems Templates UI Patterns
  42. 42. | Accessibility with OutSystems
  43. 43. | Accessibility with OutSystems Header Navigation Main Content Footer
  44. 44. | Accessibility with OutSystems
  45. 45. | Accessibility with OutSystems <div class="page"> <div class="header"> <div class="navigation">...</div> </div> <div class="main">...</div> <div class="footer">...</div> </div>
  46. 46. | Accessibility with OutSystems
  47. 47. | Accessibility with OutSystems <div class="header">...</div> <div class="navigation">...</div> <div class="main">...</div> <div class="footer">...</div>
  48. 48. | Accessibility with OutSystems +
  49. 49. | 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>
  50. 50. | 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>
  51. 51. | Accessibility with OutSystems Top Menu Side Menu
  52. 52. | Accessibility with OutSystems UI PatternsLayouts
  53. 53. | Accessibility with OutSystems Progress Bar UI Pattern
  54. 54. | Accessibility with OutSystems role="progressbar" aria- valuenow="75" aria- valuemin="0" aria- valuemax="100" Progress Bar UI Pattern
  55. 55. | 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
  56. 56. | Accessibility with OutSystems Alert UI Pattern
  57. 57. | 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
  58. 58. | 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
  59. 59. | Accessibility with OutSystems // Add event listeners if(alertCloseButton === "true"){ alertClose.addEventListener('click', onAlertCloseClick); alertClose.addEventListener('focus', onAlertCloseFocus); alert.addEventListener('keydown', onAlertOnKeypress); } Alert UI Pattern
  60. 60. | 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
  61. 61. | 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
  62. 62. | Accessibility with OutSystems Accordion UI Pattern
  63. 63. | Accessibility with OutSystems Accordion UI Pattern role="tablist" role="tab" tabindex="0" aria- hidden="false" role="tab" aria- hidden="true"
  64. 64. | Accessibility with OutSystems Accordion UI Pattern role="tabpanel" tabindex="0"
  65. 65. | Accessibility with OutSystems Accordion UI Pattern aria-expanded="false" aria-expanded="true"
  66. 66. | Accessibility with OutSystems Accordion UI Pattern aria-labelledby="header" role="button" aria- controls="content"
  67. 67. | 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
  68. 68. | 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
  69. 69. | Accessibility with OutSystems //If esc, Close AccordionItem if (e.keyCode == "27") { collapse(currAccordionItem); setAriaExpanded(currAccordionItem, 'false', 'true'); } Accordion UI Pattern
  70. 70. | Accessibility with OutSystems Accessibility by default without roadblocks
  71. 71. | Accessibility with OutSystems Make it accessible with OutSystems
  72. 72. | Accessibility with OutSystems Animations
  73. 73. | Accessibility with OutSystems .tooltip.is--hidden { display: none; } .tooltip.is--visible { display: block; } ANIMATIONS Make it accessible
  74. 74. | Accessibility with OutSystems ANIMATIONS Make it accessible
  75. 75. | Accessibility with OutSystems .tooltip.is--hidden { opacity: 0; } .tooltip.is--visible { opacity: 1; } ANIMATIONS Make it accessible
  76. 76. | Accessibility with OutSystems ANIMATIONS Make it accessible
  77. 77. | Accessibility with OutSystems 2.1.2 – No Keyboard Trap (Level A) ANIMATIONS Make it accessible
  78. 78. | Accessibility with OutSystems ANIMATIONS Make it accessible
  79. 79. | 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
  80. 80. | Accessibility with OutSystems Images
  81. 81. | 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">
  82. 82. | Accessibility with OutSystems 1.1 – Text Alternatives (Level A) IMAGES Make it accessible
  83. 83. | Accessibility with OutSystems IMAGES Make it accessible Always set the Label Property
  84. 84. | Accessibility with OutSystems IMAGES Make it accessible <img src="sample_image3.png" alt="Clear Coded Programming" title="Clear Coded Programming" width="150" height="150">
  85. 85. | Accessibility with OutSystems Outline
  86. 86. | Accessibility with OutSystems a { outline: none; } :focus { outline: none; } DON’T DO IT! OUTLINE Make it accessible
  87. 87. | Accessibility with OutSystems 2.1.2 No Keyboard Trap (Level A) 2.4.7 Focus Visible (Level AA) OUTLINE Make it accessible
  88. 88. | 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; }
  89. 89. | 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
  90. 90. | 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
  91. 91. | Accessibility with OutSystems Containers & Placeholders
  92. 92. | 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.
  93. 93. | Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible Headings Paragraph
  94. 94. | Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible Section Article
  95. 95. | Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible
  96. 96. | Accessibility with OutSystems CONTAINERS & PLACEHOLDERS Make it accessible
  97. 97. | Accessibility with OutSystems Screen Template
  98. 98. | Accessibility with OutSystems SCREEN TEMPLATE Make it accessible
  99. 99. | Accessibility with OutSystems SCREEN TEMPLATE Make it accessible Filter by Category Sidebar Filter by Price
  100. 100. | Accessibility with OutSystems SCREEN TEMPLATE Make it accessible
  101. 101. | Accessibility with OutSystems SCREEN TEMPLATE Make it accessible
  102. 102. | Accessibility with OutSystems SCREEN TEMPLATE Make it accessible Container Button Image Text
  103. 103. | Accessibility with OutSystems SCREEN TEMPLATE Make it accessible Set Label property
  104. 104. | 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
  105. 105. | Accessibility with OutSystems Accessibility enables people to access your applications, without any limitations!
  106. 106. | Accessibility with OutSystems Accessibility contributes to building a better society!
  107. 107. Thank You! in @ brunoap.marcelino@outsystems.com /bmarcelino /bmarcelin_o @bmarcelino
  108. 108. RATE THE SESSION Want to help us improve ODC even more? Then don’t forget:

×