Ngobrolin Accessibility - Ngobrolin WEB ep31

1:43Tau gak kenapa mungkin teman-teman yang dikomen tau gak kenapa ditulisnya kayak gitu.

1:47A11y ya.

1:49Kalau bahasa Indonesia, baca apa ya?

1:51Aksesibilitas.

1:53Aksesibilitas kelihatannya ya.

1:55Jadi itu tuh nama, ada istilahnya ternyata.

1:58Itu namanya numeronik.

2:00Aneh ya.

2:01Jadi sama kan kayak internationalization juga gitu kan ya.

2:05I, 18, N.

2:07I, 18, N.

2:09Aksesibility a11y.

2:11Jadi 11 itu jumlah huruf yang di antara, yang di tengah antara a sama y,

2:17antara huruf pertama sama terakhir, itu ada 11 huruf.

2:20Makanya a11y.

2:22Ada namanya numeronim.

2:24Gak tau kenapa orang bisa aja ya mikir, bikin konsep kayak gitu.

2:28Kenapa itu dipakai dengan a11? Susah ya.

2:32Lebih gampang nulisnya.

2:34Gnya 2, Snya 2, atau 1, gitu kan.

2:42Cuma di dunia webdive atau tech pada umumnya,

2:46sebenarnya yang dibuat numeronimnya itu apa aja sih ya,

2:50selain aksesibility dan internationalization.

2:54Pada temen-temen, pada pernah denger istilah lain gak yang pakai?

2:59Ada sering.

3:00Kalau kayak nama company misalnya kayak automatic terus suka nulisnya a28c.

3:06Oh iya automatic.

3:08Ada lagi kalau apa ya?

3:12Ada terkait internationalization, localization, L10n.

3:19Pertama kali liat istilah itu tuh di WordPress dulu banget, dulu bingung banget.

3:24Kirain itu huruf i kan, kenapa ada leon, apa lion, apa apa.

3:29L10n, itu localization.

3:33Banyak juga ya ternyata ya.

3:36Gak banyak sih baru lima.

3:38Kalau Riza, R2a, R2a, R2a gitu aja.

3:43Kayak kapa pendek gak perlu numeron, apalagi namanya tiga hurufnya yang kayak S1a.

3:50Sama aja tuh tiga huruf.

3:53Buat apa?

3:55Oke, sebelum kita ngelantar kemana-mana, kita mungkin mulai dari apa sih itu,

4:05apa aksesibility di ranah web, di lengkupnya web gitu.

4:09Dan kenapa kita penting memperhatikan hal ini.

4:13Ini kita siasin.

4:15Nah, ini dia.

4:19Aksesibilitas.

4:21Nah, baca sendiri.

4:23Terus kita ngapain?

4:26Intinya adalah kita membuat aplikasi web ataupun website itu

4:35harus mementingkan user experience atau pengalaman pengguna.

4:42Dan pengguna itu juga kita gak bisa ekspektasi semua orang itu sama.

4:47Kalau kita ngomongin performa, kita menganggap semua koneksi internet itu bagus, lancar.

4:54Kita gak ngetes mungkin di kondisi yang agak sulit atau kadang nyala mati-nyala mati.

5:03Begitu juga di aksesibilitas.

5:06Kita tidak bisa menyamaratakan user, apakah user kita, asumsinya kita adalah user.

5:15Jadi kita mendesain web kita itu hanya untuk kita.

5:20Padahal sebenarnya banyak orang di luar sana yang mungkin dengan keterbatasan-keterbatasan,

5:27salah satunya disabilitas.

5:29Kesulitan membaca, misalkan dia rabun jauh atau rabun dekat.

5:34- Jadi kita harus pastikan. - Buta warna.

5:37Buta warna seluruhnya, buta warna sebagian juga ada.

5:40Misalnya ada beberapa orang gak bisa melihat biru, gak bisa melihat merah juga.

5:45Itu kategorinya banyak banget ya dari penglihatan, dari pendengaran,

5:52bahkan dari anggota tubuh atau gerak.

5:56Terus dari apa sih, kayak gangguan syaraf itu neurological kayak apa, epilepsi gitu.

6:03Terus apa, gangguan namanya kognitif ya, kemampuan memahami, ya banyak lah.

6:10Jadi itu sebisa mungkin kita bikin website ya, ya mungkin gak bisa 100% ideal,

6:17tapi apa, semaksimal mungkin mengakumodasi user seluas-luasnya lah.

6:23Sebentar, interupsi sedikit. Ini dari Rafki ada input bahwa audionya kecil.

6:28Audio siapa yang kecil? Apa kita tiga-tiganya?

6:31- Kita bertiga. - Salah satu.

6:33Kalau tiga-tiganya berarti dari mana ya, dari YouTube seperti?

6:36- Speaker. - Master, master.

6:38- Speaker. - Volume speaker mungkin.

6:41Kalau kita bertiga ya.

6:42Salah satu mungkin boleh disebutkan siapa, jadi kita bisa gedein.

6:45Oke, lanjut.

6:47Tapi jujur aja, jujur aja saya belajar accessibility.

6:50Kenapa saya harus belajar accessibility? Itu karena forced by law.

6:56- Bisa dituntut ya. - Buat website-nya.

7:00Terus kemudian company-nya itu punya salah satu requirement.

7:05Webnya harus low-loss accessibility standard.

7:10- AAA. - WCAG AAA.

7:15WCAG AAA.

7:17Jadi sudah, jadi project-nya requirement-nya itu.

7:24Karena dia situs bank dan kalau...

7:29- Bukan Indonesia. - International, jadi international bank.

7:34Jadi cabangnya di mana-mana seluruh dunia.

7:39Jadi accessibility itu penting.

7:44Jadi salah satu, nggak cuma security, nggak cuma privacy.

7:48Nggak cuma GDPR yang dipikirkan.

7:51Tetapi accessibility juga salah satu poin penting.

7:56Jadi ada performance, security, privacy, GDPR, dan accessibility.

8:02Jadi itu mungkin kayak, itu ya kan di negara-negara, di banyak negara lain kan.

8:08Apa sih, infrastruktur secara umum nih. Bukan digital doang.

8:14Infrastruktur kan ada aturannya. Kayak misalnya di banyak negara.

8:18Kalau kita bikin, apalah bank misalnya tadi contohnya Yvan.

8:21Atau bahkan bikin toko, atau bikin apapun yang diakses banyak orang.

8:26Kita itu harus menyediakan akses untuk defable.

8:30Misalnya kalau contoh fisiknya kan wheelchair ramp ya.

8:33Harus bisa diakses oleh customer atau user yang menggunakan kursi roda dan lain-lain.

8:40Terus itu apa, itu mungkin bisa bisnis.

8:43Kalau untuk layanan publik dari pemerintah jelas.

8:46Banyak negara yang misalnya apalah trotoar.

8:50Kayak harus ada jalur yang aman dilalui kursi roda lah, suna netra lah.

8:57Jalur kuningnya itu ya. Jalur kuning itu khusus suna netra.

9:00Bahkan pernah lihat sih kayak di beberapa negara Eropa.

9:04Itu kalau misalnya ke stasiun kereta, itu di handle-nya.

9:08Kayak di pinggirnya itu ada railing yang ada bril-nya.

9:14Jadi itu penggantinya, itu semacam alternatif signage system yang kita lihat secara visual.

9:21Nah, orang masyarakat yang punya gangguan penglihatan, suna netra.

9:26Bisa mengakses informasi yang sama.

9:29Jadi sekarang balik ke web kan banyak infrastruktur yang udah pindah ke digital.

9:35Termasuk ke web ya.

9:37Jadi itu hukum-hukum yang ada di luar sebetulnya kayak meneruskan aturan yang udah ada.

9:44Cuma kalau di Indonesia tuh penasaran sih.

9:46Ada hukumnya atau enggak sih selama ini di kita?

9:49Kayaknya belum ada.

9:51Kayaknya belum ada.

9:53Tahu soal hukum, ada nggak hukum untuk aksesibilitas di Indonesia?

9:59Bahkan yang fisik aja kalau di kita kadang ada trotor yang tiba-tiba bolong itu ada gallian.

10:03Kayaknya nggak apa-apa deh, nggak ada yang dituntut, nggak ada yang kenapa.

10:07Nggak juga sih, ada sih sebenarnya cuma nggak diterapkan.

10:09Cuma lebih menarik untuk menanyakannya, pertanyaannya adalah apakah ada di Indonesia hukum untuk aksesibilitas untuk web?

10:19Jadi web dan kontennya.

10:22Kayaknya ini juga belum ada.

10:24Ya kalau fisik aja belum kayaknya web lebih sulit.

10:28Karena di luar pun digital itu kan sebenarnya sebagai kelanjutan dari fisik.

10:32Jadi restoran atau bank atau toko harus menyediakan layanan tanpa mendiskriminasi customer yang punya kekurangan fisik.

10:41Nah di web juga gitu kan.

10:43Lebih tepatnya untuk tujuannya untuk equality ya.

10:46Jadi semua pengguna harus mendapatkan informasi yang sama.

10:51- Menyediakan akses ke semua orang. - Iya.

10:55Nah ini kalau kita ngomongin tadi, kita udah sempet sebutkan kan.

11:00Ada yang buta warna parsial, ada yang buta warna full, ada yang rabun jauh, rabun dekat gitu kan.

11:08Itu masih, mungkin masih bisa lah ya.

11:10Maksudnya teks kan kita bisa zoom in, bisa zoom out.

11:13Warna pun kalau hitam putih pun sebenarnya masih bisa dibaca gitu kan.

11:17Tapi coba bayangkan ada teman-teman kita yang tidak beruntung di luar sana,

11:21yang bahkan tidak bisa melihat.

11:23Nah aksesibility akan lebih berasa di sana gitu.

11:28Dengan sebuah aplikasi atau web yang kita bangun dengan aksesibilitas yang bagus,

11:34teman-teman yang bahkan tidak bisa melihat masih bisa menikmati aplikasi web kita gitu.

11:40Ya apakah dengan menggunakan, kalau misalkan form gitu kan,

11:43kalau kita tap biasanya apa yang terjadi ya.

11:46Ada property, tap index ya.

11:52Jadi kita harus menyusun bahwa, oh yang pertama...

11:56- Nggak semua orang bisa menggunakan mouse, contohnya. - Betul.

11:59Nggak semua orang bisa menggunakan mouse.

12:01Jadi mungkin dia pakai tab, abis itu misalkan masukkan nama atau username,

12:06abis itu dia tab password, abis itu dia enter.

12:08Kalau kita tidak dengan hati-hati mendesain sebuah form aja,

12:14yang kayak form login, ya kita bisa kehilangan satu user gitu.

12:19Dan ini luas banget sebenarnya apa, scope-nya ya.

12:22Bukan cuma yang Tuna Netra, biasa juga defabilitas bentuk lain.

12:26Misalnya orang yang apa, gerakan, nggak bisa bergerak atau apalah ada gangguan motorik,

