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.
Did you know OutSystems enables you to use JavaScript to costumize how users interact with your applications? In this session, see how we've developed and extended patterns over the years and learn the best practices you can follow.
Link with resources: https://bit.ly/2F8P29j
CSS workshop created for internal delivery @ OutSystems.
“For most people CSS is like a mystical art that nobody truly understands... Sometimes it works and sometimes it doesn’t (unexplainably) “.
Not solely introductory, but also covering more advanced topics, embark in this fantastic adventure that is CSS.
There you have it, all you must know about CSS in a NutShell.
See the videos of the workshop @ http://goo.gl/NJ3n6J
Workshop created by Marco Costa, Miguel Ventura and Rúben Gonçalves
Training Webinar: Top front-end techniques for OutSystemsOutSystems
How do front-developers that have started testing or working with OutSystems generally view the Platform, before they get to fully harness its power? They usually say it's more restrictive than they're used to and that it doesn't allow them to do what they need to do.
Fear no more! We're here to debunk that myth and show you that behind all its nuances, OutSystems has a truly powerful Platform that can enable you to build pretty much anything.
In this webinar, you will:
- Slay a dragon named "You can't do that with OutSystems!"
- Understand (some of) the inner workings of the Platform.
- Get some tips on how to organize your front-end code in a better way.
- Learn how you can become much more productive doing front-end work with OutSystems.
- Become an awesome front-end developer.
It's all up to you, but we're giving you all the tools!
Free Online training: https://www.outsystems.com/learn/courses/
Follow us on Twitter http://www.twitter.com/OutSystemsDev
Like us on Facebook http://www.Facebook.com/OutSystemsDev
Are you using the best architecture? Want to know how to make sure you are architecting things properly? Interested to learn where the new library features fit in? Come to this session to learn more.
Creating web pages that work perfectly regardless of external variables (e.g., latency) is equal parts technical know-how and art-form. In this “hands-on” session, we will take a look at how OutSystems can help you build responsively smooth, and beautiful web pages that work as good as they look.
When setting up a new project we have some tips and tricks to help you do this in the best way possible, incl. infrastructure, database, standard attributes, logging, code alignment, and service center.
OutSystems Tricks & Tips for Complex UI IntegrationsOutSystems
The “Citizen Developer” usability of OutSystems means that most tasks on the platform are pretty straightforward and simple if you A. Know what you’re trying to do and B. Know where to look for it. But there are some things you simply can’t solve with the platform’s built-in widgets. Come and get some of the best tips and tricks you’ll find for getting OutSystems to do (just about) anything you want.
Did you know OutSystems enables you to use JavaScript to costumize how users interact with your applications? In this session, see how we've developed and extended patterns over the years and learn the best practices you can follow.
Link with resources: https://bit.ly/2F8P29j
CSS workshop created for internal delivery @ OutSystems.
“For most people CSS is like a mystical art that nobody truly understands... Sometimes it works and sometimes it doesn’t (unexplainably) “.
Not solely introductory, but also covering more advanced topics, embark in this fantastic adventure that is CSS.
There you have it, all you must know about CSS in a NutShell.
See the videos of the workshop @ http://goo.gl/NJ3n6J
Workshop created by Marco Costa, Miguel Ventura and Rúben Gonçalves
Training Webinar: Top front-end techniques for OutSystemsOutSystems
How do front-developers that have started testing or working with OutSystems generally view the Platform, before they get to fully harness its power? They usually say it's more restrictive than they're used to and that it doesn't allow them to do what they need to do.
Fear no more! We're here to debunk that myth and show you that behind all its nuances, OutSystems has a truly powerful Platform that can enable you to build pretty much anything.
In this webinar, you will:
- Slay a dragon named "You can't do that with OutSystems!"
- Understand (some of) the inner workings of the Platform.
- Get some tips on how to organize your front-end code in a better way.
- Learn how you can become much more productive doing front-end work with OutSystems.
- Become an awesome front-end developer.
It's all up to you, but we're giving you all the tools!
Free Online training: https://www.outsystems.com/learn/courses/
Follow us on Twitter http://www.twitter.com/OutSystemsDev
Like us on Facebook http://www.Facebook.com/OutSystemsDev
Are you using the best architecture? Want to know how to make sure you are architecting things properly? Interested to learn where the new library features fit in? Come to this session to learn more.
Creating web pages that work perfectly regardless of external variables (e.g., latency) is equal parts technical know-how and art-form. In this “hands-on” session, we will take a look at how OutSystems can help you build responsively smooth, and beautiful web pages that work as good as they look.
When setting up a new project we have some tips and tricks to help you do this in the best way possible, incl. infrastructure, database, standard attributes, logging, code alignment, and service center.
OutSystems Tricks & Tips for Complex UI IntegrationsOutSystems
The “Citizen Developer” usability of OutSystems means that most tasks on the platform are pretty straightforward and simple if you A. Know what you’re trying to do and B. Know where to look for it. But there are some things you simply can’t solve with the platform’s built-in widgets. Come and get some of the best tips and tricks you’ll find for getting OutSystems to do (just about) anything you want.
Training Webinar: Detect Performance Bottlenecks of ApplicationsOutSystems
In this webinar we look at how to detect and troubleshoot server-side performance bottlenecks.
Free Online training: https://www.outsystems.com/learn/courses/
Follow us on Twitter http://www.twitter.com/OutSystemsDev
Like us on Facebook http://www.Facebook.com/OutSystemsDev
"With OutSystems, we can publish our application with the click of a single button. How awesome would it be if we could create an entire OutSystems infrastructure with just one click?
This is possible! In this session, we will tell you all the secrets about unattended installation and/or upgrading the OutSystems platform."
Reports, reports, reports! People always want more reports. This session will show you how you can create amazing reports in OutSystems from Simple Report (free) to External Tools (integrating with paid tools).Covering since HTML2PDF&ReportSystems, SimpleReports and StimulSoftJS.
Excited about the new reactive web features? Come to this session to learn some of the best practices to make sure that you get started on the right foot.
How do front-developers that have started testing or working with OutSystems generally view the Platform, before they get to fully harness its power? They usually say it's more restrictive than they're used to and that it doesn't allow them to do what they need to do.
Fear no more! We're here to debunk that myth and show you that behind all its nuances, OutSystems has a truly powerful Platform that can enable you to build pretty much anything.
In this presentation, you will:
> Slay a dragon named "You can't do that with OutSystems!"
> Understand (some of) the inner workings of the Platform.
> Get some tips on how to organize your front-end code in a better way.
> Learn how you can become much more productive doing front-end work with OutSystems.
> Become an awesome front-end developer.
It's all up to you, but we're giving you all the tools!
This was an OutSystems webinar presented.
Video @https://youtu.be/B_puSsNDgbg
You want to use tenants? No problem. Just make the module Multi-tenant.
Not so fast. First, you need to create the tenants. But where?
Ah-ha! You create them in Service Center.
Ok, but now, how do you access the new tenant to create users?
#mindblown
Join us as we answer those questions, look at the data model behind the Multi-tenant mechanism, and explore different ways a new Tenant can be created.
OutSystems Front End Specialization - Study Help DeckFábio Godinho
OutSystems Front End Specialization - Study Help Deck
Material gathered from OutSystems Guided Path videos, OutSystems Community Forum and public sites that will help obtain the OutSystems Front-end Developer Specialist certification.
Using Processes and Timers for Long-Running Asynchronous TasksOutSystems
What do you do when a task can take more than five minutes and then times out? How do you run it asynchronously and present the status to the user? Come and see how processes and timers can be used together.
OutSystems Webinar - Building a Live Style GuideDaniel Reis
Over the past year, we have been creating, with great results, Live Style Guide with some customers. As such, we would like to share with you, our approach for creating an industry standard called Style Guides, through a free, in-depth technical webinar titled “Building a Live Style Guide”.
In this webinar:
- What is a Live Style Guide?
- Recommendations
- Building a Live Style Guide
As of 2018, more than 50% of global organizations have adopted Office 365. In this lightning session, we will show you how to combine the power of Office 365 with the speed of OutSystems
Building frameworks: from concept to completionRuben Goncalves
What are considerations when building a framework/library? How does that apply to OutSystems components? In this session, we’ll do a deep dive into the importance of addressing certain concepts like code granularity, and architecture, in order to create useful, future-proof and coherent frameworks that deliver the best possible developer experience.
Branching Your Way to Low-Code PerfectionOutSystems
With the introduction of code branching into the OutSystems platform, development teams have the flexibility to collaborate more effectively. From feature branches, to refactoring, to hotfixing production code, OutSystems’ new branching capability allows you to maintain power of built-in dependency analysis along with flexibility that multiple parallel code lines enables.
Automating Your Way to Greatness by Combining OutSystems CI/CD With the Power...OutSystems
Having built-in CI/CD capabilities has always been a core tenet of the OutSystems platform. As customer factories have grown and CI/CD pipelines have become more complex, OutSystems has developed an integration with some of the leading CI/CD DevOps tools in the market, Jenkins, and Azure DevOps to tackle some of the challenges of managing enterprise-grade CI/CD pipelines.
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesRadek Pavlíček
Slides with comments from my workshop presentation at Universal Learning Design Conference 2013. My workshop was about accessibility, HTML5 and WAI-ARIA and their benefit to users with special needs. Some examples included ;-)
Presentation for Department of Veteran Affairs
Learn the essentials of HTML5
• HTML5 Semantics
• Accessibility and ARIA
• CSS3 Styles and Animations
• Advanced Web APIs
• How to adapt your website for N-screens TV, PC, Mobile and Tablets
Training Webinar: Detect Performance Bottlenecks of ApplicationsOutSystems
In this webinar we look at how to detect and troubleshoot server-side performance bottlenecks.
Free Online training: https://www.outsystems.com/learn/courses/
Follow us on Twitter http://www.twitter.com/OutSystemsDev
Like us on Facebook http://www.Facebook.com/OutSystemsDev
"With OutSystems, we can publish our application with the click of a single button. How awesome would it be if we could create an entire OutSystems infrastructure with just one click?
This is possible! In this session, we will tell you all the secrets about unattended installation and/or upgrading the OutSystems platform."
Reports, reports, reports! People always want more reports. This session will show you how you can create amazing reports in OutSystems from Simple Report (free) to External Tools (integrating with paid tools).Covering since HTML2PDF&ReportSystems, SimpleReports and StimulSoftJS.
Excited about the new reactive web features? Come to this session to learn some of the best practices to make sure that you get started on the right foot.
How do front-developers that have started testing or working with OutSystems generally view the Platform, before they get to fully harness its power? They usually say it's more restrictive than they're used to and that it doesn't allow them to do what they need to do.
Fear no more! We're here to debunk that myth and show you that behind all its nuances, OutSystems has a truly powerful Platform that can enable you to build pretty much anything.
In this presentation, you will:
> Slay a dragon named "You can't do that with OutSystems!"
> Understand (some of) the inner workings of the Platform.
> Get some tips on how to organize your front-end code in a better way.
> Learn how you can become much more productive doing front-end work with OutSystems.
> Become an awesome front-end developer.
It's all up to you, but we're giving you all the tools!
This was an OutSystems webinar presented.
Video @https://youtu.be/B_puSsNDgbg
You want to use tenants? No problem. Just make the module Multi-tenant.
Not so fast. First, you need to create the tenants. But where?
Ah-ha! You create them in Service Center.
Ok, but now, how do you access the new tenant to create users?
#mindblown
Join us as we answer those questions, look at the data model behind the Multi-tenant mechanism, and explore different ways a new Tenant can be created.
OutSystems Front End Specialization - Study Help DeckFábio Godinho
OutSystems Front End Specialization - Study Help Deck
Material gathered from OutSystems Guided Path videos, OutSystems Community Forum and public sites that will help obtain the OutSystems Front-end Developer Specialist certification.
Using Processes and Timers for Long-Running Asynchronous TasksOutSystems
What do you do when a task can take more than five minutes and then times out? How do you run it asynchronously and present the status to the user? Come and see how processes and timers can be used together.
OutSystems Webinar - Building a Live Style GuideDaniel Reis
Over the past year, we have been creating, with great results, Live Style Guide with some customers. As such, we would like to share with you, our approach for creating an industry standard called Style Guides, through a free, in-depth technical webinar titled “Building a Live Style Guide”.
In this webinar:
- What is a Live Style Guide?
- Recommendations
- Building a Live Style Guide
As of 2018, more than 50% of global organizations have adopted Office 365. In this lightning session, we will show you how to combine the power of Office 365 with the speed of OutSystems
Building frameworks: from concept to completionRuben Goncalves
What are considerations when building a framework/library? How does that apply to OutSystems components? In this session, we’ll do a deep dive into the importance of addressing certain concepts like code granularity, and architecture, in order to create useful, future-proof and coherent frameworks that deliver the best possible developer experience.
Branching Your Way to Low-Code PerfectionOutSystems
With the introduction of code branching into the OutSystems platform, development teams have the flexibility to collaborate more effectively. From feature branches, to refactoring, to hotfixing production code, OutSystems’ new branching capability allows you to maintain power of built-in dependency analysis along with flexibility that multiple parallel code lines enables.
Automating Your Way to Greatness by Combining OutSystems CI/CD With the Power...OutSystems
Having built-in CI/CD capabilities has always been a core tenet of the OutSystems platform. As customer factories have grown and CI/CD pipelines have become more complex, OutSystems has developed an integration with some of the leading CI/CD DevOps tools in the market, Jenkins, and Azure DevOps to tackle some of the challenges of managing enterprise-grade CI/CD pipelines.
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesRadek Pavlíček
Slides with comments from my workshop presentation at Universal Learning Design Conference 2013. My workshop was about accessibility, HTML5 and WAI-ARIA and their benefit to users with special needs. Some examples included ;-)
Presentation for Department of Veteran Affairs
Learn the essentials of HTML5
• HTML5 Semantics
• Accessibility and ARIA
• CSS3 Styles and Animations
• Advanced Web APIs
• How to adapt your website for N-screens TV, PC, Mobile and Tablets
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteSarah Joy Arnold
Presentation at edUi 2017 in Charlottesville, VA.
Web accessibility is at the forefront of many minds, but it is difficult to know exactly what to do to make a website compliant with WCAG 2.0 and Section 508 guidelines. There are no hard and fast rules to follow, nor a simple checklist that says, “If you do these 10 things, your website will be accessible.”
At the University of North Carolina at Chapel Hill, we have begun work to improve the overall accessibility of our website in a holistic way. Using our WordPress site as the basis, we are investigating ways to improve accessibility, including subscription services like LibGuides, Libraryh3lp chat service, and WordPress plugin Formidable.
Using UNC-Chapel Hill Library’s initiatives as an example, we will illustrate what others can do on their own websites to meet WCAG 2.0 requirements and make them more usable for all users. This session will include sharing tips and tricks that we’ve learned along the way, as well as free tools that we have found useful in our work.
Web accessibility is a crucial component of how we construct our websites today, some with legal requirements to ensure our websites cater to clients of all abilities and disabilities. But how much do we actually know about web accessibility, it's implications and it's implementation? How much do we know about the accessibility of the latest technologies like HTML5 and WAI-ARIA? And can we use these now? Once you begin to think about web accessibility and accessibility in general, you start to see the world in a very different way.
In this talk, Tady Walsh, will take us through website accessibility, starting at the very beginning and will continue up to and including today's technologies. He will discuss, not only how to cater for the various types of disabilities our website visitors may have, but also the way we as developers and designers should be thinking about website accessibility, in every step of our work.
Bio: Tady is a project manager and information architect with Arekibo Communications. With a background in front-end development, he has been working and thinking about web site design and development for the past 15 years. He's a vocal supporter of cool design, good user experience and considerate development methods. His thoughts and opinions can be found on twitter as @tadywankenobi, on his website at http://www.tadywalsh.com and also on Arekibo's blog http://blog.arekibo.com.
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesAayush Shrestha
The beauty of internet is in its availability and universality. However, developers are neglecting a big chunk of population when they build websites that are not accessible.
In this workshop, we will talk about accessibility and how it can be achieved in the websites that we build with very little extra effort to what we have been doing all along.
Organized by:
Sangai Hami - Together We
American Embassy
nLocate | Locate things nearby
It’s great to keep up to date with readings, meetups, and training, but until you embed accessibility thinking within your project or product delivery process, you’ll struggle to build truly accessible solutions.
Remya is going to share Seamless’s journey in implementing a cross-functional working group and weaving accessibility into their web development process.
Presented at DDD Conference, Melbourne / 12 Aug 2017
Accessibility and Web Technologies @HTML5_TorontoGeorge Zamfir
Accessibility questions? Get in contact: george@goodwally.ca.
George Zamfir's presentation on disabilities & web accessibility at the HTML5 Toronto Web App Developers Meetup in Toronto on Jan 19, 2012.
"We are only as (dis)abled as the environment around us!"
Powerpoint & PDF Versions at
http://bit.ly/preso_a11y_html5
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...GreeceJS
Nowadays we focus mostly on building cool web sites and web applications following UX design principles, but have you ever considered if these web sites and apps can be used by people with disabilities? Could a visually impaired person use them? In this session we will talk about accessibility and how to make your site or app accessible, what are the challenges and how you can overcome them.
Points.com webdev lunch and learn #1: Clean separation. Separation of concerns isn't just for application development. It can also be applied to front end development to improve dev efficiency, maintainability, reusability, performance, SEO and cross browser compatibility.
Student information management system project report ii.pdfKamal Acharya
Our project explains about the student management. This project mainly explains the various actions related to student details. This project shows some ease in adding, editing and deleting the student details. It also provides a less time consuming process for viewing, adding, editing and deleting the marks of the students.
About
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Technical Specifications
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
Key Features
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface
• Compatible with MAFI CCR system
• Copatiable with IDM8000 CCR
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
Application
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
NO1 Uk best vashikaran specialist in delhi vashikaran baba near me online vas...Amil Baba Dawood bangali
Contact with Dawood Bhai Just call on +92322-6382012 and we'll help you. We'll solve all your problems within 12 to 24 hours and with 101% guarantee and with astrology systematic. If you want to take any personal or professional advice then also you can call us on +92322-6382012 , ONLINE LOVE PROBLEM & Other all types of Daily Life Problem's.Then CALL or WHATSAPP us on +92322-6382012 and Get all these problems solutions here by Amil Baba DAWOOD BANGALI
#vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore#blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #blackmagicforlove #blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #Amilbabainuk #amilbabainspain #amilbabaindubai #Amilbabainnorway #amilbabainkrachi #amilbabainlahore #amilbabaingujranwalan #amilbabainislamabad
Final project report on grocery store management system..pdfKamal Acharya
In today’s fast-changing business environment, it’s extremely important to be able to respond to client needs in the most effective and timely manner. If your customers wish to see your business online and have instant access to your products or services.
Online Grocery Store is an e-commerce website, which retails various grocery products. This project allows viewing various products available enables registered users to purchase desired products instantly using Paytm, UPI payment processor (Instant Pay) and also can place order by using Cash on Delivery (Pay Later) option. This project provides an easy access to Administrators and Managers to view orders placed using Pay Later and Instant Pay options.
In order to develop an e-commerce website, a number of Technologies must be studied and understood. These include multi-tiered architecture, server and client-side scripting techniques, implementation technologies, programming language (such as PHP, HTML, CSS, JavaScript) and MySQL relational databases. This is a project with the objective to develop a basic website where a consumer is provided with a shopping cart website and also to know about the technologies used to develop such a website.
This document will discuss each of the underlying technologies to create and implement an e- commerce website.
Immunizing Image Classifiers Against Localized Adversary Attacksgerogepatton
This paper addresses the vulnerability of deep learning models, particularly convolutional neural networks
(CNN)s, to adversarial attacks and presents a proactive training technique designed to counter them. We
introduce a novel volumization algorithm, which transforms 2D images into 3D volumetric representations.
When combined with 3D convolution and deep curriculum learning optimization (CLO), itsignificantly improves
the immunity of models against localized universal attacks by up to 40%. We evaluate our proposed approach
using contemporary CNN architectures and the modified Canadian Institute for Advanced Research (CIFAR-10
and CIFAR-100) and ImageNet Large Scale Visual Recognition Challenge (ILSVRC12) datasets, showcasing
accuracy improvements over previous techniques. The results indicate that the combination of the volumetric
input and curriculum learning holds significant promise for mitigating adversarial attacks without necessitating
adversary training.
2. | Accessibility with OutSystems
Bruno
Marcelino
Front End Software Engineer | OutSystems
R&D
@
in
brunoap.marcelino@outsystems.com
/bmarcelino
/bmarcelin_o
@bmarcelino
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. | Accessibility with OutSystems
The impact of disability is different on the
Web, because the Web removes some of
the barriers.
6. | Accessibility with OutSystems
Accessibility is essential for
developers and organizations
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
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
19. | Accessibility with OutSystems
Web Content
Accessibility Guidelines
WCAG
HTML
Semantic Elements
HTML WAI-ARIA
Web Accessibility
Initiative – Accessible
Rich Internet Applications
+
20. | Accessibility with OutSystems
WAI-ARIA
Web Accessibility Initiative –
Accessible Rich Internet
Applications
Web Content
Accessibility Guidelines
WCAG
HTML
Semantic Elements
HTML +
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. | 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
25. | Accessibility with OutSystems
HTML
Semantic Elements
HTML WAI-ARIA
Web Accessibility
Initiative – Accessible
Rich Internet Applications
Web Content
Accessibility Guidelines
WCAG +
26. | Accessibility with OutSystems
States & Properties
WAI-ARIA
Roles
HTML
Semantic Elements
27. | Accessibility with OutSystems
Semantic
Elements
HTML
<aside> <figure> <figcaption> <footer>
<header> <main> <nav> <section>
<h1> <h2> <h3> <h4> <h5> <h6>
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
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. | 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. | 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. | 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
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. | 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
86. | Accessibility with OutSystems
a { outline: none; }
:focus { outline: none; }
DON’T DO IT!
OUTLINE
Make it accessible
87. | Accessibility with OutSystems
2.1.2 No Keyboard Trap (Level A)
2.4.7 Focus Visible (Level AA)
OUTLINE
Make it accessible
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. | 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. | 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
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. | Accessibility with OutSystems CONTAINERS & PLACEHOLDERS
Make it accessible
Headings
Paragraph
94. | Accessibility with OutSystems CONTAINERS & PLACEHOLDERS
Make it accessible
Section
Article
102. | Accessibility with OutSystems SCREEN TEMPLATE
Make it accessible
Container
Button
Image
Text
103. | Accessibility with OutSystems SCREEN TEMPLATE
Make it accessible
Set Label property
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. | Accessibility with OutSystems
Accessibility enables people to
access your applications,
without any limitations!
106. | Accessibility with OutSystems
Accessibility contributes
to building a better society!
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
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.
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?
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.
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.
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.
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?”.
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!
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.
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.
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.
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!
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.
Because an accessible application also benefits people without disabilities, benefit all of us.
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.
A lot of jobs like contact center, supermarket, commercial guy
Less luggage possible
Arrive to my client office earlier
Drop the laptop
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:
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
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/
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/
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/
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
Now we will talk about the development techniques
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.
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.
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!
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.
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.
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.
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.
So, our UI Framework is split in two areas:
Templates
and Patterns
Let’s have a look at the most essential part of a app. The template!
Because without a template there are NO WEB APPS.
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.
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.
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)
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...
It were a bunch of pens… or a stack of chairs.
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…
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.
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.
Now we entry in the UI patterns
ProgressBar
Talk about the behavior options shape, size, orientation
ProgressBar
ProgressBar
HTML structure
Alert
Talk about the pattern behaviors and option
Message type
Show close button
Alert
Need to hide icons from screen readers
On focus change aria state
Alert
HTML structure
Alert
Event listeners
Alert
Reusable functions
Alert
Keyboard interaction - operable
Accordion
Talk about behaviors and options (disabled, open)
Accordion
Count all elements on accordion
Last element are disabled
Accordion
Expanded state
Accordion
Button and relationships
Accordion
HTML structure
Accordion
Keyboard interaction - operable
Accordion
Close key interaction
With OS UI we have accessibility by default but don’t forget...we can’t have our content fully accessible without developer.