BerandaComputers and TechnologyFlutter Web: Fraktal Desain Buruk

Flutter Web: Fraktal Desain Buruk

Web memiliki sejarah yang panjang dan kaya sejak tahun sembilan puluhan di CERN. Saat itu Tim Berners-Lee meletakkan dasar HTML yang masih ada hingga saat ini. Ada upaya untuk menggantikannya dengan berbagai keberhasilan tetapi tidak ada yang berhasil, untuk alasan yang bagus. HTML dan penemuan CSS selanjutnya adalah seperangkat alat yang luar biasa kuat untuk membangun semua jenis pengalaman di web. Orang-orang masih mencoba untuk mengganti HTML, yang membawa kita ke topik posting ini: Flutter Web.

Flutter Web adalah bagian dari Flutter Google framework untuk membangun UI lintas platform. Dipuji oleh banyak pengembang sebagai yang terbaik sejak mengiris roti, pendapat saya tentang itu tidak memiliki kacamata berwarna mawar. Saya belum melihat Flutter untuk platform selain web, jadi saya tidak dapat mengomentarinya selain itu, prinsip umum Flutter adalah ide yang buruk. Flutter bekerja dengan membuang toolkit UI asli yang disediakan oleh platform dan merender semuanya dari awal menggunakan OpenGL et al. Ini diterjemahkan sangat buruk ke platform web pada khususnya. Perlu diperhatikan bahwa Flutter untuk Web saat ini dalam versi beta dan masalah yang akan saya detailkan dapat diatasi. Namun, saya yakin masalah ini sangat penting dalam pilihan desain Flutter, jadi saya merasa yakin dengan kritik saya.

HTML Semantik

Siapa pun yang mempelajari HTML akhir-akhir ini pasti pernah menemukan istilah “HTML Semantik” karena ini adalah bagian penting dari web modern. Peter Lambert menjelaskan mengapa ini penting dalam entri blog yang luar biasa HTML adalah Web . Singkatnya, bagian yang terlihat dari sebuah situs web, yaitu presentasi, hanyalah setengah dari cerita. Untuk mengambil contoh yang digunakan Peter, sebuah div dengan onClick handler mungkin dapat diklik dan diatur gayanya agar terlihat seperti tombol, tapi itu tidak menjadikannya sebuah tombol. Struktur semantik dokumen penting karena begitulah cara mesin, bukan manusia, memahami web. A div dengan pengendali onClick tidak terlihat seperti tautan atau tombol ke pembaca layar, telusuri crawler mesin, atau ekstensi aksesibilitas, ini terlihat seperti div .

Yang terpenting, HTML semantik adalah kunci aksesibilitas dan alat lain yang memungkinkan pengguna merasakan web sesuai keinginan.

Fraktal Desain Buruk

Apakah Flutter Web menghasilkan HTML semantik? Bahkan tidak dekat. Ini menghasilkan tambal sulam dari elemen kanvas , elemen khusus, dan beberapa elemen HTML lainnya. Di aplikasi demo Balas , ada berapa tombol dan tautan? Jika Anda menebak nol , selamat, Anda sama letih dan sinisnya dengan saya. Izinkan saya mengulangi itu, aplikasi email tanpa tombol dan tautan! Karena tidak ada tautan secara khusus, fitur seperti klik cmd / ctrl untuk membuka tab baru, mengarahkan tautan untuk melihat URL, dan menggunakan menu konteks tidak berfungsi.