12:31biasanya mereka pakai alat khusus entah yang pakai apa sih, mulut gitu.

12:35- Greenreader bukan? - Bukan.

12:37Ada namanya zip and puff device, itu dia pakai sedotan.

12:41Jadi di tube sama di sedot atau bahkan pakai gerakan mata,

12:45ada yang pakai gerakan kepala, ya macem-macem lah.

12:47Intinya navigasinya pakai tab, udah gitu aja sih.

12:50Jadi bahkan orang yang nggak defable sekalipun, misalnya kita pakai itu loh,

12:56mechanical keyboard atau apalah keyboard yang enak gitu, yang ergonomis,

13:00males kan udah keyboard-nya enak, kita harus gerak-gerak,

13:03mindahin tangan ke mouse lagi, power user.

13:07Jadi power user pun bisa sering navigasi pakai tab, nggak tahu gue doang.

13:12Atau power user lain, kayak males lah mindahin tangan udah tab-tab aja.

13:16Jadi itu macem-macem sih dari yang defable beneran,

13:19ya pasti itu kan lebih utama fokusnya karena mereka nggak punya pilihan

13:24sampai ke power user.

13:26Kalau misalnya fokusnya ngaco, kita bikin elemen yang nggak bisa difokusin

13:31atau urutan fokusnya ngaco, itu bakal nggak cuma ngurangin satu atau dua konsumen ya,

13:38calon konsumen yang mungkin, mungkin kan temen-temen mikir

13:41berapa banyak sih orang tunanetra atau apalah defabilitas yang pakai situs kita.

13:47Tapi kalau dijumlahin di total, ya itu bisa mempengaruhi banyak orang sih.

13:53Jadi bisa kehilangan banyak calon konsumen.

13:56Balik lagi ke ekualitas tadi ya, kesetaraan.

14:01- Sama ada tuh, ada link gue sambil dibuka, krep-krep effect, ya gimana event, sorry.

14:07- Ada hal yang simpel aja ibu saya, matanya sehat dan mata tua ya,

14:12jadi ibu saya sudah umur 70-an, dan mata tua,

14:16jadi kalau misalnya mau baca web aja, kadang dia harus begini loh,

14:19harus matanya micing-micing, itu berarti, dan saya lihat webnya ngapain sih,

14:23mama baca web yang background-nya susah, sapi masih aja mau dibaca gitu.

14:28- Ya pengennya, pengen baca itu gimana?

14:31- Nah, berarti itu kan kita harus bisa di zoom in, atau harus bisa dipinch?

14:37- Ya intinya, mobilnya, misalnya kalau dipinch, atau untuk di mobil,

14:43bisa font-nya lebih kontras, warnanya dengan background, dan font-nya lebih besar,

14:52bisa ada setting font, maybe, I don't know, ya.

14:55Makanya kalau kayak, kalau nggak salah mobil, atau yang saya tahu Safari ya,

15:01jadi nggak tahu, saya belum pernah coba di Chrome, dia ada mode reader mode kan,

15:06semua background-nya bisa hilang, terus langsung cuma kontennya aja yang dibaca.

15:11- Jadi kalau kontrasnya bagus, kekurangannya bagus?

15:14- Itu untuk asesibilitas mata tua.

15:16Dan itu sering lihat sih, ada beberapa UI artikel, misalnya biasanya artikel berita,

15:24tolong read, kita bisa ngatur size font-nya, jadi bisa plus-plus, bisa kita plus,

15:31bisa kita minus, nah lagi-lagi, kalau kita udah mikir aksesibilitas,

15:35ini mempengaruhi banyak orang, bukan cuma orang yang misalnya tadi kasus mata tua,

15:39atau matanya udah minus, tapi kan monitor orang size-nya lain-lain ya,

15:44kalau misalnya kita lihat, kita bacanya di, apalah, iMac yang gede banget itu,

15:49mungkin kita pengen ngecilin, karena terlalu besar juga sulit dibaca.

15:53Kalau kita baca di HP, terus misalnya ada mata tua atau minus,

15:58pasti kita pengen memperbesar, jadi di mana kita mempertimbangkan aksesibilitas,

16:03itu bisa bikin experience-nya lebih bagus buat banyak orang.

16:07Nah, itu kalau contoh fisiknya itu tuh yang di layar namanya cut effect.

16:12Jadi jaman dulu, konon ada beneran kasusnya, di mana gitu tahun 70-an,

16:17dulu trotoar kan semua nggak ada yang bagian landa gitu,

16:22terus dibikin, jadi ada bagian yang melanda yang di tengah itu, yang ditandain merah itu,

16:28biar orang yang pakai kursi roda bisa mengakses.

16:32Nah, itu tujuan utamanya, karena kalau orang pakai kursi roda kan nggak bisa dipaksa

16:36berdiri dulu, jalan dulu, kursinya diangkat turun.

16:39Tapi selain target utama itu, ternyata banyak orang lainnya yang terbantu juga dengan fitur itu.

16:47Jadi ya sebenarnya web sama aja prinsipnya kayak gitu juga.

16:51- Oke. Tapi di Indonesia, di Indonesia yang saya perhatikan ya, terutama di Jakarta,

16:57yang cut effect ini malah banyak-banyak, malah menjadi apa ya,

17:04ada beberapa trotoar yang sengaja ditaro pancang gitu.

17:08Iya, satu itu motor. - Biar motor nggak naik.

17:12- Biar motor nggak naik. Kedua, pendagang kaki lima, dia bawa barangnya lewat situ.

17:17Jadi, akhirnya pancang juga, akhirnya jadi nggak aksesibilitas.

17:21- Nggak bisa. - Masih itu trik, sih.

17:23Ngimbangin antara kebutuhan orang yang defable, misalnya kebutuhan yang kayak gitu tuh,

17:28kursi roda sama menertipkan ya itu biar apalah motor atau apa nggak naik.

17:33- Betul. Iya, kita kasih aksesibilitas yang bagus untuk jembatan penyeberangan,

17:39malah motor yang naik kan. - Iya, itu juga salah gunakan.

17:45- Nah, ini sulit di handle dari teknologi, karena ini human factor.

17:51- Namun ada juga selain ini loh, mungkin supaya untuk melebarkan wawasan teman-teman juga ya,

17:58nggak mesti juga harus kursi roda. Masih ada orang yang pakai tongkat, contohnya.

18:03Atau yang sehat sekalipun, kayak saya seorang yang punya anak, itu bawanya, apa itu namanya?

18:11Kereta dorong. - Stroller.

18:13- Stroller. Itu kalau misalnya... - Iya, kan ada contohnya stroller di...

18:16- Iya, kalau kita tinggalnya di hotel atau di... - Di mall, enak ya?

18:22- Mall yang nggak ada aksesibilitasnya, susah loh.

18:26- Ribet ya? - Ribet.

18:29Tapi ujung-ujungnya yang apa namanya? Tapi stroller nggak boleh naik eskalator ya?

18:36Harus naiknya elevator. - Oh, bahaya ya?

18:40- Bahaya. - Bahaya mental.

18:42- Makanya ada eskalator kan jadinya kan? - Itu buat bawa keranjang belanja biasanya kan.

18:47- Oh iya. Tapi boleh kan kalau itu? - Boleh lah.

18:50- Boleh ya. Oke. Nih, Audi ada, dia pakai ini, pakai salah satu fiturnya Android ya,

18:58kalau nggak salah ya, digital world viewing ya. - Iya, digital world viewing. Iya, betul.

19:01- Ini untuk mengurangi screen time ya? - Screen time.

19:06- Kalau udah batu banget mah nggak mumpan. - Nggak mumpan.

19:10- Kayak tuh nge-set apa, layar jadi greyscale, jadi hitam jati.

19:14Maksudnya ya kan, biar visual kan nonton video atau apa. - Biar males.

19:21- Jadi nggak menarik. Tapi, ada tapi ya kalau emang orangnya bandel.

19:25Jadi ngebaca, ngebaca artikel yang di safe di pocket atau apalah kan nggak ngaruh kan.

19:30Masa yang baca tetap oke-oke aja. - Boleh lagi, teknologi hanya bisa membatasi

19:35sampai tahap tertentu. - Kalau udah human factor, nggak bisa.

19:40- Saya juga biasanya handphone itu diset ke greyscale.

19:45Tapi akhirnya macamnya di laptop sama aja. Screen timenya pindah ke layarnya yang lebih besar.

19:51Dan di laptop kan biasanya ada tuh yang pakai apa namanya, istilahnya yang mengurangi blue light ya.

19:57Flux ya. Lama-lama udah nggak dipakai. - Human factor.

20:03- Nggak ngaruh. Nah, ini ada pertanyaan nih dari Muhammad Amrikom Tidar.

20:11Gimana cara kita measure good accessibility web sejauh ini baru kelihatan dari Chrome DevTool masih terbatas?

20:17Nah, kita ngomongin terus. - Nah, ini bagus nih bridging ke.

20:20- Bridgingnya pas ya. Kita ngomongin terus yang mana dulunya.

20:25- Mungkin WCAG kali ya. - WCAG dulu, ya. Jadi ada standarnya dari web accessibility

20:34- Jadi ini bagian. - Accessibility guideline. Web content accessibility guideline.

20:40- Ini yang bikin adalah WAI. WAI itu panjangan apa, lupa web accessibility, blablabla.

20:47- Inisiatif. - Inisiatif. Nah, ini kelompok kerja yang merupakan bagian dari si W3C itu.

20:55Kayaknya kita dulu pernah bahas ya soal standar. Jadi apapun yang di web, semua feature web itu, web API, blablabla,

21:02itu kan bukan milik satu perusahaan tertentu, tapi kayak standar POD lah yang mendiskusikan dan merumuskan spesifikasi.

21:12Yaudah, jadi sebenarnya ini soal accessibility, ini juga bagian dari si W3C itu. Jadi WCAG itu merupakan technical standards.

21:24Jadi kalau accessibility sendiri, itu ternyata web accessibility itu nggak bisa di, ya itu kan kita dituluh human factor,

21:33tergantung user kita siapa, tergantung feature-nya gimana. Jadi accessibility itu ya nggak bisa dimesure secara,

21:41itu cenderung subjektif dan nggak bisa dimesure secara seragam. Itu harus user testing, blablabla.

21:48Tapi ini bisa dibuat technical standard untuk minimal mengcover hal-hal yang bisa dimesure atau dikontrol secara teknis.

21:57Nah, makanya lahir si WCAG itu. Makanya tulisannya kan bukan web content accessibility, apalah misalnya,

22:06accessibility acceptance atau apa, tapi sekedar guideline, kayak panduan aja.

22:12Kalau misalnya kita ngikutin item-item di guideline itu, maka ya lebih besar kemungkinan situs kita accessible.

22:21Jadi kalau misalnya WCAG aja nggak bisa fail, itu ya hampir pasti nggak accessible.

