Accessibility with OutSystems

| Accessibility with OutSystems
Bruno
Marcelino
Front End Software Engineer | OutSystems
R&D
@
in
brunoap.marcelino@outsystems.com
/bmarcelino
/bmarcelin_o
@bmarcelino

What is Web?

“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

The impact of disability is different on the
Web, because the Web removes some of
the barriers.

Accessibility is essential for
developers and organizations

What is Accessibility?

Accessibility is when applications, tools,
and technologies are developed and
designed to be used by everyone.

Friends and Family

1/5 people have disability
The world population is almost 7.7 billion and
people with disabilities represents one in five people

Education and Government

Increase the positive
image
High quality and flexible
application
Improve SEO
Improve usability
Build positive public
relations
Avoid discrimination and
legal complications
Benefits

Why should you consider
accessibility?

Auditory
Cognitive
Visual
Motor
Speech

Making it accessible,
benefits all of us!

Slow internet
connection
Senior
Temporary
impairments

A simple story
that happened to me!

How do we make an
accessible app?

Web Content
Accessibility Guidelines
WCAG
HTML
Semantic Elements
HTML WAI-ARIA
Web Accessibility
Initiative – Accessible
Rich Internet Applications
+

WAI-ARIA
Web Accessibility Initiative –
Accessible Rich Internet
Applications
Web Content
WCAG
HTML
Semantic Elements
HTML +

Robust
UnderstandableOperable
WCAG
Perceivable

rules to achieve Level A
78
30
rules to achieve Level AA20
rules to achieve Level
AAA
28
WCAG
Guidelines

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

Are there guidelines
for mobile?

HTML
Semantic Elements
HTML WAI-ARIA
Web Accessibility
Initiative – Accessible
Rich Internet Applications
Web Content
WCAG +

States & Properties
WAI-ARIA
Roles
HTML
Semantic Elements

Semantic
Elements
HTML
<aside> <figure> <figcaption> <footer>
<header> <main> <nav> <section>
<h1> <h2> <h3> <h4> <h5> <h6>

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

Click to change text color!

<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>

<div id="demo" class="button" onclick="myFunction()" tabindex="0"
role="button" aria-pressed="false">
</div>
<script>
}
</script>
With WAI-ARIA

<button id="demo" class="button" onclick="myFunction()" aria-
pressed="false">
</button>
<script>
}
</script>
With HTML Semantics

<button id="demo" class="button" onclick="myFunction()" aria-
pressed="false">
</button>
HTML
<div id="demo" class="button" onclick="myFunction()" tabindex="0"
role="button" aria-pressed="false">
</div>
WAI-ARIA
Comparison ARIA vs HTML Semantics

OutSystems UI

Templates UI Patterns

Templates
UI Patterns

Header Navigation Main Content Footer

+

Top Menu Side Menu

UI PatternsLayouts

| Accessibility with OutSystems Progress Bar
UI Pattern

role="progressbar" aria-
valuenow="75" aria-
valuemin="0" aria-
valuemax="100"
Progress Bar
UI Pattern

<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

role="alert" aria-
hidden="false"
aria-hidden="true" role="button"
tabindex="0" aria-
hidden="true" aria-
label="Close alert"
Alert
UI Pattern

<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

// Add event listeners
if(alertCloseButton === "true"){
alertClose.addEventListener('click', onAlertCloseClick);
alertClose.addEventListener('focus', onAlertCloseFocus);
alert.addEventListener('keydown', onAlertOnKeypress);
}
Alert
UI Pattern

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

//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

UI Pattern
role="tablist"
role="tab"
tabindex="0" aria-
hidden="false"
role="tab" aria-
hidden="true"

UI Pattern
role="tabpanel"
tabindex="0"

UI Pattern
aria-expanded="false"
aria-expanded="true"

UI Pattern
aria-labelledby="header"
role="button" aria-
controls="content"

<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

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

//If esc, Close AccordionItem
if (e.keyCode == "27") {
collapse(currAccordionItem);
setAriaExpanded(currAccordionItem, 'false', 'true');
}
Accordion
UI Pattern

Accessibility by default
without roadblocks

Make it accessible
with OutSystems

Animations

.tooltip.is--hidden {
display: none;
}
.tooltip.is--visible {
display: block;
}
ANIMATIONS
Make it accessible

| Accessibility with OutSystems ANIMATIONS
Make it accessible

opacity: 0;
}
opacity: 1;
}
ANIMATIONS
Make it accessible

2.1.2 – No Keyboard Trap (Level A)
ANIMATIONS
Make it accessible

opacity: 0;
visibility: hidden; /* hide from assistive technologies */
}
opacity: 1;
visibility: visible; /* make visible to assistive technologies */
}
ANIMATIONS
Make it accessible

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">

1.1 – Text Alternatives (Level A)
IMAGES
Make it accessible

Make it accessible
Always set the Label Property

Make it accessible
<img src="sample_image3.png" alt="Clear
Coded Programming" title="Clear Coded
Programming" width="150" height="150">

Outline

a { outline: none; }
:focus { outline: none; }
DON’T DO IT!
OUTLINE
Make it accessible

2.1.2 No Keyboard Trap (Level A)
2.4.7 Focus Visible (Level AA)
OUTLINE
Make it accessible

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; }

: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

Containers & Placeholders

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

Make it accessible
Section
Article

Make it accessible

Screen Template

| Accessibility with OutSystems SCREEN TEMPLATE
Make it accessible

Make it accessible
Filter by Category
Sidebar
Filter by Price

Make it accessible
Container
Button
Image
Text

Make it accessible
Set Label property

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 enables people to
access your applications,
without any limitations!

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:

Accessibility with OutSystems

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Accessibility with OutSystems

Similar a Accessibility with OutSystems (20)

Último

Último (20)

Accessibility with OutSystems

Notas del editor