# การสร้างเว็บเพจที่เข้าถึงได้ ![เกี่ยวกับการเข้าถึง](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.th.png) > สเก็ตโน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ## แบบทดสอบก่อนเรียน [แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/5) > พลังของเว็บอยู่ที่ความเป็นสากล การเข้าถึงโดยทุกคนไม่ว่าจะมีความพิการหรือไม่ถือเป็นสิ่งสำคัญ > > \- เซอร์ทิโมธี เบอร์เนิร์ส-ลี ผู้อำนวยการ 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 - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) แม้ว่าเราจะไม่สามารถครอบคลุมทุกแง่มุมของการสร้างเว็บไซต์ที่เข้าถึงได้ แต่ด้านล่างนี้คือหลักการสำคัญที่คุณควรนำไปใช้ การออกแบบหน้าเว็บที่เข้าถึงได้ตั้งแต่เริ่มต้น **ง่ายกว่า** การกลับไปแก้ไขหน้าเว็บที่มีอยู่เพื่อให้เข้าถึงได้ ## หลักการแสดงผลที่ดี ### พาเลตสีที่ปลอดภัย ผู้คนมองโลกในรูปแบบที่แตกต่างกัน รวมถึงสีด้วย เมื่อเลือกชุดสีสำหรับเว็บไซต์ของคุณ คุณควรมั่นใจว่ามันเข้าถึงได้สำหรับทุกคน เครื่องมือที่ยอดเยี่ยมสำหรับการสร้างพาเลตสีคือ [Color Safe](http://colorsafe.co/) ✅ ระบุเว็บไซต์ที่มีปัญหาอย่างมากในการใช้สี ทำไม? ### ใช้ HTML ที่ถูกต้อง ด้วย CSS และ JavaScript คุณสามารถทำให้องค์ประกอบใด ๆ ดูเหมือนเป็นตัวควบคุมประเภทใดก็ได้ `` สามารถใช้สร้าง `