Mengelakkan redundansi dengan wai-aria di halaman html

Sejak menggabungkan peranan ARIA ke HTML, pembangunan web telah menjadi lebih mudah. ARIA meningkatkan kebolehgunaan aplikasi web untuk orang kurang upaya dengan menyediakan maklumat semantik tambahan untuk teknologi bantuan (ATS). Walau bagaimanapun, soalan utama berterusan: Adakah atribut peranan aria diperlukan apabila elemen HTML sudah mempunyai semantik yang wujud?

Artikel ini meneroka isu ini, memberi tumpuan kepada bagaimana unsur -unsur struktur HTML5 yang lebih baru dengan semantik tersirat berinteraksi dengan peranan ARIA.

Mata utama:

Elakkan menggunakan peranan ARIA jika elemen HTML sudah menyediakan semantik yang diperlukan. Atribut ARIA yang tidak perlu membuat kod berlebihan.
unsur -unsur HTML5 mempunyai semantik aria tersirat lalai; Oleh itu, menambahkan peranan ARIA yang sepadan atau atribut
• biasanya berlebihan dan tidak digalakkan. aria-*
walaupun semantik tersirat ini, menambah peranan aria untuk alasan keserasian mungkin dipertimbangkan, walaupun ia mengakibatkan redundansi.

aria asas dan kesalahpahaman umum:

WAI-Aria (Aplikasi Internet Kaya yang Boleh Diakses) terdiri daripada atribut meningkatkan elemen HTML. Atribut -atribut ini menyampaikan peranan, harta, dan maklumat negeri kepada ATS melalui API kebolehaksesan penyemak imbas. Bagi pendatang baru Aria, "Pengenalan kepada Wai-Aria" Stephan adalah sumber yang disyorkan.

Pandangan yang lazim dalam komuniti HTML adalah: "Jangan gunakan Aria jika HTML sudah mengendalikannya." Lebih tepat lagi: Gunakan ARIA hanya apabila elemen HTML yang dilaksanakan tidak mempunyai sokongan aksesibiliti.

Peranan aria dan kebanyakan elemen:

Peranan Aria, sifat, dan negara boleh mendedahkan semantik elemen HTML. Ini dikenali sebagai unsur

semantik aria tersirat lalai .

mengutamakan HTML yang betul secara semantik (memanfaatkan semantik asli) sebelum menambah atribut ARIA. Peranan ARIA umumnya tidak menambah semantik lalai unsur -unsur HTML. Pastikan ia mudah: Jika elemen HTML secara semulajadi menyediakan semantik, jangan gunakan Aria; berbuat demikian mencipta kod berlebihan.

Peranan aria dan html4:

sebagai pakar kebolehcapaian Steve Faulkner menerangkan, elemen HTML4 (dan lebih awal) tidak memerlukan peranan ARIA tambahan untuk mendedahkan semantik lalai mereka kerana mereka sudah dipetakan. Menambah peranan ARIA dalam konteks ini adalah sia -sia dan menambah kerumitan yang tidak perlu untuk ulasan kod.

HTML5 Enhancements:

Spesifikasi HTML5 menyatakan: "Dalam kebanyakan kes, menetapkan peranan ARIA dan/atau

atribut yang sepadan dengan semantik Aria yang tidak perlu dan tidak disyorkan."

Walaupun elemen HTML5 mempunyai semantik aria yang tersirat lalai, ia tidak dijamin bahawa setiap elemen dipetakan tanpa pengesahan. Oleh itu, menambahkan peranan aria sebagai langkah berjaga -jaga mungkin dipertimbangkan, menerima redundansi.

redundansi dalam aria:

Menambah peranan aria tersirat lalai ke elemen HTML5 interaktif (seperti elemen bentuk atau <button></button>) tidak mempunyai kesan. Walaupun tidak berbahaya, ia tidak perlu dan membuang masa pembangunan. Unsur -unsur interaktif memerlukan nama yang boleh diakses (memberikan nilai kepada harta yang boleh diakses API yang boleh diakses). Contohnya:

Kurang cekap:

<label>Title</label><input type="text">

lebih cekap:

<label for="title">Title</label><input type="text" id="title">

Contoh kedua menggunakan atribut

dan for, jelas mengaitkan label dengan input. id Contoh -contoh redundansi (untuk mengelakkan):

Peranan berlebihan pada elemen interaktif:

tidak perlu.

<button role="button">Submit</button>

role="button"

Peranan aria bersama rakan sejawat HTML asli:

atribut html berlebihan.

<div hidden aria-hidden="true"></div>

hidden aria-hidden aria pada unsur -unsur struktur yang ditubuhkan:

• kedua -dua
dan
tidak perlu.

<h1 id="I-am-a-Heading">I am a Heading</h1>

role aria dengan elemen struktur html5: aria-level

HTML5 memperkenalkan unsur -unsur struktur (mis., , ,

) dengan pemetaan semantik aria yang tersirat lalai. Walau bagaimanapun, sesetengah pemetaan bersyarat. Sebagai contoh,

