วิธีใช้ ARIA ใน HTML ของไซต์ WordPress ของคุณ

เป้าหมายหลักของการพัฒนาเว็บประการหนึ่งคือการสร้างประสบการณ์ผู้ใช้ที่มีส่วนร่วม คุณมักจะทำเช่นนี้โดยการรวมคุณลักษณะแบบอินเทอร์แอกทีฟและองค์ประกอบภาพที่สวยงามบนเว็บไซต์ของคุณ อย่างไรก็ตาม ผู้เข้าชมที่มีศักยภาพทุกคนอาจไม่จำเป็นต้องเข้าถึงแง่มุมเหล่านั้น โดยเฉพาะอย่างยิ่งผู้ที่อาศัยโปรแกรมอ่านหน้าจอ

โชคดีที่มีระบบที่ช่วยให้ผู้ใช้ ทุกคน ของคุณได้สัมผัสกับผลลัพธ์ของการทำงานหนักของคุณ การรวมแอพพลิเคชั่นริชอินเทอร์เน็ตที่เข้าถึงได้ (ARIA) ไว้ใน HTML ของเว็บไซต์ของคุณนั้นใช้ความพยายามเพียงเล็กน้อยเท่านั้น และสามารถให้ผลตอบแทนมหาศาล โพสต์นี้จะแนะนำคุณเกี่ยวกับ ARIA และวิธีใช้งาน ไปกันเถอะ!

บทนำเกี่ยวกับ ARIA: มันคืออะไรและทำไมคุณอาจต้องการใช้มัน

กล่าวโดยย่อ ARIA เป็นวิธีระบุแอตทริบิวต์ของ HTML เพื่อให้โปรแกรมอ่านหน้าจอสามารถระบุได้อย่างแม่นยำและส่งต่อไปยังผู้เยี่ยมชม เป็นลักษณะสำคัญของการพัฒนาเว็บที่เข้าถึงได้ และช่วยสร้างประสบการณ์ที่ถูกต้องมากขึ้นสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ

เนื่องจากการรวม ARIA ไว้ใน HTML ของคุณจะส่งผลต่อวิธีที่เบราว์เซอร์ปรับเปลี่ยนหน้าเว็บของคุณสำหรับโปรแกรมอ่านหน้าจอ เนื้อหาที่แก้ไขนี้ถูกนำเสนอในแผนผังการช่วยสำหรับการเข้าถึง และ ARIA จะทำหน้าที่แปลองค์ประกอบ HTML ของคุณลงไป

ตัวอย่างเช่น สมมติว่าคุณมีหน้าเว็บที่มีช่องทำเครื่องหมาย และคุณเคยใช้ ARIA ใน HTML ของคุณ ARIA จะบอกโปรแกรมอ่านหน้าจอให้แจ้งผู้ใช้ว่ามีกล่องกาเครื่องหมายบนหน้า และจะระบุว่าได้เลือกช่องทำเครื่องหมายไว้หรือไม่ Native HTML ไม่สามารถทำได้ด้วยตัวเอง

ลองคิดดูว่าคุณใช้เว็บบ่อยแค่ไหน ไม่ใช่แค่ในการทำงานแต่ในชีวิตประจำวันของคุณ ทีนี้ลองนึกดูว่าเว็บส่วนใหญ่ใช้ไม่ได้สำหรับคุณหรือไม่ คุณจะสามารถเข้าถึงทรัพยากรด้านการศึกษา การจ้างงาน การดูแลสุขภาพ ข้อมูล การสื่อสาร และแม้แต่ความบันเทิงน้อยลง

การใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนาเว็บที่เข้าถึงได้เป็นวิธีหนึ่งในการทำให้อินเทอร์เน็ตเป็นสถานที่แห่งโอกาสที่เท่าเทียมกันสำหรับทุกคน โดยไม่คำนึงถึงอายุหรือความสามารถ ซึ่งถือเป็นสิทธิมนุษยชนขั้นพื้นฐานขององค์การสหประชาชาติ และเป็นเป้าหมายที่คู่ควรแก่การแสวงหาผลประโยชน์ของตนเอง

หากยังไม่เพียงพอที่จะให้คุณลงทุนในการใช้ ARIA คุณอาจต้องการทราบด้วยว่าการพัฒนาที่เข้าถึงได้นั้นมีประโยชน์จากมุมมองทางธุรกิจเช่นกัน มันทับซ้อนกับแนวทางปฏิบัติที่ดีที่สุดสำหรับการเพิ่มประสิทธิภาพกลไกค้นหา และเพิ่มการเข้าถึงเว็บไซต์ของคุณ นอกจากนี้ ในบางกรณีกฎหมายกำหนดไว้ด้วย กล่าวอีกนัยหนึ่ง มีเหตุผลมากมายที่จะดำเนินการตามขั้นตอนง่ายๆ ในการทำให้ไซต์ของคุณเข้าถึงได้ง่ายขึ้น

