Enviar pesquisa
Carregar
WAI-ARIA
•
0 gostou
•
954 visualizações
偉格 高
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 53
Baixar agora
Baixar para ler offline
Recomendados
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
偉格 高
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
Patrick Lauke
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
Mark Rackley
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
Mark Rackley
Be nice to your designers
Be nice to your designers
Pai-Cheng Tao
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
Mark Rackley
Recomendados
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
偉格 高
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
Patrick Lauke
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
Mark Rackley
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
Mark Rackley
Be nice to your designers
Be nice to your designers
Pai-Cheng Tao
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
Mark Rackley
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Mark Rackley
Multi screen HTML5
Multi screen HTML5
Ron Reiter
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
Mark Rackley
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
Todd Anderson
jQuery Mobile with HTML5
jQuery Mobile with HTML5
madhurpgarg
Css
Css
Sumit Gupta
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
Rakesh Jha
Plone Interactivity
Plone Interactivity
Eric Steele
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
Mark Rackley
2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
Walk on the Client Side - Chris Mountford
Walk on the Client Side - Chris Mountford
Atlassian
Html5 Whats around the bend
Html5 Whats around the bend
Raj Lal
HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
jQuery Mobile Workshop
jQuery Mobile Workshop
Ron Reiter
高粒度模块化的前端开发
高粒度模块化的前端开发
iddcn
ARIA in taobao
ARIA in taobao
yiming he
Mais conteúdo relacionado
Mais procurados
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Mark Rackley
Multi screen HTML5
Multi screen HTML5
Ron Reiter
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
Mark Rackley
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
Todd Anderson
jQuery Mobile with HTML5
jQuery Mobile with HTML5
madhurpgarg
Css
Css
Sumit Gupta
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
Rakesh Jha
Plone Interactivity
Plone Interactivity
Eric Steele
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
Mark Rackley
2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
Walk on the Client Side - Chris Mountford
Walk on the Client Side - Chris Mountford
Atlassian
Html5 Whats around the bend
Html5 Whats around the bend
Raj Lal
HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
jQuery Mobile Workshop
jQuery Mobile Workshop
Ron Reiter
Mais procurados
(20)
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Multi screen HTML5
Multi screen HTML5
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile with HTML5
jQuery Mobile with HTML5
Css
Css
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
Plone Interactivity
Plone Interactivity
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
2022 HTML5: The future is now
2022 HTML5: The future is now
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Walk on the Client Side - Chris Mountford
Walk on the Client Side - Chris Mountford
Html5 Whats around the bend
Html5 Whats around the bend
HTML5, just another presentation :)
HTML5, just another presentation :)
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
jQuery Mobile Workshop
jQuery Mobile Workshop
Destaque
高粒度模块化的前端开发
高粒度模块化的前端开发
iddcn
ARIA in taobao
ARIA in taobao
yiming he
What HTML5 Means for Web Accessibility
What HTML5 Means for Web Accessibility
klamping
Wai Aria - An Intro
Wai Aria - An Intro
Matt Machell
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
Ted Gies
Java内存管理问题案例分享
Java内存管理问题案例分享
bluedavy lin
Destaque
(6)
高粒度模块化的前端开发
高粒度模块化的前端开发
ARIA in taobao
ARIA in taobao
What HTML5 Means for Web Accessibility
What HTML5 Means for Web Accessibility
Wai Aria - An Intro
Wai Aria - An Intro
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
Java内存管理问题案例分享
Java内存管理问题案例分享
Semelhante a WAI-ARIA
Web accessibility workshop 4
Web accessibility workshop 4
Vladimir Tomberg
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIA
Access iQ
ARIA Gone Wild
ARIA Gone Wild
Jared Smith
Testing For Web Accessibility
Testing For Web Accessibility
Hagai Asaban
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
Radek Pavlíček
HTML5 & WAI ARIA for online banking
HTML5 & WAI ARIA for online banking
Adesis Netlife
Why ARIA? [DevChatt 2010]
Why ARIA? [DevChatt 2010]
Aaron Gustafson
An Introduction to WAI-ARIA
An Introduction to WAI-ARIA
IWMW
HTML5 Accessibility
HTML5 Accessibility
Aaron Gustafson
Surviving Dev Frameworks 2019
Surviving Dev Frameworks 2019
Kate Walser
HTML 5 & Accessibility
HTML 5 & Accessibility
Ted Drake
Accessibility with OutSystems
Accessibility with OutSystems
Bruno Marcelino
Semantic UI Introduction
Semantic UI Introduction
Christen Gjølbye Christensen
Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016
Maureen (Moe) Kraft
UX ARIA Presentation
UX ARIA Presentation
Los Angeles Accessibility and Inclusive Design Group
Developing an Accessible Web
Developing an Accessible Web
greenideas
Architecting RIAs with Silverlight
Architecting RIAs with Silverlight
Josh Holmes
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Gustaf Nilsson Kotte
SVG Accessibility
SVG Accessibility
Anna Khabibullina
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks
Aimee Maree Forsstrom
Semelhante a WAI-ARIA
(20)
Web accessibility workshop 4
Web accessibility workshop 4
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIA
ARIA Gone Wild
ARIA Gone Wild
Testing For Web Accessibility
Testing For Web Accessibility
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
HTML5 & WAI ARIA for online banking
HTML5 & WAI ARIA for online banking
Why ARIA? [DevChatt 2010]
Why ARIA? [DevChatt 2010]
An Introduction to WAI-ARIA
An Introduction to WAI-ARIA
HTML5 Accessibility
HTML5 Accessibility
Surviving Dev Frameworks 2019
Surviving Dev Frameworks 2019
HTML 5 & Accessibility
HTML 5 & Accessibility
Accessibility with OutSystems
Accessibility with OutSystems
Semantic UI Introduction
Semantic UI Introduction
Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016
UX ARIA Presentation
UX ARIA Presentation
Developing an Accessible Web
Developing an Accessible Web
Architecting RIAs with Silverlight
Architecting RIAs with Silverlight
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
SVG Accessibility
SVG Accessibility
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks
Mais de 偉格 高
node ffi
node ffi
偉格 高
ECMAScript 6
ECMAScript 6
偉格 高
Web Component
Web Component
偉格 高
Mobile web application
Mobile web application
偉格 高
this
this
偉格 高
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
偉格 高
Functional programming using underscorejs
Functional programming using underscorejs
偉格 高
Module, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
Javascript essential-pattern
Javascript essential-pattern
偉格 高
Vim Plugin Deployment
Vim Plugin Deployment
偉格 高
Html5 New Features
Html5 New Features
偉格 高
Base2
Base2
偉格 高
Mais de 偉格 高
(12)
node ffi
node ffi
ECMAScript 6
ECMAScript 6
Web Component
Web Component
Mobile web application
Mobile web application
this
this
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Functional programming using underscorejs
Functional programming using underscorejs
Module, AMD, RequireJS
Module, AMD, RequireJS
Javascript essential-pattern
Javascript essential-pattern
Vim Plugin Deployment
Vim Plugin Deployment
Html5 New Features
Html5 New Features
Base2
Base2
Último
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Boston Institute of Analytics
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
hans926745
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Último
(20)
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
WAI-ARIA
1.
WAI-ARIA othree@MozTW
2.
Web 1.0
3.
HyperText Markup Language
4.
Designed For Document
5.
Web 2.0
6.
RIAs Rich Internet Applications
7.
Leak of UI
Elements Widgets
8.
tree slider toolbar tab menu dialog
9.
Problems • Simulate custom
widgets • No semantic • Assistive Technology can’t access real meaning
10.
Dynamic Contents AJAX
11.
Problem • Assistive Technology
don’t get mentioned while content changes
12.
WAI-ARIA The Solution
13.
Accessible Rich Internet Applications
14.
WAI-ARIA • Bridge between
HTML and Widgets
15.
How?
16.
Example <input type="image" src="thumb.gif" alt="Effectiveness" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42 percent" aria-labelledby="leffective">
17.
Example <input type="image" src="thumb.gif" alt="Effectiveness" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42 percent" aria-labelledby="leffective">
18.
Keyboard Navigation Role State &
Properties
19.
Keyboard Navigation • Redefine
tabindex
20.
Role • What this
is
21.
State & Properties •
State (checked, selected, expanded) • Datas (user input value)
22.
Tabindex • Allowed only
in form elements
23.
Redefined Tabindex • Allow
in all viewable elements • tabindex = 0 → in native tab order • tabindex = -1 → can’t access vi tab
24.
Keyboard Access • All
actions should be able to access by keyboard
25.
Roles alertdialog menu slider tooltip tree tab math article heading separator
26.
State • aria-checked, aria-selected
...etc • No more custom attribute on DOM node • No more unnecessary class name
27.
Properties • aria-label • aria-owns •
aria-required • aria-valuenow • ...etc
28.
WAI-ARIA • Bridge between
HTML and Widgets • And notice content change to assistive technology
29.
Live Region • aria-live •
off • polite • assertive
30.
Other Live Attributes •
aria-atomic • aria-busy • aria-relevant
31.
When to Use
?
32.
Start Using WAI-ARIA Today
33.
Almost All AT/Browser Supports
34.
Even on Simple
Page
35.
Landmark Roles
36.
banner main complementary form navigation search
37.
Properties
38.
aria-required aria-labelledby aria-owns ...
39.
What WAI-ARIA not
is
40.
Need Implement • Not
web form widgets • You need implement behaviors yourself
41.
How to implement
a datepicker with keyboard access ?
42.
Authoring Practice
43.
44.
one more thing
45.
RDFa
46.
RDF Resource Description Framework
47.
Semantic Web 語意網
48.
Human vs Machine
49.
Otaku ????? Computer
50.
Otaku needs Computer
51.
What is “need”
? Computer Don’t Realize “need”
52.
Framework to Describe All
the Resources
53.
RDFa attribute
Baixar agora