หากต้องการให้โปรแกรมอ่านหน้าจอนำเสนอ UI แบบเสียงพูดแก่ผู้ใช้ องค์ประกอบที่มีความหมายต้องมีป้ายกำกับหรือทางเลือกข้อความที่เหมาะสม ป้ายกำกับหรือข้อความสำรองทำให้องค์ประกอบมีชื่อที่เข้าถึงได้ ซึ่งเป็นคุณสมบัติหลักอย่างหนึ่งสำหรับการแสดงความหมายขององค์ประกอบในแผนผังการช่วยเหลือพิเศษ
เมื่อมีการรวมชื่อองค์ประกอบกับบทบาทขององค์ประกอบ จะให้บริบทแก่ผู้ใช้เพื่อให้เข้าใจว่าองค์ประกอบประเภทใดที่กำลังโต้ตอบอยู่และวิธีการที่องค์ประกอบนั้นแสดงในหน้าเว็บ หากไม่มีชื่ออยู่ โปรแกรมอ่านหน้าจอจะประกาศเฉพาะบทบาทขององค์ประกอบ ลองนึกภาพว่าเมื่อคุณลองไปยังส่วนต่างๆ ของหน้าเว็บ แล้วได้ยิน "ปุ่ม" "ช่องทำเครื่องหมาย" "รูปภาพ" โดยไม่มีบริบทเพิ่มเติม นี่คือเหตุผลว่าทำไมการติดป้ายกำกับและข้อความทางเลือกจึงสำคัญต่อประสบการณ์ใช้งานที่ดีและเข้าถึงได้
ตรวจสอบชื่อองค์ประกอบ
การตรวจสอบชื่อที่เข้าถึงได้ขององค์ประกอบนั้นทำได้ง่ายๆ โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ดังนี้
- คลิกขวาที่องค์ประกอบแล้วเลือกตรวจสอบ ซึ่งจะเป็นการเปิดแผงองค์ประกอบ เครื่องมือสำหรับนักพัฒนาเว็บขึ้นมา
- ในแผงองค์ประกอบ ให้มองหาแผงการช่วยเหลือพิเศษ ซึ่งอาจซ่อนอยู่หลังสัญลักษณ์
» - ในเมนูแบบเลื่อนลงพร็อพเพอร์ตี้ที่คำนวณ ให้มองหาพร็อพเพอร์ตี้ชื่อ
ไม่ว่าคุณจะดู img ที่มีข้อความ alt หรือ input ที่มี label ทุกสถานการณ์จะให้ผลลัพธ์เดียวกัน คือทำให้องค์ประกอบชื่อที่เข้าถึงได้
ตรวจหาชื่อที่หายไป
การเพิ่มชื่อที่เข้าถึงได้ให้กับองค์ประกอบนั้นทำได้หลายวิธี โดยขึ้นอยู่กับประเภทขององค์ประกอบนั้น ตารางต่อไปนี้แสดงประเภทองค์ประกอบที่พบบ่อยที่สุดซึ่งต้องมีชื่อที่เข้าถึงได้และลิงก์ไปยังคำอธิบายเกี่ยวกับวิธีเพิ่มองค์ประกอบเหล่านั้น
| ประเภทองค์ประกอบ | วิธีเพิ่มชื่อ |
|---|---|
| เอกสาร HTML | ติดป้ายกำกับเอกสารและเฟรม |
องค์ประกอบ <frame> หรือ <iframe>
|
ติดป้ายกำกับเอกสารและเฟรม |
| องค์ประกอบรูปภาพ | รวมข้อความทางเลือกสำหรับรูปภาพและวัตถุ |
<input type="image"> องค์ประกอบ
|
รวมข้อความทางเลือกสำหรับรูปภาพและวัตถุ |
<object> องค์ประกอบ
|
รวมข้อความทางเลือกสำหรับรูปภาพและวัตถุ |
| ปุ่ม | ปุ่มและลิงก์ติดป้ายกำกับ |
| ลิงก์ | ปุ่มและลิงก์ติดป้ายกำกับ |
| องค์ประกอบแบบฟอร์ม | ติดป้ายกำกับองค์ประกอบของแบบฟอร์ม |
ติดป้ายกำกับเอกสารและเฟรม
ทุกหน้าควรมีองค์ประกอบ title ที่อธิบายคร่าวๆ ว่าหน้าเกี่ยวกับอะไร องค์ประกอบ title ตั้งชื่อหน้าที่เข้าถึงได้ เมื่อโปรแกรมอ่านหน้าจอเข้าสู่หน้าเว็บ ข้อความนี้จะเป็นข้อความแรกที่มีการประกาศ
ตัวอย่างเช่น หน้าเว็บด้านล่างมีชื่อว่า "Mary's Maple Bar Fast- Baking Recipe":
<!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>
ข้อยกเว้นหนึ่งที่พบบ่อยสำหรับกฎนี้คือปุ่มไอคอน ปุ่มไอคอนอาจใช้รูปภาพหรือแบบอักษรไอคอนเพื่อระบุเนื้อหาข้อความของปุ่ม ตัวอย่างเช่น ปุ่มที่ใช้ในตัวแก้ไข "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