วิธีใช้ ARIA ใน HTML ของไซต์ WordPress (หลักปฏิบัติ 3 ประการ)

เราขอแนะนำอย่างยิ่งให้คุณให้ความรู้เกี่ยวกับ ARIA และการเข้าถึงเว็บต่อไปนอกเหนือจากขอบเขตของโพสต์นี้ คุณอาจต้องการลองทดสอบการช่วยสำหรับการเข้าถึงปัจจุบันของไซต์ของคุณเป็นพิเศษ

ที่กล่าวว่ามีเพียงสามสิ่งที่คุณต้องรู้เพื่อเริ่มใช้ ARIA ใน HTML ของไซต์ WordPress ของคุณ การเรียนรู้แนวทางปฏิบัติด้านล่างควรให้รากฐานที่มั่นคงแก่คุณ

1. การใช้ ARIA กับ HTML เชิงความหมาย

ก่อนที่เราจะพูดถึงวิธีการใช้ ARIA กับ HTML ของคุณ สิ่งสำคัญที่ควรทราบคือ เมื่อใด จึงจะเหมาะสมที่จะใช้ แม้ว่า HTML ดั้งเดิมเพียงอย่างเดียวจะไม่สร้างเนื้อหาเว็บที่เข้าถึงได้ แต่ก็มีองค์ประกอบเชิงความหมายบางอย่างที่ทำให้ ARIA ไม่จำเป็น หรือจะขัดแย้งกับ ARIA หากใช้ไม่ถูกต้อง

องค์ประกอบเชิงความหมาย เช่น <header> , <figure> และ <nav> อธิบายวัตถุประสงค์ของ HTML การรวม ARIA เข้ากับองค์ประกอบเหล่านี้จะมีความซ้ำซ้อน เนื่องจาก HTML เชิงความหมายได้แสดงถึงบทบาทขององค์ประกอบแล้ว (เราจะพูดถึงบทบาท ARIA เพิ่มเติมในอีกสักครู่)

นอกจากนี้ยังมีกฎเกณฑ์บางอย่างที่ใช้กับ ARIA เพื่อป้องกันไม่ให้นักพัฒนาใช้งานในลักษณะที่ขัดแย้งกับ HTML เชิงความหมาย World Wide Web Consortium (W3C) มีตารางที่มีประโยชน์ซึ่งแบ่งองค์ประกอบ HTML เชิงความหมายที่แสดงถึงบทบาท ARIA:

คอลัมน์แรกระบุองค์ประกอบ HTML ในขณะที่คอลัมน์ที่สองแสดงบทบาทโดยนัย หากองค์ประกอบมีบทบาทโดยนัย คุณไม่จำเป็นต้องรวมบทบาท ARIA เพิ่มเติมสำหรับองค์ประกอบนั้น คอลัมน์ที่สามแสดงรายการบทบาทที่องค์ประกอบ HTML แต่ละรายการสามารถมีได้ ตามแนวทางปฏิบัติที่ดีที่สุด

2. การเพิ่มบทบาทให้กับแท็ก HTML

เมื่อคุณแน่ใจว่าองค์ประกอบ HTML ที่คุณกำลังทำงานอยู่จำเป็นต้องใช้ ARIA แล้ว คุณสามารถเข้าสู่การใช้ 'บทบาท' และ 'แอตทริบิวต์' ได้ คุณอาจทราบแล้วว่าบทบาทของ ARIA ทำอะไรได้บ้างจากหัวข้อก่อนหน้านี้ พวกเขาระบุประเภทขององค์ประกอบที่อยู่ภายในแท็ก และแสดงถึงวัตถุประสงค์ขององค์ประกอบ

ตัวอย่างเช่น หากคุณต้องการสร้างการแจ้งเตือนเพื่อแจ้งให้ผู้ใช้ทราบว่าจำเป็นต้องติดตั้งการอัปเดต คุณจะต้องใช้บทบาท "การแจ้งเตือน" ดังนี้:

 <div role="alert">
<p>โปรดติดตั้งการอัปเดตล่าสุด!</p>
</div>

ดังที่เราได้อธิบายไว้ก่อนหน้านี้ คุณไม่จำเป็นต้องกำหนดบทบาทหากองค์ประกอบนั้นมีความหมายและบ่งบอกถึงบทบาท และคุณไม่ควรกำหนดบทบาทใหม่ให้กับองค์ประกอบที่ขัดแย้งกับบทบาทโดยนัย อย่างไรก็ตาม คุณควรทราบด้วยว่าคุณสามารถใช้บทบาทได้เพียงบทบาทเดียวกับแต่ละองค์ประกอบ

