Vue Academy · บทเรียน

ส่วนเสริม Storybook และการทดสอบการเข้าถึง

@storybook/addon-a11y, ส่วนเสริม viewport และส่วนเสริม docs สำหรับสร้างเอกสารอัตโนมัติ

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

ขยายความสามารถของ Storybook ด้วยส่วนเสริม

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

ส่วนเสริมการช่วยเข้าถึง

@storybook/addon-a11y จะเรียกใช้เอ็นจิน axe-core กับเรื่องราวแต่ละรายการ และรายงานการละเมิด WCAG เช่น ปัญหาคอนทราสต์ ป้ายกำกับที่หายไป และบทบาทที่ไม่ถูกต้อง ในแผงโดยตรง

// terminal
// npm install -D @storybook/addon-a11y

ลงทะเบียนส่วนเสริม

เพิ่มส่วนเสริมลงในอาร์เรย์ addons ใน .storybook/main.ts แล้วเริ่ม Storybook ใหม่เพื่อโหลดส่วนเสริมนั้น

// .storybook/main.ts
const config = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
}

อ่านแผงการช่วยเข้าถึง

เปิดเรื่องราวแล้วตรวจสอบแท็บการช่วยเข้าถึง ผลลัพธ์แต่ละรายการจะแบ่งเป็นกลุ่ม ได้แก่ การละเมิด (ต้องแก้ไข) ผ่าน และ ไม่สมบูรณ์ (ต้องตรวจสอบด้วยตนเอง) เมื่อคลิกการละเมิด ระบบจะเน้นองค์ประกอบนั้น

การละเมิดทั่วไปที่ตรวจพบ

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

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

การกำหนดค่าการช่วยเข้าถึงต่อเรื่องราว

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

export const NoContrastCheck = {
  parameters: {
    a11y: {
      config: {
        rules: [{ id: "color-contrast", enabled: false }],
      },
    },
  },
}

ส่วนเสริมพื้นที่แสดงผล

ส่วนเสริมพื้นที่แสดงผล (ซึ่งเป็นส่วนหนึ่งของส่วนเสริมพื้นฐาน) ช่วยให้คุณดูตัวอย่างเรื่องราวในขนาดอุปกรณ์ต่าง ๆ เช่น โทรศัพท์ แท็บเล็ต และเดสก์ท็อป เพื่อตรวจสอบจุดเปลี่ยนสำหรับการออกแบบที่ปรับตามขนาด

เลือกพื้นที่แสดงผล

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

export const Mobile = {
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
}

พื้นที่แสดงผลแบบกำหนดเอง

กำหนดจุดเปลี่ยนของคุณเองใน preview.ts ให้ตรงกับความกว้างที่แน่นอนของระบบการออกแบบ

// .storybook/preview.ts
const preview = {
  parameters: {
    viewport: {
      viewports: {
        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
      },
    },
  },
}

ส่วนเสริมเอกสาร

@storybook/addon-docs ขับเคลื่อนเอกสารที่สร้างอัตโนมัติ เมื่อใช้ร่วมกับ tags: ["autodocs"] ส่วนเสริมนี้จะสร้างหน้าเอกสารสำหรับแต่ละคอมโพเนนต์จากพร็อพส์และเรื่องราว

export default {
  component: Card,
  tags: ["autodocs"],
}

เอกสารที่เป็นปัจจุบันอยู่เสมอ

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

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจของคุณเกี่ยวกับส่วนเสริมของ Storybook

ทบทวน

คุณได้เรียนรู้ส่วนเสริมสำคัญของ Storybook:

@storybook/addon-a11y รายงานการละเมิด WCAG ต่อเรื่องราวแต่ละรายการ (คอนทราสต์ ป้ายกำกับ และบทบาท) และสามารถปรับแต่งแยกต่อเรื่องราวได้
ส่วนเสริมพื้นที่แสดงผลจะแสดงตัวอย่างจุดเปลี่ยนสำหรับการออกแบบที่ปรับตามขนาด โดยใช้ขนาดที่กำหนดไว้ล่วงหน้าหรือขนาดที่กำหนดเอง
@storybook/addon-docs ร่วมกับ tags: ["autodocs"] จะสร้างเอกสารจากพร็อพส์และเรื่องราวโดยอัตโนมัติ และเอกสารจะเป็นปัจจุบันเสมอ
ลงทะเบียนส่วนเสริมในอาร์เรย์ addons ของ main.ts

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

บทเรียน “ส่วนเสริม Storybook และการทดสอบการเข้าถึง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ส่วนเสริม Storybook และการทดสอบการเข้าถึง”

@storybook/addon-a11y, ส่วนเสริม viewport และส่วนเสริม docs สำหรับสร้างเอกสารอัตโนมัติ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “ส่วนเสริม Storybook และการทดสอบการเข้าถึง” ใช้เวลานานแค่ไหน

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

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

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

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

การตั้งค่า Storybook สำหรับ Vue 3
การเขียนเรื่องราวของคอมโพเนนต์
Controls, Actions และ Args
ส่วนเสริม Storybook และการทดสอบการเข้าถึง

← กลับไปที่ Vue Academy