Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

การทำเว็บไซต์ที่ทุกคนเข้าถึงได้ (Accessibility) บทที่ 2 : การรับรู้ได้ (Perceivable)

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Accessibility.
Accessibility, Part 1: Introduction
Accessibility, Part 3: ARIA

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

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

โปรดจำไว้ว่าบทเรียนนี้จะไม่ยกเนื้อหามาทั้งหมด ดังนั้นในที่สุดคุณก็ต้องอ้างอิงที่ Web Content Accessibility Guidelines (WCAG) อยู่ดี

ใส่ข้อความ Alternative ให้กับ Image (1.1)

โดยการใส่แท็ก alt เข้าไปใน image 

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

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

ขณะที่คำแนะนำนี้ ค่อนข้างเหมาะสมกับคนเขียนบทความ แต่ผมจะพูดที่นี่เพราะนักพัฒนา theme ก็มักจะใส่ alt ไปด้วยคำว่า "logo" แทนที่จะเขียนชื่อของเว็บไซต์หรือชื่อของบริษัท ในกรณีนี้ มันเป็นไปได้อย่างดีที่สุดที่จะใช้ชื่อเว็บไซต์โดยใช้โค้ด get_bloginfo('name') แทน

แท็ก alt นั้นไม่ควรใส่ในรูปภาพที่เป็นการตกแต่งล้วนๆ ยกเว้นแต่ว่าคุณอยากบังคับให้ผู้ใช้ของคุณนั่งฟังอย่างน่ารำคาญไปกับข้อมูลที่ไร้สาระเหล่านั้น

การใส่ Alternative ให้กับ CAPTCHA

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

ให้แน่ใจว่าเนื้อหานั้นสามารถมองเห็นได้โดยง่าย (1.4)

อย่ายึดกับกับตำแหน่ง สี หรือ รูปทรง ที่จะสื่อความหมายออกมา

เรื่องนี้นำเสนอให้นักพัฒนา plug-in แต่นักพัฒนา theme ก็เรียนรู้ได้เช่นเดียวกัน ถ้าสี รูปทรง หรือ ตำแหน่ง ถูกใช้สื่อความหมายของสิ่งที่ไม่เกี่ยวข้องข้อความ นั้นหมายถึงความหมายนั้นถูกสูญเสียให้กับผู้ใช้งานที่ซึ่งตาบอดสีหรือตาบอด

ยกตัวอย่าง สำหรับคนทั่วไป ฟอร์มที่ติดต่อ ปุ่ม นั้นถูกยึดกับไอคอนที่เป็นที่นิยมอย่างเช่น Font Awesome

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

นี่เป็นเพียงแค่หนึ่งตัวอย่างของการใช้ ARIA โปรโตคอล ที่ซึ่งเราจะกล่าวถึงรายละเอียดในบทถัดไป

เราต้องให้แน่ใจว่า มันมีค่า Contrast เพียงพอระหว่าง Text และ Background

นี่คือจุดที่ค่อนข้างสำคัญ แม้ว่าเพื่อคนตาดีก็ตาม เว็บไซต์ที่มีค่า Contrast หรือสีตัดกันต่ำระหว่าง Text และ Background นั้นจะยากต่อการอ่านและทำให้ตาล้าได้ง่าย สำหรับผู้ที่มีการมองเห็นผิดปกติ แม้ว่าค่า Contrast นั้นจะสูงก็ตามที่ นี่เป็นที่มาที่ซึ่งทำไมว่า WCAG นั้นแนะนำว่า background และ text จะต้องมีค่า contrast ratio ระหว่าง 4.5:1

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

ตัวอักษรที่ขนาดใหญ่ขึ้นนั้นต้องการ requirement ที่ต่ำลงอีกคือค่า 3:1 และ โลโก้ text ที่เป็นการตกแต่งหรือ 'ถูกปิด' text/button ที่ไม่มีค่า contrast requirement เพียงพอ

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

หลีกเลี่ยง Background สีขาว

องค์กร British Dyslexia Association นั้นแนะนำให้หลีกเลี่ยง Background สีขาวล้วน โดยพยายามใช้สีขาวที่ต่ำลงมาแทน เช่น ขาวครีม หรือ สี pastel เป็นต้น เป็นอีกหนึ่งเหตุผลที่ความสว่างแบบสุดสูงจากสีขาวนั้นทำให้ผู้อ่าน 'เวียนหัว'

