HTML Alt Text Checker: ตรวจ alt text ของรูปภาพให้ผ่าน WCAG 1.1.1
คู่มือใช้ HTML Alt Text Checker สแกน HTML หา img ที่ไม่มี alt, alt ว่าง, หรือ src พัง พร้อมรายงาน line/column และวิธีเขียน alt text ที่ถูกต้องตาม accessibility
Table of Contents
รูปภาพทุกรูปบนหน้าเว็บของคุณส่งสารบางอย่างไปถึงผู้ใช้ สำหรับคนที่มองเห็น สารนั้นคือตัวรูปเอง แต่สำหรับผู้ใช้ screen reader สารนั้นคือสิ่งที่คุณเขียนไว้ใน alt attribute — และถ้าคุณไม่ใส่ attribute นี้เลย สารนั้นก็คือความเงียบ ปัญหา alt text ที่ขาดหายถือเป็น accessibility failure ที่พบมากที่สุดอันดับต้น ๆ ของเว็บโลก และก็เป็นอีกปัญหาหนึ่งที่แก้ง่ายที่สุด — ถ้ารู้ว่ามันซ่อนอยู่ตรงไหน
นั่นคือหน้าที่ของ HTML Alt Text Checker วาง markup ของคุณลงไป กด scan แล้วรับ report ที่บอกทุก <img> element ที่ไม่มี alt text, มี alt ว่างเปล่า หรือมี src attribute พัง — พร้อมหมายเลขบรรทัด (line) ตำแหน่ง column และระดับความรุนแรง (severity) แบบชัดเจน ไม่ต้องสมัครสมาชิก ไม่ต้อง upload อะไร ทุกอย่างทำงานใน browser ของคุณเอง
ไม่ว่าคุณกำลังเตรียมตัวรับ WCAG audit เก็บกวาดหลัง CMS migration หรือทำ final pass ก่อน release คู่มือนี้จะพาคุณไปดูวิธีใช้เครื่องมือให้เต็มประสิทธิภาพ และวิธีเขียน alt text ที่ช่วยเหลือผู้ใช้ได้จริง
ทำไมต้องใช้ HTML Alt Text Checker
- Accessibility สำหรับผู้ใช้ screen reader. Assistive technology จะอ่านเนื้อหาใน alt attribute เมื่อเจอรูปภาพ ถ้าไม่มี alt ผู้ใช้จะไม่ได้ข้อมูลเลย — hero banner, รูปสินค้า หรือกราฟของคุณถูกข้ามไปเฉย ๆ เหมือนไม่เคยมีอยู่
- ผ่าน WCAG 1.1.1. Web Content Accessibility Guidelines กำหนดให้ non-text content ทุกชิ้นต้องมี text alternative ที่ระดับ Level A ซึ่งเป็น baseline ที่ทุกเว็บควรทำได้ และลูกค้า enterprise หรือหน่วยงานกำกับดูแลเริ่มตรวจสอบเรื่องนี้จริงจังมากขึ้น
- SEO ที่ไม่ต้องลงทุนเพิ่ม. Search engine ก็ "มองไม่เห็น" รูปของคุณเหมือนกัน alt text คือวิธีบอกว่าในรูปมีอะไร และเป็นข้อความที่ browser แสดงแทนเมื่อรูปโหลดไม่สำเร็จ
- Report ระบุตำแหน่งแม่นยำ. เครื่องมือไม่ได้บอกแค่ "มี 3 ปัญหา" แต่บอก line และ column ที่แน่นอนของทุก issue ทำให้คุณกระโดดไปแก้ tag ที่พังได้ทันที แทนที่จะต้องไล่หาใน template สี่ร้อยบรรทัด
- จับได้มากกว่า alt ที่หาย. alt ว่างที่อาจไม่ได้ตั้งใจ, รูปที่ไม่มี src และ <img> tag ที่ malformed — ทั้งหมดโผล่มาใน report เดียวกัน คือ bug ที่มักหลุดสายตาจากการ review ด้วยตาเปล่า
- Workflow ไร้ friction. เครื่องมือทำงาน client-side ทั้งหมด HTML ของคุณไม่เคยออกจาก browser เลย ซึ่งสำคัญมากเมื่อตรวจ proprietary template, งานลูกค้า หรือ internal dashboard
ฟีเจอร์เด่น
| รายการตรวจ | Severity | ความหมาย |
|---|---|---|
| ไม่มี alt attribute | Error | รูปไม่มี alt เลย — screen reader ไม่ได้ข้อมูลอะไรเลย |
| alt ว่างแต่มี src | Warning | มักเป็น decorative image โดยตั้งใจ แต่ควรรีวิว |
| ไม่มี src attribute | Error | img tag ไม่แสดงอะไรเลย — น่าจะพังตอน build หรือจาก CMS |
| <img> tag ไม่สมบูรณ์ | Error | markup ที่ browser แยกวิเคราะห์ไม่ได้ถูกต้อง |
| รูปที่มี alt text ครบ | Pass | มี alt และไม่ว่าง — เหลือแค่ยืนยันว่าข้อความมีความหมายจริง |
- ผลลัพธ์แยกตาม severity. error, warning และ pass มีสีกำกับชัดเจน พร้อม summary panel สรุปจำนวนรูปทั้งหมด จำนวน error จำนวน warning และจำนวนที่ผ่าน ให้เห็นภาพรวมในพริบตา
- Export รายงานได้. คลิกเดียว copy หรือ download รายงาน "Accessibility Report — Image Alt Text" เป็นไฟล์ .txt — เหมาะสำหรับแนบใน ticket ส่งให้ลูกค้า หรือเก็บไว้เป็นหลักฐานการ audit
- ปุ่ม Load Sample. ยังไม่รู้จะเริ่มสแกนอะไรดี? กด Load Sample เพื่อโหลด HTML ตัวอย่าง แล้วดูว่า issue แต่ละแบบแสดงผลใน report อย่างไร ก่อนเอาโค้ดจริงของคุณมาลอง
วิธีใช้งาน
- เปิด HTML Alt Text Checker — ไม่ต้องติดตั้งหรือตั้งค่าอะไรเลย
- วาง HTML ของคุณลงในช่อง input หรือกด Load Sample เพื่อลองเล่นกับ markup ตัวอย่างก่อน
- กดปุ่ม scan เพื่อเริ่มวิเคราะห์
- อ่าน report: แต่ละ issue card แสดง severity ปัญหาที่พบ และ line/column ที่แน่นอน ส่วน summary stats บอกว่างานเหลือเท่าไหร่
- แก้ tag ที่ถูก flag ใน source ของคุณ แล้ว scan ซ้ำ เมื่อเสร็จใช้ Copy Report หรือ Download export ผลลัพธ์เก็บไว้หรือส่งต่อให้ทีม
เข้าใจ Alt Text และ WCAG 1.1.1
WCAG success criterion 1.1.1 (Non-text Content) กำหนดให้รูปภาพที่สื่อความหมายทุกรูปต้องมี text alternative ประเด็นที่คนพลาดกันมากคือ "text alternative" ไม่ได้หมายถึง "คำบรรยายที่มองเห็นได้" เสมอไป — แต่หมายถึง alt attribute ที่ทำหน้าที่เป็นข้อความเชิงโปรแกรม
ไม่มี alt กับ alt ว่าง คนละเรื่องกัน. นี่คือความผิดพลาดที่คนสับสนมากที่สุด การไม่มี alt attribute เป็น error: screen reader อาจ fallback ไปอ่านชื่อไฟล์ ("underscore hero underscore final two dot jpg") ซึ่งเป็นเสียงรบกวน ส่วน alt ว่าง (alt="") เป็นการบอก assistive technology ให้ข้ามรูปนี้ไปเลย — ซึ่งเป็นทางเลือกที่ ถูกต้อง สำหรับ decorative image เช่น spacer graphic, ลายพื้นหลัง หรือเส้นแบ่งตกแต่ง
เพราะ alt ว่างอาจเกิดจากการตั้งใจดีไซน์หรือความขี้เกียจเผลอ ๆ เครื่องมือจึง flag เป็น warning ไม่ใช่ error เมื่อเจอ ให้ถามตัวเองว่า: รูปนี้สื่อสารอะไรไหม? ถ้าใช่ ใส่ alt text จริงจัง ถ้าเป็น decorative จริง ๆ alt ว่างก็ถูกต้องแล้ว ไปต่อได้เลย
Alt text ที่ดีฟังดูอย่างไร. Screen reader อ่าน alt ของคุณแบบคำต่อคำ ดังนั้นเขียนเหมือนกำลังบรรยายรูปให้คนฟังทางโทรศัพท์ ในประโยคเดียวกระชับ alt="chart" ถือว่าใส่มาแล้วเชิงเทคนิค แต่แทบไร้ประโยชน์; alt="กราฟแท่ง: รายได้เติบโต 40% จาก Q1 ถึง Q4 ปี 2025" ส่งข้อมูลจริง ส่วน functional image — logo ที่ลิงก์กลับหน้าแรก ปุ่มไอคอน — ให้บรรยาย การกระทำ ไม่ใช่ภาพ: ใช้ alt="หน้าแรก" กับ logo link ไม่ใช่ alt="รูปภาพโลโก้บริษัท"
ทำไม line และ column ถึงสำคัญ. ใน codebase จริง pattern ที่พังแบบเดียวกันมักถูก copy-paste ไปทั่วทุก template การรู้ว่า error อยู่ที่ line 12 column 8 ทำให้คุณแก้ที่ source template ต้นทาง แทนที่จะไล่แก้ทีละหน้าที่ render ออกมา report ของเครื่องมือออกแบบให้เหมือนกับที่ linter รายงาน issue ทำให้ workflow การแก้ไขคุ้นเคยสำหรับ developer ทุกคน
Use Case จริงในการใช้งาน
Audit template ก่อน release
ก่อน ship landing page หรือ email template ใหม่ วาง HTML สุดท้ายลงในเครื่องมือ ใช้เวลาแค่ไม่กี่วินาทีแต่จับได้รูปที่ถูกเพิ่มเข้ามาช่วงท้ายของกระบวนการออกแบบ — ซึ่งเป็นรูปที่มักถูกโยนเข้ามาโดยไม่ทันใส่ alt text แก้ error รีวิว warning แล้ว export report เก็บไว้เป็น artifact ประกอบการ release
เก็บกวาดหลัง CMS migration
CMS migration โด่งดังเรื่องการตัด attribute ทิ้ง การย้าย platform หรือแปลง Markdown เป็น HTML มักผลิต <img> tag ที่สูญ alt ไประหว่างทาง การสแกน output ที่ migrate แล้วให้ punch list ที่แม่นยำ แทนความรู้สึกคลุมเครือว่า "รูปบางรูปเหมือนจะเพี้ยน ๆ"
Agency ตรวจงานลูกค้า
ถ้าคุณส่งมอบงาน accessibility ให้ลูกค้า report ที่ export ก่อนและหลังทำงานคือหลักฐานจับต้องได้ของ value ที่ส่งมอบ severity breakdown และอ้างอิงบรรทัดทำให้ประเมินขอบเขตงานง่าย และแสดงให้เห็นชัดว่าอะไรเปลี่ยนไปบ้าง
HTML email และ newsletter
Email client เป็นเบตี้แบบละคร — หลายตัว block รูปภาพเป็นค่า default แปลว่า alt text มักเป็นสิ่ง เดียว ที่ผู้รับเห็น รัน newsletter HTML ผ่านเครื่องมือก่อนส่งทุกครั้ง และการตรวจ missing-src ยังจับรูปที่ path พังระหว่างทำ templating ได้ด้วย
แนวปฏิบัติในการเขียน Alt Text
- บรรยายข้อมูล ไม่ใช่บรรยายรูป. โฟกัสที่รูปสื่อสารอะไรในบริบทนั้น ไม่ใช่รูปหน้าตาเป็นอย่างไร รูปถ่ายทีมสำคัญในฐานะ "ทีม support ของเราในงาน offsite ปี 2026" — รายละเอียดเสื้อผ้าแทบไม่เพิ่มความหมาย
- คุมไว้ประโยคเดียวกระชับ. Screen reader อ่านทั้งหมดโดยไม่หยุดพัก ถ้าต้องใช้สามประโยค เนื้อหานั้นน่าจะอยู่ใน caption หรือ body text มากกว่า
- อย่าเริ่มด้วย "รูปภาพของ" หรือ "image of." Screen reader ประกาศอยู่แล้วว่าเป็นรูป การซ้ำซ้อนทำให้ผู้ใช้ช้าลง
- ใช้ alt ว่างอย่างตั้งใจกับของตกแต่ง. alt="" คือ pattern ที่ถูกต้องสำหรับ spacer, เส้นแบ่ง และลายพื้นหลัง warning ของเครื่องมือคือสัญญาณให้คุณยืนยันเจตนา ไม่ใช่ defect อัตโนมัติ
- บรรยายการกระทำสำหรับ functional image. ไอคอนในปุ่มและ logo ที่ลิงก์ ควรบอกว่าจะเกิดอะไรขึ้น — "ค้นหา", "หน้าแรก", "ดาวน์โหลด PDF" — ไม่ใช่ไอคอนหน้าตาเป็นอย่างไร
- ใส่ข้อความสำคัญจากรูปที่มีตัวหนังสือ. ถ้ากราฟิกของคุณมีตัวหนังสือ (label ในกราฟ, การ์ดคำคม) ข้อความนั้นต้องอยู่ใน alt attribute เพราะเป็นเวอร์ชันเดียวที่ผู้ใช้ screen reader จะได้รับ
เริ่มตรวจ Alt Text วันนี้
Alt text คืองาน accessibility หายากที่แก้ครั้งเดียวได้ทั้งสามอย่าง: ประสบการณ์ผู้ใช้ screen reader, SEO และ fallback เมื่อรูปโหลดไม่ขึ้น และต่างจากงาน compliance ส่วนใหญ่ การตรวจสอบใช้เวลาแค่ไม่กี่วินาที วาง HTML ของหน้าที่สำคัญที่สุดลงใน HTML Alt Text Checker กด scan แล้วแก้ตามที่ report บอก ทั้งผู้ใช้และอันดับ search ของคุณจะรู้สึกได้
เครื่องมือที่เกี่ยวข้อง:
- ARIA Label Checker — ตรวจสอบ ARIA label บน interactive element
- Accessible Name Calculator — ดู accessible name ที่ assistive tech คำนวณได้จริง
- Unused CSS Finder — ตัด style ที่ไม่ได้ใช้ออกจาก stylesheet
ขอให้ audit อย่างมีความสุข!