SlideShare a Scribd company logo
1 of 32
AIMEE MAREE FORSSTROM
AIMEEMAREE.COM
ACCESSIBILITY
API 101
DOM and
Accessibility API
Communication
Sometime back in the 90s
The Web Browser was born and with that the Document
Object Model
The Browser was built to read Web Documents, or as we
came to know them Web Pages
Document Object Model is the programming interface
between Web Scripts and the Web Browser on end device
DOM represents the document and its order of elements in a
logical tree, each branch contains a node and each node
contains objects
2
3
The Accessibility API was born
Shortly after the DOM came along the Accessibility API was
born
The Accessibility API gave us the greatest advancement we
have seen to enable Screen Readers and other assistive
technologies to be able to read a web page like it would a word
document
4
5
Where are we now?
Ever since the 90s we have had both Operating system and
Browser Accessibility API
There is a direct mapping between HTML elements and
operating system elements
So now this means that the iPhone and your MacBook will
bot h have an operating system A11y API and the Browser
Accessibility API, creating a somewhat seamless
experience
6
Accessibility Stack
ASSISTIVE TECHNOLOGY
OS A11Y API
BROWSER
OPERATING SYSTEM
7
DOM A11Y API
The Accessibility API and the Browser
Alot of accessibility work is done for you by the browser
Browser also handles keyboard focus, so it knows for example
that you can hit an enter key on an element because it knows
its a link and it you will want to click
There is a direct mapping between the OS Accessibility API
and the Browser Accessibility API
8
HOW DOES IT ALL WORK
YOU ASK?
Presenter
9
Browser Accessibility Access
ASSISTIVE
TECHNOLOGY
Role: Button
Name: Submit
State: Focus
10
BROWSE
R A11Y
API
X
Tabs to Form
Submit
Submit
Focus
Clickable
Javascript libraries, CSS, image files sent from the web
server are processed in the BROWSER turned into tokens
interpreted by DOM to build the Accessibility Tree
HTML is rendered in the BROWSER to the end
device and interpreted by assistive technologies
HTML
Scripts to Tokens to Information
11
<img src =“australian_flag.jpg”
alt=“Australian Indigenous Flag”>
Painted into the visual UI on the Browser
Transformed into accessibility tree
Role: Image
Name: Australian Indigenous Flag
Clients Browser Assistive Technology
Accessibility API
DOM
12
Common Language
ACCESSIBILITY
API
Name = Search
Value = (none)
Role = Button
State = default, focusable
Description = “Search this Site”
Aria-live = “polite”
13
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”>Accessibility makes me happy</label>
15
Name
Provides an accessible name for the element
Can come from various areas of an element
For example: The form label tag becomes the accessible name
for the associated form field object
For image the alt tag provides the accessible name
<input type=“checkbox” id=“happy" checked>
<label for=“happy”>Accessibility makes me happy</label>
16
State
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>
17
Its Magic
By using Native HTML elements you are already informing
the Accessibility API about their Name, Role and State
This is what we mean by “Let the Browser do the Work”
If your not using Native Elements you MUST state their
Name, Role and State
Native Elements are semantic and pass information to the
DOM and Accessibility API
Span and Div are not semantic Accessibility API will ignore
18
19
DOM Accessibility API
Accessibility API is a trimmed
subset of the DOM
20
DOM Accessibility API
Semantic Native Elements are declared by the
Browser Non Semantic Elements are ignored
H1 H1
span
H2 H2
Button
Input
Button
Input
How is the Accessibility API created?
21
ACCESSIBILITY
APIDOM
HTML
DOM parses the markup code and creates a Tree of
Nodes representing the hierarchy of the document
DOM takes Name, Role, State tokens and build
the Accessibility Tree
Where Java Script fits in
22
ACCESSIBILIT
Y API
DOM
HTML
JavaScript can access and modify the DOM directly
JavaScript can not access the Accessibility API
JAVASCRIPT
Where Aria Comes in
23
ACCESSIBILITY
APIDOM
HTML
Accessibility API can only be modified by ARIA
JavaScript can not access the Accessibility API
JAVASCRIPT ARIA
How we manipulate the a11y Tree
24
ACCESSIBILITY
APIDOM
HTML
DOM is built from HTML and includes the information from the Aria
Tags in the accessibility tree
We place ARIA tags on HTML elements and we can use JavaScript
to modify the Aria Tags on HTML elements
JAVASCRIP
T
ARIA
Accessibility Tree now includes the information from Aria Tags
The pieces of the puzzle and where they belong
25
ACCESSIBILITY
APIDOMHTML
CSS
ASSISTIVE
TECHNOLOGY
BROWSER
JAVASCRIPT
ARIA TAGS
What does this all mean?
JavaScript can manipulate the DOM tree but not the A11Y tree
We use JavaScript to add AriaTags to HTML elements so the DOM can
produce the A11y tree with this information included
When we use Native Elements the Browser does most of the work for
us
When we create our own components we need to inform the DOM of
Role, Name, State so thew A11y tree will be aware of them
AFICIONADO.TEC
H
26
SO WHERE DOES THIS
LEAVE US THEN?
Audience
27
Accessibility Mechanics
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
ELEMENT
UI
28
Passing Through the Stack
ASSISTIVE
TECHNOLOGY
ACCESSIBILITY API
JS
29
DOM
BROWSER
HTML / CSS / ARIA
Accessibility Mechanics Takeaway
Native HTML Elements first
Test your site with keyboard access only
Provide accessible names and descriptions, give images alt-
tags, assign labels to forms, make sure links actually provide
information about what the link is and not click or read more
Communicate State
Check your DOM output
Check your Accessibility API tree output
30
To Aria or Not to Aria?
Aria is aimed at Screen Readers, other assistive technologies will
rely on Native HTML
All Screen Readers will read Aria tags
Overuse of Aria can break the Accessibility API and/or cause an
unexpected outcome
Each Browser extends the DOM in its own unique way
When thinking of Accessibility think Native Elements and that way
the browser does most of the work for us
31
GO FORTH AND MAKE
THE WEB MORE
ACCESSIBLE…
The Presenter
32