22:30Walaupun udah ngikutin WCAG sepenuhnya, ya tetap ada faktor-faktor yang,

22:37faktor subjektif yang bisa bikin mungkin nggak accessible, misalnya contoh yang paling gampangnya,

22:42ada alt text, tapi alt text-nya ngaco. Ya pasti kan? Apa?

22:47Itu nggak accessible ya namanya, karena user yang livable nggak bisa mengakses seperti orang lain yang...

22:54Tetapi pas.

22:55Tapi kalau fail semua, itu kan bisa pas, tapi belum tentu accessible.

23:00Tapi kalau fail semua, ya udah jelas nggak accessible.

23:03Image, SRC, blablabla, ALT, gambar. Orang udah tahu itu gambar.

23:11Oke, ini guideline-nya ya, ada audio, ada caption, ada macem-macem ya.

23:19Ini technical standard. Jadi kalau misalnya hukum yang tadi Ivan bilang bisa dituntut, itu patokannya standard ini.

23:26Kan nggak mungkin ya kalau hukum mau oncarin si customer-nya satu per satu, ya hukum nggak bisa gitu.

23:31Harus pakai patokan yang objektif dan tertulis. Nah, ini fungsinya standard.

23:38Makanya waktu requirement adalah pass accessibility level AAA.

23:43Jadi itu kan ada level A itu. Level A, kamu scroll ke bawah dikit.

23:49Ya, untuk yang masih tentang captions.

23:52Kayak baterai nih, ada A, ada AAA, ada AAA.

23:55Jadi A itu yang paling dasar banget, AAA itu yang menengah, yang sedeng lah.

24:03AAA itu yang paling strict. Jadi dari paling linian, paling santai sampai paling strict.

24:10Nah, kalau bagi teman-teman yang umum, yang biasanya ini bisa pakai lighthouse juga, ada accessibility ya.

24:20Itu yang common, dia akan ngetes hal-hal yang common.

24:24Yang paling low hanging root lah, itu kayaknya agak keterlaluan kalau nggak ikutin.

24:29Tapi itu simple, kayak contrast warna, itu kan masuk lighthouse.

24:36Ya, text, terus image dan iframe juga harus ada title.

24:46Sekarang udah cukup banyak ya, tools-tools atau plugin yang bisa membantu.

24:55Misalkan kita bisa install eslin ya, kalau nggak salah ya, untuk memastikan bahwa misalkan image itu

25:04harus ada alternate text-nya, terus ada misalkan apa lagi ya?

25:12Banyak. Jadi kalau buat development process nih, pas lagi kita bikin nulis kodenya,

25:23itu rata-rata berdasarkan XAXA, itu ada library-nya sendiri buat deteksi common mistakes.

25:32Nah, ini kan Chrome extension buat ngecek website pas udah jadi, pas develop,

25:36ada eslin plugin accessibility, ada.

25:40Terus?

25:42Oh, jsaccess ini.

25:44Eslin plugin, lupa namanya apa ya?

25:47Eslin plugin accessibility. Nah, ini dia.

25:52Eslin plugin jsxaccessibility.

25:57Ini?

25:59Iya.

26:01Terus biasanya sih, kalau udah punya testing workflow, ya dimasukin ke testing workflow aja sebaiknya.

26:15Kalau belum punya testing workflow, sebaiknya punya.

26:19Jadi kayaknya apapun yang major nih, misalkan kita pake Jest atau Vitex,

26:24atau kalau misalnya itu nnya C-Press, ada semua sih.

26:31Nah, kalau misalkan kayak ini nih, ARIA roles ini, ini sebenarnya fungsinya buat apa?

26:37Nah, macam-macam sih itu. Itu kalau kita menggunakan elemen yang bukan seharusnya.

26:46Jadi, kan, sebaiknya kita utamakan elemen natif, maksudnya natif, itu built-in dari sono-nya.

26:54Semantik.

26:56Misalnya button, ya udah kita pake button aja.

26:58Jangan pake link.

27:00Jangan pake link, dikasih on-click, dikasih prevent default, jangan pake div.

27:05Jadi, sebisa mungkin pake button.

27:08Udah kita gak perlu ARIA role, se-simple itu.

27:10Tapi kalau misalnya, entah karena alesan apa, kita pake elemen lain,

27:16kita harus kasih ARIA role sama dengan button, biar assistive technology paham itu button.

27:22Contohnya untuk yang pake ARIA role itu yang kayak tab content atau accordion.

27:27Jadi kalau ARIA role itu tab content, role-nya yang parent-nya itu tab content,

27:36dan yang child-nya itu jadi tab item.

27:38Jadi, kita memberitahu alat assistive technology, oke, ini adalah sebuah komponen yang ada tab-nya.

27:48Bisa dipindah tab-nya.

27:54Di pencet-pencet, exact.

27:56Di nothing gate, bahasa di nothing gate.

28:00Itu keren sih, itu menarik konsepnya, karena biasanya kalau kita gak pake ARIA,

28:07kan kita mengkomunikasikan itu secara visual ya.

28:11Kalau misalnya kayak accordion, pasti atasnya tab-nya itu ada border-nya,

28:17ada kayak shading background warnanya secara visual.

28:21User rata-rata tahu bahwa kalau misalnya kita klik tab itu, kotak bawahnya, content-nya bakal berubah.

28:28Itu kan konseptual yang dikomunikasiin secara visual.

28:35Nah, itu cuma kalau screen reader kan gak bisa tuh, gak ngerti itu.

28:40Jadi, kita harus kasih tahu pakai ARIA role.

28:43Oh, oke.

28:45Itu ada contohnya ARIA role saya kasih di chat.

28:49Tab role, nah, jadi pakenya, karena tab-nya itu bisa jadi,

28:56yang bisa diklik itu mungkin div-nya atau heading-nya atau button-nya,

29:02kan kita gak bisa pastiin, tergantung desain, ya kan?

29:06Tapi kita bisa, jadi ada tabs dan tab list contohnya, ada tab.

29:10Jadi, bisa ngasih tahu bagian mana yang...

29:16- Clickable? - Iya, bagian dari kayak susunannya.

29:23- Fungsinya buat apa gitu, div itu kan kosongan kan, bisa dijadikan apa saja gitu kan.

29:29Kita mau jadikan button bisa, kita mau jadikan invisible, apa?

29:36Sesuatu yang tidak terlihat juga bisa gitu kan.

29:39- Cuma kayak apa ya? - Dan ARIA role ini,

29:42bisa didetek juga dideteksi sama si Lighthouse.

29:47Jadi, kalau salah satu bagian yang komon juga,

29:50yang teman-teman harus bisa pas dari Google Lighthouse test.

29:56- Menarik ya, jadi ARIA role ini bisa mengkomunikasikan perannya entah basic elements,

30:03kayak tadi itu button yang paling simpel,

30:05bahwa kalau div ini perannya seperti button,

30:08tapi bisa juga hal-hal yang konseptual kan kayak tabs kan,

30:12sebenarnya kita di HTML juga gak ada elemen khusus buat tabs,

30:15tapi biasanya itu dikomunikasiin secara visual bentuk tampilan akordeon,

30:21apalah tab interface, tab list ini bisa dikomunikasikan juga pakai ARIA,

30:28biar user yang gak mengakses secara visual tetap bisa paham.

30:33- Nggak banyak lagi sih, role-role, table contohnya, timer, toolbar, tooltip, terlalu banyak.

30:44- Nah, mungkin teman-teman yang belum tahu kenapa banyak ARIA-ARIA ini bukan ARIA rajasa atau ARIA-ARIA lain,

30:54bukan juga, ARIA ini kepanjangannya apa ya, lupa, coba ntar cari.

31:01Jadi intinya, ini adalah atribut khusus untuk aplikasi yang cenderung interaktif,

31:11sering kita bahaskan web dulu, dokumen doang nih, cuman artikel, text artikel, image, link, ya udah.

31:19Makin lama, makin banyak client-side interactivity, interaksi yang pakai JavaScript,

31:25kayak tadi akordeon di-clicktap, kita nge-clicktap, kontennya berubah.

31:31Nah, ini kan terlalu rumit untuk di-cover oleh elemen semantik begitu aja kosongan,

31:38jadi dibuatlah segala ARIA-ARIA-an ini untuk equivalentnya untuk screen reader atau assistive technology lainnya.

31:47Jadi kayak misalnya ada, tadi kan ARIA-Role, ada juga ARIA-Live, ARIA-Live itu untuk kayak misalnya ada pop-up,

31:54jadi pas awal di DOM gak muncul nih, tiba-tiba ada yang muncul, tiba-tiba ada elemen baru muncul.

32:01Kalau user yang pakai screen reader kan, kalau misalnya tabbing fokusnya udah lewat bagian itu,

32:08kan gak tau, tiba-tiba ada misalnya notifikasi, apalah, Anda akan otomatis terlockout setelah karena tidak active selama sekian menit misalnya,

32:22atau apa, tiba-tiba ada promo, potongan harga pas segi belanja atau lainnya.

32:29Nah, biar user yang pakai screen reader bisa tau, ada elemen baru muncul, itu pakenya ARIA-Live contohnya.

32:39ARIA itu panjangannya Accessible Rich Internet Application.

32:43Oh iya, mantap.

32:45Ini ada salah satu contoh web yang cukup, accessibility-nya cukup bagus, yang sering kali tidak sengaja saya ke pencet gitu ya,

33:01kalau misalkan teman-teman buka GitHub gitu kan, kalau pencet tab, itu dia ada, kita bisa navigasi tanpa harus menggunakan mouse.

33:09Nah, ini langsung ada skip to content, jadi misalkan kita lagi berada dimana, terus tiba-tiba saya mau lihat kontennya dimana gitu kan,

33:18itu juga hal yang sebenarnya penting, walaupun jarang kelihatan gitu kan.

33:27Dan lebih penting lagi, kalau pakai screen reader kan, soalnya itu kalau kita visual kan tinggal scrolling,

33:34walaupun pakai keyboard ya tinggal pencet panah ke bawah aja ya, kalau screen reader kan kuda baca satu-satu tuh,

33:40setiap ganti halaman, by default setiap pencet tab ini navigasinya dibaca satu-satu, product, solutions, blablabla.

33:48Nah, bosan kan kalau emang cuma pengen baca, user sudah masuk ke halaman sekian,

33:53cuma langsung pengen baca isi utama halamannya, ya dia bisa pakai skip to content itu.

33:59Ya, betul. Nah ini menjawab pertanyaannya dari Mohamad Ambrikom lagi yang barusan.

34:06Ya, salah satunya GitHub itu aksesibilitasnya bagus.

34:09Oke, kita lanjut lagi tadi bahas tentang tools, tadi kita udah bahas...

34:13Eh, di Indonesia tadi pertanyaannya, ada yang tau nggak?

34:16Di Indonesia ya, oh di Indonesia, ya mungkin ada yang tau aksesibilitas yang bagus.

