Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Pentingnya menuju tingkat teknologi bantu

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Kang Abbad (you can also view the original English article)

HTML spesifikasi menggambarkan enam elemen judul: h1, h2, h3, h4, h5, h6 dan. Nomor di masing-masing elemen judul mencerminkan prioritas, dengan h1 menjadi paling umum dan h6 menjadi yang paling spesifik.

Ini adalah hal yang penting untuk tahu! Survei pembaca layar WebAIM's 2017 memberitahu kita bahwa menavigasi melalui judul adalah cara yang paling penting orang-orang yang mengandalkan teknologi bantu mencari informasi. Karena ini, sangat penting untuk menyusun judul situs web Anda dengan benar.

A11y dari awal

Tutorial ini merupakan bagian dari Web Aksesibilitas: panduan belajar yang lengkap, dimana kami telah mengumpulkan berbagai tutorial, artikel, kursus, dan ebooks, untuk membantu Anda memahami web aksesibilitas dari awal.

Kognisi

Sebelum kita masuk ke intisari karya teknologi bagaimana bantu, ada alasan media cetak kami menggunakan hal-hal seperti bab, Bagian dan subbagian, dan adegan istirahat. Membagi konten ke dalam potongan membuatnya lebih mudah untuk memahami, mencerna, mempertahankan, dan referensi.

Two pages from the Guardian newspaper demonstrating different chunks of content
Potongan konten, dari koran Guardian

Sementara web tidak cetak, itu meminjam semua hal yang baik dari itu-elemen judul HTML analog dengan Konvensi cetak ini. Ini adalah salah satu dari hal-hal yang setiap orang mengambil diberikan, tetapi membantu keluar satu ton orang. Keprihatinan kognitif tersebar luas dan lebih besar daripada setiap bentuk lain dari kecacatan. Pengelompokan konten ke dalam potongan logikal membantu semua orang, dari orang-orang yang memiliki kondisi biologis seperti demensia kepada orang-orang yang mengalami gangguan situasional seperti kurang tidur atau belajar keterampilan yang sama sekali baru.

Menavigasi melalui pos

Beberapa jenis teknologi bantu (termasuk, namun tidak terbatas pada, pembaca layar) memungkinkan orang untuk melompat dari pos ke pos pada halaman. Ini adalah setara dengan apa yang orang yang tidak menggunakan teknologi bantu lakukan setiap hari, melayang di sekitar halaman untuk mendapatkan inti umum, berhenti ketika mereka menemukan informasi yang mereka cari.

Menghasilkan daftar judul

Beberapa teknologi bantu dapat mengambil judul ini dan mengubahnya menjadi daftar ordered. Daftar ini dapat digunakan untuk dengan cepat menentukan arti keseluruhan halaman.

An ordered list of headings generated by the JAWS screen reading software taken from a Wikipedia page titled List of French Deserts There are eight headings The order is as follows with their heading level listed after the headings title Wikipedia 1 List of French desserts 2 Contents 2 French Deserts 2 French pastries 2 See also 2 References 2 External links 2 Options to jump to the selected heading as well as sort and filter the headings are also present Screenshot
Daftar menghasilkan judul pada halaman Wikipedia

Jika Anda tidak mempertahankan suatu urutan logis — mengatakan akan dari menuju tingkat satu menuju level tiga tanpa menyatakan tingkat menuju dua di antara — dapat membuat berpotensi membingungkan, pasti mengganggu pengalaman bagi orang yang bergantung pada judul untuk menavigasi. Kesenjangan ini dalam urutan logis yang akan menempatkan beban pada pengguna, memaksa mereka untuk menggunakan lain, lebih banyak waktu dan usaha intensif metode untuk menavigasi untuk menentukan logika untuk keseluruhan halaman struktur (jika ada) dan jika konten yang mereka butuhkan sebenarnya hadir pada halaman.

Tingkat pertama judul

Hal penting lain yang bisa kita lakukan adalah memastikan bahwa ada hanya satu tingkat pertama menuju per halaman. Pos ini harus menggambarkan titik utama dengan konten halaman. Sebagai contoh, sebuah halaman tentang sejarah Perancis pastry bisa memiliki menuju tingkat pertama yang ditulis seperti ini:

(Tidak ada) dokumen garis besar algoritma

Sayangnya, ada kesalahpahaman bahwa Anda dapat menggunakan judul tingkat pertama untuk permulaan setiap konten-sectioning elemen pada halaman, percaya browser untuk mencari tahu sisanya melalui dokumen garis besar algoritma. Algoritma ini adalah fiksi spekulatif — pada saat penerbitan artikel ini belum dilaksanakan oleh browser. Karena ini, kita harus menghormati prioritas konstituen dan menggunakan elemen pos lain.

