คู่มือนักออกแบบเกี่ยวกับพื้นฐานการออกแบบการช่วยสำหรับการเข้าถึงเว็บ

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

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

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

แนะนำการเข้าถึง

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

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

บางทีที่สำคัญกว่านั้นคือสิ่งที่การช่วยให้สามารถเข้าถึงเว็บได้ดังที่อธิบายไว้ที่นี่ในคำจำกัดความของ Wikipedia:

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

ผู้พัฒนาหลายคนคิดว่าการเข้าถึงเป็นเพียงสำหรับคนตาบอดที่ไม่สามารถอ่านได้ แต่จริงๆแล้วมีการเข้าถึงเว็บหลักสี่หมวดหมู่:

1. ภาพ - วิสัยทัศน์ต่ำหรือไม่ดี / ไม่เห็น
2. ห้องประชุม - ผู้บกพร่องทางการได้ยินหรือหูหนวก
3. ความรู้ความเข้าใจ - ปัญหาในการทำความเข้าใจหรือการบริโภคข้อมูล
4. เครื่องยนต์ - ปัญหาการเข้าถึงทางกายภาพที่อาจต้องใช้อุปกรณ์อินพุตพิเศษเช่นแป้นพิมพ์หรือโปรแกรมคำสั่งเสียง

หมวดหมู่เหล่านี้แต่ละคนมีเทคนิคมากมายซึ่ง ได้แก่ เปลี่ยนแปลงอย่างรวดเร็วเช่นเดียวกับมาตรฐานเว็บ. แต่มีความรู้สึกมั่นคงกับมาตรฐานเหล่านี้เป็นที่ยอมรับใน WCAG (แนวทางการเข้าถึงเนื้อหาเว็บ).

บางเว็บไซต์เช่น กฎหมายกำหนดให้หน่วยงานของรัฐปฏิบัติตามแนวทางเหล่านี้. พวกเขาใช้ในระดับสากลผ่าน W3C.

ลองมาดูระบบราชการที่อยู่เบื้องหลังการเข้าถึงเว็บแล้วดำดิ่งลงในเคล็ดลับการออกแบบที่เกี่ยวข้อง.

การออกแบบ W3C & ที่สามารถเข้าถึงได้

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

• W3C (World Wide Web Consortium) - กลุ่มนานาชาติกำหนดมาตรฐานเว็บสำหรับโปรโตคอลภาษาและข้อบังคับ แนวทางการเข้าถึงอย่างเป็นทางการทั้งหมดอยู่ภายใต้องค์กรนี้.
• WAI (ความคิดริเริ่มการเข้าถึงเว็บ) - โปรแกรมอย่างเป็นทางการที่ครอบคลุมทุกอย่างเกี่ยวกับการเข้าถึง คำว่าร่มนี้มีกฎระเบียบแนวทางและเทคนิคทั้งหมดสำหรับการเข้าถึงที่ทันสมัย.
• WCAG (แนวทางการเข้าถึงเนื้อหาเว็บ) - กลุ่มมาตรฐานและกฎที่จะช่วยให้นักออกแบบให้คะแนนเว็บไซต์ตามระดับความสามารถในการเข้าถึง.
• ชาร์ตเพลง (แอปพลิเคชันอินเทอร์เน็ตที่เข้าถึงได้หลากหลาย) - มาตรฐานเฉพาะที่กำหนดวิธีการสร้างแอปพลิเคชันที่เข้าถึงได้หลากหลายที่ต้องใช้ JavaScript / Ajax และเทคโนโลยีที่คล้ายคลึงกัน อ่านเพิ่มเติมเกี่ยวกับสิ่งนี้ในโพสต์นี้โดย Anna Monus.

แนวทางอื่นมีอยู่ภายใต้ร่มของ WAI ได้แก่ UAAG สำหรับตัวแทนผู้ใช้ และ ATAG สำหรับเครื่องมือการเขียนเว็บ. สำหรับตอนนี้คุณควรให้ความสนใจมากที่สุดกับคำแนะนำของ WAI และแนวทางที่วางไว้โดย ruleset ของ WAI ภายใต้ชื่อ WCAG.

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