34:21Aku tau, coba chat tolong jawab ya kalau ada yang tau.

34:24Klik BCA bagus nggak, klik BCA?

34:29Mau komen nih.

34:32Tapi kalau pengen lihat di luar Indonesia sih,

34:36kalau Indonesia kan kita nggak ada yang tau nih ya,

34:38cuma kalau yang di luar, pengen lihat contoh yang bagus itu website pemerintah,

34:45pemerintah beberapa negara yang emang punya divisi, kayak semacam divisi aksesibilitas digital.

34:52Kalau yang aku tau, UK sama Netherlands.

34:56Negara lain mungkin ada sih, cuma nggak terlalu meretin.

34:59Yang paling nyenangin dilihat tuh UK sama NL.

35:03Sambil cari ya.

35:06Oke, tadi kita udah bahas tentang tools ya.

35:12Kita balik lagi sebelum melihat contoh-contoh.

35:16Tadi kita bahas switch AIG, terus kita juga tadi bahas tentang Lighthouse.

35:22Ada beberapa aksesibilitas yang bisa kita improve di sana, yang long-hanging fruit, yang gampang gitu ya.

35:27Ada beberapa Chrome extension.

35:32Seperti X ini.

35:35Kan tadi ada yang tanya tuh gimana cara measure-nya.

35:38Kalau dalam proses development masih lagi ngoding, itu tadi udah ada di S-Link.

35:44S-Link.

35:47S-Link ada, terus digabungin, dijadikan satu sama test suite.

35:52Entah kita pake JS atau C-Press atau V-Test dan lainnya.

35:55Kalau pake storybook juga ada.

35:58Kalau pake storybook enak tuh.

36:00Ada panelnya sendiri yang menunjukin aksesibility issues.

36:06Menarik.

36:09Gimana-gimana, Yufan?

36:11Dari itu ada yang gue bisa tunjukin yang ada aksesibility-nya.

36:15Ada add-on-nya ya, berarti? Ini nggak otomatis di-install ya?

36:19Jadi harus cari add-on-nya dulu ya?

36:21Sebenarnya versi yang baru udah otomatis deh.

36:23Ada panelnya di bawah.

36:25Jadi by default, storybook tuh come with beberapa add-on gitu.

36:30Sekarang, kalau dari starter storybook yang offisial, itu udah ada sih langsung.

36:37Ya walaupun itu berupa add-on.

36:41Ini yang dari Project WordPress untuk storybook-nya si Gutenberg.

36:45Jadi ada komponen-komponennya, sudah ada storybook.

36:50Nah, bagi temen-temen yang belum tahu, WordPress punya block editor namanya Gutenberg.

36:57Jadi semua komponen yang ada di block editor itu ada di storybook ini.

37:01Itu ada tab aksesibility-nya, sudah ada plug-in-nya.

37:07Oh, sudah ada yang berhasil tes ya, testing-nya ya.

37:11Nah, kalau kita bikin yang nggak lolos itu, nggak lolos, cek kan ada di violations-nya.

37:17Memang ini pasti violations-nya lolos mula ya.

37:21Kalau nggak lolos, nggak bisa di-merge PR ya.

37:24Oh, iya.

37:28Oke, ini ada card, ada 15 tuh.

37:31Yang di-check adalah area role, area hidden element, area attribute, macem-macem ya.

37:37Banyak sekali.

37:40Nah, kalau website-nya udah jadi dipublish, kita nge-check conference-nya mah gampang.

37:44Itu tadi pake Chrome extension.

37:48Ada banyak ya, ini salah satunya aja ya.

37:53Ada X, ada Wave, terus Microsoft begin juga.

37:58Gue paling suka pakai yang Microsoft ya.

38:00Microsoft itu kelebihan-nya ya Chrome extension buat web ya.

38:05Cuma mereka punya toolkit juga buat native OS app.

38:10Nah, cuma belum pernah pakai sih, cuma lihat, cuma tahu aja.

38:13Jadi apa?

38:14Iya, install aja. Install aja masih bisa.

38:17Add to Chrome.

38:19Nah, ini kan untuk web. Nah, mereka juga punya buat kalau kita develop Android atau apa? Windows app.

38:26Jelas nggak ada buat iOS app.

38:31Oke.

38:33Coba aja tes salah satu.

38:35Tes salah satu.

38:37Iya, apa, situs apa gitu.

38:40Oke, ini ya.

38:43Ini ya, ini.

38:44Itu dia, iya. Karena nanti bisa fast-pass dia.

38:50Liatan nggak?

38:52Wah, nggak kelihatan ya.

38:54Bisa install Chrome extension ya?

38:57Bisa dong.

38:58Oh, karena Chromium.

39:00Chromium Base.

39:02Ini dia, ada error tuh.

39:09Ini dia error-nya.

39:11Nah, enaknya Mas Lisa bisa, kalau tadi dia bisa layering sama hasil webnya, jadi bisa lihat yang mana.

39:20Di highlight-nya biasanya.

39:22Di elemen yang bermasalah.

39:24Oke, oh, jadi spesifik di komponen atau di elemennya itu ya.

39:30Terus ada, yang nomor 2 kan ada tab stop tuh, di sebelah kiri.

39:35Bisa lihat, cek tab stopnya, sudah.

39:39Oke, tadi yang di tes website apa ya?

39:43Ini, web.dev ya.

39:47Web.dev tentang accessibility punya ada sedikit isu dengan accessibility.

39:53Tapi itu kelihatannya minor isu.

39:55Minor-minor ya, nggak ada yang merah-merah kan.

39:58Yang merah cuma 2.

40:00Need review.

40:02Color contrast.

40:05Oh, hitam ya.

40:09Kita lihat lagi ya.

40:12Share screen, window, ini dia.

40:16Warnanya agak gelap kali ya.

40:19Sama link-nya biru umu.

40:25Kurang terang.

40:27Nah, yang buat teman-teman mau belajar accessibility bisa ke sini ya, web.dev/learn/accessibility.

40:35Mengkap gratis.

40:37Mengkap gratis.

40:39Bisa diikutin aja, tahapan-tahapannya semua ada mulai dari HTML.

40:44Content, dokumen, keyboard focus, javascript, image, animation, typography, video, audio, form.

40:52Sampai assistive technology.

40:57Minimal konsep-konsepnya, paham dululah.

41:01Walaupun mungkin kalau ya prakteknya in reality nggak semua perusahaan atau tempat.

41:09Atau kalau kita freelance ya, kita nggak mungkin, mungkin kita nggak punya resource buat apa itu kayak manual accessibility testing ya.

41:16Oke lah, kalau nggak bisa nggak apa-apa, tapi minimal kita paham. Jadi kita paham semua konsepnya.

41:22Ini berguna juga sih kalau pengalaman pribadi aku adalah selain kayaknya dari pengalaman pribadi ya,

41:30kalau di Indonesia terutama, selain web.dev terutama yang ke front-end, front-end-an,

41:36itu kelihatannya orang lain nggak ada yang tahu sama sekali konsep ini.

41:40Jadi akibatnya apa kalau yang konkritnya, kita dapat dari designer itu kayak ukuran atau warnanya itu nggak lolos WCAG semua.

41:52Tapi kita bisa mengedukasi kenapa perlu gini, terus dampaknya misalnya kalau Lighthouse. Sekarang enak nakut-nakutin kolega atau teammate kita.

42:02Lighthouse kan emang punya kriteria aksesibilitas konon, suatu saat ke depannya itu bakal bisa jadi pertimbangan SEO juga, walaupun belum sih.

42:15Tapi itu apa, kita bisa bilang bahwa ini hal yang memang sudah dianggap penting oleh Lighthouse.

42:23Termasuk misalnya kenapa kita harus bikin elemen model atau pop-up dialog, itu kita harus ada fokusnya.

42:35Kadang kan designer atau mungkin anggota tim lain nggak suka tuh kenapa pinggirnya, kenapa luarnya ada bordernya.

42:43Kita jelasin bahwa ini emang penting. Terus misalnya kita mungkin teammate kita atau teman kita atau kita mungkin dapat kode yang bukan ditulis kita,

42:55legacy codebase yang pakai library yang nggak aksesibel misalnya, nggak bisa tab atau fokusnya ngacau semua, kita perlu nge-fix itu, kenapa kita bisa ngejelasin itu sih.

43:07Kepatnya minimal kalau kita udah paham dasarnya, kita bisa mengkomunikasikan itu dengan baik.

43:13- Oke, mantap. Oh iya, akhirnya saya menemukan salah satu contoh web yang di Indonesia yang aksesibilitinya bagus.

43:24- Hore, apa itu? Web nya saya sendiri? - Bukan, ini ada komunitas ternyata, komunitas aksesibilitas.

43:34- Bagus nih, kayaknya mereka tuh punya weekly atau nggak tau mingguan atau bulanan.

43:38- Ada meet up ya, mereka ada meet up ya. - Pernah jadi itunya soalnya, pernah ngomong di meet upnya.

43:48- Siapa yang sering ngomongin aksesibilitas di Indonesia ya? - Dan ini kayaknya apa?

43:55CEO atau apa atau leadernya, namanya Suarez ini namanya Mbak Rahma kalau nggak salah. Pernah jadi speaker di acara apa ya itu dulu.

44:07- Pernah, saya pernah satu panggung juga. - Yang jamannya Mas Johan, pas lagi online semua itu.

44:13- Ya itulah punya ada... - Uncon. Jadi kalau teman-teman mau tau lebih lanjut bisa gabung di komunitasnya alai.

44:28- Alai ID. - Alai ID susah ya.

44:32- Alai ID. - Ini ada diskusi sharing bulanan.

44:41- Nah ini ada YouTube-nya ya, karena online kali ya. - Dan kerennya mereka sih, maksudnya yang bagus.

44:51Hal yang bagus mereka itu beneran berurusan punya networking-nya sama user dan developer yang memang defabilitas.

45:03Jadi kalau kayak kita ini di sini kan kita ngeliat ini dari perspektif web dev in general ya sebagai seorang developer web

45:12yang paham tentang WCAG yang mana itu standard teknis, tapi kan ya bisa tau caranya pakai screen reader defaultnya Mac.

45:22Oke lah tau cara pakai voice over, cuma tetap perspektifnya beda sama yang di lapangan, dari perspektif user yang defabel beneran.

45:31Dan Suarice ini kerennya mereka emang punya jaring dengan user yang emang beneran defabel.

45:39Oke. Nah ini ada pertanyaan bagus lagi nih, gimana cara menyeimbangkan antara keinginan bisnis, kebutuhan bisnis dengan accessibility?

45:50- Ada yang punya pengalaman mungkin? - Punya, jadi begini, dari, kan accessibility itu luas ya, intinya dari sisi yang common mistake

46:05atau common pitfall mengenai implementasi accessibility kita sudah cover dulu deh, yang misalnya kayak area label, area text, area role,

