A short introduction to Accessibility API and then a look at what pitfalls JavaScript frameworks have due to the way they talk to the DOM - Talk given at Code Melbourne in 2017
AI: Mobile Apps That Understands Your Intention When You TypedMarvin Heng
With Microsoft's Cognitive Services - Language Understanding Intelligent Service (LUIS), we can build a smart app. By following this tutorial, you should learn how to create a intelligent cross platform Mobile App that understands what is your intention.
Read more @ www.techconnect.io
By Marvin Heng
Twitter: @hmheng
Blog: www.techconnect.io
If you treat adding an API to your product as any other feature, you will fail! Get guidelines about adding an API and the important role of engineers in the process.
This presentation was featured on the third AngularJS Meetup in Belgium and presented by Glenn Dejaeger, Thomas Anciaux and Pieter Herroelen, who have been working on a large AngularJS application for almost a year now.
This presentation features the many challenges they have encountered and also ways to solve them, including:
- structuring a large AngularJS application (and building it with grunt)
- writing reusable components
- using AngularJS with a hypermedia API
Enjoy!
AE nv
AI: Mobile Apps That Understands Your Intention When You TypedMarvin Heng
With Microsoft's Cognitive Services - Language Understanding Intelligent Service (LUIS), we can build a smart app. By following this tutorial, you should learn how to create a intelligent cross platform Mobile App that understands what is your intention.
Read more @ www.techconnect.io
By Marvin Heng
Twitter: @hmheng
Blog: www.techconnect.io
If you treat adding an API to your product as any other feature, you will fail! Get guidelines about adding an API and the important role of engineers in the process.
This presentation was featured on the third AngularJS Meetup in Belgium and presented by Glenn Dejaeger, Thomas Anciaux and Pieter Herroelen, who have been working on a large AngularJS application for almost a year now.
This presentation features the many challenges they have encountered and also ways to solve them, including:
- structuring a large AngularJS application (and building it with grunt)
- writing reusable components
- using AngularJS with a hypermedia API
Enjoy!
AE nv
Android accessibility for developers and QATed Drake
This presentation was developed for Intuit's Bangalore Accessibility Week. It borrows heavily from the presentations given by the Google Accessibility Team at Google IO and provides additional resources on functionality.
La presentazione di Marco Casario per il Codemotion del 5 marzo 2011 a Roma http://www.codemotion.it/
Si parla già molto di HTML5 e delle nuove specifiche che il linguaggio nella sua ultima versione introduce. Ma è davvero il momento giusto di investire su questo standard e migrare le proprie applicazioni? A che punto sono i browsers con il supporto ad HTML5?Il Flash Player scomparirà?Quale sarà il video codec definitivo supportato? Le domande sono molte. Lo scopo di questo speech è quello di cominciare a dare delle risposte analizzando con esempi concreti lo stato attuale del linguaggio HTML5.
Introduction to interactive data visualisation using R Shinyanamarisaguedes
Shiny is an R library for building interactive webapps. Shiny allows rapid prototyping and quick production of dashboards and interactive data visualisations. This is especially important in situations where putting a real data-driven prototype in the hands of the end user allows for better refining of requirements before passing off to a web development team. This allows to speed up the delivery process and reducing the dependencies on other teams.
Code and solution to exercises available on github: https://github.com/amguedes/ShinySeminar
A rapid, low-cost, server-less approach to app development. This presentation was delivered at AnDevCon Boston, to showcase Six Overground's streamlined approach to building, marketing, and refining an app until it reaches product/market fit.
An application programming interface (API) is a way for two different pieces of software to communicate with each other. In your WordPress plugins and themes, you’ll often want to pull data from or send data to a third-party service that has an API. In this talk, Randy will explain the terminology you need to know to get started, share best practices and techniques for integrating with APIs, and walk through two real-world examples. You’ll leave with code snippets to help you get started integrating.
Reinventing Identity and Social Graphs with DigitsRomain Huet
Increasingly, the phone number is the primary identifier for an individual. In developing markets, it’s the only identifier. Digits is a new way for your users to sign in to their apps and websites without using a password. Simple and safe to use, Digits requires only a phone number. With Friend Finding, Digits is also reinventing social graphs with the one everyone has on their phone: the address book.
Presentations from Criteo Labs’ Infrastructure team with a guest speakers from Yandex.
• FastTrack: scaling customer integration
• Evolution of data structures in Yandex.Metrica
• Don't take your software for granted
• Evolution of analytics at Criteo
To build great sites and digital experiences, teams require easy to use tools focused on key capabilities: Rapid development tools, radically simple page building components, drag-and-drop widgets to manage and use rich media and content assets, and intuitive tools to review, approve and publish quickly.
Acquia Lightning, a Drupal 8 open source distribution from the Drupal experts at Acquia, is the content management foundation that provides these capabilities and more to developers and experience teams in thousands of organizations worldwide.
Join this webinar, led by Drupal Project Lead and Acquia CTO Dries Buytaert, and Jeff Beeman, Acquia Lighting Product Manager, to discover how Lightning is the best content management foundation for developers and next-generation experience builders.
Attend this webinar to:
- Learn about Acquia Lightning and how to make it the best starting point for your Drupal projects
- Discover Lightning’s benefits and learn how developers are reducing development time by 30% while creating better, more usable sites
- Understand through demos how Lightning makes it easier for experience builders to create page layouts, embed rich media, create, approve and publish content more easily to engage with audiences faster
- Discover why Lightning, on Acquia Cloud, is the secret to building better, faster, and delivering more engaging sites that drive engagement and outcomes.
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:I...Amazon Web Services
Do you wonder what AWS thinks about mobile development? In this session, learn the very latest about the many AWS services that web and mobile developers can leverage to make cloud-enabled development possible, and hear what might be in store for the future.
thethings.iO is an IoT platform that lets any kind of companies to deploy scalable and flexible IoT solutions for their customers and connected products. thethings.iO is hardware and connectivity agnostic, we let you focus on your business.
This document is a training document for partners. Feel free to learn about IoT with this document and thethings.iO :)
My background is not a traditional one, I have made vertical and horizonal career changes, first starting my working life in the Fashion Industry on clothing production and visual merchandising in the late 90s and moved into Technology in 2001, moving between network engineering, cyber security, and web development to blockchain
Now that you know the backstory, it is time for our story to start,
More Related Content
Similar to Accessiblity 101 and JavaScript Frameworks
Android accessibility for developers and QATed Drake
This presentation was developed for Intuit's Bangalore Accessibility Week. It borrows heavily from the presentations given by the Google Accessibility Team at Google IO and provides additional resources on functionality.
La presentazione di Marco Casario per il Codemotion del 5 marzo 2011 a Roma http://www.codemotion.it/
Si parla già molto di HTML5 e delle nuove specifiche che il linguaggio nella sua ultima versione introduce. Ma è davvero il momento giusto di investire su questo standard e migrare le proprie applicazioni? A che punto sono i browsers con il supporto ad HTML5?Il Flash Player scomparirà?Quale sarà il video codec definitivo supportato? Le domande sono molte. Lo scopo di questo speech è quello di cominciare a dare delle risposte analizzando con esempi concreti lo stato attuale del linguaggio HTML5.
Introduction to interactive data visualisation using R Shinyanamarisaguedes
Shiny is an R library for building interactive webapps. Shiny allows rapid prototyping and quick production of dashboards and interactive data visualisations. This is especially important in situations where putting a real data-driven prototype in the hands of the end user allows for better refining of requirements before passing off to a web development team. This allows to speed up the delivery process and reducing the dependencies on other teams.
Code and solution to exercises available on github: https://github.com/amguedes/ShinySeminar
A rapid, low-cost, server-less approach to app development. This presentation was delivered at AnDevCon Boston, to showcase Six Overground's streamlined approach to building, marketing, and refining an app until it reaches product/market fit.
An application programming interface (API) is a way for two different pieces of software to communicate with each other. In your WordPress plugins and themes, you’ll often want to pull data from or send data to a third-party service that has an API. In this talk, Randy will explain the terminology you need to know to get started, share best practices and techniques for integrating with APIs, and walk through two real-world examples. You’ll leave with code snippets to help you get started integrating.
Reinventing Identity and Social Graphs with DigitsRomain Huet
Increasingly, the phone number is the primary identifier for an individual. In developing markets, it’s the only identifier. Digits is a new way for your users to sign in to their apps and websites without using a password. Simple and safe to use, Digits requires only a phone number. With Friend Finding, Digits is also reinventing social graphs with the one everyone has on their phone: the address book.
Presentations from Criteo Labs’ Infrastructure team with a guest speakers from Yandex.
• FastTrack: scaling customer integration
• Evolution of data structures in Yandex.Metrica
• Don't take your software for granted
• Evolution of analytics at Criteo
To build great sites and digital experiences, teams require easy to use tools focused on key capabilities: Rapid development tools, radically simple page building components, drag-and-drop widgets to manage and use rich media and content assets, and intuitive tools to review, approve and publish quickly.
Acquia Lightning, a Drupal 8 open source distribution from the Drupal experts at Acquia, is the content management foundation that provides these capabilities and more to developers and experience teams in thousands of organizations worldwide.
Join this webinar, led by Drupal Project Lead and Acquia CTO Dries Buytaert, and Jeff Beeman, Acquia Lighting Product Manager, to discover how Lightning is the best content management foundation for developers and next-generation experience builders.
Attend this webinar to:
- Learn about Acquia Lightning and how to make it the best starting point for your Drupal projects
- Discover Lightning’s benefits and learn how developers are reducing development time by 30% while creating better, more usable sites
- Understand through demos how Lightning makes it easier for experience builders to create page layouts, embed rich media, create, approve and publish content more easily to engage with audiences faster
- Discover why Lightning, on Acquia Cloud, is the secret to building better, faster, and delivering more engaging sites that drive engagement and outcomes.
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:I...Amazon Web Services
Do you wonder what AWS thinks about mobile development? In this session, learn the very latest about the many AWS services that web and mobile developers can leverage to make cloud-enabled development possible, and hear what might be in store for the future.
thethings.iO is an IoT platform that lets any kind of companies to deploy scalable and flexible IoT solutions for their customers and connected products. thethings.iO is hardware and connectivity agnostic, we let you focus on your business.
This document is a training document for partners. Feel free to learn about IoT with this document and thethings.iO :)
Similar to Accessiblity 101 and JavaScript Frameworks (20)
My background is not a traditional one, I have made vertical and horizonal career changes, first starting my working life in the Fashion Industry on clothing production and visual merchandising in the late 90s and moved into Technology in 2001, moving between network engineering, cyber security, and web development to blockchain
Now that you know the backstory, it is time for our story to start,
The year is 2050. You’re running late. You stumble out of bed to find the light switch and realize your homework essay “History of GNU/Linux” was deleted; SkyNet determined the essay was “radical literature.” The future is now. Did they forgot to add the part where algorithms would be wielded against us, and we would end up proving false positives to equations that respond with “do not reply”?
- Presented at OSCON Ignite 2019 July Portland USA
Trying to get clients or stakeholders to see the need for accessibility is hard, people still see it as alot of extra work with rewards that are hard to provide a ROI. However web spiders/crawlers are our biggest blind user on the web, in essence alot of what works to increase SEO will increase the accessibility of your site. Lets take a look at some site building and development tasks we can perform that provide a tick to SEO and a tick to Accessibility. If we can take this approach we can see that the cost of Accessibility is actually bundled with the cost of SEO and not an additional burden to the project.
Overview of ios Accessibility, a look at what is on offer for a11y support in apps and also how the a11y api architecture works in ios.
Talk given in August 2016 at Dev World Melbourne Australia's national OSX conference.
A talk about the amazing App Camp 4 Girls project run in North America. How we can help increase the Pipeline for Girls in Technology - Credits go to http://appcamp4girls.com/
Talk presented at the Sydney Joomla Day discussing some of the basics of accessibility in Joomla and how to include some accessibility approaches in your site builds.
Recent proposed changes to the UK Communications Bill have been heavily criticised. These slides hope to show some key points in the new proposal and look at them from a technical perspective. The slides cover some of the key changes and were done in order to get people thinking and talking about the proposal.
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
9. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
DOCUMENT.GETELEMENTBYID(“HTML”)
9
Backend JavaScript Frameworks (node.JS) perform
ServerSide processes which output HTML
The HTML code is sent with images, other
JavaScript libraries and CSS to the BROWSER
.html .js
.css .img
10. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
DOCUMENT.GETELEMENTBYID(“HTML”)
10
The files sent are processed in the BROWSER and turned
into tokens interpreted by DOM and the Accessibility API
HTML is rendered in the BROWSER to the end device
and interpreted by assistive technologies
HTML
11. CC BY-NC-SA @AIMEE_MAREE
HTML AND ACCESSIBILITY
HTML elements don't just make things look good thats CSS
HTML elements describe the type of information that is
conveyed <blockquote> <p> <img> <a>
Native HTML elements are implicit and declare their role,
name, properties and states to the Accessibility API
Assistive tools rely on the proper use of HTML elements to
accurately convey information
Aria tags can be used with Native HTML elements to convey
additional information to the Accessibility API
AFICIONADO.TECH
11
12. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
ACCESSIBILITY STACK
12
ACCESSIBILITY API
ASSISTIVE TECHNOLOGY
BROWSER
OPERATING SYSTEM
13. THE DOM HAS ACCESSIBILITY
API TREE BUT JAVASCRIPT
DOES NOT SPEAK TO IT
Some Truth to the Myth
13
14. CC BY-NC-SA @AIMEE_MAREE
JAVASCRIPT AND HTML
Browsers, ScreenReaders, other tools read HTML elements
Backend JavaScript frameworks output HTML elements
Frameworks notoriously use <div> and <span> elements
for HTML however these elements are semantically neutral
HTML elements are translated to recognisable tokens used
by the DOM to render a webpage in a BROWSER
JavaScript can manipulate DOM tokens changing how the
HTML is rendered in the BROWSER
AFICIONADO.TECH
14
18. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
ARIA AND ASSISTIVE TECHNOLOGY
18
Accessibility API
Role
‣ Navigational landmarks
‣ Assest Types
‣ Widget Types
States and Properties
‣ Widgets
‣ Form
‣ Dynamic
‣ Value
DOM-implied hierarchy
State and Property Events
User Agent
Browser DOM
JavaScript
‣ Acts as the Controller
‣ Manipulates DOM
tokens
‣ Event-driven
‣ Can produce new
widget/s
Assistive
Technology
Interprets the HTML
output from the browser
Reads the information
presented in the HTML
and uses the HTML
elements found to
understand the type of
information presented
DATA DOCUMENT
ELEMENTUI
20. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
NAME
Provides an accessible name for the element
For example: The form label tag becomes the
accessible name for the associated form field object
<label></label>
For image the alt tag provides the accessible name
<img></img>
20
21. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
ROLE
Declares element type used to identify the purpose and
mapped to values in the accessibility API
Exposes a set of known actions to tools based on implied
behaviour of the role, example: role=“search”
Can define what behaviour to use when certain states or
properties with default values are not provided
<input type=“checkbox” id=“happy" checked>
<label for=“happy”>Code 2017 makes me hapy</label>
21
22. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
STATES
Conveys the current state of the element
Dynamic property expressing characteristics of an object
that may change in response to an action [user or script]
Represent associated data or user interaction
States declare interactions and grouped by Widget types,
Live region, drag and drop
<input type=“checkbox” id=“happy" checked>
<label for=“happy”>Code 2017 makes me happy</label>
22
23. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
PROPERTIES
Attributes that are essential to the nature of a given object or
represent a data value associated with the object
Less likely to change during the app life cycle
Properties declare both informative and declarative attributes
Grouped by Widget types, Live region, drag and drop,
relationship
<input type=“checkbox” id=“happy" checked>
<label for=“happy”>Code 2017 makes me hapy</label> I
23
24. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
NAME, ROLE, PROPERTIES, STATES
24
10
ACCESSIBILITY
API
Name = Search
Value = (none)
Role = Button
State = default, focusable
Description = “Search this Site”
Aria-live = “polite”
25. SO WHAT DOES THIS MEAN
FOR CUSTOM ELEMENTS /
WEB COMPONENTS
sensible developer
25
26. CC BY-NC-SA @AIMEE_MAREE
CUSTOM HTML ELEMENTS ACROSS FRAMEWORKS
Assistive tools rely on W3C Standards like WCAG which in-turn
rely on the HTML standard
JS Frameworks are powerful for developers quick to prototype
Power can be a bad thing when standards are not applied
Depends on the framework, some frameworks have Aria calls built
into their components, some make more use of native elements.
So I don't have to worry about HTML then? Well its JS yes, but
your still injecting HTML code and that is what needs to be
accessible.
AFICIONADO.TECH
26
28. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
ANGULAR
Allows you to create custom HTML elements so you MUST add
aria tags to establish role, state, properties
Has ngAria initiative that enables common ARIA attributes to be
easily used on elements
Mature framework community so lots of forum and group
discussions around best practice and examples of techniques
Has community focused people on the core team who are
experienced and passionate about a11y more mature framework
which means there are heaps of examples on the web
Uses Google Material Design approach
28
29. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
ANGULAR AND ARIA
Angular has ngAria this includes a basic set of Aria tags that
can be called and used in components
angular.module('myApp', ['ngAria'])...
<md-checkbox ng-disabled="disabled"></md-checkbox>
is read by the browser as:
<md-checkbox disabled aria-disabled="true"></md-checkbox>
29
30. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
NGMODEL THE HEAT LIFTER FOR NGARIA
ngModel calls to ngAria which will check the element for role or type
of checkbox, radio, range or textbox, ngAria adds tabIndex and then
will dynamically bind and update ARIA attributes:
• aria-checked
• aria-valuemin
• aria-valuemax
• aria-valuenow
• aria-invalid
• aria-required
• aria-readonly
• aria-disabled
30
32. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
EMBER
Accessibilty was always an after thought for the ember
leadership though recently more of a focus has been
taken
Allows you to create custom HTML elements so you MUST
add aria tags to establish role, state, properties
Has role built into native components which can be
modified
Growing a11y initiative to create a toolset for accessibility
to be added into projects https://github.com/ember-
a11y
32
33. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
EMBER AND THE VIRTUAL DOM
Ember talks to a Virtual DOM
DOM updates are batch processed so this means there
can be a lag
Data bindings and transitions mean whats on the screen
is not always what the Screen Reader sees as focus is lost
Need to add specific calls in components for tabindex,
ariaRole, aria-label, keyDown
use ember-a11y replace {{outlet}} with {{focusing outlet}}
33
34. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
EMBER BUTTON
Ember JS Code
App.HappyButtonComponent = Ember.Component.extend({
tagName: 'happy-button',
nameBinding: 'happy.name',
attributeBindings: ['label:aria-label',
'tabindex'],
label: ‘Are you Happy?”,
tabindex: -1,
ariaRole: ‘button',
click: function(event) {
alert('Yes');
},
keyDown: function(event) {
if (event.keyCode == 13 || event.keyCode == 32)
{
this.click(event);
}
}
});
34
Rendered HTML
<happy-button aria-label=“Are
you Happy?" tabindex="1"
role="button">
Are you Happy?
</happy-button>
36. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
REACT
Allows you to create custom HTML elements so you MUST
add aria tags to establish role, state, properties
Has a native Accessibilty API must be implemented in
parent view
Advance set of Aria features built into components
Has react a11y tool to perform an automated a11y check
Mature framework that has a focused a11y initiative
Growing developer tool set and tutorials around web
accessibility
36
37. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
REACT ACCESSIBILITY API
React Accessibility API is set on the parent component
and it will then traverse down the tree to its children
<View
accessible={true}
style={{
flex: 1,
backgroundColor: 'white',
}}>
<Text>Some example text here</Text>
<Text>Some more engaging text here</Text>
<AdsManagerStatus
accessibilityLabel={'Status ' + this.props.status}
status={this.props.status}
/>
</View>
37
39. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
POLYMER
Allows you to create custom HTML elements so you MUST add aria
tags to establish role, state, properties
Has common Aria calls and design concepts built into the native
framework elements
Uses Google Material Design approach
Early Framework and works on web components concepts not yet
implemented across all browsers had to create a similar
experience for Screen Readers
39
40. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
DOM, SHADOW DOM AND SHADY DOM
Polymer allows you to take use of the Shadow DOM
Because Shadow DOM is not available on all platforms
Polymer allows use of Shady CSS Polyfills and Shady DOM
However you can talk straight to the DOM and ignore the
others
tabindex [focus] and role needs to be mapped to the
custom element to avoid differences in Shadow DOM
implementation
Do not use IDs in your shadow DOM this is great for CSS
not so good for accessibility focus and binding
40
41. THE KEY PROBLEMS ARE
INHERENT IN THEM ALL NO
ONE FRAMEWORK IS QUEEN
FRAMEWORK REALITY
41
42. CC BY-NC-SA @AIMEE_MAREE
ALL FRAMEWORKS SAME PROBLEMS
Lack of use of Native HTML elements
Enforce use of custom elements and DOM declarations
Loss of Focus order due to DOM restructuring
Overuse of Aria tags - Developer must understand
expected element interactions
Accessibility as an after thought
AFICIONADO.TECH
42
44. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
WAG, WAI-ARIA, W3C AND STANDARDS
WCAG: guidelines for accessibility standards
Wai-Aria: set of roles, properties and states that define
accessibility API tokens to the DOM, when not present
Understand HTML elements and where to use them
Validate your code with W3C HTML and CSS, understand
needed compromise/workarounds for browsers
Check code with automated accessibility test [at least]
44
45. CREATE A 1-TO-1 MAPPING
BETWEEN ARIA ROLES AND
CUSTOM ELEMENTS.
Web Component Best Practice GURU
45
47. CC BY-NC-SA @AIMEE_MAREE
ACCESSIBILITY ISSUES FOR CUSTOM ELEMENTS
Custom HTML elements have NO state, roles, properties
The developer states this information by using Aria tags
Overuse of Aria tags, use of too many Aria tags when
communicating purpose of the element
Control of tab focus for keyboard, problematic when
rebuilding DOM needs deep level of focus
Misuse of Aria-live states to announce dynamic areas to
Screen readers leads to a very verbose experience
AFICIONADO.TECH
47
48. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
ACCEPTING THE KEY PITFALLS
More precise approach taken to ensure Aria roles and
states are communicated to the DOM
Working with Shadow DOM, Shady DOM, Virtual DOM,
Polyfills
Sometimes its impossible to use Native HTML Elements
Sometimes your retrofitting a11y into an older project
Focus on leading, bleeding edge technology means
accessibility is an after thought and retro fitted
48
50. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
SOME CODE APPROACH TAKEAWAYS
Native HTML elements where possible
When using custom elements YOU declare their ROLE,
STATE and Properties functions to the DOM
Focus CSS class to highlight elements when receive
tabfocus
Manage focus order check and check across
ScreenReaders
Use landmarks correctly and never apply on the body
50
51. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
CODE APPROACHES…. CONTINUED
Create custom checkboxes with role=checkbox, aria-
checked, aria-disabled, aria-required, and wire up
keyboard events
Convey the interaction of the element, if its a button is the
interaction expected a space or enter key press?
Add focus ONLY when not using link type HTML elements
tabindex=“0” or “1” do not increment
tabindex=“0” will mean that your custom element follows
the order of structure that the DOM sees
51
52. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
REMEMBER USE NATIVE WHEN POSSIBLE
<!-- INCORRECT -->
<DIV (CLICK)="NAVIGATETOABOUT()"
CLASS="BTN">
ABOUT
</DIV>
<!-- CORRECT -->
<A ROUTERLINK="ABOUT" CLASS="BTN">
ABOUT
</A>
Span and DIV are non semantic elements avoid them
where it makes sense to use the Native HTML element
52