Judul lain

Judul level dua melalui enam harus mengikuti judul tingkat pertama, dan menulis secara berurutan yang menjelaskan pokok berbicara dengan konten halaman.

Sebagai contoh, ini adalah struktur pos untuk artikel ini:

  1. Pentingnya menuju tingkat teknologi bantu
    1. Kognisi
    2. Menavigasi melalui pos
      1. Menghasilkan daftar judul
      2. Tingkat pertama judul
        1. (Tidak ada) dokumen garis besar algoritma
      3. Judul lain
      4. Over menggambarkan
      5. Layanan lainnya
    3. Styling
      1. Semantik
      2. Kepraktisan
        1. Gaya Utility
        2. Reset
      3. Penamaan
    4. Membungkus: Luangkan waktu

Dengan membaca melalui daftar ini Anda dapat dengan cepat menentukan apa yang artikel ini adalah semua tentang. Cukup rapi, ya?

Hal yang harus diperhatikan adalah bahwa judul-banyak seperti hirarkis format seperti JSON — dapat bersarang di dalam judul lain, asalkan mereka kemajuan secara logis. Dalam judul tingkat kedua, Anda dapat menggunakan beberapa tingkat judul. Masing-masing subpos ini dapat, pada gilirannya, bersarang tingkat empat subpos.

Ketika Anda selesai dengan topik Anda dapat menutup judul Anda bersarang. Ini adalah salah satu tempat di mana "melewatkan" menuju tingkat yang dapat diterima — selesai membahas suatu konsep khusus dan kembali ke topik yang lebih umum.

  1. H1 sejarah Perancis pastry
    1. saat-saat penting H2
      1. H3 abad ke-16
        1. H4 Puff pastry
        2. H4 Oublies
      2. H3 abad ke-17
        1. H4 Foliated kue
        2. H4 dicambuk krim
          1. koki H5 The Pangeran Condé's
      3. H3 abad ke-18
        1. H4 Macarons
      4. H3 abad ke-19
      5. H3 abad ke-20
    2. orang-orang penting H2
      1. H3...

Contoh ini menunjukkan bagaimana hal ini berlaku untuk memiliki pos tingkat kelima (Pangeran Condé koki) diikuti dengan tingkat menuju (abad ke-18), selama orang tua judul secara berurutan. Telah menuju tingkat mendahului judul kelima-tingkat, itu akan menjadi tidak valid.

Over menggambarkan

Menggunakan terlalu banyak pos dapat membuat pengalaman yang luar biasa untuk orang yang bergantung pada pembaca layar untuk menavigasi. Ini mungkin tampak agak kontra-intuitif pada awalnya, mengingat aku hanya memberitahu Anda betapa pentingnya judul sebagai alat bantu navigasi.

Pikirkan cara ini: banyak seperti bagaimana terlalu banyak pilihan visual navigasi pada halaman dapat berdampak negatif pada seseorang fokus dan perhatian, terlalu banyak judul menciptakan "suara" yang mengalihkan perhatian dan obfuscates titik utama yang Anda mencoba untuk menyampaikan.

Ada ada aturan yang ditetapkan untuk judul berapa banyak terlalu banyak. Itu tergantung sepenuhnya pada apakah konten, dan berapa banyak yang hadir. Sebagai contoh, resep mungkin hanya perlu nama piring, bahan, dan petunjuk, sementara kertas akademis mungkin memerlukan rincian jauh lebih bernuansa.

Layanan lainnya

Struktur pos baik manfaat lebih dari sekedar orang-orang yang menggunakan teknologi bantu. Karena judul ini memiliki makna semantik, Layanan lainnya dapat menghubungkan ke Deskripsi ini programatic konten dan kembalu dalam berbagai cara yang user-friendly. Sebagai contoh, berikut adalah apakah Bing mesin pencari dengan halaman dibangun dengan baik:

A search result in Bing for the JAWS screen reader The result lists the title of the page its URL and a brief description Navigation options are also included in the result which correspond to the headings from the Wikipedia page it links to The options are Overview Contents History Features Screenshot
Hasil mesin pencari Bing pencarian

Banyak seperti pembaca layar, Layanan seperti Google Docs dan Dropbox kertas akan secara otomatis menghasilkan daftar ordered judul untuk memungkinkan Anda untuk dengan cepat mengerti dan menavigasi dokumen. Pengolah kata yang banyak juga cepat dapat menghasilkan dinamis Diperbarui daftar isi dari judul, tugas yang sebaliknya membosankan dan memakan waktu. Dan berkat interoperabilitas HTML, kita bahkan dapat menciptakan perilaku menavigasi-oleh-judul ini sebagai sebuah ekstensi browser!

