เพื่อให้โปรแกรมอ่านหน้าจอนำเสนอ UI แบบเสียงพูดแก่ผู้ใช้ องค์ประกอบต้องมีป้ายกำกับที่เหมาะสมหรือข้อความแทนที่ ป้ายกำกับหรือข้อความ ทางเลือกจะให้ชื่อที่เข้าถึงได้แก่องค์ประกอบ ซึ่งเป็นพร็อพเพอร์ตี้คีย์รายการหนึ่ง สำหรับการแสดงความหมายขององค์ประกอบในโครงสร้างการช่วยเหลือพิเศษ
เมื่อรวมชื่อองค์ประกอบเข้ากับบทบาทขององค์ประกอบ องค์ประกอบดังกล่าวจะให้ บริบทของผู้ใช้เพื่อให้เข้าใจว่ากำลังโต้ตอบองค์ประกอบประเภทใด รวมทั้งวิธีการแสดงหน้าเว็บ หากชื่อไม่ปรากฏ ระบบจะใช้ โปรแกรมอ่านหน้าจอจะอ่านเฉพาะบทบาทขององค์ประกอบเท่านั้น ลองนึกภาพดูว่ากำลังพยายามนำทางอยู่ หน้าเว็บและฟัง "ปุ่ม" "ช่องทำเครื่องหมาย" "รูปภาพ" ที่ไม่มีเพิ่มเติม บริบท นี่จึงเป็นเหตุผลที่การใช้ป้ายกำกับ และข้อความเป็นทางเลือกจึงสำคัญต่อ ประสบการณ์ที่เข้าถึงได้ง่าย
ตรวจสอบชื่อองค์ประกอบ
การตรวจสอบชื่อที่เข้าถึงได้ขององค์ประกอบโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome นั้นทำได้ง่าย โดยมีขั้นตอนดังนี้
- คลิกขวาที่องค์ประกอบแล้วเลือกตรวจสอบ การดำเนินการนี้จะเปิดเครื่องมือสำหรับนักพัฒนาเว็บขึ้น แผงองค์ประกอบ
- ในแผงองค์ประกอบ ให้มองหาแผงการช่วยเหลือพิเศษ รูปภาพอาจซ่อนอยู่
หลังสัญลักษณ์
» - ในเมนูแบบเลื่อนลงพร็อพเพอร์ตี้ที่คำนวณ ให้หาพร็อพเพอร์ตี้ชื่อ
ไม่ว่าคุณจะดู img ที่มีข้อความ alt หรือ input ที่มี
label สถานการณ์เหล่านี้จะให้ผลลัพธ์เดียวกัน นั่นคือการให้
ของชื่อที่สามารถเข้าถึงได้
ตรวจหาชื่อที่หายไป
การสร้างชื่อที่เข้าถึงได้ให้องค์ประกอบนั้นทำได้หลายวิธี โดยขึ้นอยู่กับประเภทของ ตารางต่อไปนี้แสดงประเภทองค์ประกอบที่พบบ่อยที่สุด ที่ต้องใช้ชื่อที่เข้าถึงได้และลิงก์ไปยังคำอธิบายวิธีเพิ่ม
| ประเภทองค์ประกอบ | วิธีเพิ่มชื่อ |
|---|---|
| เอกสาร HTML | ติดป้ายกำกับเอกสารและเฟรม |
องค์ประกอบ <frame> หรือ <iframe>
|
ติดป้ายกำกับเอกสารและเฟรม |
| องค์ประกอบรูปภาพ | ใส่ข้อความแสดงแทนสำหรับรูปภาพและวัตถุ |
<input type="image"> องค์ประกอบ
|
ใส่ข้อความแสดงแทนสำหรับรูปภาพและวัตถุ |
<object> องค์ประกอบ
|
ใส่ข้อความแสดงแทนสำหรับรูปภาพและวัตถุ |
| ปุ่ม | ปุ่มและลิงก์ป้ายกำกับ |
| ลิงก์ | ปุ่มและลิงก์ป้ายกำกับ |
| องค์ประกอบแบบฟอร์ม | องค์ประกอบแบบฟอร์มป้ายกำกับ |
ติดป้ายกำกับเอกสารและเฟรม
ทุกหน้าควรมี
title
ที่อธิบายคร่าวๆ ว่าหน้าเว็บนั้นเกี่ยวกับอะไร องค์ประกอบ title ให้
ชื่อที่เข้าถึงได้ของหน้านั้น เมื่อโปรแกรมอ่านหน้าจอเข้ามาในหน้าเว็บ
ข้อความแรกที่ประกาศ
ตัวอย่างเช่น หน้าเว็บด้านล่างมีชื่อ "สูตรเบเกอรี่แท่งเมเปิลแท่งของแมรี่":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
ในทำนองเดียวกัน องค์ประกอบ frame หรือ iframe ควรมีแอตทริบิวต์ title ดังนี้
<iframe title="An interactive map of San Francisco" src="…"></iframe>
แม้ว่าเนื้อหาของ iframe อาจมีองค์ประกอบ title ภายในของตัวเอง
โปรแกรมอ่านหน้าจอมักจะหยุดที่ขอบเขตของเฟรมและอ่านออกเสียง
บทบาท "เฟรม" และชื่อที่เข้าถึงได้โดยแอตทริบิวต์ title ช่วงเวลานี้
ช่วยให้ผู้ใช้ตัดสินใจได้ว่าต้องการเข้าสู่เฟรมหรือข้าม
ใส่ข้อความแสดงแทนสำหรับรูปภาพและวัตถุ
img ควรแสดงพร้อมกับ
alt
เพื่อตั้งชื่อที่เข้าถึงได้ง่ายให้กับรูปภาพ หากโหลดรูปภาพไม่ได้ ระบบจะ
ระบบใช้ข้อความ alt เป็นตัวยึดตำแหน่งเพื่อให้ผู้ใช้ทราบว่ารูปภาพนั้นคืออะไร
พยายามจะสื่อ
การเขียนข้อความaltที่ดีเป็นศิลปะ แต่ก็มีหลักเกณฑ์อยู่ 2 ข้อ
ที่คุณสามารถทำตาม
- พิจารณาว่ารูปภาพมีเนื้อหาที่อาจยากต่อการเข้าถึงหรือไม่ ได้รับจากการอ่านข้อความรอบๆ
- หากใช่ ให้ถ่ายทอดเนื้อหาให้สั้นกระชับที่สุดเท่าที่จะเป็นไปได้
หากรูปภาพทำหน้าที่เป็นการตกแต่งและไม่ได้ให้เนื้อหาที่เป็นประโยชน์
คุณจะระบุแอตทริบิวต์ alt="" ที่ว่างเปล่าเพื่อนำออกจากการช่วยเหลือพิเศษได้
ต้นไม้
รูปภาพในรูปแบบลิงก์และอินพุต
รูปภาพที่อยู่ในลิงก์ควรใช้แอตทริบิวต์ alt ของ img เพื่ออธิบาย
ตำแหน่งที่ผู้ใช้จะไปถึงเมื่อคลิกลิงก์
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
ในทำนองเดียวกัน หากใช้องค์ประกอบ <input type="image"> เพื่อสร้างรูปภาพ
ควรมีข้อความ alt ที่อธิบายการดำเนินการที่เกิดขึ้นเมื่อ
ผู้ใช้คลิกปุ่ม
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
วัตถุที่ฝัง
องค์ประกอบ <object> ที่มักใช้สำหรับการฝัง เช่น Flash, PDF หรือ
ActiveX ควรมีข้อความสำรองด้วย ข้อความนี้คล้ายกับรูปภาพ
แสดงหากองค์ประกอบนั้นแสดงผลไม่สำเร็จ ข้อความสำรองจะอยู่ด้านใน
องค์ประกอบ object ในรูปแบบข้อความทั่วไป เช่น "รายงานประจำปี" ด้านล่าง
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
ปุ่มและลิงก์ป้ายกำกับ
ปุ่มและลิงก์ต่างๆ มักมีความสำคัญต่อประสบการณ์ใช้งานเว็บไซต์ และ ทั้งคู่ต้องมีชื่อที่ดีในการเข้าใช้งาน
ปุ่ม
องค์ประกอบ button พยายามคำนวณชื่อที่เข้าถึงได้เสมอโดยใช้
เนื้อหาข้อความ สำหรับปุ่มที่ไม่ได้เป็นส่วนหนึ่งของ form ให้เขียน
ดำเนินการเพราะเนื้อหาข้อความอาจเป็นสิ่งที่คุณต้องการเพื่อสร้าง
ชื่อ
<button>Book Room</button>
ข้อยกเว้นที่พบบ่อยอย่างหนึ่งสำหรับกฎนี้คือปุ่มไอคอน ปุ่มไอคอนอาจใช้องค์ประกอบ รูปภาพหรือแบบอักษรของไอคอนเพื่อระบุเนื้อหาข้อความสำหรับปุ่ม ตัวอย่างเช่น ปุ่มที่ใช้ในตัวแก้ไข What You See Is What You Get (WYSIWYG) เพื่อจัดรูปแบบ ข้อความมักจะเป็นเพียงสัญลักษณ์กราฟิก
เมื่อทำงานกับปุ่มไอคอน การแสดงข้อความที่ชัดเจน
ชื่อที่เข้าถึงได้โดยใช้แอตทริบิวต์ aria-label aria-label จะลบล้าง
เนื้อหาข้อความภายในปุ่ม ซึ่งจะช่วยให้คุณสามารถอธิบายการดำเนินการได้อย่างชัดเจน
ใครก็ตามที่ใช้โปรแกรมอ่านหน้าจอ
<button aria-label="Left align"></button>
ลิงก์
ลิงก์จะใช้ชื่อที่เข้าถึงได้จากข้อความเป็นหลัก เช่นเดียวกับปุ่ม เนื้อหา เคล็ดลับที่ดีในการสร้างลิงก์คือการใส่ส่วนที่มีความหมายที่สุด ข้อความลงในลิงก์ แทนที่จะเป็นคำที่ติดปาก เช่น "ที่นี่" หรือ "อ่าน เพิ่มเติม"
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
ซึ่งมีประโยชน์อย่างยิ่งสำหรับโปรแกรมอ่านหน้าจอที่มีแป้นพิมพ์ลัดเพื่อแสดง ของลิงก์บนหน้าเว็บ หากลิงก์เต็มไปด้วยข้อความฟิลเลอร์ที่ซ้ำกัน สิ่งเหล่านี้ แป้นพิมพ์ลัดมีประโยชน์น้อยกว่ามาก เช่น
ติดป้ายกำกับองค์ประกอบแบบฟอร์ม
การเชื่อมโยงป้ายกำกับกับองค์ประกอบแบบฟอร์มทำได้ 2 วิธี เช่น ช่องทำเครื่องหมาย วิธีการใดวิธีการหนึ่งจะทำให้ข้อความของป้ายกำกับกลายเป็นเป้าหมายการคลิกสำหรับ ช่องทำเครื่องหมาย ซึ่งเป็นประโยชน์สำหรับผู้ใช้เมาส์หรือหน้าจอสัมผัสด้วย เพื่อเชื่อมโยง ป้ายกำกับที่มีองค์ประกอบ โดยอาจใช้อย่างใดอย่างหนึ่งต่อไปนี้
- วางองค์ประกอบอินพุตไว้ภายในองค์ประกอบป้ายกำกับ
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- หรือใช้แอตทริบิวต์
forของป้ายกำกับและอ้างอิงถึงidขององค์ประกอบ
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
เมื่อช่องทำเครื่องหมายติดป้ายกำกับอย่างถูกต้องแล้ว โปรแกรมอ่านหน้าจอจะรายงานว่า องค์ประกอบมีบทบาทของช่องทำเครื่องหมาย อยู่ในสถานะที่ทำเครื่องหมายแล้ว และมีชื่อว่า "รับ ไหม" ดังในตัวอย่าง VoiceOver ด้านล่าง
สิ่งที่ต้องทำ: DevSite - การประเมิน Think and Check