ทำความเข้าใจกระบวนการคำนวณชื่อที่เข้าถึงได้

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

หากองค์ประกอบไม่มี ชื่อที่เข้าถึงได้ โปรแกรมอ่านหน้าจอจะประกาศเพียงบทบาท เช่น ปุ่ม ทำให้ผู้ใช้ไม่รู้ว่าปุ่มนั้นทำอะไร

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

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

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

หากไม่มี labelledby เบราว์เซอร์จะใช้ aria-label ซึ่งเป็นข้อความที่คุณพิมพ์ลงบนองค์ประกอบโดยตรงเพื่อใช้เป็นชื่อที่พูด

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

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

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

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

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

คุณได้เรียนรู้ลำดับ การคำนวณชื่อ: labelledby จากนั้น aria-label แล้วจึงเป็นป้ายกำกับและเนื้อหาโดยธรรมชาติ โดยมี title เป็นลำดับสุดท้าย 🧩