role, aria

문서

W3C RoleAttribute

Accessible Rich Internet Applications (WAI-ARIA) 1.1

출처

예시

Using ARIA: Roles, states, and properties

• 카테고리화 되어 있어서 참고하기 좋타. 아래 내용은 더 자세히 알고 싶을때 읽자

mozilla

link

alert role

timer role

button role …

ARIA: feed role

link

5. The Roles Model

link

1. alert (role)
2. alertdialog (role)
3. application (role)
4. article (role)
5. banner (role)
6. button (role)
7. cell (role)
8. checkbox (role)
9. columnheader (role)
10. combobox (role)
11. complementary (role)
12. contentinfo (role)
13. definition (role)
14. dialog (role)
15. directory (role)
16. document (role)
17. feed (role)
18. figure (role)
19. form (role)
20. grid (role)
21. gridcell (role)
22. group (role)
23. heading (role)
24. img (role)
25. link (role)
26. list (role)
27. listbox (role)
28. listitem (role)
29. log (role)
30. main (role)
31. marquee (role)
32. math (role)
33. menu (role)
34. menubar (role)
35. menuitem (role)
36. menuitemcheckbox (role)
37. menuitemradio (role)
38. navigation (role)
39. none (role)
40. note (role)
41. option (role)
42. presentation (role)
43. progressbar (role)
44. radio (role)
45. radiogroup (role)
46. region (role)
47. row (role)
48. rowgroup (role)
49. rowheader (role)
50. scrollbar (role)
51. search (role)
52. searchbox (role)
53. separator (role)
54. slider (role)
55. spinbutton (role)
56. status (role)
57. switch (role)
58. tab (role)
59. table (role)
60. tablist (role)
61. tabpanel (role)
62. term (role)
63. textbox (role)
64. timer (role)
65. toolbar (role)
66. tooltip (role)
67. tree (role)
68. treegrid (role)
69. treeitem (role)
70. widget (abstract role)
71. window (abstract role)

6.6 Definitions of States and Properties (all aria-* attributes)

link

1. aria-activedescendant (property)
2. aria-atomic (property)
3. aria-autocomplete (property)
4. aria-busy (state)
5. aria-checked (state)
6. aria-colcount (property)
7. aria-colindex (property)
8. aria-colspan (property)
9. aria-controls (property)
10. aria-current (state)
11. aria-describedby (property)
12. aria-details (property)
13. aria-disabled (state)
14. aria-dropeffect (property)
15. aria-errormessage (property)
16. aria-expanded (state)
17. aria-flowto (property)
18. aria-grabbed (state)
19. aria-haspopup (property)
20. aria-hidden (state)
21. aria-invalid (state)
22. aria-keyshortcuts (property)
23. aria-label (property)
24. aria-labelledby (property)
25. aria-level (property)
26. aria-live (property)
27. aria-modal (property)
28. aria-multiline (property)
29. aria-multiselectable (property)
30. aria-orientation (property)
31. aria-owns (property)
32. aria-placeholder (property)
33. aria-posinset (property)
34. aria-pressed (state)
35. aria-readonly (property)
36. aria-relevant (property)
37. aria-required (property)
38. aria-roledescription (property)
39. aria-rowcount (property)
40. aria-rowindex (property)
41. aria-rowspan (property)
42. aria-selected (state)
43. aria-setsize (property)
44. aria-sort (property)
45. aria-valuemax (property)
46. aria-valuemin (property)
47. aria-valuenow (property)
48. aria-valuetext (property)

ARIA mozilla

출처

• 접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.
• ARIA 소개
• 스크린 리더기에서 ARIA를 어떻게 사용하는지에 대한 영상
• ARIA 사용하기

표준화를 위한 노고

• WAI-ARIA 명세 w3c
• WAI-ARIA 작성 안내서 w3c

ARIA developers.google.com

• ARIA 소개
• ARIA 레이블과 관계
• 콘텐츠 숨기기 및 업데이트

• ARIA 사용하기: 규칙, 상태, 속성

  ARIA는 요소에 적용 할 수있는 의미를 정의하며, 역할 (사용자 인터페이스 요소 유형 정의)과 역할에서 지원하는 상태 및 속성으로 구분됩니다. 작성자는 요소에 적절한 ARIA 의미 체계가 이미있는 경우 (적절한 HTML 요소 사용을 통해)가 아니라면 해당 요소의 수명주기 동안 ARIA 역할과 적절한 상태 및 속성을 요소에 할당해야합니다. ARIA 의미 체계를 추가하면 브라우저의 접근성 API에 추가 정보 만 노출되며 페이지의 DOM에는 영향을주지 않습니다.

  • aria-label 속성 사용

레진 WAI-ARIA 가이드라인

• 레진 WAI-ARIA 가이드라인
  • ARIA States 를 보기 싶게 적어 놓았다

WAI-ARIA 1.1 Cheat Sheet

• WAI-ARIA 1.1 Cheat Sheet

blog

WAI-ARIA 바르게 사용하기 5부: aria-hidden, ARIA-Modal, presentation 역할 및 none 역할 바르게 사용하기

레진 WAI-ARIA 가이드라인 소개.