พวกเราคำนึงถึง accessibility เสมอ

a11y คืออะไร

a11y ย่อมาจาก Accessibility และ 11 มาจากจำนวนตัวอักษรระหว่าง a ถึง y

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

คนที่มักใช้ a11y ก็คนพิการทางสายตา เขาก็จะใช้ Screen reader เป็นเครื่องมือหนึ่งในการ navigate website/app ต่างๆ เครื่องมือนี้ก็จะช่วยอ่านออกมาเป็นเสียงให้ผู้ใช้ได้ยิน แทนการมองที่จอ

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

ทำไมพวกเราคำนึง a11y ตลอด?

ตัวผมเองก็ไม่ได้สายตาดีขนาดนั้น บางทีก็เห็นบ้างไม่เห็นบ้าง บวกกับตอนฝึกงานกับบริษัทแห่งนึงแล้วได้ไปคุยกับคนตาบอดที่ทำงานอยู่ด้วย เลยคิดว่าชีวิตมันก็ลำบากนะ ถ้าจะเข้าเว็บแล้วยังไม่ได้ข้อมูลอีก ก็มีความอยากช่วยแหละ แต่ไม่รู้จะทำไงดี ตอนนี้ก็เลยจบที่อย่างน้อยๆก็เอาให้เว็บเรามันผ่าน WCAG(Web Content Accessibility Guidelines) หน่อย

ความท้าทาย dev

ตอนตั้งใจจะทำนี่ไม่เท่าไหร่หรอก แต่ตอนจะทำจริงๆนี่งานหนักเลย 🥲

เริ่มตั้งแต่ตอนออกแบบนี่คือหมดเวลาไปนานมากกับการไปไล่เช็ก Contrast ตั้งแต่อยู่ใน Figma เอาจริงๆก็หลายสัปดาห์อยู่ (ด้วยความว่าไม่คล่องด้วยแหละมั้ง)

พอจะไป dev นอกจากเรื่อง Responsive Design ที่จำเป็นต้องทำอยู่แล้ว ก็นั่งคิดต่ออีกว่าจะ div รัวๆเหมือนที่ทำๆกันมามันก็ไม่ได้สิ ก็ต้องไปใช้ semantic tag อย่าง section, aside, header ไรงี้ รูปทุกรูปในเว็บก็ต้องไปไล่เขียน Alternate Text ให้ทุกอัน Screen Reader จะได้อ่านได้… จะว่าไปพูดถึง Screen Reader ก็มีปัญหากับมันไปเยอะอยู่ ตอนนี้ก็ตอบไม่ได้เหมือนกันว่าแก้ทุกอย่างรึยัง แต่แอดก็ Navigate โดยไม่ใช้ Mouse ได้อยู่นะ

งานจะเยอะขึ้นเยอะเลยนะ จะคุ้มเหนื่อยหรอ?

คงมีหลายคนคิดแบบนั้น เพราะก็จริงแหละ งานมันเพิ่มขึ้นเป็นมหาศาลเลย

แต่ว่า การแค่แอดได้ยิน สักคนนึงมาพูดขอบคุณ ว่าเขาเป็นคนนึงที่ต้องพึ่ง a11y ในการเข้าถึง website/app ต่างๆแล้ว คนเหล่านั้นสามารถใช้งานเว็บเราได้สบายก็คุ้มละ (ถึงตอนนี้จะยังไม่มีก็เถอะ 555)

dark mode/light mode

ตัวสูบพลังงานแอดเลยแหละ ไหนจะต้องออกแบบรูปให้มันใช้ได้ทั้งสอง theme บางทีถ้ามันเปลี่ยนรูปก็ต้องไปไล่สร้าง Alternate Text ให้ทุกรูปทั้ง light ทั้ง dark mode เลย โค่ดเหนื่อย 😅

ปิดท้าย

แนวคิดนี้เราก็ไม่ได้ทำแค่ใน website หรอกแต่ในงานแข่ง code algo โจทย์ pdf ก็พยายามทำด้วยเช่นกัน และถ้าทางทีมงานมีโปรเจกต์อื่นๆอีก ก็คงจะพยายามให้มัน Accessible ที่สุดเท่าที่จะทำได้อ่ะนะ

ปล. แอดก็ไม่ชัวร์ว่าทุกอย่าง Accessible แล้วรึยัง ถ้าเจออันไหนมันใช้ Screen Reader แล้วมันไม่ออก ก็ทักมาได้นะครับ เดี๋ยวแอดไปแก้