More Related Content

Similar to DOM and Accessibility API Communication

Apache Shindig, from Server Side Portlets to Open Social Gadgets
Apache Shindig, from Server Side Portlets to Open Social GadgetsApache Shindig, from Server Side Portlets to Open Social Gadgets
Apache Shindig, from Server Side Portlets to Open Social GadgetsTyrell Perera
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global dominationStfalcon Meetups
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RPaul Richards
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetJoseph Labrecque
 
Event-Driven Serverless Apps - Pop-up Loft Tel Aviv
Event-Driven Serverless Apps - Pop-up Loft Tel AvivEvent-Driven Serverless Apps - Pop-up Loft Tel Aviv
Event-Driven Serverless Apps - Pop-up Loft Tel AvivAmazon Web Services
 
Best And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and MicrosoftBest And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and MicrosoftJosh Holmes
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web DevelopmentRobert J. Stein
 
Building event driven serverless apps by Danilo Poccia at Codemotion Dubai
Building event driven serverless apps by Danilo Poccia at Codemotion DubaiBuilding event driven serverless apps by Danilo Poccia at Codemotion Dubai
Building event driven serverless apps by Danilo Poccia at Codemotion DubaiCodemotion Dubai
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core ConceptsDivyang Bhambhani
 
Programming With Amazon, Google, And E Bay
Programming With Amazon, Google, And E BayProgramming With Amazon, Google, And E Bay
Programming With Amazon, Google, And E BayPhi Jack
 
Introduction To Rich Internet Applications
Introduction To Rich Internet ApplicationsIntroduction To Rich Internet Applications
Introduction To Rich Internet ApplicationsAbdelmonaim Remani
 
Aras Role Based Clients
Aras Role Based ClientsAras Role Based Clients
Aras Role Based ClientsProdeos
 
