Meningkatkan Aksesibilitas Penurunan Harga Anda

Penurunan harga adalah teks kecil ke bahasa konversi HTML. Itu dibuat oleh John Gruber pada tahun 2004 dengan tujuan membuat penulisan teks berformat dalam editor teks biasa lebih mudah. Anda dapat menemukan Markdown di banyak tempat di internet, terutama di lokasi di mana pengembang hadir. Dua contoh penting adalah komentar di GitHub dan kode sumber untuk posting di Majalah Smashing!

Bagaimana Penurunan Harga Bekerja

Penurunan harga menggunakan pengaturan karakter khusus untuk memformat konten. Misalnya, Anda dapat membuat tautan dengan membungkus karakter, kata, atau frasa dalam tanda kurung siku. Setelah tanda kurung siku penutup, Anda kemudian menyertakan URL yang dibungkus dalam tanda kurung untuk membuat tujuan tautan.

Jadi mengetik:

 [I am a link](https://www.smashingmagazine.com/)

Akan membuat markup HTML berikut:

 <a href="https://www.smashingmagazine.com/">I am a link</a>

Anda juga dapat memadukan HTML dengan penurunan harga, dan semuanya akan bermuara pada HTML saat dikompilasi. Contoh berikut:

 I am a sentence that includes <span class="class-name">HTML</span> and __Markdown__ formatting.

Menghasilkan ini sebagai markup HTML:

 <p>I am a sentence that includes <span class="class-name">HTML</span> and <strong>Markdown</strong> formatting.</p>

Penurunan harga dan aksesibilitas

Aksesibilitas adalah masalah holistik, artinya hal itu memengaruhi setiap aspek dalam menciptakan dan memelihara pengalaman digital. Karena penurunan harga adalah alat digital, ia juga memiliki pertimbangan aksesibilitas yang harus diperhatikan.

• Kabar baiknya :
  Penurunan harga menghasilkan markup HTML sederhana, dan markup HTML sederhana dapat dengan mudah dibaca oleh teknologi bantu.
• Kabar kurang baik :
  Penurunan harga tidak mencakup semua hal, juga tidak bersifat preskriptif. Selain itu, aksesibilitas lebih dari sekadar teknologi bantu.

Ketika datang untuk memastikan konten penurunan harga Anda dapat diakses, ada dua masalah besar:

1. Ada jenis konten tertentu yang tidak didukung penurunan harga, dan
2. Tidak ada pengalaman Clippy-esque untuk menemani Anda saat Anda menulis, artinya Anda tidak akan mendapatkan peringatan jika Anda melakukan sesuatu yang akan membuat konten yang tidak dapat diakses.

Karena dua pertimbangan ini, ada beberapa hal yang dapat kami lakukan untuk memastikan konten penurunan harga kami dapat diakses sebaik mungkin.

Tiga Hal Paling Penting yang Dapat Anda Lakukan

Mungkin sulit untuk mengetahui dari mana harus memulai untuk membuat konten Anda dapat diakses. Berikut adalah tiga hal yang dapat Anda lakukan sekarang untuk membuat dampak yang besar dan signifikan.

1. Gunakan Judul Untuk Menguraikan Konten Anda

Menavigasi dengan heading sejauh ini merupakan metode paling populer yang digunakan banyak pengguna teknologi bantu untuk memahami konten halaman atau tampilan yang mereka lihat.

Karena itu, Anda ingin menggunakan opsi pemformatan heading Markdown ( # , ## , ### , #### , ##### , dan ###### ) untuk membuat struktur heading logis:

 # The title, a first-level heading Content ## A second-level heading Content ### A third-level heading Content ## Another second-level heading Content

Ini menciptakan garis besar hierarkis yang mudah dipindai:

 1. The title, a first-level heading a. A second-level heading i. A Third-level heading b. Another second-level heading

Menulis tingkat judul yang efektif adalah sedikit seni, karena Anda menginginkan informasi yang cukup untuk mengomunikasikan cakupan keseluruhan halaman, tetapi tidak membuat seseorang kewalahan dengan menggambarkan secara berlebihan. Misalnya, sebuah resep mungkin hanya memerlukan beberapa elemen h2 untuk membagi bahan, instruksi, dan latar belakang, sementara makalah akademis mungkin memerlukan keenam tingkat judul untuk mengkomunikasikan nuansa sepenuhnya.

Mampu memindai semua judul pada halaman atau tampilan dengan cepat dan melompat ke judul tertentu adalah teknik yang tidak terbatas hanya pada pembaca layar. Saya menikmati dan memanfaatkan ekstensi seperti headingsMap yang memungkinkan Anda memanfaatkan fitur ini.

2. Tulis Deskripsi Alternatif yang Bermakna Untuk Gambar Anda

Deskripsi alternatif membantu orang yang memiliki gangguan penglihatan atau menjelajah dengan gambar dimatikan untuk memahami konten gambar yang Anda gunakan.

Di Markdown, deskripsi alternatif ditempatkan di antara tanda kurung buka dan tutup dari kode pemformatan gambar:

 ![A sinister-looking shoebill staring at the camera.](https://live.staticflickr.com/3439/3259412053_92f822bee2_b.jpg)

Deskripsi alternatif harus dengan jelas dan ringkas menggambarkan konten gambar dan konteks mengapa itu disertakan. Juga jangan lupa untuk menambahkan tanda baca!

Situs web dan aplikasi web tertentu yang menggunakan input penurunan harga juga akan mencoba menambahkan teks deskripsi alternatif untuk Anda. Misalnya, GitHub akan menggunakan nama file yang Anda unggah untuk atribut alt :

Sayangnya, ini tidak memberikan konteks yang cukup untuk orang yang tidak dapat melihat gambar. Dalam skenario ini, Anda ingin mengomunikasikan mengapa gambar cukup penting untuk disertakan.

Contohnya yang biasa Anda lihat di GitHub meliputi:

• Bug visual, di mana sesuatu tidak terlihat seperti seharusnya,
• Sebuah fitur baru yang sedang diusulkan,
• Tangkapan layar beranotasi yang memberikan umpan balik,
• Grafik dan diagram alur yang menjelaskan proses, dan
• GIF reaksi untuk mengomunikasikan emosi.

Gambar-gambar ini tidak dekoratif. Karena GitHub bersifat publik secara default, Anda tidak tahu siapa yang mengakses repo Anda, atau keadaan mereka. Lebih baik untuk secara proaktif memasukkan mereka.

Jika Anda memerlukan bantuan untuk menulis deskripsi alternatif, saya dengan antusias merekomendasikan Pohon Keputusan alt W3C dan Panduan Utama Axess Lab untuk Teks Alt.

3. Gunakan Bahasa Biasa

Bahasa yang sederhana dan langsung membantu semua orang memahami konten Anda. Ini termasuk orang:

• Dengan pertimbangan kognitif,
• Yang tidak menggunakan bahasa Inggris sebagai bahasa utama mereka,
• Tidak terbiasa dengan konsep yang Anda komunikasikan,
• Siapa yang stres atau multitasking dan memiliki rentang perhatian yang terbatas,
• Dan seterusnya.

Semakin mudah seseorang membaca apa yang Anda tulis, semakin mudah bagi mereka untuk memahami dan menginternalisasikannya. Ini membantu dengan setiap bentuk konten penurunan harga tertulis, baik itu posting blog, tiket Jira, catatan Notion, komentar GitHub, kartu Trello, dan sebagainya.

Pertimbangkan kalimat dan panjang kata Anda. Juga, pertimbangkan siapa audiens yang Anda tuju, dan pikirkan hal-hal seperti jargon dan idiom yang Anda gunakan.

Jika Anda memerlukan bantuan untuk menyederhanakan bahasa Anda, tiga alat yang saya suka gunakan adalah Hemingway, Datayze's Readability Analyzer, dan xkcd Simple Writer. Situs lain yang patut dicoba adalah plainlanguage.gov.

Pertimbangan lainnya

Ingin bekerja lebih keras? Besar! Berikut adalah beberapa hal yang dapat Anda lakukan:

Gambar-gambar

Selain memberikan deskripsi alternatif, ada beberapa hal lain yang dapat Anda lakukan untuk membuat gambar yang disisipkan penurunan harga dapat diakses.

Tandai Gambar SVG dengan Benar

SVG adalah format yang bagus untuk grafik, ikon, ilustrasi sederhana, dan jenis gambar lainnya yang menggunakan bentuk sederhana dan garis yang tajam.

Ada dua cara untuk merender SVG di Markdown. Kedua pendekatan memiliki hal-hal spesifik yang harus Anda perhatikan:

1. Menautkan ke gambar dengan ekstensi file .svg

Catatan : Bug yang akan saya jelaskan telah diperbaiki, namun saya masih merekomendasikan saran berikut untuk beberapa tahun ke depan. Ini karena taktik Safari yang dipertanyakan dalam mengikat pembaruan browser ke pembaruan sistem, serta keraguan seputar pembaruan perangkat lunak untuk beberapa orang yang menggunakan teknologi bantu.

Jika Anda menautkan ke SVG sebagai gambar, Anda akan ingin menggunakan elemen img HTML, dan bukan kode pemformatan gambar Markdown ( ![]() ).

Alasan untuk ini adalah bahwa pembaca layar tertentu memiliki bug ketika mereka mencoba mengurai elemen img yang tertaut ke file SVG. Alih-alih mengumumkannya seperti yang diharapkan sebagai gambar, itu akan mengumumkannya sebagai grup, atau melewatkan mengumumkan gambar seluruhnya. Untuk memperbaikinya, nyatakan role="img" pada elemen gambar:

 <img role="img" alt="A sylized sunflower." src="flower.svg" />

2. Menggunakan Kode SVG Sebaris

Ada beberapa alasan untuk mendeklarasikan gambar sebagai kode SVG sebaris alih-alih menggunakan elemen img . Alasan yang paling sering saya temui adalah untuk mendukung mode gelap.

Sama seperti menggunakan elemen img, ada beberapa atribut yang perlu Anda sertakan untuk memastikan teknologi bantu menafsirkannya sebagai gambar, dan bukan kode. Dua deklarasi atribut adalah role="img" dan aria-labelledby :

 <svg aria-labelledby="svg-title" fill="none" height="54" role="img" viewBox="0 0 90 54" width="90" xmlns="https://www.w3.org/2000/svg"> <title>A pelican.</title> <path class="icon-fill" d="M88.563 2.193H56.911a7.84 7.84 0 00-12.674 8.508h-.001l.01.023c.096.251.204.495.324.733l4.532 10.241-1.089 1.09-6.361-6.554a10.18 10.18 0 00-7.305-3.09H0l5.229 4.95h7.738l2.226 2.107H7.454l4.451 4.214h7.741l1.197 1.134c.355.334.713.66 1.081.973h-7.739a30.103 30.103 0 0023.019 7.076L16.891 53.91l22.724-5.263v2.454H37.08v2.81h13.518v-.076a2.734 2.734 0 00-2.734-2.734h-5.441v-3.104l2.642-.612a21.64 21.64 0 0014.91-30.555l-1.954-4.05 1.229-1.22 3.165 3.284a9.891 9.891 0 0013.036 1.066L90 5.061v-1.43c0-.794-.643-1.438-1.437-1.438zM53.859 6.591a1.147 1.147 0 110-2.294 1.147 1.147 0 010 2.294z"/></svg>

Anda juga ingin memastikan bahwa Anda menggunakan elemen title (jangan dikelirukan dengan atribut title ) untuk mendeskripsikan gambar, mirip dengan atribut alt elemen img . Tidak seperti atribut alt , Anda juga harus mengaitkan id elemen title dengan elemen svg induknya dengan menggunakan aria-labelledby .

Jika Anda ingin masuk lebih dalam tentang penandaan SVG yang dapat diakses, saya sarankan SVG yang Dapat Diakses oleh Heather Migliorisi, dan SVG yang Dapat Diakses: Pola Sempurna Untuk Pengguna Pembaca Layar oleh Carie Fisher.

Muat Dengan Gambar Animasi Dijeda

GIF animasi adalah hal umum lainnya yang akan Anda temukan dengan konten penurunan harga — saya menemukannya lebih sering daripada tidak digunakan oleh pengembang untuk mengekspresikan kegembiraan dan frustrasi mereka ketika mendiskusikan topik teknis.

Masalahnya, animasi ini dapat mengganggu dan mempengaruhi seseorang yang mencoba membaca konten Anda. Pertimbangan kognitif seperti ADHD sangat terpengaruh di sini.

Kabar baiknya adalah Anda masih dapat memasukkan konten animasi! Ada beberapa pilihan:

1. Gunakan elemen picture , menggunakan tipe file seperti .mp4 dan .webm yang dapat dimuat dalam status dijeda, atau
2. Gunakan solusi yang memberikan fungsionalitas putar/jeda ke .gif , seperti peretasan details / summary Steve Faulkner, atau pustaka freezeframe.js.

Detail kecil ini bisa sangat membantu orang lain tanpa harus mengabaikan cara Anda mengekspresikan diri.

Tautan

Jika Anda menulis konten online, cepat atau lambat Anda harus menggunakan tautan. Berikut adalah beberapa hal yang harus diperhatikan:

Gunakan Nama Tautan Unik dan Deskriptif

Beberapa bentuk teknologi bantuan dapat menavigasi melalui daftar tautan pada halaman atau melihat dengan cara yang sama seperti mereka dapat menavigasi melalui judul. Karena itu, Anda ingin tautan Anda memberi petunjuk tentang apa yang dapat diharapkan seseorang untuk ditemukan jika mereka mengunjunginya.

 Learn more about [how to easily poach an egg](https://lifehacker.com/this-is-the-chillest-easiest-way-to-poach-an-egg-1825889759).

Anda juga ingin menghindari frasa yang ambigu, terutama jika diulang. Istilah seperti "klik di sini" dan "pelajari lebih lanjut" adalah penyebab umum. Istilah-istilah ini tidak masuk akal jika dipisahkan dari konteks konten non-tautan di sekitarnya. Selain itu, menggunakan istilah lebih dari sekali dapat menciptakan pengalaman seperti ini:

Hindari Membuka Tautan Di Tab Atau Jendela Baru

Varian Markdown tertentu seperti Kramdown memungkinkan Anda untuk menulis kode yang dapat membuka tautan di tab atau jendela baru:

 [link name](url){:target="_blank"}

Melakukan hal ini menciptakan risiko keamanan. Selain itu, pengalaman ini sangat membingungkan dan tidak diinginkan sehingga merupakan kriteria keberhasilan Pedoman Aksesibilitas Konten Web (WCAG). Jauh lebih baik untuk membiarkan semua orang yang menggunakan situs web atau aplikasi web Anda membuat pilihan sendiri tentang apakah mereka ingin membuka tautan di tab baru atau tidak.

Gunakan Lewati Tautan Dengan Bijaksana

Tautan lewati, atau "skipnav" adalah cara untuk melewati sebagian besar konten. Anda biasanya akan menemukan mereka sebagai cara untuk melewati logo dan navigasi utama pada halaman web, memungkinkan seseorang untuk dengan cepat melompat ke konten utama.

Lewati tautan tidak terbatas hanya pada kasus penggunaan ini! Dua contoh lainnya dapat berupa daftar isi dan kontrol penyortiran/pemfilteran di situs e-niaga.

Kegunaan hebat lainnya untuk melewatkan tautan adalah untuk memungkinkan seseorang melewati konten yang disematkan yang memiliki beberapa elemen interaktif:

Ini juga merupakan teknik yang bagus untuk memungkinkan seseorang melewati "perangkap keyboard", sesuatu yang biasa ditemukan di konten yang disematkan.

Perangkap keyboard adalah di mana seseorang yang tidak menggunakan mouse atau touchpad tidak dapat melepaskan diri dari komponen interaktif karena cara pembuatannya. Anda biasanya akan menemukannya dengan widget iframe disematkan.

Cara yang baik untuk menguji jebakan keyboard? Gunakan tombol Tab !

Tanpa tautan lewati, seseorang yang menggunakan teknologi bantu mungkin harus menggunakan menyegarkan halaman atau tampilan untuk menghindari jebakan. Ini tidak bagus dan sangat mengganggu jika masalah kontrol motor dilemparkan ke dalam campuran. Saya dari aliran pemikiran bahwa kebanyakan orang hanya akan menutup tab jika mereka mengalami skenario ini, daripada mencoba bergulat dengan membuatnya bekerja.

Selain posnya yang bagus tentang pengujian dengan tombol Tab , Manuel Matuzovic memberi tahu kami tentang penggunaan tautan lewati, serta peningkatan lainnya dalam Meningkatkan aksesibilitas keyboard dari CodePens Tertanam.

Hati-hati Dengan Tautan Jangkar Pos yang Dihasilkan Secara Otomatis

Beberapa generator penurunan harga secara otomatis menambahkan tautan jangkar untuk menemani setiap judul yang Anda tulis. Ini agar Anda dapat memfokuskan perhatian seseorang ke bagian yang relevan pada halaman atau tampilan saat berbagi konten.

Masalahnya adalah mungkin ada beberapa masalah teknologi bantu dengan ini, tergantung pada bagaimana tautan jangkar ini dibangun. Jika tautan jangkar hanya dililitkan di sekitar mesin terbang seperti #, , atau , kami mengalami dua masalah:

1. Nama tautan tidak masuk akal ketika dihapus dari konteks sekitarnya, dan
2. Nama tautan diulang.

Masalah ini dibahas lebih rinci oleh Amber Wilson dalam postingnya, Apakah Tautan Jangkar Anda Dapat Diakses? Postingannya juga menjelaskan secara rinci tentang solusi yang berbeda, serta potensi kelemahannya.

Tunjukkan Adanya Unduhan

Sebagian besar waktu tautan membawa Anda ke halaman atau tampilan lain. Namun, terkadang tujuannya adalah unduhan. Jika ini terjadi, browser akan:

1. Membuka aplikasi yang terkait dengan jenis file permintaan untuk menampilkannya, atau
2. Meminta Anda untuk menyimpannya ke sistem file Sistem Operasi.

Kedua pengalaman ini bisa menggelegar, terutama jika Anda tidak dapat melihat layarnya. Cara yang baik untuk mencegah pengalaman yang kurang ideal ini adalah dengan mengisyaratkan adanya unduhan dalam nama tautan. Misalnya, inilah cara Anda melakukannya di Markdown saat menautkan ke PDF:

 Download our [2020 Annual Report (PDF)](https://mycorp.biz/downloads/2020/annual-report.pdf).

Warna

Warna tidak terkait dengan penurunan harga, tetapi itu memengaruhi banyak konten yang dihasilkan penurunan harga. Masalah terkait warna terbesar adalah hal-hal yang biasanya dapat Anda modifikasi jika Anda menggunakan layanan blogging seperti WordPress, Eleventy, Ghost, Jekyll, Gatsby, dan sebagainya.

Gunakan Tema Mode Gelap

Menyediakan sakelar untuk mode gelap memungkinkan seseorang memilih pengalaman yang membantu mereka membaca. Bagi sebagian orang, ini bisa menjadi preferensi estetika, bagi yang lain itu bisa menjadi cara untuk menghindari hal-hal seperti migrain, ketegangan mata, dan kelelahan.

Yang penting di sini adalah pilihan. Biarkan seseorang yang mengaktifkan mode gelap menggunakan mode terang untuk situs web Anda, dan sebaliknya (dan pastikan UI untuk melakukannya dapat diakses).

Masalahnya, Anda tidak dapat mengetahui apa kebutuhan, keinginan, atau keadaan seseorang ketika mereka mengunjungi situs web atau aplikasi web Anda, tetapi Anda dapat memberi mereka kemampuan untuk melakukan sesuatu tentang hal itu.

Mari kita ingat juga bahwa Markdown mengekspor HTML yang sederhana dan langsung, dan itu mudah digunakan dalam CSS. Ini sangat membantu untuk membuat tema mode gelap Anda lebih mudah untuk dikembangkan.

Gunakan Penyorotan Sintaks Dengan Dukungan Kontras Warna Yang Baik

Penurunan harga dapat membuat blok kode dengan membungkus konten dalam triple backticks ( ``` ). Itu juga dapat membuat konten sebaris yang dibungkus dalam elemen code dengan membungkus karakter, kata, atau frasa dalam tanda centang tunggal.

Untuk kedua contoh, banyak orang menambahkan pustaka penyorotan sintaks seperti PrismJS untuk membantu orang memahami contoh kode yang mereka berikan.

Tema tertentu menggunakan nilai terang-terang atau gelap-dalam-gelap sebagai pilihan estetika. Sayangnya, ini berarti kode tersebut mungkin sulit atau tidak mungkin dilihat oleh beberapa individu. Triknya di sini adalah memilih tema penyorotan sintaks yang menggunakan nilai warna kontras yang cukup tinggi sehingga orang dapat benar-benar melihat setiap mesin terbang kode.

Cara untuk menentukan apakah kontrasnya cukup tinggi adalah dengan menggunakan alat seperti WebAIM dan secara manual memeriksa nilai warna yang disediakan oleh tema. Jika Anda mencari saran yang lebih cepat dan tidak keberatan dengan sedikit promosi diri, saya mempertahankan tema penyorotan sintaksis yang ramah kontras warna.

Konten yang Tidak Didukung oleh Penurunan Harga

Karena Anda dapat menggunakan HTML dalam Penurunan Harga, ada jenis konten tertentu yang akan Anda lihat lebih sering daripada konten lainnya dalam Penurunan Harga. Berikut adalah beberapa pertimbangan untuk beberapa di antaranya.

Gunakan Atribut title Untuk Menjelaskan Konten iframe

Atribut title HTML biasanya disalahgunakan untuk membuat efek tooltip. Sayangnya, ini menyebabkan banyak sakit kepala bagi pengguna teknologi bantu, dan penggunaannya dengan cara ini dianggap sebagai antipattern.

Satu-satunya penggunaan yang baik dari atribut title adalah untuk memberikan deskripsi singkat dan bermakna tentang isi iframe . Deskripsi ini memberikan petunjuk kepada pengguna teknologi bantu tentang apa yang diharapkan jika mereka menavigasi ke iframe untuk memeriksa isinya.

Untuk penurunan harga, bentuk paling umum dari konten iframe akan disematkan seperti video YouTube:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/SDdsD5AmKYA" title="YouTube: Accessibility is a Hydra | EJ Mason | CascadiaJS 2019." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Sama seperti teks tautan Anda, Anda juga ingin menghindari konten title yang umum dan berulang. Kode sematan YouTube default ke YouTube video player , yang tidak terlalu bagus. Kami dapat melakukan sedikit lebih baik dan memperbaruinya ke YouTube: Video title . Ini terutama akan membantu jika ada lebih dari satu video YouTube yang disematkan pada halaman atau tampilan.

Mengenai mengapa YouTube melakukannya dengan cara ini ketika sudah mengetahui informasi judul video adalah masalah lain sepenuhnya.

Berikan Teks Dan Transkrip Untuk Video Dan Rekaman Audio

Berbicara tentang YouTube, hal lain yang ingin Anda lakukan adalah memastikan video dan audio Anda memiliki teks dan transkrip.

keterangan

Teks menampilkan versi teks dari konten video secara realtime saat sedang diucapkan, memungkinkan seseorang yang secara biologis atau tidak langsung tidak dapat mendengar audio untuk dapat memahami konten video. Teks juga dapat mencakup efek suara, musik, dan isyarat lain yang penting untuk mengkomunikasikan makna.

Sebagian besar penyedia hosting video populer memiliki fitur untuk mendukung teks, termasuk menampilkannya dalam konteks yang disematkan. Bagian penting di sini adalah untuk menghindari omong kosong—tinjau secara manual teks yang dibuat secara otomatis untuk memastikan mereka masuk akal bagi manusia.

Transkrip

Transkrip adalah saudara teks. Mereka mengambil semua dialog lisan, efek suara dan musik terkait, dan detail penting lainnya dan mencantumkannya di luar video atau audio yang disematkan. Ada banyak manfaat untuk melakukan ini, termasuk memungkinkan seseorang untuk:

• Baca konten video dan audio dengan kecepatan mereka sendiri;
• Ubah ukuran dan presentasi konten;
• Cetak konten atau ubah menjadi format yang lebih mudah dicerna;
• Lebih mudah menemukan konten melalui mesin pencari;
• Lebih mudah menerjemahkan konten.

Mode Pembaca

Seperti masalah penurunan harga lainnya, Mode Pembaca dapat menawarkan banyak manfaat dari perspektif aksesibilitas.

Jika Anda tidak terbiasa, Mode Pembaca adalah fitur yang ditawarkan oleh banyak browser yang menghapus segala sesuatu selain konten utama. Sebagian besar mode pembaca juga menyediakan kontrol untuk menyesuaikan ukuran teks, font, tinggi garis, warna latar depan dan latar belakang, lebar kolom, bahkan membuat perangkat Anda membacakan konten untuk Anda!

Anda tidak dapat langsung memicu Mode Pembaca dengan menggunakan Penurunan Harga. Konten penurunan harga bentuk panjang, bagaimanapun, sering dirender dalam template yang dapat diatur untuk membuatnya ramah Mode Pembaca.

Mandy Michael mengajari kami cara melakukan ini di posnya, Membangun situs web untuk Mode Pembaca Safari, dan aplikasi membaca lainnya. Kombinasi HTML semantik, elemen sectioning, dan sedikit mikrodata terstruktur adalah semua yang diperlukan untuk membuka fitur hebat ini.

Anda Tidak Harus Melakukan Semuanya Sekaligus

Ini adalah posting panjang yang mencakup berbagai aspek Markdown dan bagaimana interaksinya dengan teknologi lain. Ini bisa tampak menakutkan, karena banyak konten untuk dibahas di beberapa bidang subjek yang berbeda.

Hal tentang pekerjaan aksesibilitas adalah bahwa setiap sedikit membantu. Anda tidak harus membahas setiap pertimbangan yang saya miliki dalam posting ini dalam satu perubahan besar dan menyeluruh. Alih-alih, coba pilih satu hal untuk menjadi fokus, dan bangun dari sana.

Ketahuilah bahwa setiap perubahan dan pembaruan akan berdampak langsung pada kualitas hidup seseorang saat menggunakan web, dan itu sangat besar.

Lanjutkan Membaca di Majalah Smashing

• CommonMark: Spesifikasi Formal Untuk Penurunan Harga
• Membangun API Node.js Express Untuk Mengonversi Penurunan Harga Menjadi HTML
• Membangun Pustaka Pola Dengan Shadow DOM Dalam Penurunan Harga