1. แผงควบคุมและสวิตช์สลับธีม (Interactive Controls)
ทดสอบการสลับโหมดสีด้วยสวิตช์แบบต่างๆ
A. Accessible Pill Switch
สวิตช์แบบเลื่อนตามมาตรฐานการเข้าถึง WCAG AA พร้อมคีย์บอร์ด Tab/Space
โหมดมืด (Dark Mode):
B. Quick Button Trigger
ปุ่มกดสลับธีมแบบมีอนิเมชันหมุนและเปลี่ยนไอคอนพระอาทิตย์/พระจันทร์
กดเพื่อสลับ:
C. Reset to OS Default
ล้างค่าที่บันทึกไว้ในเบราว์เซอร์ และกลับไปใช้การตั้งค่าของอุปกรณ์ผู้ใช้
คืนค่าระบบ:
สถานะธีมปัจจุบัน:
-
LocalStorage Key ('theme'):
-
ระบบ OS (prefers-color-scheme):
-
การปฏิบัติตาม WCAG AA:
ผ่านเกณฑ์ 100%
2. การปรับความคมชัดตราสัญลักษณ์สถาบันฯ (Logo Adaptability)
ทดสอบการแสดงผลโลโก้จริง (https://www.iveacer.ac.th/logo-iveacer.png) ในขนาดและสภาพแวดล้อมต่างๆ
ขนาดเล็ก (Navbar: 40x40 px)
ใช้บนแถบเมนูด้านบนและเมนูมือถือ
ขนาดกลาง (Card Header: 56x56 px)
ใช้ในการ์ดสมาชิกและส่วนหัวของเอกสาร
ขนาดใหญ่ (Hero Showcase: 72x72 px)
ใช้ในหน้าเข้าสู่ระบบและหน้าเกี่ยวกับเรา
3. การแสดงผลฟอร์มและตารางข้อมูล (Form & Data Grid Contrast)
ทดสอบการอ่านง่ายและความคมชัดของแบบฟอร์มและตาราง
| รหัสเอกสาร | ชื่อทรัพยากรสารสนเทศ | วิทยาลัยเจ้าของผลงาน | สถานะ |
|---|---|---|---|
| BK-AGRI-001 | คู่มือการปลูกเมล่อนไร้ดินระบบไฮโดรโปนิกส์อัจฉริยะ | วษท.สุพรรณบุรี | พร้อมให้บริการ |
| BK-AGRI-002 | นวัตกรรมพลังงานแสงอาทิตย์เพื่อการเกษตรกรรมยั่งยืน | วษท.กาญจนบุรี | อีบุ๊กออนไลน์ |
| BK-AGRI-003 | การเพาะเลี้ยงเนื้อเยื่อกล้วยไม้พันธุ์พระราชทาน | วษท.ราชบุรี | ยืมแล้ว |
4. บันทึกเหตุการณ์ Custom Event Bus (iveacer-theme-changed)
พร้อมรับฟังเหตุการณ์เมื่อมีการสลับธีม...