Special Purpose Role-Based Clients for PLM using Aras
Special Purpose Role-Based Clients for PLM using ArasSpecial Purpose Role-Based Clients for PLM using Aras
Special Purpose Role-Based Clients for PLM using ArasAras
 
Accessible web applications
Accessible web applications Accessible web applications
Accessible web applications Steven Faulkner
 

Similar to DOM and Accessibility API Communication (20)

Apache Shindig, from Server Side Portlets to Open Social Gadgets
Apache Shindig, from Server Side Portlets to Open Social GadgetsApache Shindig, from Server Side Portlets to Open Social Gadgets
Apache Shindig, from Server Side Portlets to Open Social Gadgets
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global domination
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in R
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
 
Event-Driven Serverless Apps - Pop-up Loft Tel Aviv
Event-Driven Serverless Apps - Pop-up Loft Tel AvivEvent-Driven Serverless Apps - Pop-up Loft Tel Aviv
Event-Driven Serverless Apps - Pop-up Loft Tel Aviv
 
Best And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and MicrosoftBest And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and Microsoft
 
Deep Dive: AWS Lambda
Deep Dive: AWS LambdaDeep Dive: AWS Lambda
Deep Dive: AWS Lambda
 
Web 2 0 Tools
Web 2 0 ToolsWeb 2 0 Tools
Web 2 0 Tools
 
Lecture 1 (2)
Lecture 1 (2)Lecture 1 (2)
Lecture 1 (2)
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
 
Building event driven serverless apps by Danilo Poccia at Codemotion Dubai
Building event driven serverless apps by Danilo Poccia at Codemotion DubaiBuilding event driven serverless apps by Danilo Poccia at Codemotion Dubai
Building event driven serverless apps by Danilo Poccia at Codemotion Dubai
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
Programming With Amazon, Google, And E Bay
Programming With Amazon, Google, And E BayProgramming With Amazon, Google, And E Bay
Programming With Amazon, Google, And E Bay
 
Introduction To Rich Internet Applications
Introduction To Rich Internet ApplicationsIntroduction To Rich Internet Applications
Introduction To Rich Internet Applications
 
Aras Role Based Clients
Aras Role Based ClientsAras Role Based Clients
Aras Role Based Clients
 
Special Purpose Role-Based Clients for PLM using Aras
Special Purpose Role-Based Clients for PLM using ArasSpecial Purpose Role-Based Clients for PLM using Aras
Special Purpose Role-Based Clients for PLM using Aras
 
The serverless LAMP stack
The serverless LAMP stackThe serverless LAMP stack
The serverless LAMP stack
 
Asp
AspAsp
Asp
 
Accessible web applications
Accessible web applications Accessible web applications
Accessible web applications
 

More from Aimee Maree Forsstrom

The Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityThe Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityAimee Maree Forsstrom
 
Javascript Framework Acessibiliity Review
Javascript Framework Acessibiliity ReviewJavascript Framework Acessibiliity Review
Javascript Framework Acessibiliity ReviewAimee Maree Forsstrom
 
Diversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 GirlsDiversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 GirlsAimee Maree Forsstrom
 
Waving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian GovernmentWaving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian GovernmentAimee Maree Forsstrom
 
Govhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the DotsGovhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the DotsAimee Maree Forsstrom
 
Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]Aimee Maree Forsstrom
 
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)Aimee Maree Forsstrom
 
Introduction to Python - Training for Kids
Introduction to Python - Training for KidsIntroduction to Python - Training for Kids
Introduction to Python - Training for KidsAimee Maree Forsstrom
 
UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012Aimee Maree Forsstrom
 
Drupal7 themeing changes and inheritence
Drupal7 themeing changes and inheritenceDrupal7 themeing changes and inheritence
Drupal7 themeing changes and inheritenceAimee Maree Forsstrom
 

More from Aimee Maree Forsstrom (20)

AI - PAST, PRESENT, FUTURE.pptx
AI - PAST, PRESENT, FUTURE.pptxAI - PAST, PRESENT, FUTURE.pptx
AI - PAST, PRESENT, FUTURE.pptx
 