46:16terus kemudian color contrast, nah yang paling sering mengenai design ya, mengenai design itu paling banyak slacknya itu dalam mengenai color contrast.

46:27Jadi pengennya warnanya begini, textnya begini, sebenarnya kalau mata sehat baca itu fine gitu, biasa aja bisa gitu, apalagi kalau misalnya phone-nya besar.

46:39Ya, misalnya bagian yang masalah itu heading, tetapi kalau phone-nya yang kecil mungkin jadi masalah dan ditangkap oleh sama WCAG checker,

46:49accessibility checker oleh tools-tools mana gitu ya.

46:53Kalau bagi saya, waktu kasus saya, saya langsung ini, apa namanya, langsung bilang terus terang, ini desainnya color contrast-nya nggak pas dengan accessibility test-nya gitu, apalagi khusus untuk...

47:15Saya bilang ini saya udah contohin pakai Lighthouse ini kena nih sama Lighthouse, jadi kalau kena di Lighthouse nanti kena juga di search console,

47:28bakal muncul tuh nanti warning-nya di search console, dan kebetulannya dia situs berita ya, jadi situs berita dan CEO merupakan...

47:36KPI.

47:38KPI penting gitu ya, jadi hal yang penting secara bisnis, jadi saya bilang accessibility itu mungkin sekarang belum masuk dari sisi CEO,

47:47tapi kapan masuk saya nggak tahu, namun kalau sudah bisa dideteksi oleh Lighthouse dan sudah masuk ke search console, itu sudah bisa menjadi dalam waktu dekat,

47:59soalnya bisa jadi. - Suatu hari saja jadi pertimbangan. - Kenapa? Kita cuma selisihnya sedikit gitu, maksudnya antara orange color dan putihnya dia itu kurang matching gitu,

48:11tinggal dikit aja di adjust, mau nggak pakai color orange yang slightly different atau pakaiin, mungkin dia di, apa namanya, di...

48:25kan ada, kemarin kita bahas color ya soal lightness dan saturation, lightness-nya diturunin sedikit, misalnya supaya text-nya lebih kontras,

48:37jadi karena secara score dari sisi color contrast dia cuma diambang batas gagal, ya dinaikin dikit aja gitu, tapi dari sisi designer,

48:52wah ini sudah approve design, terus kemudian kalau misalnya diroba harus approve lagi, ya udah, do your job, do your job.

49:01Jadi saya kasihnya begitu, jadi dan akhirnya mereka ngasih tau reasoning-nya saya itu dan dibawa dan akhirnya di approve, ya udah.

49:13Itu secara kasus yang kita menang secara developer, mau ngasih tau, namun kalau awnan-nya keke, ya sudah lah.

49:24Yang penting untuk hal yang lainnya pas, kan ada banyak ya, untuk hal yang lainnya pas, jadi bayangkan sebuah link aja itu ada state-nya loh,

49:40hover state, visited state, kemudian default state, active state, itu ada banyak.

49:47Jadi jangan sampai hal-hal yang hover state, active state, visited state-nya itu nggak accessible juga, hal-hal yang seperti.

49:56Jadi masih ada bahasa Eka-nya, low-hanging fruit yang lain, yang bisa kita penuhi, jangan terpaku sama satu hal yang gagal.

50:07Kalau misalnya ada satu atau dua point, ya oke lah, maksudnya jangan sampai hal itu yang menyebabkan kita berantem dan akhirnya web-nya nggak maju-maju.

50:23Jadi bisa, banyak-banyak hal yang bisa kita perhatikan yang lain.

50:29Dan sebetulnya kita sebaiknya bisa mengedukasi kolega atau tim kita bahwa ini nggak bersebrangan juga sih antara kebutuhan bisnis sama aksesibilitas.

50:44Karena gampangnya kan kalau yang kasus ekstrim, Ivan tadi kalau nggak aksesibel malah dituntut, itu kan jelas, itu ada kepentingan.

50:51Itu jelas, itu dari sisi desain sudah confirm, memang dia sudah tes, jadi udah nggak ada masalah di sana.

50:59Itu ma, justru dari atasannya yang mengharuskan kan, itu udah nggak ada masalah sebenarnya.

51:04Ya maksudnya itu kan kasus ekstrim semua faktornya ya, maksudnya semua elemen aksesibilitas.

51:09Nah terus yang kedua, nilaiar kedua masih ekstrim juga, ya makin banyak yang bisa menggunakan situs kita dengan enak, dengan nyaman,

51:17kan makin banyak, apalah makin banyak yang beli atau makin banyak yang baca, apalnya itu akan membantu makin banyak kita juga.

51:24Nah itu bisa. Terus yang ketiga, apa, makin confirm ke WCAG minimal, makin bagus Lighthouse Core kita.

51:33Ya itu layer-layernya. Nah terus keempat ya pasti kalau yang udah, kalau apa sih, syarat aksesibilitas yang lebih rumit,

51:42ya butuh waktu misalnya. Nah tapi kan kadang waktunya ya sebenarnya waktu developmentnya tetap nggak butuh apa ya, nggak butuh perubahan yang ekstrim.

51:54Kayak dari hal simple, misalnya kita sebagai developer, kita pakai aria rolling tepat, kita pakai elemen yang semangatik.

52:03Itu kan ya sebetulnya nggak nambah waktu development yang terlalu banyak.

52:08Nah tapi mungkin ada, bakal ada masalah kalau itu tadi kode yang nggak kita kontrol atau legacy code.

52:17Ya kalau itu sih subjektif ya, tergantung misalnya kita bisa negol bahwa kalau lagi ada,

52:25kalau lagi nggak banyak kerjaan, kita bisa minta waktu sedikit untuk memperbaiki lah refactor itu sedikit.

52:31Itu kan nggak bertentangan yang sampai nggak ekstrim yang kayak ngorbanin misalnya kita jadi nggak bisa release ini sama sekali karena belum sepenuhnya aksesibel.

52:41Mungkin ya jangan se-ekstrim itu tapi sebisa mungkin kita integrasiin kebutuhan aksesibilitas sedikit-sedikit dan tetap dengan mendukung kebutuhan bisnis.

52:54Ya tergantung ini juga kali ya, kalau saya sih pernah mengalami tapi bukan dari ranah web juga,

53:06cuman lebih ke konten. Saya punya beberapa online course video kan, terus tiba-tiba ada yang beli dan dia japri katanya dia itu tidak bisa mendengar.

53:19Jadi butuh caption bahasa Indonesia. Dan sekarang sih terakhir saya lihat di YouTube itu atau generated caption yang berbahasa Indonesia itu udah cukup bagus.

53:30Terutama yang teknis ya, kita ngomongnya nyampur-nyampur kayak misalkan note, itu kan bahasa Inggris. Itu dia bisa nangkap itu.

53:36Tapi dia bisa paham, oh nice.

53:37Bagus, udah bagus sekarang. Tapi beberapa tahun yang lalu masih ngaco, akhirnya karena permintaan satu orang ini dan dia bilang temen-temen saya yang disabilitas juga banyak.

53:48Banyak yang bakal beli katanya gitu kan. Akhirnya ya udah, mau tidak mau saya harus mengeluarkan uang lebih untuk hire orang untuk bikinin subtitle.

54:00Mulia sekali.

54:02Tapi kan itu pertimbangan bisnis juga, ada unsur pertimbangan bisnis.

54:10- Salah satunya itu namun bagi saya itu adalah hal yang benar untuk dilakukan.

54:18- Iya maksudnya karena kita tidak berada di posisinya dia, kita nggak kepikiran itu gitu.

54:24Ngapain sih pakai subtitle segala gitu kan. Kita asumsinya orang itu ya udah belajar-belajar aja gitu.

54:29Kita nggak memikirkan bahwa oh dia ada kekurangan ini, ada kekurangan itu.

54:34Jangan-jangan nanti videonya, ilustrasinya mungkin kurang besar atau gimana. Kita nggak mikirin kalau tidak kejadian seperti tadi gitu.

54:42Akhirnya itu yang membuka mata, oh ternyata ini butuh gitu.

54:46- Nah terus gitu ada efek. - Nah kalau ada design slide, presentasi aja harus mikirin yang paling belakang.

54:56- Yang nonton dari HP.

54:58- Yes, yang nonton dari HP. - Terus slide-nya kan bisa, misalnya slide-nya di posting nih di Youtube atau platform lain.

55:06Kadang atau apalah di platform slide apapun, kadang kan ada orang baca dari HP, berarti harus kelihatan.

55:14Dan itu card cut effect itu berlaku lagi tadi, misalnya videonya di caption nih, video kursusnya di caption.

55:20Terus kadang orang lagi di tempat umum, di luar, males ngeluarin earbud atau earbudnya atau baterai habis atau apalah.

55:27Kan sekarang udah ada captionnya, orang bisa ngeluarin HP, bisa ngereview, bisa lihat kursusnya.

55:36Jadi itu kan pertimbangan bisnis yang positif juga ya, itu jadi feature product.

55:41Nah tapi itu tadi kisah sukses kan, kalau aku ada kisah gagal, gagal tanda kutip.

55:48Jadi ngerjain website yang, platform yang banyak content user generated, termasuk image, user bisa nge-upload image.

55:57Nah ini kan agak tricky ya, sekarang kalau kayak Twitter atau mungkin Facebook ya, pokoknya kalau website besar,

56:05itu kan bisa nambah feature menyuruh user mendeskripsikan image-nya, biar ada alt text yang akurat.

56:13Cuma kan itu feature terpisah sendiri, gak dapet buy-off untuk nambahin feature itu.

56:22Yaudah akhirnya mau gak mau, kurang accessible di bidang itu.

56:30Jadi yang image yang pertimbangan lainnya sempet sih kepikiran apa misalnya auto, pakai machine learning gitu, nge-parsing.

56:40Sekarang bisa AI generated, bisa langsung.

56:44Nah cuma kalau yang free, nyari yang free, kayaknya gak ada yang akurat, sulit.

56:52Nanti malah kalau misalnya isinya ngaco, kayak banyak text-nya kan, itu screen reader-nya bakal ngebaca semua dan gak bermakna.

57:01Dan itu malah tambah gak accessible ya, merusak UX. Akhirnya disepakatin semua pake alt text-nya empty string aja biar di-skip oleh screen reader.

57:11Jadi kurang accessible, tapi minimal gak memperburuk experience buat screen reader user.

57:18Kalau gak salah yang pernah denger, Chrome bisa ada auto, misalnya untuk screen reader dia bisa bacain kalau misalnya kita gak ada alt text-nya, dia bisa ngasih tau itu image apa, by core.

57:33Saya lupa, malah pernah denger, tapi Chrome-nya mana ya.

57:37Sanggih juga ya, dia bisa menebak, ini kira-kira gambar apa gitu ya? Gambar menyerupai kotak gitu misalkan.

57:44Iya betul nih Damar, sayangnya YouTube live belum ada, belum bisa, belum mampu ya.

