單頁式應用中的無障礙設計

Transcript

1. 1
   Accessibility in SPA
   

   View Slide

2. 2
   / Kalan
   Frontend Engineer @LINE Fukuoka
   Twitter: @kalanyei
   Blog: blog.kalan.dev
   Github: kjj6198
   Facebook Svelte.js Taiwan
   

   View Slide

3. 3
   Accessibility in SPA
   

   View Slide

4. Agenda
   4
   WCAG / WAI-ARIA UI
   

   View Slide

5. Accessibility
   5
   Web Content Accessibility Guideline
   

   View Slide

6. Story Time
   6
   

   View Slide

7. Story Time
   7
   jason-memo.dev/posts/prefer-tab-over-space-for-a11y/
   

   View Slide

8. Story Time
   8
   https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb
   

   View Slide

9. 9
   W3C
   

   View Slide

10. 10
    W3C
    

    View Slide

11. 11
    W3C
    

    View Slide

12. WCAG: Web Content Accessbility Guidelines
    How to meet WCAG
    12
    P
    

    erceivable
    O
    

    perable
    U
    

    nderstandable
    R
    

    obust
    

    View Slide

13. 13
    Windows Narrator
    MacOS
    iOS
    VoiceOver
    Android TalkBack
    

    View Slide

14. View Slide

15. Demo
    15
    

    View Slide

16. WCAG
    16
    https://www.w3.org/WAI/WCAG21/quickref
    https://www.w3.org/TR/WCAG21
    

    View Slide

17. View Slide

18. 18
    20 1
    🇯🇵
    

    View Slide

19. 19
    🇺🇸
    

    View Slide

20. 20
    🇹🇼
    119.8
    5.1%
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. 24
    aria role
    WAI-ARIA
    

    View Slide

25. ARIA (Accessible Rich Internet Applications)
    HTML aria roles
    25
    aria-label
    aria-labelledby
    aria-haspopup
    aria-expanded
    aria-modal
    aria-valuenow
    aria-posinset
    aria-describedby
    aria-labelledby
    combobox
    

    View Slide

26. 26
    - ARIA
    

    View Slide

27. ARIA
    27
    UI HTML tag
    UI
    

    View Slide

28. button = + onclick
    28
    

    View Slide

29. 29
    input button a
    tabindex=0
    tabindex=-1
    

    View Slide

30. View Slide

31. View Slide

32. id
    32
    

    View Slide

33. aria-label aria-describedby
    33
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. aria-label aria-describedby
    37
    

    View Slide

38. View Slide

39. View Slide

40. modal
    40
    

    View Slide

41. overlay
    ESC modal
    modal
    modal
    body
    41
    Try to use it via screen reader
    

    View Slide

42. 42
    Bad👎
    

    View Slide

43. 43
    Good👍
    

    View Slide

44. combobox
    44
    

    View Slide

45. View Slide

46. View Slide

47. 47
    1.
    2. enter
    3.
    

    View Slide

48. View Slide

49. 1. role combobox
    2. aria-haspopup aria-expanded
    3. aria-controls
    4. role listbox
    5. role option
    6. aria-selected true
    49
    

    View Slide

50. Google
    50
    d
    

    View Slide

51. downshift
    51
    You need an autocomplete, a combobox or a select experience in your application and you want it to be accessible.
    You also want it to be simple and
    fl
    exible to account for your use cases. Finally, it should follow the ARIA design
    pattern for a combobox or a select, depending on your use case.
    

    View Slide

52. Tab
    52
    

    View Slide

53. 1.
    2.
    3. tablist tab tabpanel UI
    4. tabindex="-1" aria-selected="false"
    tab
    53
    

    View Slide

54. View Slide

55. Slider
    55
    

    View Slide

56. 56
    1. role slider
    2.
    3. tabindex
    4. aria-valuemin aria-valuemax aria-valuenow
    5. aria-valuetext
    6. aria-orientation
    

    View Slide

57. View Slide

58. YouTube
    58
    

    View Slide

59. Live Region -
    59
    

    View Slide

60. View Slide

61. role="status" aria-live="polite"
    role="alert" aria-live="assertive" + aria-atomic="true"
    61
    

    View Slide

62. Real Time Notification
    62
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. Client Side Routing
    70
    

    View Slide

71. gatsby - announcer
    popstate URL
    71
    

    View Slide

72. @reach/ui
    72
    https://reach.tech/
    

    View Slide

73. 73
    WCAG
    alt
    tag button, a
    e.g
    

    View Slide

74. Dev Tool - Edge
    74
    

    View Slide

75. View Slide

76. UI
    76
    MDN
    https://developer.mozilla.org/en-US/docs/Web/Accessibility
    

    View Slide

77. 77
    30 0 1 Svelte UI Day12 ~ Day20
    UI
    

    View Slide

78. UI
    78
    https://www.w3.org/WAI/ARIA/apg/patterns/
    

    View Slide

79. 79
    相
    

    View Slide

80. POUR WCAG
    80
    

    View Slide

81. View Slide