peta ke <aside></aside> hanya jika tidak dalam <article></article> atau <main></main>. Pelayar sememangnya mendedahkan semantik lalai ini. <footer></footer> role=contentinfo <article></article> Sokongan penyemak imbas: <section></section>

Pelayar yang paling moden menyokong semantik tersirat lalai elemen struktur dan seksyen HTML5. (Pelaksanaan Internet Explorer mungkin berbeza -beza.)

Kesimpulan:

Elakkan peranan Aria, sifat, dan menyatakan jika spesifikasi HTML5 sudah mentakrifkan ciri tersebut.

Banyak elemen HTML5 mempunyai semantik aria yang lalai.
• Sokongan aria umumnya sangat baik merentasi pelayar moden (dengan pengecualian).
Pertimbangkan implikasi menambahkan atribut ARIA kepada elemen HTML dan berkongsi pendapat anda dalam komen.
Soalan Lazim (Soalan Lazim):

(bahagian Soalan Lazim dari input asal dikekalkan di sini, kerana ia secara langsung berkaitan dengan topik dan tidak memerlukan pengubahsuaian untuk pseudo-asal.)

Apakah tujuan Wai-Aria di halaman HTML? Konsortium (W3C). Ia menyediakan rangka kerja untuk meningkatkan kebolehcapaian dan interoperabilitas kandungan web dan aplikasi, terutamanya untuk orang kurang upaya. Ia melakukan ini dengan menentukan cara untuk menjadikan kandungan web lebih mudah diakses oleh orang kurang upaya, seperti dengan menyediakan semantik tambahan untuk membantu teknologi bantuan seperti pembaca skrin memahami struktur dan fungsi kandungan web. WAI-ARIA DAN HTML PAGES?

Redundansi di halaman WAI-Aria dan HTML boleh berlaku apabila maklumat atau fungsi yang sama disediakan lebih daripada sekali. Sebagai contoh, jika elemen HTML sudah mempunyai peranan tersirat yang ditakrifkan oleh spesifikasi HTML, dan pemaju menambah peranan ARIA yang sepadan dengan peranan yang tersirat, ini mewujudkan redundansi. Ini boleh mengelirukan teknologi bantuan dan pengguna yang bergantung kepada mereka. Bekerja dengan cara yang sedikit berbeza. Atribut tersembunyi HTML menyembunyikan elemen dari semua pengguna, sementara atribut tersembunyi Aria khusus menyembunyikan elemen dari teknologi bantuan. Sekiranya elemen ditandakan dengan Aria yang tersembunyi, ia masih dapat dilihat oleh pengguna yang tidak menggunakan teknologi bantuan. Peranan tidak perlu untuk elemen 'li' dalam HTML kerana ia sudah mempunyai peranan tersirat senarai. Menambah peranan ARIA ListItem ke elemen 'li' mencipta redundansi. Untuk mengelakkan ini, hanya gunakan elemen 'li' seperti itu, tanpa menambahkan peranan aria. audit. Ini kerana peranan ARIA yang berlebihan boleh mengelirukan teknologi bantuan, yang membawa kepada pengalaman pengguna yang kurang dapat diakses. Dengan mengelakkan redundansi, anda dapat meningkatkan kebolehcapaian kandungan web anda dan meningkatkan peluang anda untuk meluluskan audit kebolehaksesan. untuk menyediakan semantik tambahan di mana spesifikasi HTML tidak memberikannya. Mereka tidak boleh digunakan untuk menduplikasi semantik yang telah disediakan oleh HTML. Dengan menggunakan peranan ARIA dengan bijak dan mengelakkan redundansi, anda dapat meningkatkan kebolehcapaian kandungan web anda.

Apakah beberapa kesilapan yang biasa untuk dielakkan apabila menggunakan peranan ARIA? Penggunaan berlebihan peranan ARIA boleh mengelirukan teknologi bantuan, sementara penggunaan yang salah boleh menyebabkan semantik yang salah. Peranan ARIA yang berlebihan boleh menjadikan kandungan web anda terlalu kompleks dan sukar untuk menavigasi. Kod ARIA dengan menggunakan alat audit aksesibiliti. Alat ini dapat mengenal pasti peranan ARIA yang berlebihan dan isu kebolehaksesan lain dalam kod anda. Dengan menetapkan isu -isu ini, anda boleh meningkatkan kebolehcapaian kandungan web anda.

Apakah peranan teknologi bantuan dalam akses web? Mereka membantu orang kurang upaya akses dan berinteraksi dengan kandungan web. Contoh teknologi bantuan termasuk pembaca skrin, yang membacakan kandungan web untuk orang yang mengalami masalah visual, dan perisian pengiktirafan suara, yang membolehkan orang yang mengalami masalah mobiliti untuk mengawal komputer mereka dengan suara mereka. Fungsi teknologi bantuan?

Wai-Aria meningkatkan fungsi teknologi bantuan dengan menyediakan semantik tambahan yang membantu teknologi ini memahami Struktur dan fungsi kandungan web. Ini membolehkan teknologi bantuan memberikan perwakilan yang lebih tepat dan berguna bagi kandungan web kepada pengguna mereka.

Atas ialah kandungan terperinci Mengelakkan redundansi dengan wai-aria di halaman html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!