Saya menggunakan ekstensi browser Vimium untuk menavigasi web , ini adalah alat yang luar biasa kuat yang mengandalkan, Anda dapat menebaknya, HTML semantik. Apakah ini berfungsi pada halaman yang dibuat dengan Flutter Web? Sial tidak. Itu tidak berfungsi karena mencoba menemukan hal-hal yang dapat diklik secara semantik, seperti tombol atau elemen , yang, seperti yang telah kami tentukan, Flutter Web tidak menghasilkan apa pun. Vimium berfungsi di hampir semua situs web yang saya gunakan karena sebagian besar pengembang, untungnya, tidak hanya menempel onClick penangan pada div s. Namun, apa pun yang dilakukan Flutter Web, tampaknya tidak dapat diklik. Hal-hal yang dapat diklik tetapi tidak terlihat dapat diklik adalah proxy yang baik untuk aksesibilitas yang buruk. Misalnya, pembaca layar dapat bernavigasi menurut bangunan terkenal, seperti judul, tautan , formulir, dan elemen semantik lainnya, apakah semua ini berfungsi dengan Flutter Web? Sialan tidak.

Lebih buruk lagi, kecuali Anda menggunakan teks “yang dapat dipilih” khusus, Flutter Web bahkan tidak mendukung pemilihan teks. Bukan lelucon, contoh kode mereka sendiri memiliki tombol “salin semua” untuk menyiasatinya.

Screenshot of Flutter's Navigation Bar component with preview, code, and

Bagaimana orang melihat ini dan berkata “yeah nah, memilih teks bukanlah kasus penggunaan yang penting di web”? Mengapa memilih teks penting yang Anda tanyakan? Beberapa orang menggunakannya untuk membantu membaca dengan memilih teks yang sedang mereka baca, orang lain menggunakannya untuk (dan saya tahu ini liar) menyalin bagian teks, penderita disleksia menggunakan alat yang membacakan bagian teks yang dipilih. bantu mereka membaca. Apakah semua ini berfungsi dengan teks default Flutter yang tidak dapat dipilih? Sialan tidak!

Sementara kita berbicara tentang disleksia, fitur berguna lainnya yang membantu orang yang menderita disleksia adalah kemampuan untuk mengubah font halaman web menjadi yang mereka anggap lebih mudah untuk dibaca, seperti OpenDyslexic . Ada banyak alat yang membantu dalam hal ini dan semuanya mengandalkan kemampuan untuk memasukkan CSS khusus di halaman web, yang mengejutkan saya ini benar-benar tampak berfungsi ketika saya mencobanya di beberapa demo Web Flutter. Namun, terlihat menipu dan sementara font berlaku itu menyebabkan teks terpotong di hampir semua contoh karena HTML Flutter yang dihasilkan mengerikan. Misalnya, di klien email “Balas”, berikut adalah tag untuk kata “Balas” di kanan atas

   

gaya= "font-size: 18px; font-weight: normal; font-family: WorkSans_regular, -apple-system, BlinkMacSystemFont, sans-serif; color: rgb (255, 255, 255); spasi huruf: 0px; position: absolute; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; height: 27px; width: 54px; transform-origin: 0px 0px 0px ; transformasi: matriks (1, 0, 0, 1, 59, 3.5); kiri: 0px; atas: 0px; " > BALASAN

Dibersihkan sedikit dan ini adalah atributnya

  font- ukuran: 18px; font-weight: normal; font-family: WorkSans_regular, -apple-system, BlinkMacSystemFont, sans-serif; warna: rgb (255, 255, 255); spasi huruf: 0px; posisi: mutlak; spasi: pra-bungkus; overflow-wrap: break-word; overflow: hidden; tinggi: 27px; lebar: 54px; transform-origin: 0px 0px 0px; transformasi: matriks (1, 0, 0, 1, 59, 3.5); kiri: 0px; atas: 0px;  

Flutter Web menghasilkan HTML berukuran tetap yang diposisikan mutlak yang alih-alih mengadopsi tata letak teks yang ditentukan oleh browser hanya memotong teks.

Fitur berguna lainnya yang umum dalam ekstensi aksesibilitas adalah membuat tautan lebih menonjol. Ini bekerja dengan memasukkan aturan CSS global yang menargetkan sebuah tag di halaman.

Screenshot of links with link emphasis turned on which underlines them in multiple colours