Pioneering Technology - My Story
Pioneering Technology - My StoryPioneering Technology - My Story
Pioneering Technology - My Story
 
Machine Learning ate my homework
Machine Learning ate my homeworkMachine Learning ate my homework
Machine Learning ate my homework
 
Accessibility, SEO and Joomla
Accessibility, SEO and JoomlaAccessibility, SEO and Joomla
Accessibility, SEO and Joomla
 
The Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityThe Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios Accessibility
 
Javascript Framework Acessibiliity Review
Javascript Framework Acessibiliity ReviewJavascript Framework Acessibiliity Review
Javascript Framework Acessibiliity Review
 
DeCoupling Drupal
DeCoupling DrupalDeCoupling Drupal
DeCoupling Drupal
 
Diversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 GirlsDiversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 Girls
 
Waving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian GovernmentWaving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian Government
 
Cyber Terrorism or Terrible Code
Cyber Terrorism or Terrible Code Cyber Terrorism or Terrible Code
Cyber Terrorism or Terrible Code
 
Govhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the DotsGovhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the Dots
 
Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]
 
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
 
Introduction to Python - Training for Kids
Introduction to Python - Training for KidsIntroduction to Python - Training for Kids
Introduction to Python - Training for Kids
 
UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012
 
Welcome to the World of Trolls
Welcome to the World of TrollsWelcome to the World of Trolls
Welcome to the World of Trolls
 
Drupal7 themeing changes and inheritence
Drupal7 themeing changes and inheritenceDrupal7 themeing changes and inheritence
Drupal7 themeing changes and inheritence
 
Drupal’s growth
Drupal’s growthDrupal’s growth
Drupal’s growth
 
Help me help you learn
Help me help you learnHelp me help you learn
Help me help you learn
 
Drupal 7 Building Blocks
Drupal 7 Building BlocksDrupal 7 Building Blocks
Drupal 7 Building Blocks
 

Recently uploaded

TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.Tortogel
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理A
 
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide HandbookTOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide HandbookVarun Mithran
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书A
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理AS
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理Fir
 
一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理SS
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirtsrahman018755
 
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Managementseank14
 
一比一定制美国罗格斯大学毕业证学位证书
一比一定制美国罗格斯大学毕业证学位证书一比一定制美国罗格斯大学毕业证学位证书
一比一定制美国罗格斯大学毕业证学位证书A
 
原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样A
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样AS
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样Fi
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样AS
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书A
 
一比一原版英国创意艺术大学毕业证如何办理
一比一原版英国创意艺术大学毕业证如何办理一比一原版英国创意艺术大学毕业证如何办理
一比一原版英国创意艺术大学毕业证如何办理AS
 
Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303Dewi Agency
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsrahman018755
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样AS
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理A
 

Recently uploaded (20)

TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
 
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide HandbookTOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
 
一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
 
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
 
一比一定制美国罗格斯大学毕业证学位证书
一比一定制美国罗格斯大学毕业证学位证书一比一定制美国罗格斯大学毕业证学位证书
一比一定制美国罗格斯大学毕业证学位证书
 
原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书
 
一比一原版英国创意艺术大学毕业证如何办理
一比一原版英国创意艺术大学毕业证如何办理一比一原版英国创意艺术大学毕业证如何办理
一比一原版英国创意艺术大学毕业证如何办理
 
Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理
 

