Soumettre la recherche
Mettre en ligne
WAI-ARIA
•
0 j'aime
•
954 vues
偉格 高
Suivre
Technologie
Signaler
Partager
Signaler
Partager
1 sur 53
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Contenu connexe
Tendances
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
Tendances
(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
En vedette
高粒度模块化的前端开发
高粒度模块化的前端开发
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
En vedette
(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内存管理问题案例分享
Similaire à 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
Similaire à 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
Plus 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
偉格 高
Plus 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
Dernier
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
Neo4j
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
KaustubhBhavsar6
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
shyamraj55
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
xtailishbaloch
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Product School
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
MAGNIntelligence
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Tejal81
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Alkin Tezuysal
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
The Good Food Institute
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
Hansamali Gamage
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
Brian Pichman
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
nooralam814309
March Patch Tuesday
March Patch Tuesday
Ivanti
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
Kapil Thakar
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
codyslingerland1
Top 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
TopCSSGallery
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
IPLOOK Networks
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
Neo4j
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
DianaGray10
Dernier
(20)
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
March Patch Tuesday
March Patch Tuesday
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
Top 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
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
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
Télécharger maintenant