สำหรับผู้ที่ได้รับผลกระทบจาก Scotopic sensitivity syndrome (หรือ Iren syndrome) ที่คือ contrast สูงๆ ระหว่าง background และ text สามารถทำให้เกิดอาการเหล่านี้ได้ อย่างเช่น

  • ตัวอักษรที่เกิดขึ้นที่พยายามเคลื่อนย้ายหน้าเว็บ (อักษรวิ่งขึ้น rise, อักษรร่วงหล่น fall, อักษรหมุน swirl, อักษรเขย่า shake, หรืออื่นๆ)
  • "losing" กรณีที่เห็นข้อความเป็นสายสีขาว ผ่านตัวอักษร
  • ข้อความที่เกิดขึ้นทำให้เกิดการมึนงง

ซึ่งอาการเหล่านี้ จะทำให้การอ่านนั้นยากและรู้สึกไม่สบาย และ ทำให้เกิดการเมื่อยล้าดวงตา ปวดตา มึนงง และ ปวดหัว

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

จัดการโครงสร้าง HTML ในหน้าเพจให้ดี (1.3)

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

ปรับโครงสร้าง Layout ของ Theme ของคุณ

ทางที่เร็วที่สุดในการทดสอบสิ่งเหล่านี้ก็คือทดสอบแสดงผล theme ของคุณเวลาที่ CSS และ Javascript นั้นถูก disable ทางที่ดีกว่าคือลองใช้ Lynx ที่ซึ่งเป็น text-based browser ถ้าโครงสร้างเว็บไซต์ของคุณนั้นส่งผลให้เนื้อหาที่ปรากฎอยู่ในลักษณะไม่เหมือนชาวบ้านนั้นมันค่อนข้างยากที่จะให้ผู้ใช้งานใช้ Lynx หรือ เทคโนโลยีช่วยเหลืออื่นๆ ที่อ่านค่าจากเว็บไซต์ของคุณ เพราะว่าผู้ใช้งานนั้น จะขึ้นกับเทคโนโลยีเหล่านี้มากๆ และไม่มีข้อได้เปรียบที่ CSS และ JavaScript นั้นเอาให้บนหน้าเพจจาก flow content มันสำคัญมากที่การอ่านอย่างถูกต้องที่ถูกมองได้โดยง่ายแม้ไม่มีมัน

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

  • หัวข้อหลัก (Title)
  • เมนูนำทาง (Navigation)
  • เนื้อหาหลัก (Main content)
  • เนื้อหาด้านข้าง (Side content)
  • ส่วนท้ายของเว็บไซต์ (Footer)

ใช้งาน Header อย่างเหมาะสม

นี่คือหนึ่งในวิธีง่ายๆ ที่ควรทำให้ถูกต้อง กฎนั้นง่ายมาก

  1. ใช้ <h*> tags สำหรับ header เท่านั้น ไม่ใช่แค่เพื่อ style ให้กับอักษรบางตัว
  2. search engine และ screeen reader ที่ใช้ทั้ง header tags เพื่อจัดโครงสร้างหน้าเพจของคุณ ดังนั้นให้คิดให้ดีเกี่ยวกับวิธีการใช้งานพวกมัน มันจะเป็นสิ่งสะท้อนโครงสร้างหน้าเพจของคุณ
  3. ใช้พวกมันตามลำดับ <h3> ควรใส่ไว้ภายใต้ <h2> และ <h2> ใส่ไว้ภายใต้ <h1> (สิ่งนี้เป็นสิ่งที่ต้องทำต่อจากข้อ (2))

หนึ่งคำถามที่ผุดขึ้นมาบ่อยๆ คือ title ของเว็บไซต์นั้นควรอยู่ภายใต้ <h1> tag หรือไม่ สำหรับ W3C recommendation นั้นบอกไว้ว่าขณะที่ยังมีบางกรณีที่ซึ่งเป็นสิ่งที่สมควรทำ ที่กรณีของ WordPress theme มันเป็นความเป็นไปได้ที่ดีที่สุดที่จะไม่ใช้ <h1> tag สำหรับ site title มันมีเหตุผลหลายๆ ประการ

  1. เว็บไซต์ title ควรใส่ไว้ภายใต้ <title> tag ขณะที่บ่อยครั้งมันถูกเพิกเฉย และ ค่อนข้างดูน่าเกลียดสำหรับคนอ่านโดยทั่วไป มันจะเป็นสิ่งแรกเลยที่ถูกอ่านได้จากเครื่องอ่านหน้าจอ ดังนั้นครอบ site title ไว้ใน <h1> แท็ก จะช่วยให้มันง่ายสำหรับผู้ใช้ screen reader ขณะที่ทำให้ title นั้นดูเด่นชัดสำหรับคนตาดีที่สามารถเข้าถึงโดยไม่ต้องพึ่ง header tag
  2. สำหรับ header tag นั้นถูกใช้สำหรับจัดการข้อมูลข่าวสาร เว็บไซต์ของคุณนั้นจะไม่ได้รับประโยชน์จากจุดประสงค์ดังกล่าว

