Ini adalah sesi pengenalan terhadap seberapa penting dan dampak implementasi aksesibilitas (Accessibility/a11y) di dalam suatu website. Materi ini tidak menjelaskan terkait checklist WCAG (standar internasional untuk aksesibilitas website), melainkan fokus pada contoh bagaimana penerapan yang baik dan tidak dari sudut pandang aksesibilitas beserta dampaknya bagi user yang bersangkutan.

1. Aksesibilitas
Website
Performa, manfaat, dan kontribusi untuk
seluruh lapisan masyarakat

2. Your potential
(web) user in
Indonesia
in million
Source: *Statista | ***databoks | ***PERTUNI; Prevalensi kebutaan di Indonesia =3% | *** ILO, Kemenkes
119,4*
YOU, in unfortunate future
-
3,5***
18,2**
0,6 ****
0,6****
x
y, temporary and situational

3. Temporary Situational
22,8 juta jiwa total difabel berdasarkan BPS (12,5%)

4. Kenapa ini
penting?
Akses ke ilmu, informal & formal
Akses ke informasi, hoax no no
Kesempatan bekerja
Kesempatan mendapatkan penghasilan
Menjadi independent & memiliki pilihan
Setara untuk

5. For today session Navigasi
Deskripsi
(Keyboard) Fokus
Based on:
Survey Digital Aksesibilitas di
Indonesia 2020

6. For today session
Voiceover – Mac/iOS

7. A11y
involves all
aspects
• HTML
• Navigation
• Semantic (non redundant div)
• Native element;
• Label & label association
• Alt Text
• Moving banner/carrousel
• Dialog and pop up
• Landmark
• ARIA
• CSS
• Font properties (size, colour,)
• Colour on hover
• Relative placement
• JS
• Keyboard Focus
• From browser to content
• Responsive drawer panel (DOM x
• Form (autocomplete,
• Control (radio button, check box,
• Dialog and pop up
• Keyboard trap

8. Some of
the current main
challenge
Gak tau informasi yg ada
digambar, apalagi kalau penting
alt=“”
Tombolnya gada labelnya, ga
ketauan apaan
<label>
Menunya mana? Ini filter?
Panjang amat menunya
<nav>, <aside>, <main>
Survey Digital Aksesibilitas di
Indonesia 2020

9. Some of
the current main challenge
Captcha!
Teksnya gak bisa digedein
CSS relative unit % em, rem,
Linknya gak jelas, tebak2an buah
manggis deh ini kemana
<a href= > Jangan read more cuk
Gak bisa lanjut page karena ada
pop up, gak bisa close pop-up, ga
tau yg mana tombolnya
Survey Digital Aksesibilitas di
Indonesia 2020
AAA

10. ALT=“Lorem ipsum”
attribute
PERFORMA
• Img is not loading due to the slow
connection
• Visitor masih bisa dapet konteks
halaman/artikel
• Bisa memutuskan nunggu atau move
on
BISNIS
• SEO friendly
• Menggerakan funnel AISAS
• Tidak ada informasi yg hilang
• Berpotensi kurangi ‘Bounce rate’
SOCIAL IMPACT
• Tunanetra masih bisa memahami
informasi di halaman secara utuh
Ps:
<img> decorative alt=“” (null)

11. CSS
PERFORMA
• Better render, faster load
BISNIS
• Better load ~ opportunity for costumer
retention and conversion higher
• Effective journey = better conversion
• Move AISAS funnel
SOCIAL IMPACT
• Tunanetra masih bisa dapet hidden
clue, eg skip link & hidden heading
• Lowvision/orangtua bisa ngegedein
teks sesuai kebutuhan
• Buta warna bisa browsing maksimal
Ps:
Refer to layout, position, colour, &
enhance focus
AAA

12. Many of the
problem can be
solved by….
Because well structured
HTML, CSS & JS code
sparks joy

13. S E M A N T I C
Native elements sebisa mungkin,
udah punya inherit role
minimalisr <div> & <span>
A R I A
Ngasih & nyambungin konteks,
Sedia instruksi, bisa keliatan & ga
keliatan. No ARIA is better than
Bad ARIA.

14. This sparks joy! www.amazon.com

15. This sparks joy!
Link to this slide video: Amazon.com Screen reader demo

16. This…………..

19. NAVIGASI
Link to this slide video: Shopee.co.id screen reader demo; a11y is not optimised yet

20. What can you do better?
1. Create a (hidden) header, OR
2. Create a list, with label

21. AFTER:
- <h2>
- <h3>
- <nav>
- Visibility:none
++
Navigation:
Link to this slide video: Shopee.co.id with a11y optimisation, screen reader demo

22. - <h2>
- <nav>
Navigation:
Heading=skimming.

23. BEFORE
AFTER
Home Logo
Link to this slide video: Shopee logo link screen reader demo 1
Link to this slide video: Shopee logo link screen reader demo 2 Shopee logo link screen reader demo 3

24. BEFORE
AFTER
Search box
Link to this slide video: Search Box screen reader demo 1
Link to this slide video: Search Box screen reader demo 2

25. Search box
BEFORE CORRECTION- Not the best solution

26. Contrast Checker | AppLighthouse | Dev tools
Tools to help
Tapi gak semuanya bisa
otomatis Ferguso
Site Improve | Chrome Ext AXE| Chrome Ext Dev tools
WAVE | Chrome Ext
Dst…

27. Lighthouse
result
sample

28. Tabbing pake keyboard | Hari keyboard nasional
Activate screen reader
Mute your speaker
Use audio order*
Disability Simulator | Chrome Ext
VoiceOver (Mac & iOS)
ChromeVox
NVDA (Windows ~ work best with firefox); JAWS (Windows)
Narrator (Ms Office)
Talkback (Android)
Sambil bikin
sambil cobain
langsung
Experience on your own~

29. Mau implement
sih….
Tapi..tapi…
tapi…
• Mulai menempatkan a11y
sebelum dan saat
development (bukan pas
diujung)
• Inaccessible and slow
websites for are a form of
cruelty
• Amal jariyah

30. Some tips
• Jangan kebanyakan implement <span> <div>; hati-hati sama
<svg>
• Gada native elements yang pas semanticnya? Taro role=
• When put role, find out the most proper aria atribut that
accompany it
• Role and tabindex harus di elemen yang sama
• Tombol dan control itu fardhu kasih label, bentuknya image?
Kasih aria-label
• Apapun yang mengandung hidden (HTML, css) gak masuk
a11y tree
• Test for audit? #1 Chrome #2 Firefox

31. Tiap-tiap dari front-end developers
(iya, kamu) adalah penggawa transformasi
digital menyeluruh bagi masyarakat.

32. Links
• WCAG guideline
• WAI-ARIA authoring practice
• List of ARIA 1.0 roles
• How screen reader announce
• A11y design pattern
• A11y.js library
• Udacity Web Accessibility
rahmaut@suarise.com
A11y ID