อีกเรื่องที่สำคัญที่คุณควรเข้าใจคือความสอดคล้องของ WCAG เรื่องนี้เกี่ยวข้องกับ ระดับการเข้าถึงเว็บไซต์ของ ครอบคลุมปัจจัยที่หลากหลาย ระดับจะขึ้นอยู่กับความสอดคล้องกับ ระบบการจัดอันดับ A, AA และ AAA. คุณสามารถตรวจสอบได้ด้วยเครื่องมือตรวจสอบการเข้าถึงเว็บ คะแนนที่ดีที่สุดคือ AAA.

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับแนวทางเหล่านี้โปรดอ่านบทความบทนำของ W3C เพื่อทำความเข้าใจ WCAG 2.0 ดูที่ลิงค์ที่เกี่ยวข้องเหล่านี้เพื่อดูรายละเอียดเพิ่มเติม:

• WCAG 2.0 ประยุกต์
• มาตรา 508 ประสิทธิภาพของ WCAG

ขั้นตอนในการออกแบบที่สามารถเข้าถึงได้

ฉันขอแนะนำให้เยี่ยมชมเว็บไซต์โครงการ A11Y สำหรับเคล็ดลับการเข้าถึงได้จริง A11Y (ซึ่งเป็นตัวเลข) เป็นโครงการโอเพนซอร์สฟรีที่โฮสต์ใน GitHub, เสนอเทคนิคการออกแบบเว็บที่เข้าถึงได้.

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

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

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

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

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

เครื่องมือทดสอบการเข้าถึง

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

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

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

ตัวอย่างเช่นคุณอาจลองทำงานกับข้อกำหนดความคมชัดของ WCAG ปรับปรุงการอ่าน. เมื่อคุณเลือกสีของคุณแล้วให้ใช้ตัวตรวจสอบอัตราส่วนความคมชัดฟรีเพื่อดูว่ามันทำงานร่วมกันได้หรือไม่.

น่าเสียดายที่แนวทางของ WCAG 2.0 นั้นสับสนจนคุณอาจมีปัญหาในการเข้าใจข้อกำหนด แต่ยิ่งคุณลองมากเท่าไหร่คุณก็จะยิ่งเรียนรู้มากขึ้นเท่านั้นและยิ่งเข้าใจมากขึ้นเท่านั้น.

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

มีแอปฟรีอีกหนึ่งตัวในเว็บไซต์ Cynthia Says ที่สามารถทำได้ ตรวจสอบเว็บไซต์สำหรับการจัดอันดับความสำเร็จ WCAG ของ A, AA, AAA, และ มาตรา 508 สำหรับการปฏิบัติตามรัฐบาล.

และถ้าคุณเป็นโอเพ่นซอร์สลองดูที่สิ่งเหล่านี้ เครื่องมือทดสอบการเข้าถึงฟรีบน GitHub.

• HTML CodeSniffer
• เครื่องมือทดสอบการเข้าถึงอัตโนมัติ
• เครื่องมือตรวจสอบ WCAG

โปรแกรมเสริมของเบราว์เซอร์

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

AInspector สำหรับ Firefox นั้นถือเป็นสิ่งจำเป็นสำหรับการเข้าถึง มันตรวจสอบทุกอย่างและมันละเอียดกว่าเครื่องทดสอบ WAVE มาก.

ผู้ใช้ Mozilla อาจชอบ WCAG Contrast Checker ซึ่งเป็นโปรแกรมเสริมฟรี.

ผู้ใช้ Chrome ไม่มี AInspector แต่มีเครื่องมือสำหรับนักพัฒนาการเข้าถึงที่สร้างขึ้นอย่างเป็นทางการโดย Google สิ่งนี้จะเพิ่มเครื่องมือพิเศษลงในหน้าต่างตรวจสอบเพื่อตรวจสอบแนวทางการเข้าถึง.

ผู้ใช้ Chrome ยังมีตัวตรวจสอบความส่องสว่างเพื่อความคมชัดของสีและส่วนขยายฟรีอื่น ๆ.

น่าเสียดายที่ฉันไม่พบอะไรมากสำหรับผู้ใช้ Safari แต่ฉันพบส่วนขยายหนึ่งรายการสำหรับ Opera ที่ตรวจสอบการปฏิบัติตาม WCAG 2.0 หากคุณยินดีที่จะค้นหา Google อย่างหนักพอคุณอาจพบเครื่องมือเพิ่มเติมที่นั่น.

อ่านเพิ่มเติม

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

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

ตรวจสอบโพสต์ต่อไปนี้สำหรับข้อมูลเพิ่มเติมและให้แน่ใจว่าได้ศึกษาแนวทาง WCAG หากคุณต้องการความรู้โดยตรงจากแหล่งที่มา.

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