Styling

Hal yang kita semua-terlalu-sering tampaknya lupa bahwa kelas CSS dapat diterapkan untuk menuju elemen, elemen HTML lainnya seperti dinyatakan di dalam tubuh.

Semantik

Alasan saya saya menyebutkan ini adalah bahwa judul elemen umum digunakan karena bagaimana mereka terlihat ("Ooh! Saya suka warna dan font h3, aku akan menggunakan yang"), dan tidak apa prioritas konten mereka menggambarkan (Brioche adalah semacam Viennoiserie). Itu merupakan masalah yang tersebar.

Dalam dunia ideal kemurnian akademik, kami akan menghormati kejujuran bahan menuju unsur-unsur dengan ukuran dan styling mereka menurut hirarki mereka menggambarkan.

Namun, ini adalah dunia nyata. Aplikasi website dan web modern adalah hal-hal rumit yang dikerjakan oleh berbagai jenis orang, yang semuanya memiliki tingkat yang berbeda dari pengalaman, bunga, keakraban, dan kemampuan ketika merancang dan pengkodean.

Kepraktisan

Dunia nyata mungkin panggilan untuk kelima tingkat menuju yang perlu terlihat seperti itu menuju tingkat kedua, atau sesuatu yang sama sekali baru. Dalam situasi ini lebih baik untuk melestarikan struktur Logis halaman yang mendasari dan mengubah judul visual sebaliknya:

Hal ini trade-off, dan pengakuan dunia nyata rumit. Pendekatan ini nikmat melestarikan bagian penting: navigasi intuitif dan efisien untuk teknologi bantu.

Gaya Utility

Metodologi seperti gaya utilitas memungkinkan untuk pendekatan yang lebih fleksibel untuk tweaker header visual:

Untuk contoh ini, saya perkatakan serangkaian tweak kecil untuk menyesuaikan presentasi dari judul sampai aku mendapatkan tampilan visual yang diinginkan. Anda biasanya akan menemukan gaya utilitas besar negara-driven website dan aplikasi web, dimana kelas rendah kekhususan membantu menjamin konsistensi.

Reset

Untuk membantu memperkuat menggunakan benar memerintahkan dan judul bersarang, itu bahkan mungkin patut menggunakan gaya pos ulang agar semua judul tanpa sebuah kelas yang dideklarasikan pada mereka tampak sama.

Ini adalah sedikit desain defensif yang membantu mendorong berpikir tentang bagaimana struktur dokumen yang dibentuk atas bagaimana tampilannya. Hal ini dimaksudkan untuk dinyatakan setelah impor CSS reset, sehingga dapat mengganti ulang pendapat.

Penamaan

Masalah kedua paling sulit dalam ilmu komputer adalah penamaan hal-hal. Yang pertama adalah mengakui Anda tidak tahu sesuatu. Saya tidak menganggap untuk mengetahui cara terbaik untuk nama judul styling kelas untuk situs web atau web app. Namun, jika Anda menggunakan pendekatan berbasis gaya bebas-utilitas, saya akan merekomendasikan tidak menyebut mereka .h1, .h2, .h3, dll.

Masalahnya dengan pendekatan ini adalah orang-orang yang tidak akrab dengan basis kode dapat menafsirkan nama-nama kelas ini sebagai petunjuk yang mendikte perlu untuk mencocokkan nama kelas dengan menuju tingkat. Hal ini akan memperkuat "bagaimana itu terlihat" atas "apa itu menggambarkan" masalah.

Saya juga telah mengalami situasi di mana hal ini memperkuat diterima menggunakan HTML selain judul elemen untuk judul penulis ("Ah, saya bisa membuat div ini terlihat seperti h5!"). Tidak besar!

Membungkus: Luangkan waktu

Survei pembaca layar WebAIM 2017 juga memberitahu kita bahwa hilang atau tidak tepat judul adalah salah satu isu paling bermasalah sepuluh dialami oleh orang-orang yang mengandalkan teknologi bantu untuk menavigasi web.

Ini adalah masalah aksesibilitas luas dengan memperbaiki yang mudah. Mengambil sedikit waktu untuk meninjau situs web atau web app's halaman untuk melihat jika struktur pos Anda menggambarkan halaman secara akurat, dan bahwa Deskripsi ini memiliki urutan logis — bisa semudah pergeseran beberapa nomor di sekitar!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.