การออกแบบเว็บแอปพลิเคชันที่เข้าถึงได้เป็นองค์ประกอบสำคัญที่ทำให้ผู้ใช้ได้รับประสบการณ์ในแง่บวกและความพึงพอใจโดยรวมของผู้ใช้แอปพลิเคชัน เว็บแอปพลิเคชันที่เข้าถึงได้ง่ายช่วยให้มั่นใจได้ว่าผู้คนที่มีความสามารถที่หลากหลายสามารถเข้าถึงผู้คนในสถานที่ตั้งทางภูมิศาสตร์ต่างๆ ได้อย่างเท่าเทียมกัน ผู้ที่มีข้อจำกัดเกี่ยวกับความสามารถด้านการได้ยิน การรับรู้ คำพูด หรือภาพ และข้อจำกัดชั่วคราวที่เกี่ยวข้องกับความพิการระยะสั้น การเชื่อมต่ออินเทอร์เน็ตที่ช้า หรือแม้กระทั่งแสงแดดจ้าควรสามารถเข้าถึงเว็บแอปพลิเคชันของคุณได้ เมื่อสร้างระบบฟรอนท์เอนด์ของเว็บแอปพลิเคชัน ให้ใช้โซลูชันการช่วยเหลือพิเศษตั้งแต่ต้นเพื่อป้องกันปัญหาด้านความสามารถเข้าถึงได้ง่าย และคุณไม่ต้องทำงานใดๆ ซ้ำอีกในภายหลังระหว่างกระบวนการบิลด์ ตรวจสอบว่าโปรแกรมรวบรวมข้อมูลเว็บและโปรแกรมอ่านหน้าจอข้ามเนื้อหาแอปพลิเคชันได้ และในขณะเดียวกันก็ให้ประสบการณ์ที่ดีแก่ผู้ใช้ด้วย
การเข้าถึงเป็นภาระหน้าที่ตามกฎหมายในประเทศและอุตสาหกรรมต่างๆ คุณต้องเข้าใจหลักเกณฑ์เหล่านี้และรวมโซลูชันการเข้าถึงไว้ในการออกแบบส่วนหน้า ประเด็นทางธุรกิจต่างๆ นั้นชี้ให้เห็นถึงความสำคัญของ การเข้าถึงเนื้อหาเว็บด้วยเช่นกัน
แหล่งข้อมูล เช่น MDN และ WCAG จะมีหลักเกณฑ์และคำแนะนำที่สำคัญในการเพิ่มการเข้าถึงเว็บแอปพลิเคชัน หรือจะเรียนหลักสูตร Learn Accessibility ใน web.dev ก็ได้
การพึ่งพากันระหว่างองค์ประกอบต่างๆ เป็นส่วนสำคัญในการทำให้ผู้ใช้ที่หลากหลายสามารถเข้าถึงเว็บแอปพลิเคชันได้
สีและคอนทราสต์
การใช้สีเป็นปัจจัยหลักในการประเมินการช่วยเหลือพิเศษของเว็บแอปพลิเคชัน ผู้ใช้ฟรอนท์เอนด์ต้องเข้าใจเนื้อหาในหน้าได้ รวมถึงมีสีและคอนทราสต์ที่มีผลต่อการรับรู้เนื้อหาของผู้ใช้อย่างมาก การดูและความพิการเกี่ยวกับการมองเห็นอาจเกิดขึ้นชั่วคราว ตามสถานการณ์ หรือถาวร แต่ต้องคำนึงถึงเมื่อสร้างฟรอนท์เอนด์ของเว็บแอปพลิเคชัน การสร้างคอนทราสต์ที่ถูกต้องหรือความแตกต่างในความสว่างระหว่างสีที่ใช้บนอินเทอร์เฟซที่แสดงต่อผู้ใช้ จะช่วยให้ผู้ใช้ที่หลากหลายสามารถเข้าถึงเว็บแอปพลิเคชันของคุณได้มากขึ้น อัตราส่วนคอนทราสต์ให้ความแตกต่าง ด้านความสว่างระหว่างพื้นหลังกับข้อความ
หากต้องการวัดคอนทราสต์ คุณสามารถใช้สูตรอัตราส่วนคอนทราสต์เพื่อตรวจสอบว่าข้อความหรือไอคอนในพื้นหลังมีคอนทราสต์ขั้นต่ำอยู่ ความบกพร่องในการรับรู้สีมีอยู่หลายรูปแบบ แต่โมเดลสีใหม่จะช่วยให้มั่นใจได้ว่าเนื้อหาจะรับชมได้อย่างถูกต้องแม้ว่าจะดูด้วยโทนสีเทา
เรามักจะแนะนำให้ใช้ธีมมืดเพื่อให้รองรับสีและคอนทราสต์ในการช่วยเหลือพิเศษ ธีมมืดมักจะเหมาะแก่การป้อนข้อมูลด้วยภาพเนื่องจากมีแสงสีขาวและการอ่านลำบาก เนื่องจากแอปพลิเคชันที่ขับเคลื่อนด้วยเนื้อหามีข้อความและรูปภาพจำนวนมาก คุณจึงต้องใช้สีและอัตราส่วนคอนทราสต์อย่างชาญฉลาดเพื่อตอบสนองความต้องการที่หลากหลายของผู้ใช้
ดูข้อมูลเพิ่มเติมเกี่ยวกับสีและคอนทราสต์ใน web.dev
การพิมพ์
การพิมพ์หมายถึงตัวเลือกและการจัดเรียงข้อความเพื่อให้อ่านและเข้าใจง่ายสำหรับผู้ใช้ที่หลากหลาย หนึ่งในการตั้งค่าการช่วยเหลือพิเศษที่มีการเปลี่ยนแปลงมากที่สุดอย่างหนึ่งคือขนาดแบบอักษรเริ่มต้นในอุปกรณ์ ผู้ใช้บางคนอาจต้องการใส่ข้อความบนหน้าจอให้พอดีโดยใช้แบบอักษรที่เล็กกว่านี้ หรือทำให้ข้อความใหญ่ขึ้นที่สุดเท่าที่จะเป็นไปได้ ดังนั้น การทำให้ขนาดตัวอักษรยืดหยุ่นและอ่านได้ง่ายจึงเป็นสิ่งที่สำคัญมาก อักขระของข้อความแต่ละรายการควรแยกแยะจากผู้อ่านได้ และข้อความโดยรวมควรอ่านได้ง่าย ระหว่างการออกแบบฟรอนท์เอนด์ของแอปพลิเคชัน โปรดเลือกแบบอักษรที่มีทั้งอ่านง่ายและเข้าใจง่าย
ลักษณะแบบอักษร
แบบอักษรหรือชุดแบบอักษรที่คุณเลือกสำหรับเว็บแอปพลิเคชันควรจะปรากฏต่อผู้อ่านหลากหลายกลุ่ม แบบอักษรคือการออกแบบตัวอักษรที่ใช้ในข้อความของแอปพลิเคชัน มีการศึกษาจำนวนมากได้อธิบายความสำคัญของลักษณะแบบอักษรเมื่อประเมินความสามารถในการเข้าถึงของเนื้อหาบนเว็บ การหาความสมดุลระหว่างแบรนด์ เป้าหมายในการออกแบบอินเทอร์เฟซผู้ใช้ และความสะดวกในการอ่าน จะทำให้แอปพลิเคชันของคุณน่าใช้งานยิ่งขึ้นสำหรับผู้ใช้ที่หลากหลาย เมื่อสร้างฟรอนท์เอนด์ ให้พิจารณาว่าตัวเลือกแบบอักษรและตัวเลือกแบบอักษรภายในนั้นมีผลต่อการเข้าถึงและการออกแบบโดยรวมของแอปพลิเคชันอย่างไร
ขนาดแบบอักษร
ลองใช้การซูมของเบราว์เซอร์เพื่อช่วยผู้ใช้ที่มีสายตาเลือนรางหรือตาบอดทางสี ผู้อ่านที่หลากหลายต้องเห็นแบบอักษรของข้อความในเว็บแอปพลิเคชัน คุณจะเปลี่ยนแปลงขนาดแบบอักษรต่างๆ ได้โดยเปลี่ยนจาก px เป็น rem หน่วย Rem อนุญาตให้ใช้ขนาดแบบอักษรที่สัมพันธ์กับ
องค์ประกอบรูทของแอปพลิเคชัน Wep นี่เป็นตัวเลือกที่มีประโยชน์หลากหลาย
ซึ่งจะช่วยเพิ่มการเข้าถึงโดยรวมของเว็บแอปพลิเคชัน
โครงสร้างและรูปแบบ
คุณสมบัติด้านโครงสร้างและเลย์เอาต์ที่หลากหลายส่งผลต่อการเข้าถึงอินเทอร์เฟซ คุณลักษณะการจัดวางที่คุณควรพิจารณา ได้แก่ ระยะห่างระหว่างบล็อกข้อความและการจัดแนว ตลอดจนช่องว่างระหว่างบรรทัดข้อความและแม้แต่ตัวอักษรเดี่ยวๆ ใช้ตารางกริดและแสดงภาพองค์ประกอบที่ต้องการรวมไว้ในการออกแบบ การจัดวางและโครงสร้างของเนื้อหาควรน่าสนใจและเพลิดเพลินสำหรับผู้ใช้ เลย์เอาต์ที่ซับซ้อนหรือพื้นหลังยุ่งเหยิงที่มีบล็อกข้อความหลายบล็อก อาจเป็นเรื่องยากสำหรับผู้ใช้บางราย เช่น ผู้ที่ใช้ ADHD อย่าลืมให้ความสำคัญกับการไม่แบ่งแยกในระหว่างขั้นตอนการออกแบบฟรอนท์เอนด์
ARIA และ HTML
Accessible Rich Internet Application (ARIA) จะมีชุดหลักเกณฑ์และแอตทริบิวต์เพื่อช่วยให้ผู้ใช้เข้าถึงเว็บแอปพลิเคชันได้ง่ายขึ้น โดย ARIA จะปรับปรุง HTML และเปิดใช้วิดเจ็ต JavaScript ที่เข้าถึงได้ การอัปเดตเนื้อหาแบบสด ข้อความแสดงข้อผิดพลาด และอื่นๆ การใช้ ARIA อย่างถูกต้องเป็นสิ่งจำเป็น ในการทำให้เว็บแอปพลิเคชันของคุณเข้าถึงได้มากขึ้น การใช้ ARIA ที่ไม่ถูกต้องอาจทำให้เกิดข้อผิดพลาด และทำให้ผู้ใช้ไม่สามารถเข้าถึงแอปพลิเคชันของคุณได้
หากเป็นไปได้ ให้ใช้ป้ายกำกับ ARIA เพื่อแนะนำรูปแบบอื่นๆ ที่ใช้ร่วมกับอักษรเบรลล์และการอ่านออกเสียงข้อความ (TTS) ได้ บทบาทและป้ายกำกับ ARIA ให้คุณเปลี่ยนแผนผังการช่วยเหลือพิเศษเมื่อแตกต่างจากแผนผังโดเมน ป้ายกำกับเหล่านี้ยังมีความสำคัญเมื่อใช้แท็กที่ไม่ใช่แบบมาตรฐาน เช่น การใช้ div เป็นปุ่มที่คลิกได้ ต้องใช้ ARIA เมื่อองค์ประกอบ HTML ไม่รองรับการเข้าถึง เมื่อออกแบบแอปพลิเคชันที่ขับเคลื่อนด้วยเนื้อหา ให้ตรวจสอบว่ามีการรองรับโปรแกรมอ่านหน้าจอและอุปกรณ์อำนวยความสะดวกอื่นๆ เป็นอย่างดี เพื่อช่วยให้แอปพลิเคชันเข้าถึงผู้ใช้มากที่สุดเท่าที่จะเป็นไปได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ ARIA และ HTML ใน web.dev
การก้าวสู่ระดับสากล
การทำให้เป็นสากลหมายถึงการออกแบบเว็บแอปพลิเคชันให้ผู้ใช้สามารถเข้าถึงได้ จากภูมิหลังทางภาษาและวัฒนธรรมที่แตกต่างกัน เว็บแอปพลิเคชันควรปรับให้เข้ากับภาษา พื้นที่ทางภูมิศาสตร์ และค่ากำหนดทางวัฒนธรรมที่แตกต่างกันได้โดยไม่ต้องเปลี่ยนแปลงโค้ดมากนัก องค์ประกอบสำคัญของการทำให้เป็นสากล ได้แก่ การรองรับหลายภาษา การปรับให้เข้ากับท้องถิ่น การแยกเนื้อหา การจัดรูปแบบวันที่และเวลา ทิศทางของข้อความ และการต่อรองทางภาษา และอื่นๆ
การทำให้เว็บแอปพลิเคชันเป็นสากลช่วยให้คุณสร้างประสบการณ์การใช้งานที่ไม่แบ่งแยกและเป็นมิตรกับผู้ใช้สำหรับกลุ่มเป้าหมายทั่วโลกในวงกว้างได้ การทำให้เป็นสากลเป็นสิ่งจำเป็นสำหรับเว็บแอปพลิเคชันที่มีฐานผู้ใช้หรือเป้าหมายในการขยายตัวสู่ต่างประเทศที่หลากหลาย
คุณสมบัติทางตรรกะ
เมื่อสร้างสไตล์ใน CSS ให้ใช้ start / end แทนพร็อพเพอร์ตี้ เช่น top / down/ left/ right เพื่อให้แน่ใจว่าเมนูและเลย์เอาต์ของเว็บไซต์
จะเลื่อนไปตามภาษาที่อ่านจากขวาไปซ้าย
เนื้อหาทางเลือก
ระบุแอตทริบิวต์ lang ในแท็ก HTML ที่มีลิงก์ไปยังเอกสารสำรองในส่วนหัวเพื่อระบุมาร์กอัปที่กำหนดเองสำหรับเนื้อหาของคุณ วิธีนี้จะช่วยให้เบราว์เซอร์เลือกหน้าที่ถูกต้องได้ หากภาษาที่กำหนดไว้แตกต่างจากภาษาเริ่มต้นของเบราว์เซอร์ โดยช่วยให้เว็บเบราว์เซอร์และเครื่องมือค้นหาเข้าใจภาษาของหน้าเว็บ ซึ่งสำคัญต่อการแสดงผลเนื้อหาอย่างถูกต้องและเพื่อให้ SEO มีประสิทธิภาพ
ต่างประเทศ
ออบเจ็กต์ Intl ใน JavaScript เป็นเครื่องมือสำคัญในการสร้างเว็บแอปพลิเคชันที่รองรับหลายภาษาและรับรู้วัฒนธรรม โซลูชันนี้มอบความสามารถในการปรับให้เป็นสากลและการแปลให้เหมาะกับท้องถิ่นในเว็บแอปพลิเคชัน และช่วยให้อินเทอร์เฟซและเนื้อหาของคุณเข้าใจได้และเหมาะสมกับวัฒนธรรมสำหรับผู้ใช้ทั่วโลก คุณลักษณะที่มาจากออบเจ็กต์นานาชาติจะมีการจัดรูปแบบวันที่และเวลา การจัดรูปแบบตัวเลข และการตรวจเทียบสตริง
ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำให้เป็นสากลได้ที่ web.dev
แบบฟอร์ม
แบบฟอร์ม HTML เป็นส่วนสำคัญของเว็บแอปพลิเคชันที่เน้นเนื้อหา ให้ผู้ใช้โต้ตอบและเสนอวิธีการแบบมีโครงสร้างในการรวบรวมข้อมูลของผู้ใช้ หากผู้ชมในวงกว้างไม่สามารถเข้าถึงรูปแบบ HTML ได้ อาจทำให้เกิดความหงุดหงิดและความไม่พอใจของผู้ใช้ได้
หากต้องการทำให้เข้าถึงแบบฟอร์ม HTML ได้ ให้ใช้องค์ประกอบ HTML เชิงความหมายสำหรับช่องของแบบฟอร์มทั้งหมด วิธีนี้จะช่วยให้เทคโนโลยีความช่วยเหลือพิเศษเข้าใจวัตถุประสงค์ของแต่ละฟิลด์และทำให้ผู้ใช้กรอกข้อมูลได้ง่ายขึ้น และอย่าลืมติดป้ายกำกับ ทุกช่องของฟอร์มให้ชัดเจน วิธีนี้ช่วยให้ผู้ใช้ให้ข้อมูลที่ถูกต้องและเป็นประโยชน์ได้ สิ่งสำคัญอีกอย่างคือการทดสอบการช่วยเหลือพิเศษของแบบฟอร์ม HTML ซึ่งทำได้โดยใช้เทคโนโลยีความช่วยเหลือพิเศษเพื่อจำลองประสบการณ์ของผู้ใช้ที่ต้องการเทคโนโลยีดังกล่าวเพื่อบริโภคเนื้อหาแอปพลิเคชันของคุณ