ไม่ว่าคุณจะตัดสินใจอย่างไรก็ตาม header อื่นๆ ที่ตามมาบนหน้าเพจควรจะอยู่ภายใต้มัน ดังนั้นบทความที่อยู่ภายใน "The Loop" หรือ page title นั้นควรมี <h2> tag ถ้าคุณได้เคยใช้ <h1> tag สำหรับเว็บไซต์ title และ <h1> tag ที่อื่นๆ

หลังจาก post content ธีมส่วนใหญ่จะแสดง post comment มันเป็นธรรมชาติที่จะแสดง "Comments" เป็น heading มันเป็นการตัดเนื้อหาออกจากส่วน content แต่มันจะถูกผูกไว้กับ post content ตำแหน่งของ heading level จะต้องเข้ากับสิ่งนี้ และสิ่งสมเหตุสมผลที่ควรทำคือมี "Comments" header เพียงหนึ่งเดียวภายใต้ post title

นี่คือโค้ดที่ตัดออกมาจาก single.php

ในตัวอย่าง ผมใช้ <h1> tag สำหรับ post title ดังนั้น comment template (comments.php) นั้นควรจะเป็นแบบนี้

ให้แน่ใจว่า เว็บไซต์ของคุณนั้นยังดูดีเมื่อเพิ่มขนาดตัวอักษร (1.4)

ผู้ใช้บางคนที่มีปัญหาทางด้านสายตาเพียงเล็กน้อย มักจะใช้ชีวิตขึ้นกับการขยายขนาดตัวอักษร มากกว่าการใช้เทคโนโลยีช่วยเหลือ ตัวอย่างเช่นการใช้โปรแกรมแว่นขยาย (screen magnifier) ในกรณีนี้ WCAG ได้ระบุไว้ว่า ไซต์ของคุณต้องไม่ "แตก" เมื่อขนาดตัวอักษรถูกขยายไปถึง 200% "แตก" ในที่นี้หมายถึง ตัวอักษรมันหายไป ชนกัน หรือออกนอกกรอบ หรือไม่ก็ layout ของเว็บถูกเลื่อนหลุดออกจากกัน ถ้าสิ่งดังกล่าวมันจะดูแย่และอ่านยากยิ่งขึ้นเข้าไปอีก

ใช้ Relative Font-Size

เพราะบราวเซอร์สมัยใหม่นั้นจะเปลี่ยนขนาดตัวอักษรได้ง่ายกว่าถ้าใช้ Relative Font-Size แม้มันไม่สำคัญเท่าที่ควรจะเป็น (แม้ว่า IE9 ยังไม่สนับสนุนการเปลี่ยนแปลงขนาด font size ที่ถูกใส่ค่าเป็น pixel) ยกเว้นแต่ว่า มันจะยังแนะนำให้ใช้ relative font size (percentages, ems or rems) หน่วย rem นั้นจะทำงานคล้ายๆ กับหน่วย em และแม้ว่ามันเพิ่งจะมีใน CSS3 คุณสามารถใช้มันในบราวเซอร์รุ่นเก่าได้ รายละเอียดเกี่ยวกับการ implement relative font นั้นค่อนข้างนอกเหนือเนื้อหาในบทความนี้ แต่คุณสามารถหาอ่านได้จากที่เหล่านี้

ใช้ Fluid Layout

อย่างไรก็ตาม การเปลี่ยนแปลงขนาดตัวอักษรนั้นสามารถทำให้เกิดปัญหาการจัด Layout ได้ ข้อความนั้นจะถูกผลักออกไป บังคับให้ผู้ใช้ต้องทำการเลื่อน (scroll) หรือ ข้อความจะถูกดีดออกจากกล่องของมัน หรือที่ร้ายกว่านั้นคือถูกดันเข้าไปในกล่องตัวอักษรอื่น ทำให้ส่วนของหน้าเพจนั้นไม่ถูกต้อง นี่เป็นที่ซึ่ง reponsive (หรือ fluid) layout สามารถช่วยคุณได้ "Responsive Web Site"  สามารถถูกออกแบบเพื่อนำมาใช้กับอุปกรณ์อะไรก็ตามที่เรากำลังดูอยู่ ดังนั้นมันค่อนข้างหายากว่ามันจะใช้ fixed pixel สำหรับ height/width หรือกับ font-size ลำดับต่อๆ ไป ไซต์ดังกล่าวนั้น ส่วนมากจะดูดีเมื่อ font-size ถูกเปลี่ยนแปลง และ layout ของพวกมันไม่ถูกทำให้แตก