คิดแบบนี้ – บทบาทกำหนดว่าองค์ประกอบ คือ อะไร องค์ประกอบไม่สามารถเป็นสองสิ่งพร้อมกันได้ ดังนั้นคุณควรเลือกบทบาทที่อธิบายได้ดีที่สุด ที่กล่าวว่า เมื่อคุณต้องการ คุณอาจเลือกที่จะซ้อนองค์ประกอบหนึ่งภายในองค์ประกอบที่มีบทบาทต่างกัน

ตัวอย่างเช่น หากคุณต้องการเพิ่มการเตือนข้างต้นในส่วนหัว อาจมีลักษณะดังนี้:

 <header><div role="alert">
<p>โปรดติดตั้งการอัปเดตล่าสุด!</p>
</div></header>

แทนที่จะระบุว่าองค์ประกอบเดียวเป็นทั้งส่วนหัวและการแจ้งเตือน สิ่งนี้ทำให้ชัดเจนว่ามีการแจ้งเตือนอยู่ภายในส่วนหัว

3. รวมคุณลักษณะของหมายเหตุสถานะและคุณสมบัติ

คุณลักษณะเป็นองค์ประกอบที่สองที่ประกอบขึ้นเป็น ARIA พวกเขาแตกต่างจากบทบาทที่พวกเขาบอกผู้อ่านหน้าจอบางอย่างที่สำคัญเกี่ยวกับองค์ประกอบเฉพาะ แทนที่จะกำหนดว่าองค์ประกอบนั้นคืออะไร แอตทริบิวต์ ARIA มีสองประเภท:

• รัฐ แบ่งปันข้อมูลเกี่ยวกับคุณลักษณะที่มีแนวโน้มที่จะเปลี่ยนแปลงเมื่อผู้ใช้โต้ตอบกับพวกเขา ตัวอย่างเช่น อาจรวมถึงช่องทำเครื่องหมายหรือปุ่มตัวเลือก
• คุณสมบัติ ชี้ให้เห็นคุณสมบัติที่ไม่น่าจะเปลี่ยนแปลงระหว่างการใช้งาน องค์ประกอบที่ติดป้ายกำกับองค์ประกอบอื่น หรือระดับลำดับชั้นที่องค์ประกอบตั้งอยู่ เป็นคุณสมบัติทั้งคู่

ทั้งสองมองเห็นได้ง่าย เนื่องจากมักเริ่มต้นด้วย aria- ตามด้วยสถานะเฉพาะหรือคุณสมบัติที่ใช้ ตัวอย่างเช่น สถานะที่ใช้ในการแจ้งโปรแกรมอ่านหน้าจอว่าช่องทำเครื่องหมายถูกเติมโดยค่าเริ่มต้นจะถูก ตรวจสอบ โดย aria ดังในตัวอย่างนี้:

 <span role="ช่องทำเครื่องหมาย" 
aria-checked="จริง"
tabindex="0">
</span>

ในทำนองเดียวกัน คุณสมบัติที่ใช้ในการจดบันทึกเมื่อองค์ประกอบหนึ่งกำลังติดป้าย กำกับ อีกองค์ประกอบหนึ่งคือ aria-labelledby คุณสามารถใช้แอตทริบิวต์นี้กับรูปภาพได้ เช่น เพื่อระบุคำอธิบายภาพที่เกี่ยวข้อง:

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="โรงอุปรากรซิดนีย์">
<figcaption>เราเห็นโอเปร่า <cite>ช่างตัดผมแห่งเซบียา</cite>ที่นี่!</figcaption>
</figure>

เราขอแนะนำให้ปรึกษารายการบทบาท สถานะ และคุณสมบัติของ W3C ที่อนุญาต เพื่อดูตัวอย่างแอตทริบิวต์เพิ่มเติมที่คุณสามารถใช้ได้

บทสรุป

เมื่อพูดถึงการพัฒนาเว็บ การสร้างเนื้อหาที่เข้าถึงได้อาจไม่ใช่สิ่งแรกที่คุณนึกถึง อย่างไรก็ตาม ด้วยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการช่วยสำหรับการเข้าถึงเว็บ และการรวม ARIA HTML ในไซต์ของคุณ คุณจะสามารถมีบทบาทในการทำให้ทุกคนสามารถเข้าถึงเว็บได้

หลักปฏิบัติหลักสามประการสำหรับการใช้ ARIA บนไซต์ WordPress ของคุณ ได้แก่:

1. การใช้ ARIA กับ HTML เชิงความหมาย
2. การเพิ่มบทบาทให้กับแท็ก HTML
3. รวมถึงคุณลักษณะเพื่อบันทึกสถานะและคุณสมบัติ

คุณมีคำถามเกี่ยวกับการใช้ ARIA บนไซต์ WordPress ของคุณหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความ EgudinKa / shutterstock.com