# การสร้างเว็บเพจที่เข้าถึงได้ ![เกี่ยวกับการเข้าถึง](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.th.png) > สเก็ตโน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ## แบบทดสอบก่อนเรียน [แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/) > พลังของเว็บอยู่ที่ความเป็นสากล การเข้าถึงได้โดยทุกคนไม่ว่าจะมีความพิการหรือไม่ก็ตามเป็นสิ่งสำคัญ > > \- เซอร์ทิโมธี เบอร์เนิร์ส-ลี, ผู้อำนวยการ W3C และผู้คิดค้นเวิลด์ไวด์เว็บ คำพูดนี้สะท้อนให้เห็นถึงความสำคัญของการสร้างเว็บไซต์ที่เข้าถึงได้อย่างชัดเจน แอปพลิเคชันที่ไม่สามารถเข้าถึงได้โดยทุกคนถือว่าเป็นการกีดกันโดยปริยาย ในฐานะนักพัฒนาเว็บ เราควรคำนึงถึงการเข้าถึงอยู่เสมอ การให้ความสำคัญกับเรื่องนี้ตั้งแต่เริ่มต้นจะช่วยให้คุณมั่นใจได้ว่าทุกคนสามารถเข้าถึงหน้าเว็บที่คุณสร้างได้ ในบทเรียนนี้ คุณจะได้เรียนรู้เกี่ยวกับเครื่องมือที่ช่วยให้มั่นใจว่าเว็บของคุณเข้าถึงได้ และวิธีการสร้างเว็บโดยคำนึงถึงการเข้าถึง > คุณสามารถเรียนบทเรียนนี้ได้ที่ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## เครื่องมือที่ใช้ ### โปรแกรมอ่านหน้าจอ หนึ่งในเครื่องมือที่เป็นที่รู้จักมากที่สุดสำหรับการเข้าถึงคือโปรแกรมอ่านหน้าจอ [โปรแกรมอ่านหน้าจอ](https://en.wikipedia.org/wiki/Screen_reader) เป็นเครื่องมือที่ใช้กันทั่วไปสำหรับผู้ที่มีความบกพร่องทางการมองเห็น ในขณะที่เราใช้เวลาเพื่อให้เบราว์เซอร์แสดงข้อมูลที่เราต้องการแบ่งปันได้อย่างถูกต้อง เราก็ต้องมั่นใจว่าโปรแกรมอ่านหน้าจอสามารถทำเช่นเดียวกันได้ ในรูปแบบพื้นฐานที่สุด โปรแกรมอ่านหน้าจอจะอ่านหน้าเว็บจากบนลงล่างด้วยเสียง หากหน้าเว็บของคุณเป็นข้อความทั้งหมด โปรแกรมจะถ่ายทอดข้อมูลในลักษณะเดียวกับเบราว์เซอร์ อย่างไรก็ตาม หน้าเว็บมักไม่ได้มีแต่ข้อความเท่านั้น แต่ยังมีลิงก์ กราฟิก สี และองค์ประกอบภาพอื่น ๆ ดังนั้นจึงต้องระมัดระวังเพื่อให้แน่ใจว่าข้อมูลเหล่านี้ถูกอ่านอย่างถูกต้องโดยโปรแกรมอ่านหน้าจอ นักพัฒนาเว็บทุกคนควรทำความคุ้นเคยกับโปรแกรมอ่านหน้าจอ เพราะมันคือเครื่องมือที่ผู้ใช้ของคุณจะใช้ เช่นเดียวกับที่คุณคุ้นเคยกับการทำงานของเบราว์เซอร์ คุณก็ควรเรียนรู้การทำงานของโปรแกรมอ่านหน้าจอด้วย โชคดีที่โปรแกรมอ่านหน้าจอมีอยู่ในระบบปฏิบัติการส่วนใหญ่ เบราว์เซอร์บางตัวก็มีเครื่องมือในตัวและส่วนขยายที่สามารถอ่านข้อความออกเสียงหรือให้ฟีเจอร์การนำทางพื้นฐาน เช่น [เครื่องมือที่เน้นการเข้าถึงในเบราว์เซอร์ Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) อย่างไรก็ตาม เครื่องมือเหล่านี้ทำงานแตกต่างจากโปรแกรมอ่านหน้าจอ และไม่ควรใช้แทนการทดสอบด้วยโปรแกรมอ่านหน้าจอ ✅ ลองใช้โปรแกรมอ่านหน้าจอและเครื่องมืออ่านข้อความในเบราว์เซอร์ บน Windows มี [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) ติดตั้งมาให้แล้ว และคุณยังสามารถติดตั้ง [JAWS](https://webaim.org/articles/jaws/) และ [NVDA](https://www.nvaccess.org/about-nvda/) ได้อีกด้วย บน macOS และ iOS มี [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) ติดตั้งมาให้แล้วเช่นกัน ### การซูม อีกหนึ่งเครื่องมือที่ผู้ที่มีความบกพร่องทางการมองเห็นใช้บ่อยคือการซูม การซูมแบบพื้นฐานที่สุดคือการซูมแบบคงที่ ซึ่งควบคุมได้ด้วย `Control + เครื่องหมายบวก (+)` หรือโดยการลดความละเอียดหน้าจอ การซูมประเภทนี้จะทำให้ทั้งหน้าปรับขนาด ดังนั้นการใช้ [การออกแบบที่ตอบสนอง](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) จึงสำคัญเพื่อให้ประสบการณ์ผู้ใช้ดีขึ้นเมื่อซูม การซูมอีกประเภทหนึ่งใช้ซอฟต์แวร์เฉพาะทางเพื่อขยายพื้นที่หนึ่งของหน้าจอและเลื่อนดูเหมือนการใช้แว่นขยายจริง บน Windows มี [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) ติดตั้งมาให้ และ [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) เป็นซอฟต์แวร์ขยายภาพจากบุคคลที่สามที่มีฟีเจอร์มากกว่าและมีผู้ใช้จำนวนมาก macOS และ iOS ก็มีซอฟต์แวร์ขยายภาพในตัวที่เรียกว่า [Zoom](https://www.apple.com/accessibility/mac/vision/) ### ตัวตรวจสอบความคมชัด สีบนเว็บไซต์ต้องได้รับการเลือกอย่างระมัดระวังเพื่อตอบสนองความต้องการของผู้ที่มีภาวะตาบอดสีหรือผู้ที่มองเห็นสีที่มีความคมชัดต่ำ ✅ ทดสอบเว็บไซต์ที่คุณชอบใช้งานเกี่ยวกับการใช้สีด้วยส่วนขยายเบราว์เซอร์ เช่น [ตัวตรวจสอบสีของ WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) คุณได้เรียนรู้อะไรบ้าง? ### Lighthouse ในพื้นที่เครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ คุณจะพบเครื่องมือ Lighthouse เครื่องมือนี้สำคัญสำหรับการดูภาพรวมเบื้องต้นเกี่ยวกับการเข้าถึง (รวมถึงการวิเคราะห์อื่น ๆ) ของเว็บไซต์ แม้ว่าจะไม่ควรพึ่งพา Lighthouse เพียงอย่างเดียว แต่คะแนน 100% ก็เป็นจุดเริ่มต้นที่ดี ✅ ค้นหา Lighthouse ในแผงเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์และวิเคราะห์เว็บไซต์ใดก็ได้ คุณค้นพบอะไรบ้าง? ## การออกแบบเพื่อการเข้าถึง การเข้าถึงเป็นหัวข้อที่ค่อนข้างใหญ่ เพื่อช่วยคุณ มีแหล่งข้อมูลมากมายที่พร้อมใช้งาน - [Accessible U - มหาวิทยาลัยมินนิโซตา](https://accessibility.umn.edu/your-role/web-developers) แม้ว่าเราจะไม่สามารถครอบคลุมทุกแง่มุมของการสร้างเว็บไซต์ที่เข้าถึงได้ แต่ด้านล่างนี้คือหลักการสำคัญบางประการที่คุณควรนำไปใช้ การออกแบบหน้าเว็บที่เข้าถึงได้ตั้งแต่เริ่มต้น **ง่ายกว่าเสมอ** เมื่อเทียบกับการกลับไปแก้ไขหน้าเว็บที่มีอยู่แล้ว ## หลักการแสดงผลที่ดี ### พาเลตสีที่ปลอดภัย ผู้คนมองโลกในรูปแบบที่แตกต่างกัน รวมถึงการมองเห็นสีด้วย เมื่อเลือกชุดสีสำหรับเว็บไซต์ของคุณ คุณควรมั่นใจว่ามันเข้าถึงได้สำหรับทุกคน [เครื่องมือที่ยอดเยี่ยมสำหรับการสร้างพาเลตสีคือ Color Safe](http://colorsafe.co/) ✅ ระบุเว็บไซต์ที่มีปัญหาอย่างมากในการใช้สี ทำไมถึงเป็นเช่นนั้น? ### ใช้ HTML ที่ถูกต้อง ด้วย CSS และ JavaScript คุณสามารถทำให้องค์ประกอบใด ๆ ดูเหมือนเป็นองค์ประกอบควบคุมประเภทใดก็ได้ `` อาจถูกใช้เพื่อสร้าง `