57:52Kalau live belum, yang rekaman, ini misalkan kita kan lagi live, mungkin 2-3 hari berselang itu udah ada versi rekamannya, itu bisa dinyalain.

58:02Bisa, oh.

58:04Dan hasilnya lumayan.

58:06Google Meet aja, udah ada caption-nya kan.

58:08Oh iya, tapi bisa bahasa Indonesia?

58:10Tapi gak co. Ada linknya tuh.

58:15Oh coba share.

58:17Mari kita share.

58:19Jadi ada image description on auto off dari Google, Chrome.

58:24Cuma belum pernah nyoba saya ya, cuma pernah denger.

58:27Image description are available in Indonesia.

58:31Wow.

58:32Wow, nice.

58:33Gimana caranya? Windows, shift F10.

58:37Oh gak bisa?

58:41Ini untuk yang image yang gak ada description-nya, dia bisa bacain.

58:48Jadi kalau kita tap ke image itu, voice over, dia bisa bacain itu apa.

58:53Jadi harusnya yang ada gambarnya gitu ya?

58:55Khusus image description kan?

58:58Oh iya iya iya.

59:00Belum pernah nyoba saya, belum pernah nyoba nanti.

59:03Ini gambar bukan?

59:04Bukan ya? Oh iya ini gambarnya.

59:06Shift F10.

59:08Bukan harus diaktifkan dulu.

59:12Oh diaktifkan dulu. Cara aktifinnya gimana?

59:14Itu?

59:16Turn on image description for all pages for just one specific page.

59:20Open context menu.

59:23Open context menu-nya.

59:25Terus kemudian.

59:27Terus?

59:29Gak ada kan, langsung kan?

59:32Ini langsung, search image, gak ada.

59:37Oh berarti, mungkin harus diaktifkan dulu.

59:39Click kanan ya?

59:41Ini klik kanan ya? Coba klik kanan.

59:44Udah tadi, ini klik kanan.

59:47Gak kelihatan kita kalau masukin.

59:50Oh gak kelihatan ya?

59:52Ya gak muncul sih.

59:54Ya udah, coba aja teman-teman kalau ada yang bisa.

59:57Siapa tahu ada yang bisa?

59:59Share entire screen.

1:00:02Nah kalau share entire screen baru bisa.

1:00:05Screen section dulu.

1:00:08Nah ini klik kanan.

1:00:11Saya ke ini dulu.

1:00:13Setting accessibility-nya masuk ke setting dulu.

1:00:17Chrome setting, accessibility.

1:00:20Setting, accessibility.

1:00:24Terus ada image description.

1:00:28Ada gak tulisannya?

1:00:30Accessibility, live caption, caption preferences, show quick highlight.

1:00:38Mana? Gak ada.

1:00:40Gak ada image description?

1:00:41Gak ada, belum ada. Di tempat baru live caption.

1:00:46Mungkin beda kali ya?

1:00:48Gak, ini chrome juga belum ada.

1:00:50Live caption, caption preferences, show quick highlight, navigate page width, text cursor.

1:00:57Ada opsi ini, add accessibility features from chrome web store.

1:01:03Apa harus install extension?

1:01:06Ya sudah, teman-teman coba sendiri aja.

1:01:11Kapan-kapan lagi?

1:01:13Mungkin gak ya, mungkin aja.

1:01:19Perusahaan sosmed yang push user untuk menambahin alt text sekalian buat train.

1:01:25Kayaknya di Facebook mereka mencoba untuk otomatis ya.

1:01:30Mungkin blog image.

1:01:32Justru kalau Facebook kebalikannya kayaknya, user gak disuruh nambahin alt text.

1:01:37Facebook-nya punya AI sendiri kayak indies photo, titik 2, one human, one house.

1:01:44Jadi dia memudahkan kita untuk masuk dengan cepat gitu kan.

1:01:48Upload image dengan cepat biar banyak kontennya gitu kan.

1:01:52Dan dia coba mengantisipasi dengan cara bikin AI-nya, termasuk juga translate kan.

1:01:58Otomatis ditranslasikan.

1:02:00Nah, terus kalau balik ke pertanyaannya, gak tahu.

1:02:03Twitter sih yang selama ini kayaknya ada feature alt text.

1:02:08Twitter punya bikin AI internal atau enggak ya, gak tahu.

1:02:11Ya mungkin aja.

1:02:13Atau jangan-jangan dijual.

1:02:15Teori konspirasi di encourage world ke third party yang bikin AI.

1:02:22Gak tahu sih dulu itu.

1:02:25Betul.

1:02:27Intinya perbincangan malam ini adalah untuk teman-teman aware aja gitu.

1:02:33Bahwa ini penting dan sebenarnya banyak hal-hal yang kita belum lakukan,

1:02:43bisa kita lakukan dengan apa ya, gak perlu nambah tool semacam-macam gitu ya.

1:02:48Tinggal tambahin misalkan.

1:02:50Mungkin butuh ada semacam checklist-nya kali ya.

1:02:53Oh kalau image itu harus ada alt text, pengingat gitu.

1:02:56Checklist-nya ya WCAG tadi.

1:02:58Itu literally checklist kan dengan dibantu semua extension tadi.

1:03:02Jadi kita tinggal ngikutin aja.

1:03:04Mulai dari Lighthouse lah yang udah pasti kita jalanin kan.

1:03:08Lighthouse untuk ngecek performance.

1:03:10Nah disana ada accessibility ya udah diikutin aja gitu ya.

1:03:14Tapi Lighthouse sendiri ada penilaian accessibility-nya gak?

1:03:18Ada kan?

1:03:19Ada.

1:03:20Ada kan ya?

1:03:21Ada dong.

1:03:22Ah 90, 100 gitu kan.

1:03:25Ada, ada score-nya dan ada penjelasannya juga nih.

1:03:28Coba buka link-nya.

1:03:31Nah ini dia.

1:03:39Perhitungan scoring-nya juga ada, bisa kita baca.

1:03:43Terus key tips-tips-nya juga ada.

1:03:46Jadi bisa mulai dari sana?

1:03:49Kalau misalkan.

1:03:50Yang atas tuh audit scoring, coba klik.

1:03:53Oh ada nilainya ya.

1:04:01Nah terus udah ada penjelasannya juga.

1:04:07Udah kita tinggal ngikutin aja sih ini.

1:04:09Enak.

1:04:10Yang tidak kalah penting adalah mulai dari semantik HTML dulu.

1:04:15Itu yang paling fundamental lah.

1:04:21Jangan sampai button kita pakai kalau tidak terpaksa banget.

1:04:28Kalau kecil tapi impact-nya besar.

1:04:31Sebenarnya ini bukan cuma accessibility tapi kayak SEO dan lain-lain.

1:04:35Termasuk kayak struktur heading.

1:04:37Itu kan itu ngaruh buat accessibility juga.

1:04:40Karena screen reader kan ngebaca itunya heading-nya.

1:04:43User navigasi berdasarkan H1, H2 itu ngaruh ke accessibility, ngaruh ke SEO juga.

1:04:51Jadi mulai dari situ.

1:04:53Ini sekedar 3 key questions, 3 via questions buat teman-teman.

1:04:58Bisa jawab nanti di kolom komentar.

1:05:00Jadi diskusi biar buat teman-teman mikir.

1:05:07Untuk actionable element apakah lebih bagus pakai link atau button?

1:05:19Misalnya kita mau next atau previous.

1:05:31Kalau element itu diklik ada action yang terjadi.

1:05:34Itu pakai link atau button.

1:05:36Dan apakah link yang di-style sebagai button atau button yang di-style sebagai link?

1:05:45Coba nanti teman-teman bisa dilihat dari sudut pandang accessibility.

1:05:50Button yang dibungkus ke dalam element marquee.

1:05:55Element wing.

1:05:59Ini bukan kita kan yang jawab.

1:06:01Harus ketik jawab.

1:06:03Makanya marquee hilang itu salah satunya adalah kurang accessible ya.

1:06:07Karena jalan.

1:06:09Cuma ini jadi inget sih soal bahasa, soal kata-kata.

1:06:12Kita webdev kan punya definisi sendiri link itu apa, link element itu apa, button element itu apa.

1:06:20Itu kan hal teknis di webdev.

1:06:22Link itu maksudnya angkor link ya?

1:06:24Angkor.

1:06:26Angkor element, button itu apa.

1:06:28Tapi kan dari segi designer, dari segi developer lain.

1:06:34Mungkin developer back-end, dari segi tech lead gitu.

1:06:38Itu kan mereka punya definisi sendiri button itu apapun yang bentuknya.

1:06:44Misalnya kotak gitu ada backgroundnya.

1:06:46Nah, jadi itu kalau kita punya pemahaman kuat tentang itu kita juga,

1:06:52kalau misalnya tiket nih, add a button.

1:06:54Nah, kita harus tahu kapan itu maksudnya button beneran,

1:07:00kapan maksudnya link.

1:07:02Jadi soal bahasa, kata-kata yang digunakan.

1:07:06Belum kalau kita bikin design system nih.

1:07:08Kita bikin UI component library entah untuk internal atau buat dikomsum publik.

1:07:15Kita juga harus bikin kata-kata yang tepat kan.

1:07:19Kadang kita butuh link yang di-style seperti button.

1:07:22Jangan di-wrap juga, nggak lucu.

1:07:24Kita cuma butuh visualnya button tapi sebetulnya itu link adakalanya.

1:07:29Atau mungkin kadang ada sebaliknya sebetulnya button tapi secara visual ditampilin sebagai link.

1:07:35Nah, kita harus mikirin itu pas bikin nama UI component.

1:07:39Tapi harus ada penjelasannya dan coba nanti teman-teman yang nonton video ini jelasin

1:07:47dan apa hubungannya sama accessibility.

1:07:49Kenapa?

1:07:51Udah kayak dulu sen aja nih, ada 13 nya.

1:07:53Ini ada, udah ada yang jawab tapi belum ada penjelasannya.

1:07:55Link di-style sebagai button.

1:07:57Link di-style sebagai button.

1:07:59Ada shorthandnya, poinnya dipikir aja elemen apa yang cocok buat do something,

1:08:05melakukan sesuatu, elemen apa yang cocok buat go somewhere, pergi ke suatu tempat.

1:08:10Shorthandnya itu sih.

1:08:12Betul.

1:08:14Kisih-kisihnya dari bu dosen Eka.

1:08:19Kita udah jadi dosen semua.

1:08:22Gua biasa bolos terus, sekarang jadi dosen ala-ala.

1:08:27Oh iya, bener-bener.

1:08:29Wah itu sudah menjawab sekali itu.

1:08:32Oke, oke, oke.

1:08:35Ada lagi yang mau kita bahas?

1:08:38Itu terakhir yang testing library.

1:08:41Testing library.

1:08:43Ini adalah library untuk alat bantu testing.

1:08:47Mas Kenzie Dots.

1:08:49Kenzie Dots yang bikin.