DOM and Accessibility API Communication

  • 1. AIMEE MAREE FORSSTROM AIMEEMAREE.COM ACCESSIBILITY API 101 DOM and Accessibility API Communication
  • 2. Sometime back in the 90s The Web Browser was born and with that the Document Object Model The Browser was built to read Web Documents, or as we came to know them Web Pages Document Object Model is the programming interface between Web Scripts and the Web Browser on end device DOM represents the document and its order of elements in a logical tree, each branch contains a node and each node contains objects 2
  • 3. 3
  • 4. The Accessibility API was born Shortly after the DOM came along the Accessibility API was born The Accessibility API gave us the greatest advancement we have seen to enable Screen Readers and other assistive technologies to be able to read a web page like it would a word document 4
  • 5. 5
  • 6. Where are we now? Ever since the 90s we have had both Operating system and Browser Accessibility API There is a direct mapping between HTML elements and operating system elements So now this means that the iPhone and your MacBook will bot h have an operating system A11y API and the Browser Accessibility API, creating a somewhat seamless experience 6
  • 7. Accessibility Stack ASSISTIVE TECHNOLOGY OS A11Y API BROWSER OPERATING SYSTEM 7 DOM A11Y API
  • 8. The Accessibility API and the Browser Alot of accessibility work is done for you by the browser Browser also handles keyboard focus, so it knows for example that you can hit an enter key on an element because it knows its a link and it you will want to click There is a direct mapping between the OS Accessibility API and the Browser Accessibility API 8
  • 9. HOW DOES IT ALL WORK YOU ASK? Presenter 9
  • 10. Browser Accessibility Access ASSISTIVE TECHNOLOGY Role: Button Name: Submit State: Focus 10 BROWSE R A11Y API X Tabs to Form Submit Submit Focus Clickable
  • 11. Javascript libraries, CSS, image files sent from the web server are processed in the BROWSER turned into tokens interpreted by DOM to build the Accessibility Tree HTML is rendered in the BROWSER to the end device and interpreted by assistive technologies HTML Scripts to Tokens to Information 11
  • 12. <img src =“australian_flag.jpg” alt=“Australian Indigenous Flag”> Painted into the visual UI on the Browser Transformed into accessibility tree Role: Image Name: Australian Indigenous Flag Clients Browser Assistive Technology Accessibility API DOM 12
  • 13. Common Language ACCESSIBILITY API Name = Search Value = (none) Role = Button State = default, focusable Description = “Search this Site” Aria-live = “polite” 13
  • 14.
  • 15. 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”>Accessibility makes me happy</label> 15
  • 16. Name Provides an accessible name for the element Can come from various areas of an element For example: The form label tag becomes the accessible name for the associated form field object For image the alt tag provides the accessible name <input type=“checkbox” id=“happy" checked> <label for=“happy”>Accessibility makes me happy</label> 16
  • 17. State 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> 17
  • 18. Its Magic By using Native HTML elements you are already informing the Accessibility API about their Name, Role and State This is what we mean by “Let the Browser do the Work” If your not using Native Elements you MUST state their Name, Role and State Native Elements are semantic and pass information to the DOM and Accessibility API Span and Div are not semantic Accessibility API will ignore 18
  • 19. 19 DOM Accessibility API Accessibility API is a trimmed subset of the DOM
  • 20. 20 DOM Accessibility API Semantic Native Elements are declared by the Browser Non Semantic Elements are ignored H1 H1 span H2 H2 Button Input Button Input
  • 21. How is the Accessibility API created? 21 ACCESSIBILITY APIDOM HTML DOM parses the markup code and creates a Tree of Nodes representing the hierarchy of the document DOM takes Name, Role, State tokens and build the Accessibility Tree
  • 22. Where Java Script fits in 22 ACCESSIBILIT Y API DOM HTML JavaScript can access and modify the DOM directly JavaScript can not access the Accessibility API JAVASCRIPT
  • 23. Where Aria Comes in 23 ACCESSIBILITY APIDOM HTML Accessibility API can only be modified by ARIA JavaScript can not access the Accessibility API JAVASCRIPT ARIA
  • 24. How we manipulate the a11y Tree 24 ACCESSIBILITY APIDOM HTML DOM is built from HTML and includes the information from the Aria Tags in the accessibility tree We place ARIA tags on HTML elements and we can use JavaScript to modify the Aria Tags on HTML elements JAVASCRIP T ARIA Accessibility Tree now includes the information from Aria Tags
  • 25. The pieces of the puzzle and where they belong 25 ACCESSIBILITY APIDOMHTML CSS ASSISTIVE TECHNOLOGY BROWSER JAVASCRIPT ARIA TAGS
  • 26. What does this all mean? JavaScript can manipulate the DOM tree but not the A11Y tree We use JavaScript to add AriaTags to HTML elements so the DOM can produce the A11y tree with this information included When we use Native Elements the Browser does most of the work for us When we create our own components we need to inform the DOM of Role, Name, State so thew A11y tree will be aware of them AFICIONADO.TEC H 26
  • 27. SO WHERE DOES THIS LEAVE US THEN? Audience 27
  • 28. Accessibility Mechanics 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 ELEMENT UI 28
  • 29. Passing Through the Stack ASSISTIVE TECHNOLOGY ACCESSIBILITY API JS 29 DOM BROWSER HTML / CSS / ARIA
  • 30. Accessibility Mechanics Takeaway Native HTML Elements first Test your site with keyboard access only Provide accessible names and descriptions, give images alt- tags, assign labels to forms, make sure links actually provide information about what the link is and not click or read more Communicate State Check your DOM output Check your Accessibility API tree output 30
  • 31. To Aria or Not to Aria? Aria is aimed at Screen Readers, other assistive technologies will rely on Native HTML All Screen Readers will read Aria tags Overuse of Aria can break the Accessibility API and/or cause an unexpected outcome Each Browser extends the DOM in its own unique way When thinking of Accessibility think Native Elements and that way the browser does most of the work for us 31
  • 32. GO FORTH AND MAKE THE WEB MORE ACCESSIBLE… The Presenter 32

