เว็บไซต์ของคุณสามารถเข้าถึงได้หรือไม่?

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

จากรายงานเรื่องความพิการของ WHO 2011 ผู้คนมากกว่า 1 พันล้านคนทั่วโลกมีความพิการบางรูปแบบ ซึ่งสอดคล้องกับประมาณ 15% ของประชากรโลก จำนวนนี้จะเพิ่มมากขึ้นเมื่อประชากรมีอายุมากขึ้น และผู้สูงอายุมีความเสี่ยง/สัดส่วนความพิการสูงขึ้น

ในปี 2018 รัฐบาลสหราชอาณาจักรได้ออกกฎหมายให้รัฐบาลกลาง องค์กรปกครองส่วนท้องถิ่น องค์กรการกุศลบางแห่ง และเว็บไซต์องค์กรนอกภาครัฐอื่นๆ เพื่อให้เป็นไปตามแนวทาง WCAG2.1

จากนั้นในปี 2019 ได้มีการจัดตั้งพระราชบัญญัติการเข้าถึงได้ของยุโรป แม้ย้อนกลับไปในปี 1990 พระราชบัญญัติความพิการอเมริกันได้ครอบคลุมประเด็นต่างๆ ที่กำลังได้รับการแก้ไขในเว็บไซต์ ในบางสถานการณ์ บริษัทกำลังถูกนำตัวขึ้นศาลและแพ้ ยกตัวอย่างกรณี Domino's Pizza

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

วัตถุประสงค์

เป้าหมายของเราคือการสร้างเว็บไซต์ที่ครอบคลุมเพราะการเข้าถึงเป็นสิทธิมนุษยชน

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

ปัญหา

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

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

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

ปัญหาการเข้าถึงทั่วไป

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

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

สีและความคมชัด

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

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

ขนาดตัวอักษรและตัวเลือก

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

เกือบ 1 ใน 10 ของผู้ที่จะเข้าชมไซต์ของคุณจะมีปัญหากับดวงตา (ไม่รวมถึงตาบอดสี) เมื่ออายุ 40 ปี แสงเพียงครึ่งเดียวเท่านั้นที่จะผ่านเข้าสู่เรตินาเหมือนเมื่ออายุ 20 ปี สำหรับผู้ที่มีอายุมากกว่า 60 ปี ค่านี้จะลดลงเหลือ 20%

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

ไม่มีขนาดหรือแบบอักษรที่ 'ดีที่สุด' แต่ฉันขอแนะนำขนาดตัวอักษรของร่างกายที่ใกล้กับ 18px หรือ 1.125rem โดยมีความสูงของบรรทัดที่เว้นระยะอย่างเหมาะสม แบบอักษรที่เข้าเกณฑ์ และไลบรารีแบบอักษรขั้นต่ำที่รวมอยู่ด้วย Webaim มีบทความดีๆ เกี่ยวกับฟอนต์ และกล่าวว่า “ทุกครั้งที่คุณพบแบบอักษร ฟอนต์ หรือรูปแบบฟอนต์ใหม่ จิตใจของคุณต้องสร้างแผนที่หรือแบบจำลองของอักขระและรูปแบบเพื่อแยกคำและประมวลผลความหมายได้เร็วยิ่งขึ้น นี้ต้องใช้ความพยายามและความรู้ความเข้าใจเวลา ถ้าแบบตัวพิมพ์คุ้นเคยอยู่แล้ว ค่าโสหุ้ยนี้จะลดลง”

Gill Andrews มีโพสต์ที่ครอบคลุมมากขึ้นเกี่ยวกับข้อผิดพลาดในการพิมพ์ซึ่งควรค่าแก่การอ่านหากคุณจัดการกับการพิมพ์จำนวนมาก

รูปภาพ

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

หากรูปภาพไม่สำคัญและเป็นเพียงการตกแต่ง เช่น ลวดลายพื้นหลัง ให้ปล่อยแท็กว่างไว้ เพียงตรวจสอบให้แน่ใจว่าว่างเปล่าจริง ๆ ในมาร์กอัป เช่น: alt=”” มิฉะนั้นจะถูกตั้งค่าสถานะว่าไม่มีแท็ก alt

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

โครงสร้าง

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

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

<h1>โดยปกติคือชื่อหน้าของคุณ</h1>

<p>ข้อความย่อหน้าที่นี่</p>

<h2>ส่วนสำคัญถัดไปของเพจของคุณ</h2>

<p>ข้อความย่อหน้าที่นี่</p>

<h3>บางสิ่งที่ไม่สำคัญแต่เกี่ยวข้องกับ h2 ด้านบน</h3>

<p>ข้อความย่อหน้าที่นี่</p>

<h2>ส่วนสำคัญถัดไปของเพจของคุณ</h2>

Roundup

ฉันหวังว่าคุณจะเห็นว่าการปฏิบัติตามกฎง่ายๆ ข้างต้นจะทำให้ไซต์ของคุณสามารถเข้าถึงได้และประสบการณ์ที่น่าพึงพอใจมากขึ้นสำหรับทุกคนที่เข้าชม ไม่เพียงแค่นี้ แต่คุณยังปรับปรุงสถานะของคุณกับ Google อีกด้วย ดังนั้นจึงเป็น win-win สำหรับทุกคน

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