1:08:51Itu yang serba bisa ya, apa aja dia bikin.

1:08:53Jadi, sedikit aja ya.

1:08:57Khusus misalnya kita lihat contohnya yang React testing library-nya yang React.

1:09:02Tapi bukan hanya untuk React ya.

1:09:05Saya hanya pakai contoh untuk React aja, simple.

1:09:08Untuk di penjelasan ini.

1:09:10Accessibility juga bisa dijadikan bagian dalam unit testing.

1:09:17Tadi kan kita sudah punya eslin untuk ngecek kodenya kita.

1:09:21Terus kita juga bisa pakai browser testing dengan extension untuk ngecek accessibility.

1:09:29Dan juga bisa pakai accessibility testing dengan menggunakan apa tadi?

1:09:35Yang handbook tadi ya?

1:09:38Storybook.

1:09:40Storybook, bisa juga pakai test.

1:09:42Kita juga bisa menambahkan unit test dengan mengecek elemen-elemen accessibility.

1:09:51Contohnya kita mau, misalnya kita mau ngetes sebuah button.

1:09:59Dan daripada kita mengambil ID dari button itu, atau mengambil class name dari button itu,

1:10:05kenapa nggak kita ambil area label dari button itu?

1:10:09Jadi sekaligus mendeteksi apakah kita punya button sudah pas accessibility,

1:10:19dan juga bisa ngetes unit testing kita untuk user behavior-nya.

1:10:23Contohnya itu.

1:10:25A white screen find by role.

1:10:31Jadi daripada kita find by class name, atau find by class name heading,

1:10:39header title, contohnya, mending kita find by role heading.

1:10:46Jadi kita sudah accessibility by standard.

1:10:51Itu kayak encourage, secara nggak langsung kayak mendorong kita ya.

1:10:55Selalu pakai entah elemen yang semantik dari sono-nya,

1:10:58atau kalau nggak semantik ya gimana caranya kita ngakalin pakai area role,

1:11:02atau apalah, biar yang penting bisa ditemukan heading yang tulisannya itu.

1:11:07Hello there.

1:11:08Betul. Jadi by base, by standard, kita sudah pakai accessibility, bahkan untuk unit testing-nya.

1:11:17Jadi lebih ini lagi, lebih advanced lagi kita ngetes-nya, jadi lebih baik.

1:11:26Testing library ini salah satu tools yang mengencourage kita untuk menggunakan area label,

1:11:35or find by role, model-model gitu ya, sekaligus berarti ya.

1:11:40Daripada hanya ngetes untuk tampilan saja, ini juga dites untuk apakah di halaman tersebut,

1:11:47atau di komponen tersebut sudah ada heading-nya belum.

1:11:49Sudah ada role sebagai button-nya, kalau kita bikin form, ada button-nya atau nggak.

1:11:55Bisa sekalian dicek juga kan, nggak hanya ngecek kayak by class name atau by ID,

1:12:00ternyata dia nge-link.

1:12:01Karena class name mungkin bisa berubah.

1:12:03Kalau class name-nya itu generative CSS, NGS, boosing, boosing, nggak tuh.

1:12:08Terus kalau ID bisa berubah, tetapi role...

1:12:13Funksional.

1:12:14Funksionalnya di dalam elemen itu tidak berubah kan fungsinya gitu.

1:12:20Karena kita ngetes user behavior dan fungsi dari elemen yang kita buat.

1:12:24Jadi lebih tepat menggunakan accessibility.

1:12:28Justru lebih memudahkan kita juga ya.

1:12:31Daripada kita pakai data test ID, data test ID, pusing kita harus mikir nama nih.

1:12:36Kan sekarang kita udah nggak usah mikir nama, tapi lebih dari fungsinya.

1:12:40User cari button untuk di-click.

1:12:42Nah itu kan sesimple itu.

1:12:44Kan banyak orang yang mengeluhkan kalau testing itu berarti kita harus maintain dua code kan.

1:12:52Code testingnya dan code implementasinya kan.

1:12:55Kalau misalkan gimana caranya supaya code testing kita nggak banyak berubah.

1:12:59Ya salah satunya dengan menggunakan role dan lain-lain yang juga diterapkan di testing library ini ya.

1:13:06Jadi nggak perlu terlalu banyak perubahan.

1:13:08Kalau misalkan class name-nya berubah atau bertambah atau ID-nya berubah.

1:13:12Yang penting, tapi behavior-nya kan tetap...

1:13:15Tetap sama.

1:13:16Kalau elemen itu kan button atau heading, nggak berubah.

1:13:22Jadi lebih spesifik, eh lebih general, bukan lebih spesifik.

1:13:26Kalau ID lebih spesifik.

1:13:28Data test ID lebih spesifik.

1:13:30Makanya kalau shape dari elemen berubah, text-nya berubah.

1:13:34Jadi kayak itu ya, jadi kayak snapshot testing ya.

1:13:38Ya itu gue paling nggak suka.

1:13:40Stream manual.

1:13:42Itu buat kemalas aja.

1:13:46Buat kemalas.

1:13:48Ini ada tambahan juga dari Mas Denny.

1:13:53Button juga harus ada label-nya.

1:13:55Supaya apa nih, JAWS.

1:13:57Itu screen reader.

1:13:59Jadi kalau voice-over itu kan screen reader yang bawaan di Mac.

1:14:03Kalau kita punya Macbook, otomatis ada voice-over.

1:14:06Nah kalau di Windows, kalau nggak salah NVDA itu yang open source.

1:14:12Windows nggak...

1:14:14Keliatannya sampai nggak tahu sekarang yang baru udah ada atau belum.

1:14:18Tapi by default Windows itu nggak ada screen reader-nya.

1:14:21Jadi biasanya orang download NVDA yang free, open source.

1:14:26Atau pakai JAWS itu, JAWS itu yang berbayar.

1:14:30Yang berbayar.

1:14:32Terus kalau Android namanya apa ya? Talkback, kalau nggak salah.

1:14:36Kalau yang iPhone, sama voice-over juga.

1:14:40Nah ini juga apa?

1:14:42Kita biasanya nge-develop tuh ada pusing-pusing antar browser.

1:14:47Suka lain-lain behavior-nya, atau suka ada browser quark.

1:14:51Nah ini kalau yang udah tingkat advanced nih, tingkat kompleks.

1:14:54Antar screen reader bisa, ya walaupun sudah ada standarnya.

1:14:59Ya browser juga gitu kan, web API udah ada standarnya.

1:15:02Tapi mungkin ada behavior quark.

1:15:05Nah screen reader itu juga kalau yang profesional banget.

1:15:08Khusus accessibility expert nih, kudu nge-check di semua screen reader itu.

1:15:15Kayak misalnya itu button, button harus ada label-nya.

1:15:19Nah sekarang sih kelihatannya asal button itu ada child element yang ada text-nya sih.

1:15:24Setahu aku sih bisa dibaca sih.

1:15:26Nah cuma apakah sudah konsisten di semua screen reader.

1:15:31Ya itu harus testing.

1:15:34Tadi kan ada assistive technology check.

1:15:38Betul, betul, betul.

1:15:40Jadi entah itu berupa label di button, atau child element.

1:15:43Jadi button, terus child-nya, children-nya ada isi text-nya, itu bisa dibaca harusnya.

1:15:49Hmm, iya, iya, iya.

1:15:51Oh cuma itu kasus yang sering keskip orang, button-nya itu icon.

1:15:56Misalnya shopping card atau apa, misalnya apa, open shopping card.

1:16:01Muncul dialog atau pop-up yang isinya isi shopping card.

1:16:05Itu kan sering tuh cuma gambar kereta doang.

1:16:08Nah itu kan nggak ada label-nya, itu harus dikasih label.

1:16:12Harus dikasih text label, harus kita tambahin sendiri.

1:16:16Tapi kalau button-nya, misalnya isinya udah text, shopping card gitu beneran text.

1:16:21Itu sih harusnya aman, bisa dibaca juga.

1:16:25Oh yang lumayan sering akhir-akhirnya kan trend-nya itu kalau bikin web itu ada emoji.

1:16:30Emoji juga harus direp ke dalam span dengan role image, kan.

1:16:36Nah ini juga menarik.

1:16:38Dulu kayak gitu, karena dulu emoji nggak dibaca.

1:16:41Konon katanya sekarang emoji udah dibaca.

1:16:44Ngetes sendiri sih pakai voice-over udah dibaca.

1:16:48Nah itu kelihatannya cuma rule-nya masih masuk di Aslin deh sampai sekarang.

1:16:53Bentar-bentar, beneran pernah baca artikel tentang itu sih.

1:16:58Cuma intinya ya gitu, behavior-nya bisa berubah juga.

1:17:02Kan mungkin screen reader ngikutin perkembangan jaman juga ya.

1:17:09Ada yang pernah nyoba assistive teknologi yang pakai handphone nggak sih?

1:17:14Coba gimana gitu?

1:17:17Belum pernah.

1:17:20Belum pernah, cuma di laptop lang, di Macbook.

1:17:23Ya, ada voice-over-nya ya.

1:17:27Sering itu nggak sengaja kepencet, tiba-tiba aktif.

1:17:33Seperti gue bunyi, kaget.

1:17:35Loh, kok ada yang bersuara?

1:17:39Oh ini lagi nyari ya?

1:17:51Iya, eh cuma nggak nemu sih kelihatannya.

1:17:53Oh nggak nemu, ya sudah.

1:17:55Sebetulnya ini kan kayak kita nge-handle browser behavior aja ya.

1:18:00Kalau misalnya masih banyak yang belum support, ya jangan dipakai dulu.

1:18:04Nah ini juga, maksudnya walaupun misalnya voice-over udah bisa baca emoji,

1:18:10kan kita belum tahu nih screen reader lain gimana.

1:18:13Ya udah tetap pakai roll image.

1:18:16Jadi di rep pake span, dikasih roll image untuk memberi tahu bahwa ini maksudnya image lho.

1:18:22Terus area label-nya, ya text isi emoji itu.

1:18:26Oke, jadi text yang mendeskripsikan isi emoji itu ya?

1:18:31Oke, ini lumayan sering juga kena soalnya sering suka males pake icon kan.

1:18:43Yaudahlah emoji aja lah, gampang.

1:18:45Dan bahkan kadang kan kita pakai, itu ya ASCII art itu suka pakai ada generator-nya.

1:18:50Misalnya untuk judul ya, judul diritmi gitu, judul nama library kita.

1:18:54Itu kan nggak kebaca kalau di screen reader pusing nggak sih?

1:18:57Iya, iya, iya.

1:18:59Itu kayak random karakter doang ya.

1:19:04Ada contohnya nggak?

1:19:09Ada dong, scroll aja di bawah.

1:19:11Oh, ini jamannya MRC nih, Smiley MRC.

1:19:21Belum ada image ya, nggak ada visualnya.

1:19:24Jadi pakai titik 2, senyum, terus wink, gitu ya.

1:19:31Atau ini ya?