Apakah ini berfungsi dengan Flutter Web (pertanyaan ini mulai terasa mubazir karena jawabannya hampir selalu “Tidak”)? Sial tidak! Secara umum, pengguna menggunakan lembar gaya khusus karena banyak alasan yang tidak terbatas pada aksesibilitas. Sebagai latihan “menyenangkan”, cobalah penglihatan rendah ini stylesheet di salah satu Demo Web Flutter dan lihat seberapa terbaca kontennya.

Salah satu dari demo di Flutter Web Gallery adalah situs berita. Di situs berita, saya suka menggunakan “mode pembaca” bawaan di browser saya untuk mendapatkan pengalaman membaca yang bebas dari kekacauan dan suite saya yang lebih baik. Misalnya, saat membaca di tempat tidur pada larut malam (yang saya tahu seharusnya tidak saya lakukan), senang memiliki pengalaman mode gelap yang lembut daripada teks hitam yang mencolok pada putih bersih yang digunakan banyak publikasi. Apakah mode pembaca berfungsi dengan situs web Flutter? Nggak. Ini tidak berfungsi karena, Anda dapat menebaknya, ini bergantung pada HTML semantik.

Screenshot of Firefox accessibility inspector showing a single button with the text

Seperti penulis yang baik, saya menyimpan yang terbaik untuk yang terakhir: pengalaman pembaca layar dengan Flutter Web. Saat Anda pertama kali fokus pada salah satu demo Flutter Web dengan pembaca layar, Anda akan disambut dengan “tombol” yang bertuliskan “Aktifkan aksesibilitas”. Memang, ketika Anda mengklik tombol ini ada kemiripan dengan konten pembaca layar tetapi itu mengerikan. Dalam aplikasi “Balas”, hal-hal dibacakan dengan detail tinggi yang tidak perlu dalam tampilan daftar, hal-hal yang dapat diklik tidak diidentifikasi seperti itu, Anda bahkan tidak dapat membuka menu sejauh yang saya tahu, dan seperti yang diidentifikasi sebelumnya di sana hampir tidak ada landmark yang digunakan untuk navigasi.

Kesimpulan

Flutter adalah upaya yang salah arah untuk mencapai hal yang mustahil: pengalaman lintas platform yang berkualitas. Flutter Web khususnya memiliki kelemahan mendasar dan perlu dibangun kembali dari awal jika memiliki harapan menjadi teknologi yang layak yang menghasilkan pengalaman web semantik, dapat diakses, dan modern. Saya sangat meragukan bahwa ketika Flutter Web meninggalkan beta, semua ini akan ditangani dengan benar, kecuali jika seluruh pendekatan dipertimbangkan kembali. Jika Anda melihat Flutter Web, berbalik dan lari ke arah yang berlawanan.

Pengembang, desainer, dan orang produk semuanya menyukai solusi lintas platform karena menghemat waktu dan energi mereka sambil mencapai hasil yang “sama” dengan alternatif yang lebih mahal. Flutter Web dengan baik menggambarkan bahwa hasilnya tidak sama, bagian produk yang terlihat hanyalah salah satu bagian dari teka-teki.

Saya hanyalah pemula dalam aksesibilitas dan saya bahkan tidak menyebutkan SEO dalam postingan ini. Saya tidak berhenti menulis karena saya berhenti menemukan kekurangan, tetapi karena postingan ini terlalu panjang dan ada hal lain yang harus saya lakukan. Saya yakin pengguna aksesibilitas dan pakar dapat menemukan lebih banyak masalah daripada yang saya sajikan di sini (silakan DM saya di Twitter dan saya akan memasukkannya).

Sebagai penutup, saya ingin meninggalkan Anda dengan kutipan dari Dr. Ian Malcolm .

Ilmuwan Anda begitu asyik dengan apakah mereka bisa atau tidak, mereka tidak berhenti untuk berpikir apakah mereka harus melakukannya.

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments