ข้อมูลเบื้องต้นเกี่ยวกับการเข้าถึง: ตอนที่ 1

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

การเข้าถึงเว็บเป็นเรื่องเกี่ยวกับความสามารถของผู้ใช้ในการเข้าถึงเนื้อหาในไซต์ของคุณ โดยไม่คำนึงถึงความบกพร่องทางร่างกายหรือจิตใจ ผู้ประดิษฐ์อินเทอร์เน็ต Sir Tim Berners-Lee กล่าวไว้อย่างลงตัว:

“พลังของเว็บอยู่ในความเป็นสากล การเข้าถึงโดยทุกคนโดยไม่คำนึงถึงความพิการเป็นสิ่งสำคัญ”

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

ข้อกำหนด WCAG 2.0

เช่นเดียวกับสิ่งที่ยอดเยี่ยมทั้งหมด การช่วยสำหรับการเข้าถึงนั้นเรียนรู้ได้ง่ายแต่ยากที่จะเชี่ยวชาญ แม้ว่ามาตรฐานแต่ละมาตรฐานจะไม่ซับซ้อนนัก แต่หลักเกณฑ์การเข้าถึงเนื้อหาเว็บ (WCAG) ในปัจจุบันก็อาจทำได้มากเกินไป นั่นเป็นเหตุผลที่ฉันจะแบ่งพวกเขาออกสำหรับคุณและแปลกฎหมายแนวเขตบางส่วนเป็นภาษาอังกฤษที่คล้ายคลึงกัน

หลักการสำคัญของการเข้าถึงเว็บมีสี่ประการ ไซต์และเนื้อหาของคุณจะต้องสามารถรับรู้ ใช้งานได้ เข้าใจได้ และมีประสิทธิภาพ มาตรฐาน WCAG ได้รับการจัดระเบียบโดยใช้หลักการสี่ข้อนี้

ในส่วนที่หนึ่งของชุด “ข้อมูลเบื้องต้นเกี่ยวกับการเข้าถึง” เราจะเน้นที่หลักการแรก: ที่รับรู้ได้

รับรู้ได้

เพื่อให้ไซต์ได้รับการพิจารณาว่าสามารถรับรู้ได้ "ข้อมูลและส่วนประกอบส่วนต่อประสานผู้ใช้จะต้องปรากฏต่อผู้ใช้ในรูปแบบที่พวกเขาสามารถรับรู้ได้" การรับรู้ในบริบทของเว็บสามารถมีได้หลายรูปแบบ สำหรับคนส่วนใหญ่ การรับรู้หมายถึงความสามารถในการดูและอ่านเว็บไซต์ แต่ถ้าผู้ใช้ประสบกับความบกพร่องทางสายตาล่ะ? นั่นคือที่มาของมาตรฐาน WCAG

รูปภาพเป็นส่วนสำคัญของประสบการณ์อินเทอร์เน็ตสำหรับผู้ใช้ส่วนใหญ่ บางภาพมีการตกแต่ง บางส่วนเป็นส่วนเสริมโดยให้ตัวอย่างที่ง่ายต่อการแยกแยะ แต่บ่อยครั้ง รูปภาพเป็นส่วนสำคัญของเนื้อหา ซึ่งจำเป็นต่อความหมายของส่วนเนื้อหา ในกรณีเหล่านี้ ต้องระบุข้อความสำรอง เพื่อนของฉันคือคุณลักษณะ "alt" สำหรับรูปภาพของคุณ “Alt” ย่อมาจาก “alternative” หมายถึงคำอธิบายข้อความแสดงแทน ไม่ได้หมายความว่า "ทำให้ฉันเต็มไปด้วยคำหลัก SEO"

นอกจากนี้ยังหมายความว่าภาพที่ไม่จำเป็นจะต้องถูกทำเครื่องหมายในลักษณะที่โปรแกรมอ่านหน้าจอสามารถเพิกเฉยได้อย่างสมบูรณ์ วิธีหนึ่งในการทำเช่นนี้คือการปล่อยให้แอตทริบิวต์ "alt" ว่างไว้ ใช่เปล่า ดูเหมือนขัดกับสัญชาตญาณ แต่การมีรูปภาพที่ตกแต่งอย่างหมดจดด้วยแอตทริบิวต์ "alt" ที่เต็มไป จริง ๆ แล้วอาจทำให้ไซต์และเนื้อหาของคุณมองเห็นได้ยากขึ้นสำหรับผู้ใช้ที่มองไม่เห็น

แล้วผู้ใช้ที่มองเห็นแต่ไม่ได้ยินล่ะ? WCAG มีมาตรฐานที่แตกต่างกันเล็กน้อย มาตรฐานจะแตกต่างกันไปขึ้นอยู่กับว่าเนื้อหาของคุณได้รับการบันทึกล่วงหน้า เช่น วิดีโอ YouTube แบบฝัง หรือแบบสด เช่น สตรีมแบบสดของการประชุม วิดีโอที่บันทึกไว้ล่วงหน้าควรมีคำบรรยาย หรือคุณสามารถจัดเตรียมข้อความถอดเสียงของวิดีโอด้านล่างได้ อย่างน้อยที่สุด ควรมีบทสรุปของเนื้อหาวิดีโอ มาตรฐานที่สูงกว่า เช่น มาตรฐาน AAA 1.2.6 เรียกร้องให้มีการแปลภาษามือสำหรับเนื้อหาวิดีโอของคุณ กฎหมายไม่ได้กำหนดมาตรฐาน AAA แต่ถ้าคุณมีแบนด์วิดธ์ทางการเงินเพื่อให้บริการดังกล่าว ก็สามารถแยกธุรกิจของคุณออกจากกันในทางที่ดีมาก

หลักการที่เข้าใจได้ยังครอบคลุมถึงวิธีการจัดระเบียบเนื้อหาของคุณ จากบริบทการพัฒนา นี่หมายถึงวิธีการมาร์กอัปไซต์หรือชิ้นส่วนของเนื้อหาใน HTML เนื้อหาของคุณต้องมีการมาร์กอัปในลักษณะที่มีความหมาย ผู้ใช้ไม่ควรสัมผัสเนื้อหาที่ชิ้นส่วนไม่เป็นระเบียบเมื่อพบเห็นนอกเบราว์เซอร์ทั่วไป แต่ละย่อหน้าควรต่อเนื่องกัน โดยไม่มีการขัดจังหวะของแถบด้านข้างหรือองค์ประกอบอื่นๆ ที่ไม่ใช่เนื้อหา

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

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

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

การใช้สีเป็นตัวบ่งชี้เดียวเป็นปัญหาใหญ่บนเว็บ ลองนึกถึงไซต์ทั้งหมดที่คุณเคยไปซึ่งเน้นที่การออกแบบอย่างชัดเจน รูปลักษณ์ของพวกเขาถูกปรับแต่งทุกรายละเอียด ตลอดเนื้อหา คุณอาจสังเกตเห็นบางสิ่ง: ไม่มีการขีดเส้นใต้ นั่นเป็นเพราะการออกแบบเรียกร้องให้ลิงก์มีสีที่แตกต่างจากข้อความ นั่นเป็นวิธีที่พวกเขาโดดเด่น เป็นเรื่องปกติธรรมดาและไม่สามารถเข้าถึงได้อย่างไม่น่าเชื่อ

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

สิ่งสำคัญอีกประการหนึ่งของความสามารถในการแยกแยะความแตกต่างคือความเปรียบต่างของสี อย่างน้อยที่สุด อัตราส่วนคอนทราสต์ของสีเนื้อหาต่อสีพื้นหลังควรเป็น 4.5 อัตราส่วนนี้ลดลงเล็กน้อยเป็น 3.0 สำหรับข้อความขนาดใหญ่ ในการคำนวณอัตราส่วนคอนทราสต์ของคุณ ให้ใช้เครื่องคำนวณคอนทราสต์ที่มีอยู่มากมายทางออนไลน์ ปัญหาเรื่องความเปรียบต่างของสีมักส่งผลให้เกิดปัญหากับทีมออกแบบเว็บไซต์ของคุณ สีของแบรนด์มีแนวโน้มที่จะครองวันในการอภิปรายเหล่านี้ ซึ่งเป็นเหตุผลที่ต้องคำนึงถึงความสามารถในการเข้าถึงเมื่อกำหนดสีของแบรนด์ โชคดีที่ยังมีทางเลือกมาตรฐาน: ข้อความสีดำบนพื้นหลังสีขาว

ลักษณะอื่นๆ ที่ไม่ค่อยมีใครรู้จักของความสามารถในการแยกแยะ ได้แก่ เสียงพื้นหลังและการเล่นวิดีโออัตโนมัติ รวมถึงการปรับขนาดแบบอักษร การปรับขนาดแบบอักษรเป็นอีกหนึ่งปัญหาการช่วยสำหรับการเข้าถึงที่สำคัญซึ่งมักถูกมองข้าม คุณไม่ควรใช้ค่าพิกเซลสำหรับขนาดแบบอักษรของคุณ ซึ่งจะป้องกันไม่ให้ผู้ใช้ปรับขนาดข้อความโดยใช้การตั้งค่าเบราว์เซอร์ ให้ใช้หน่วยสัมพัทธ์ เช่น ems หรือ rems แทน คุณสามารถเก็บค่าพิกเซลไว้เป็นทางเลือกสำรองสำหรับเบราว์เซอร์รุ่นเก่า แต่สิ่งสำคัญคือต้องคิดล่วงหน้าในเรื่องการเข้าถึงได้ง่าย

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