ป้ายกำกับและทางเลือกข้อความ

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

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

ตรวจสอบชื่อองค์ประกอบ

การตรวจสอบชื่อที่เข้าถึงได้ขององค์ประกอบโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome นั้นทำได้ง่ายๆ ดังนี้

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

ไม่ว่าคุณจะกําลังดู img ที่มีข้อความ alt หรือ input ที่มี label สถานการณ์เหล่านี้ทั้งหมดให้ผลลัพธ์เดียวกัน นั่นคือ ตั้งชื่อที่เข้าถึงได้ให้กับองค์ประกอบ

ตรวจสอบชื่อที่ขาดหายไป

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

ติดป้ายกำกับเอกสารและเฟรม

ทุกหน้าควรมีองค์ประกอบ 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 ข้อที่คุณปฏิบัติตามได้ ดังนี้

  1. พิจารณาว่ารูปภาพให้เนื้อหาที่อ่านจากข้อความรอบๆ ได้ยากหรือไม่
  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>

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

ปุ่ม

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

<button>Book Room</button>

แบบฟอร์มบนอุปกรณ์เคลื่อนที่ที่มีปุ่ม &quot;จองห้อง&quot;

ข้อยกเว้นที่พบบ่อยอย่างหนึ่งของกฎนี้คือปุ่มไอคอน ปุ่มไอคอนอาจใช้รูปภาพหรือแบบอักษรไอคอนเพื่อระบุเนื้อหาข้อความสําหรับปุ่ม ตัวอย่างเช่น ปุ่มที่ใช้ในตัวแก้ไข 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>.

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

เมนูลิงก์ของ VoiceOver เต็มไปด้วยคำว่า &quot;ที่นี่&quot;
ตัวอย่าง VoiceOver ซึ่งเป็นโปรแกรมอ่านหน้าจอสำหรับ macOS ที่แสดงเมนูการไปยังส่วนต่างๆ ตามลิงก์

ติดป้ายกำกับองค์ประกอบของแบบฟอร์ม

การเชื่อมโยงป้ายกำกับกับองค์ประกอบแบบฟอร์ม เช่น ช่องทําเครื่องหมาย ทำได้ 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 ด้านล่าง

เอาต์พุตข้อความ VoiceOver ที่แสดง &quot;รับข้อเสนอโปรโมชันไหม&quot;

TODO: DevSite - Think and Check assessment