0Pricing
Web Accessibility Academy · บทเรียน

เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้

บันทึกขั้นตอน เกณฑ์ และวิธีแก้ไขที่คาดหวัง

เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้ เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน

ผลการตรวจสอบจะไร้ประโยชน์หากเขียนไม่ดี

การตรวจสอบที่ดีที่สุดก็ล้มเหลวได้หากนักพัฒนาไม่สามารถลงมือแก้ไขตามข้อมูลนั้น รายงานข้อบกพร่องที่ชัดเจนจะเปลี่ยนคำร้องเรียนที่คลุมเครือให้เป็นการแก้ไขที่พร้อมนำไปใช้งานได้วันนี้ 📝

ระบุตำแหน่งที่แน่นอน

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

Page: /checkout
Element: button.add-to-cart (third product card)

ระบุขั้นตอนการทำให้เกิดซ้ำอย่างชัดเจน

เขียน ขั้นตอนการทำให้เกิดซ้ำอย่างละเอียด โดยแยกหนึ่งขั้นตอนต่อหนึ่งบรรทัด หากนักพัฒนาไม่สามารถทำให้ข้อบกพร่องเกิดขึ้นได้ ก็ยืนยันการแก้ไขไม่ได้

1. Open /checkout
2. Press Tab until focus reaches the icon button
3. Listen with VoiceOver

ระบุสิ่งที่คาดหวังเทียบกับสิ่งที่เกิดขึ้นจริง

เปรียบเทียบสิ่งที่ควรเกิดขึ้นกับสิ่งที่เกิดขึ้นจริง สิ่งที่คาดหวังเทียบกับสิ่งที่เกิดขึ้นจริงจะแสดงช่องว่างที่นักพัฒนาต้องแก้ไขได้ทันที

Expected: announces "Add to cart, button"
Actual: announces "button" with no name

อ้างอิงเกณฑ์ WCAG

ใส่ลิงก์ไปยังเกณฑ์ความสำเร็จของ WCAG ที่ถูกต้อง เช่น 4.1.2 ชื่อ บทบาท ค่า วิธีนี้จะวางกรอบให้ข้อบกพร่องเป็นเรื่องของมาตรฐาน ไม่ใช่เพียงความคิดเห็นของคุณ

อธิบายผลกระทบต่อผู้ใช้

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

ระบุสภาพแวดล้อมการทดสอบ

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

Env: Chrome 125 + NVDA 2024.1 on Windows 11

แนบหลักฐาน

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

ตรวจสอบอย่างรวดเร็ว

องค์ประกอบหนึ่งอย่างที่ทำให้รายงานข้อบกพร่องด้านการเข้าถึงนำไปดำเนินการได้จริงคืออะไร

เสนอแนวทางแก้ไขเมื่อทำได้

หากคุณทราบวิธีแก้ไข โปรดเสนอไว้ด้วย คำแนะนำอย่างการเพิ่ม aria-label ให้ปุ่มไอคอนจะเปลี่ยนรายงานให้เกือบพร้อมนำไปแก้ไขได้ทันที

<button aria-label="Add to cart"><svg>...</svg></button>

หนึ่งข้อบกพร่องต่อหนึ่งรายงาน

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

เขียนชื่อเรื่องที่สะท้อนความรุนแรง

เริ่มด้วย ชื่อเรื่องที่เฉพาะเจาะจงและอ่านกวาดได้ พร้อมบอกใบ้ระดับความรุนแรง เช่น ปัญหาที่ขัดขวาง: ปุ่มรถเข็นไม่มีชื่อที่เข้าถึงได้ในหน้าชำระเงิน

สรุป: รายงานที่ได้รับการแก้ไข

รายงานข้อบกพร่องที่ดีจะระบุตำแหน่ง ขั้นตอน สิ่งที่คาดหวังเทียบกับสิ่งที่เกิดขึ้นจริง เกณฑ์ WCAG ผลกระทบ สภาพแวดล้อม และหลักฐาน 🛠️

คำถามที่พบบ่อย

บทเรียน “เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้”

บันทึกขั้นตอน เกณฑ์ และวิธีแก้ไขที่คาดหวัง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม

ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. สร้างกระบวนการตรวจสอบด้วยตนเอง
  2. การจัดลำดับความรุนแรงและผลกระทบ
  3. เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้
  4. แก้ไขโดยไม่ก่อการถดถอย
← กลับไปที่ Web Accessibility Academy