1:19:33Oke, ini dipakaiin role-nya image ya.

1:19:38Karena kita memberitahu ini maksudnya semacam image lah ya.

1:19:43Bacanya adalah WCAG.

1:19:45Kalau sama assistir teknologi, bacanya ini image WCAG gitu.

1:19:53Oh, oh, oh, oh.

1:19:55Kalo nggak dikasih real label, oh, oh, oh, oh.

1:19:59Dinyun nggak sih?

1:20:01Dinyun ya.

1:20:03Jadi nyanyi dia.

1:20:05Oh, ya bukankah.

1:20:07Itu kan nyanyi.

1:20:09Aduh, wah seru ya.

1:20:13Oke, oh, komen lagi nih.

1:20:16Mulai sering pakai screen reader, browser edge, banyak pilihan asennya, dan lumayan udah bagus.

1:20:22Oh, edge udah ada ya.

1:20:24Itu belum ada ya?

1:20:26Dia, edge itu justru.

1:20:28Menurut saya ya, edge itu lahir untuk unik selling pointnya itu accessibility.

1:20:35Oh, baru tau.

1:20:37Bisa pilih asen.

1:20:40Baca konten bahasa Inggris, asen Jawa Timur.

1:20:43Wih.

1:20:46Hebat itu kalo ada.

1:20:49Kalo misalkan, kita ngomongin semantik HTML deh.

1:20:55Misalkan kita desainnya nggak sal nih, ya nggak sal dan takut gitu.

1:21:00Div di dalam, div di dalam, div di dalam, baru di dalamnya ada button gitu.

1:21:03Itu mempengaruhi nggak sih?

1:21:05Walaupun divnya ya invisible, kosong nggak ada.

1:21:08Mungkin hanya ada class name, ada style sedikit gitu.

1:21:11Divnya kan nggak fokusable kan, misalnya kalo behavior tab ya langsung ke button, atau kalo pake screen reader ya dia tetep ngebaca buttonnya.

1:21:22Jadi screen reader itu biasanya bunyinya gini, button, click me.

1:21:25Dia nyebut button, habis itu nyebut isinya, label-nya.

1:21:31Atau kebalik?

1:21:35Nggak, yang disebut elemennya dulu.

1:21:37Elemennya dulu ya?

1:21:39Kayaknya iya sih, terakhir nyoba voice over, kayaknya iya.

1:21:43Misalnya link, kayak yang di layar ini, link, tadi ya recommendation.

1:21:47Tapi ngomongnya cepet-cepet gitu, screen reader.

1:21:49Ya karena kontennya kan banyak link.

1:21:51Sebelum masuk link, jadi dia nyebut list, 2 items, atau semacamnya gitu lah.

1:21:57Jadi dia introduce dulu, dari dom element kan dia ketemunya list dulu kan, unordered list dulu, yaudah dia ngebaca list yang berisi 2 item.

1:22:11Nah terus itemnya kan berupa link.

1:22:13Dia baca, link, area recommendation.

1:22:15Link, accessible name, and blablabla.

1:22:19Oke, ini ada pengalaman juga dari Ray.

1:22:23Untuk case button yang calanya hanya icon, bisa ditambahkan area label, supaya bisa terbaca ya.

1:22:27Kalau hanya icon doang ya. Betul-betul.

1:22:31Karena kalau nggak, ya buttonnya jadi nggak bisa dibaca sama si screen reader-nya.

1:22:37Jadi nggak tahu itu fungsi buttonnya buat apa.

1:22:39Oke, oke, oke.

1:22:41Oh paling sering search button isinya cuma kacang besar kan.

1:22:45Kacang besar.

1:22:47Kacang besarnya SCG lagi, nggak ketahuan sama sekali itu apa.

1:22:51Oke, oke.

1:22:53Bagi Ida Business, ya bikin ini course untuk accessibility.

1:23:01Ayo Tomas Rizal lah bikin kursusnya.

1:23:03Udah masuk kurikulung nggak, Tomas?

1:23:07Kita bertanya bagaimana caranya supaya accessibility masuk ke hukum di Indonesia, tapi kurikulungnya kita belum ada.

1:23:15Ayo, pasti mulai dari grassroot dulu nih.

1:23:17Masuk kurikulung, accessibility.

1:23:19Minimal ada satu topik.

1:23:21Itu chicken or egg sih. Itu ayam dulu, apa telur dulu.

1:23:25Misalnya nih, tiba-tiba di Indonesia ada hukum, kalau nggak accessible bisa dituntut.

1:23:29Pasti langsung masuk kurikulung, semua kurikulung.

1:23:31Karena itu jadi syarat kerja kan.

1:23:33Jadi harus dia.

1:23:35Tapi ya bisa juga dibalik.

1:23:37Tetapi kan lulusannya dari institusi manapun kan nggak harus bekerja atau punya menggara project yang ada di Indonesia.

1:23:49Betul, betul.

1:23:51Jadi harus punya ilmu accessibility juga.

1:23:55Ini makanya kita ngobrolin accessibility, asik kan diputerin lagi.

1:24:01Ini topik-topik seperti accessibility, web security, itu hal-hal yang penting nggak penting.

1:24:15Penting, tapi kadang-kadang ya kalau misalkan udah buru-buru, ya udahlah, nggak apa-apalah, nanti bisa nanti, gitu kan.

1:24:23Karena nggak langsung fisik, nggak langsung kelihatan oleh orang awam ya, atau dari perspektif apa, organisasi atau perusahaan kan.

1:24:33Mereka kan nggak tahu nih, orang lain selain kita kan rata-rata nggak tahu dan nggak langsung kelihatan.

1:24:37Cuma nanti paling tiba-tiba dituntut.

1:24:39Kalau kejadian, kalau ada kejadian baru.

1:24:43Intinya kan kayak kalau kita berkompet sama security apple-to-apple ya, security itu bukan sesuatu yang kita perbaiki setelah live tetapi menjadi sebuah habit.

1:24:57Lebih mudah kalau dibikin dari awal.

1:24:59Habit dari awal, habit untuk nge-developnya itu sudah security-minded.

1:25:05Punya common-common security mistake itu sudah nggak ada, gitu. Karena sudah dicek sama linter, sudah dicek sama sniffer, segala macem.

1:25:15Kan sudah jadi apa namanya, sudah ada yang ngasih tahu dari awal code-nya kerjakan.

1:25:22Accessibility juga bisa juga dilakukan hal yang lebih kaya.

1:25:25Bisa dilakukan hal yang sama ya.

1:25:26Berarti harus dimasukkan ke prosedur untuk continuous integration dan lain-lain ya.

1:25:34Jadi kalau misalkan accessibility-nya nggak lulus, nggak boleh pull request.

1:25:38Gak bisa di-merge, pull request boleh.

1:25:42Oh, nggak bisa di-merge.

1:25:43Gak di-merge.

1:25:44Ada lagi? Terakhir? Penutup?

1:25:54Lagi ya? Udah accessibility nggak ada. Cuma seperti biasa, saran request topik bit.ly/NgeobrolinWeb.

1:26:06Saya ada satu topik, tapi nanti kita bicara akan di belakang layar.

1:26:09Boleh, siap.

1:26:11Meskipun kita ada topik sendiri, kita juga butuh saran topik dari teman-teman.

1:26:18Yang pengen teman-teman dengar apa?

1:26:20Yang pengen dengar apa? Karena kita bisa ngobrol bareng-bareng kayak sekarang kan.

1:26:25Ada yang punya pengalaman, ada yang nanya, gitu.

1:26:28Nah kita lebih sukanya tuh yang interaktif.

1:26:30Jadi kalau topik yang teman-teman tertarik tuh dimana, kita bisa bahas di sana.

1:26:34Kayak kemarin itu salah satunya itu ya web jadul.

1:26:38Itu kita belum kebayang sebelumnya ada topik itu dan ternyata disarankan dan itu menarik sekali.

1:26:44Itu seru.

1:26:45Itu seru sekali.

1:26:46Dan mungkin kita bisa bahas itu lagi kayak mungkin ada beberapa teknologi yang jadul,

1:26:53yang dulu mungkin keren banget, terus sekarang udah almarhum gitu.

1:26:57Bisa kita jadikan satu topik sendiri.

1:26:59Jadi kita tetap nunggu saran dari teman-teman terkait topik ataupun perbaikan dari acara kita ini.

1:27:08Atau saran bintang tamu juga boleh ya kalau ada yang ingin...

1:27:11Sekalian kontaknya lah kalau gitu. Iya, mengundang siapa, mengundang siapa, boleh.

1:27:17Kalau siapa tahu ada yang mau mengajukan diri, bikin project web yang apa, yang keren banget.

1:27:23Terus bisa dibahas, bisa diobrolin secara live.

1:27:30Oh iya ya, kayak showcase gitu ya.

1:27:32Terus saya bikin website nih, terus minta sarannya gitu ya.

1:27:36Yang nggak harus bikin website sih, bikin komunitas gitu, punya komunitas.

1:27:40Iya, apa tadi misalnya, komunitas accessibility atau apalah.

1:27:45Oh iya, kita bisa mengundang tim dari Alay ID ini ya.

1:27:50Alay ID. - Alia.

1:27:52Alay ID itu salah semua kita bertiga.

1:27:56Oh Alay ID. - Dari Suarez lah ya.

1:27:58Jadi bisa bikin acara bareng juga.

1:28:00Terus kemarin itu sempat kita ngobrol beberapa teman-teman kita juga melakukan acara seperti ini.

1:28:07Contohnya React Indonesia, ada ngobrolin club juga.

1:28:12Ada beberapa lah, dari GDG juga ada ya, tiap hari Rabu.

1:28:16Di Discord. - Jadi Discord ya?

1:28:18Discordnya apa tuh? Coba.

1:28:20Discord itu ada shortlink-nya nggak sih? - Google Dev.

1:28:23Google Dev.

1:28:25Iya, maksudnya ada shortlink-nya kayaknya ya.

1:28:28Nah, nggak tahu sih, cari sendiri deh.

1:28:30Ya, follow aja Instagramnya GDG Bogor. Salah satu lead-nya GDG Bogor yang bikin acara ini, sudah menjadi GDE sekarang.

1:28:39Jadi GDE itu jadi mubah dari GDG nggak sih?

1:28:44Nggak ya? - Nggak, nggak kayaknya.

1:28:47Nggak kayaknya.

1:28:49Oke, kalau gitu terima kasih banyak buat semuanya yang sudah menemani dan sudah diskusi dari awal sampai...

1:28:58Sampai berakhirnya acara, kita udahan dulu untuk minggu ini.

1:29:04Tunggu acara kita berikutnya di hari Selasa depan, kembali ke jam 8 lagi.

1:29:10Terima kasih dan selamat malam, selamat istirahat. Bye bye.

1:29:15Bye bye.

1:29:17Ntar, closing dulu closing.

1:29:28Salah.

1:29:30Salah pencet.