องค์ประกอบที่มีความหมายต้องมีป้ายกำกับหรือข้อความแสดงแทนที่เหมาะสมเพื่อให้โปรแกรมอ่านหน้าจอแสดง UI ที่พูดได้แก่ผู้ใช้ ป้ายกำกับหรือข้อความสำรองจะให้ชื่อที่เข้าถึงได้แก่องค์ประกอบ ซึ่งเป็นหนึ่งในพร็อพเพอร์ตี้หลักสำหรับการแสดงความหมายขององค์ประกอบในแผนภูมิการช่วยเหลือพิเศษ
เมื่อชื่อขององค์ประกอบรวมกับบทบาทขององค์ประกอบ ผู้ใช้จะได้รับบริบทเพื่อให้เข้าใจว่ากำลังโต้ตอบกับองค์ประกอบประเภทใดและองค์ประกอบนั้นแสดงในหน้าเว็บอย่างไร หากไม่มีชื่อ โปรแกรมอ่านหน้าจอจะอ่านเฉพาะบทบาทขององค์ประกอบ ลองจินตนาการว่าพยายามไปยังส่วนต่างๆ ของหน้าเว็บและได้ยินคำว่า "ปุ่ม" "ช่องทำเครื่องหมาย" "รูปภาพ" โดยไม่มีบริบทเพิ่มเติม ด้วยเหตุนี้ ป้ายกำกับและข้อความแสดงแทนจึงมีความสำคัญต่อประสบการณ์การใช้งานที่ดีและเข้าถึงได้
ตรวจสอบชื่อองค์ประกอบ
การตรวจสอบชื่อที่เข้าถึงได้ขององค์ประกอบนั้นทำได้ง่ายโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome โดยทำดังนี้
- คลิกขวาที่องค์ประกอบแล้วเลือกตรวจสอบ ซึ่งจะเปิดแผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- ในแผงองค์ประกอบ ให้มองหาแผงการช่วยเหลือพิเศษ ข้อความอาจซ่อนอยู่หลังสัญลักษณ์
» - ในเมนูแบบเลื่อนลงพร็อพเพอร์ตี้ที่คำนวณแล้ว ให้มองหาพร็อพเพอร์ตี้ชื่อ
ไม่ว่าคุณจะกําลังดู img ที่มีข้อความ alt หรือ input ที่มี label สถานการณ์เหล่านี้ทั้งหมดให้ผลลัพธ์เดียวกัน นั่นคือ ตั้งชื่อที่เข้าถึงได้ให้กับองค์ประกอบ
ตรวจสอบชื่อที่ขาดไป
การเพิ่มชื่อที่เข้าถึงได้ให้กับองค์ประกอบทำได้หลายวิธี โดยขึ้นอยู่กับประเภทขององค์ประกอบ ตารางต่อไปนี้แสดงรายการประเภทองค์ประกอบที่พบบ่อยที่สุดซึ่งต้องมีชื่อที่เข้าถึงได้และลิงก์ไปยังคำอธิบายวิธีเพิ่ม
| ประเภทองค์ประกอบ | วิธีเพิ่มชื่อ |
|---|---|
| เอกสาร HTML | ติดป้ายกำกับเอกสารและเฟรม |
องค์ประกอบ <frame> หรือ <iframe>
|
ติดป้ายกำกับเอกสารและเฟรม |
| องค์ประกอบรูปภาพ | ใส่ข้อความแสดงแทนสำหรับรูปภาพและวัตถุ |
<input type="image"> องค์ประกอบ
|
ใส่ข้อความแสดงแทนสำหรับรูปภาพและวัตถุ |
<object> องค์ประกอบ
|
ใส่ข้อความแสดงแทนสำหรับรูปภาพและวัตถุ |
| ปุ่ม | ติดป้ายกำกับปุ่มและลิงก์ |
| ลิงก์ | ติดป้ายกำกับปุ่มและลิงก์ |
| องค์ประกอบของแบบฟอร์ม | ติดป้ายกํากับองค์ประกอบแบบฟอร์ม |
ติดป้ายกำกับเอกสารและเฟรม
ทุกหน้าควรมีองค์ประกอบ title ที่อธิบายสั้นๆ ว่าหน้าเว็บนั้นๆ เกี่ยวกับอะไร องค์ประกอบ title จะให้ชื่อที่เข้าถึงได้แก่หน้า เมื่อโปรแกรมอ่านหน้าจอเข้าสู่หน้าเว็บ ข้อความนี้จะเป็นข้อความแรกที่อ่านออกเสียง
ตัวอย่างเช่น หน้าด้านล่างนี้มีชื่อว่า "สูตรการทำ Maple Bar แบบรวดเร็วของ Mary"
<!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-3 ข้อที่คุณทำตามได้
- พิจารณาว่ารูปภาพให้เนื้อหาที่อ่านจากข้อความรอบๆ ได้ยากหรือไม่
- หากเป็นเช่นนั้น ให้สื่อเนื้อหาให้กระชับที่สุด
หากรูปภาพทำหน้าที่เป็นสิ่งตกแต่งและไม่มีเนื้อหาที่เป็นประโยชน์ คุณระบุแอตทริบิวต์ 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>
ติดป้ายกำกับปุ่มและลิงก์
ปุ่มและลิงก์มักมีความสำคัญต่อประสบการณ์การใช้งานเว็บไซต์ และทั้ง 2 อย่างต้องมีชื่อที่สื่อความหมายและเข้าถึงได้ง่าย
ปุ่ม
องค์ประกอบ button จะพยายามคํานวณชื่อที่เข้าถึงได้โดยใช้เนื้อหาข้อความเสมอ สําหรับปุ่มที่ไม่ได้เป็นส่วนหนึ่งของ form การเขียนการดําเนินการที่ชัดเจนเป็นเนื้อหาข้อความอาจเป็นสิ่งเดียวที่จําเป็นในการสร้างชื่อที่เข้าถึงได้
<button>Book Room</button>
ข้อยกเว้นที่พบบ่อยอย่างหนึ่งของกฎนี้คือปุ่มไอคอน ปุ่มไอคอนอาจใช้รูปภาพหรือแบบอักษรไอคอนเพื่อระบุเนื้อหาข้อความสําหรับปุ่ม ตัวอย่างเช่น ปุ่มที่ใช้ในเครื่องมือแก้ไขแบบ WYSIWYG (What You See Is What You Get) เพื่อจัดรูปแบบข้อความมักจะเป็นเพียงสัญลักษณ์กราฟิก
เมื่อใช้ปุ่มไอคอน คุณควรตั้งชื่อที่ชัดเจนสำหรับการช่วยเหลือพิเศษโดยใช้แอตทริบิวต์ 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 ด้านล่าง
TODO: DevSite - Think and Check assessment