คำแนะนำของ WCAG นั้นว่าไม่เพียงแค่ข้อความเท่านั้นที่สามารถขนาดให้ใหญ่ขึ้นได้ถึง 200% เว็บไซต์ก็ต้องสามารถรองรับการขยายของขนาดอักษรนั้นได้ด้วย Responsive Web Design สามารถช่วยเหลือคุณได้ เพราะว่า

  • บนหน้าจอที่ถูกขยาย ถูกปรับแต่งให้เข้ากับขนาด viewport ที่เล็กกว่า
  • อิลิเมนต์ถูกย้ายเพื่อตัดฟีเจอร์ horizontal scrolling
  • ขนาดที่ไม่ได้ถูกระบุ ป้องกันการ overlapping หรือ cut-off text
  • image ถูกเปลี่ยนขนาดเพื่อให้มัน fit กับเนื้อที่ที่เหลือ และ ไม่เกิดการ overlap กับ ข้อความ

อย่างไรก็ตาม มันสำคัญที่จะรู้ไว้ว่า responsive design และ การเข้าถึงได้ (accessibility) เป็นเรื่องคนละเรื่องกัน แม้ว่าพวกมันจะเกื้อหนุนกันก็ตาม มันมีเป้าหมายที่แตกต่างกันเลย สำหรับ responsive site นั้นไม่จำเป็นจะต้องเข้าถึงได้สำหรับทุกคน และ ในทางกลับกัน เว็บที่เข้าถึงได้สำหรับทุกคนก็ไม่จำเป็นต้อง responsive

ใช้มาร์คอัพอย่างถูกต้อง (1.3)

ใช้ Table เพื่อแสดงผลข้อมูลเท่านั้น

เพื่อที่จะใช้ table ในการช่วยทำ page layout นั้น (หวังอย่างยิ่งว่า) มันเป็นสิ่งที่เป็นอดีตไปแล้ว มันก็ยังมีหัวข้อ accessibilty ที่เกี่ยวข้องกับการใช้ table อย่างผิดวัตถุประสงค์ Table นั้นถูกตั้งใจตั้งแต่แรกว่าจะใช้สำหรับการแสดงผลของข้อมูล อย่างเช่น rows และ columns นั้นจะมีความหมายในตัวของมัน และเครื่องอ่านหน้าจอจะเรียนรู้เมื่อทำการแปลผลข้อมูล

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

การใช้มาร์คอัพ Table อย่างถูกต้อง

นักพัฒนาธีมส่วนมากไม่ต้องการใช้ table (และ Wordpress post calendar นั้นสามารถเข้าถึงได้สำหรับทุกคนแล้ว) อย่างไรก็ตาม plugin จะสามารถแสดงผล table ผ่าน shortcode หรือ widget มันมีเรื่องหลายอย่างที่ต้องคำนึงถึงเมื่อใช้ table มาร์คอัพ

  • ที่ใดก็ตามที่เป็นไปได้ ทำให้ table นั้นดูง่ายที่สุด แม้ว่า spanned rows/columns จะสามารถเป็นมาตรฐานอยู่ได้หลายๆ ปี แต่พวกมันไม่ถูกสนับสนุนโดยเครื่องอ่านหน้าจอ
  • เมื่อเหมาะสม การใช้ <caption> อิลิเมนต์ที่หัวของตาราง จะเป็นการอธิบายว่า table นั้นจะแสดงเรื่องอะไร

  • ใช้ <th> สำหรับ headers และ <td> สำหรับ table data <th> เซลล์นั้นไม่ควรว่างเปล่า
  • ด้วยการกำหนด scope ให้กับเซลล์ <th>  ระบุว่าถ้าแถวหรือคอลัมน์ header <th scope="col"> หรือ <th scope="row"> ถึงแม้ว่า Scope นั้นบ่อยครั้งถูกอ่านโดย screen reader มันจะไม่เจ็บปวดเมื่อให้มันแสดงออกมา
  • คุณสามารถใช้ <thead>, <tbody> และ <tfoot> แต่พวกมันจะไม่ให้อะไรเลยเกี่ยวกับ accessibility
  • ใช้ title แอตทริบิวต์เพื่อที่จะอธิบายตัวย่อต่างๆ ที่ใช้ในเซลล์

ARIA & Forms

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.