Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ARIA 101

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Bermon Painter Bermon Painter
October 04, 2011
Technology
160
2

ARIA 101

Avatar for Bermon Painter

Bermon Painter

October 04, 2011

More Decks by Bermon Painter

See All by Bermon Painter
Behavioural Science + Product Innovation = ❤️
Avatar for Bermon Painter bermonpainter
0
580
Haciendo una inmersión profunda con el JAMStack y Vue.js
Avatar for Bermon Painter bermonpainter
0
360
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
Avatar for Bermon Painter bermonpainter
0
340
Design Thinking: Ideas to Implementation
Avatar for Bermon Painter bermonpainter
0
690
Product Development with Vue.js and a Headless CMS
Avatar for Bermon Painter bermonpainter
0
450
Successfully Hire, Mentor, Retain and Lead Teams
Avatar for Bermon Painter bermonpainter
2
410
Crafting Successful UX Strategies
Avatar for Bermon Painter bermonpainter
0
1.3k
The Fallacy of Digital Transformation
Avatar for Bermon Painter bermonpainter
0
530
Design Thinking: Ideas to Implementation
Avatar for Bermon Painter bermonpainter
3
1.6k

Other Decks in Technology

See All in Technology
Playwright × AI Agent でE2Eテストはどう変わるか AI駆動テストの可能性と実用検証の結果
Avatar for Taiga Oyu taiga7543
2
880
書籍セキュアAPIについて
Avatar for RiiiM(りむ) riiimparm
0
330
AI時代こそ、スケールしないことをしよう -「作る人」から「なぜ作るか」を考える人へ / Do Things That Don't Scale in the AI Era — From How to Why
Avatar for 株式会社カミナシ kaminashi
1
150
Git 研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
430
AI研修(Day2)【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
740
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
10
2.7k
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
75k
歴史から理解するクラウドインフラのしくみ
Avatar for t.kizawa kizawa2020
0
160
AI時代のPlaywright活用(システムテストを自動化する ー 実行エンジンにPla ywrightを選んだ理由)
Avatar for 西田泰明 ynisqa1988
2
1k
Webアプリ認証の全体像 / The Big Picture of Web App Authentication
Avatar for Kitano Yuichi kitano_yuichi
1
450
WEBフロントエンド研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
320
システム監視入門
Avatar for gr1m0h grimoh
2
570

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
260
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
400
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
630
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
350
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
200
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k

Transcript

  1. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 ARIA 101 ACCESSIBILITY

    & FORMS

  2. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FILL IN THE

    GAPS

  3. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 TABINDEX

  4. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 DEFINE WHAT

  5. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LANDMARK ROLES

  6. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 application LANDMARK ROLES

  7. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 banner LANDMARK ROLES

  8. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 complementary LANDMARK ROLES

  9. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 content info LANDMARK

    ROLES

  10. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 form LANDMARK ROLES

  11. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 main LANDMARK ROLES

  12. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 navigation LANDMARK ROLES

  13. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 search LANDMARK ROLES

  14. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 STRUCTURAL ROLES

  15. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 article columnheader definition

    directory document group heading img list listitem math note presentation region row rowheader separator STRUCTURAL ROLES

  16. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET ROLES

  17. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 button alert alertdialog

    checkbox combobox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio option progressbar radio radiogroup scrollbar slider spinbutton status tab tabpanel textbox timer tooltip treeitem WIDGET ROLES

  18. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET PROPERTIES

  19. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria- activedescendant aria-atomic

    aria-autocomplete aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labeledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns aria-posinset aria-eadonly aria-relevant aria-required aria-setsize aria-sort aria-valuemax WIDGET PROPERTIES

  20. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET STATES

  21. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-busy aria-checked aria-disabled

    aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow aria-valuetext WIDGET STATES

  22. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LIVE REGIONS (AJAX)

  23. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-live off, polite,

    assertive

  24. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-atomic true, false

  25. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-busy true, false

  26. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-relevant additions, removals,

    text, all

  27. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FORMS

  28. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 Required Fields

  29. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <input type="text" required

    />

  30. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <input type="text" aria-required="true"

    />

  31. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">Label <em>(required)</em></label>

    <input type="text" aria-required="true" />

  32. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">User Name<em

    role="presentation">(required)</em></label> <input type="text" aria-required="true" />

  33. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">User Name<em

    aria-hidden="true">(required)</em></label> <input type="text" aria-required="true" />

  34. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for=""> User

    Name <img src=”data:image/png;base64” alt=”required” role=”presentation” /> </label> <input type="text" id=”” aria-required="true" />

  35. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 Inline Errors

  36. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for=""=> User

    Name <img src=”data:image/png;base64” alt=”required” role=”presentation” /> </label> <input type="text" id=”” aria-required="true" aria-describedby=”error” /> <label id=”error” role=”alert”>Error message</label>

  37. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LISTED ERRORS

  38. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <div class=”message errors”

    aria-live=”polite” aria-atomic=”true”> <fieldset> <legend><h3>Errors Title</h3></legend> <ul> <li> <a href=”#input-id” id=”error-label”>Field name is required</a> OR <label for=”input-id” id=”error-label”>Field name...</label> </li> </ul> </fieldset> </div> ... <input type=”text” id=”input-id” aria-labeledby=”error-label” />

  39. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FIN