Editor's Notes

  1. Ok so lets go back to how the myth was created,
  2. Role tells the browser what the element does, so the browser will tell the screen reader what the element is such as image. HTML landmark roles are an example of this, these are also landmark elements which can be used for navigation and you can move from one to the next like a table of contents for the page Roles are element types and authors MUST NOT change role values over time or with user actions. Authors wishing to change a role MUST do so by deleting the associated element and its children and replacing it with a new element with the appropriate role. Typically, platform accessibility APIs do not provide a vehicle to notify assistive technologies of a role value change, and consequently, assistive technologies may not update their cache with the new role attribute value. This section defines the WAI-ARIA role taxonomy and describes the characteristics and properties of all roles. In order to reflect the content in the DOM, user agents SHOULD map the role attribute to the appropriate value in the implemented accessibility API The role taxonomy uses the following relationships to relate WAI-ARIA roles to each other and to concepts from other specifications, such as HTML and XForms.
  3. Name, this can come from various areas of an element for an image it will be the alt tag, for a link it will be the link text, or in the case of labels you can use another element to name an element such as form items.
  4. State, informs that interaction is required before the next step
  5. HTML output from backend is turned into tokens interpreted via the DOM “Document Object Model” We still need HTML and CSS to layout a webpage Screen Readers and other tools look for HTML native elements JS Frameworks use javascript to inject HTML onto the webpage People like JS Frameworks they are client rendered and render quickly It can depend 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.
  6. The accessibility tree and the DOM tree are parallel structures. Roughly speaking the accessibility tree is a subset of the DOM tree. It includes the user interface objects of the user agent and the objects of the document. Accessible objects are created in the accessibility tree for every DOM element that should be exposed to an assistive technology, either because it may fire an accessibility event or because it has a property, relationship or feature which needs to be exposed. Generally if something can be trimmed out it will be, for reasons of performance and simplicity. For example, a <span> with just a style change and no semantics may not get its own accessible object, but the style change will be exposed by other means.
  7. HTML output from backend is turned into tokens interpreted via the DOM “Document Object Model” We still need HTML and CSS to layout a webpage Screen Readers and other tools look for HTML native elements JS Frameworks use javascript to inject HTML onto the webpage People like JS Frameworks they are client rendered and render quickly It can depend 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.
  8. HTML output from backend is turned into tokens interpreted via the DOM “Document Object Model” We still need HTML and CSS to layout a webpage Screen Readers and other tools look for HTML native elements JS Frameworks use javascript to inject HTML onto the webpage People like JS Frameworks they are client rendered and render quickly It can depend 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.