SVG ในบรรทัดเดียว: role img และ title
ตั้งชื่อกราฟิกที่มีความหมายให้โปรแกรมอ่านหน้าจอ
SVG ในบรรทัดเดียว: role img และ title เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
ภาพที่ไม่มีคำพูด
SVG แบบฝังในหน้าเว็บวาดรูปร่างที่สวยงามสำหรับสายตา แต่โปรแกรมอ่านหน้าจอเห็นเพียงกลุ่มเส้นทางและไม่สามารถบอกข้อมูลที่มีประโยชน์ได้ 🖼️
มีความหมายหรือแค่สวยงาม
ก่อนตั้งชื่อสิ่งใด ให้ถามคำถามหนึ่งข้อว่า กราฟิกนี้ มีความหมายหรือมีไว้ตกแต่ง בלבד ตัวเลือกด้านมาร์กอัปทั้งหมดขึ้นอยู่กับคำตอบนี้
บอกเบราว์เซอร์ว่านี่คือรูปภาพ
สำหรับกราฟิกที่มีความหมาย ให้เพิ่ม role="img" เพื่อให้เทคโนโลยีสิ่งอำนวยความสะดวกมอง SVG ทั้งหมดเป็นรูปภาพหนึ่งภาพ แทนที่จะมองเป็นรูปร่างแยกกัน
<svg role="img" viewBox="0 0 24 24">
<path d="M12 2 L22 22 H2 Z" />
</svg>ตั้งชื่อด้วย title
<title> ภายใน SVG จะกำหนดชื่อที่เข้าถึงได้ ซึ่งโปรแกรมอ่านหน้าจอจะอ่านออกเสียงให้กราฟิกนั้น
<svg role="img" viewBox="0 0 24 24">
<title>Warning</title>
<path d="M12 2 L22 22 H2 Z" />
</svg>วาง title ไว้ก่อน
วาง <title> เป็นลูกคนแรกสุดของ SVG โปรแกรมอ่านหน้าจอบางตัวจะอ่านได้อย่างน่าเชื่อถือก็ต่อเมื่อ title อยู่ก่อนรูปร่างต่าง ๆ
เชื่อมด้วย aria-labelledby
เพื่อให้รองรับได้อย่างมั่นคง ให้กำหนด id ให้ title แล้วชี้ไปยัง id นั้นด้วย aria-labelledby บนองค์ประกอบ svg
<svg role="img" aria-labelledby="t1">
<title id="t1">Search</title>
<path d="..." />
</svg>aria-label เป็นทางลัด
หากต้องการลดมาร์กอัป ให้ใช้ aria-label บน svg เพื่อตั้งชื่อโดยตรง ไม่ต้องมี title เป็นลูก และค่านี้จะแทนที่ข้อความ title ภายในด้วย
<svg role="img" aria-label="Home">
<path d="M3 11 L12 3 L21 11" />
</svg>ตั้งชื่อความหมาย ไม่ใช่รูปร่าง
เขียนชื่อจาก วัตถุประสงค์ของกราฟิก เช่น Download ไม่ใช่จากส่วนประกอบที่มองเห็น เช่น ลูกศรชี้ลงเหนือเส้น
desc เพิ่มรายละเอียดที่ยาวขึ้น
ต้องการมากกว่าชื่อสั้น ๆ หรือไม่ องค์ประกอบ <desc> ใช้เก็บคำอธิบายที่ยาวขึ้น โดยจับคู่ผ่าน aria-describedby เพื่อเพิ่มบริบท
<svg role="img" aria-labelledby="t2" aria-describedby="d2">
<title id="t2">Sales chart</title>
<desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>focusable สร้างปัญหากับ IE รุ่นเก่า
เบราว์เซอร์รุ่นเก่าอนุญาตให้ SVG รับโฟกัสจากแป้นพิมพ์ การเพิ่ม focusable="false" จะกันกราฟิกที่โต้ตอบไม่ได้ออกจากลำดับการกด Tab
<svg role="img" focusable="false" aria-label="Star">
<path d="..." />
</svg>ตรวจสอบในเครื่องมือตรวจสอบ
เปิดแผงการเข้าถึงของเบราว์เซอร์ แล้วตรวจสอบว่า SVG แสดงเป็น รูปภาพพร้อมชื่อที่คุณตั้งไว้อย่างตรงกันทุกประการ
ตรวจสอบอย่างรวดเร็ว
คุณต้องการให้ SVG แบบฝังที่มีความหมายถูกประกาศเป็นรูปภาพหนึ่งภาพพร้อมชื่อที่อ่านออกเสียงได้ ต้องใช้ชุดใด
ทบทวน: ตั้งชื่อสิ่งที่มีความหมาย
SVG ที่มีความหมายควรมี role="img" พร้อม title หรือ aria-label ที่บอกวัตถุประสงค์ ตรวจสอบเพื่อยืนยัน แล้วกราฟิกของคุณจะสื่อสารได้ในที่สุด ✅
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “SVG ในบรรทัดเดียว: role img และ title” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “SVG ในบรรทัดเดียว: role img และ title” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “SVG ในบรรทัดเดียว: role img และ title”
ตั้งชื่อกราฟิกที่มีความหมายให้โปรแกรมอ่านหน้าจอ คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “SVG ในบรรทัดเดียว: role img และ title” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- SVG ในบรรทัดเดียว: role img และ title
- ซ่อนไอคอนตกแต่งด้วย aria-hidden
- ปุ่มไอคอนที่ยังมีชื่อ
- แบบอักษรไอคอนกับข้อผิดพลาดด้านการเข้าถึง