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

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

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Accessibility.
Accessibility, Part 2: Perceivable
Accessibility, Part 4: Operable

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

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

WAI-ARIA (Web Accessibility Initiative—Accessible Rich Internet Applications) หรือเรียกสั้นๆ ว่า ARIA คือโปรโตคอล W3C ที่พัฒนาให้เว็บไซต์ทำงานได้กับเทคโนโลยีดังกล่าว มันทำสิ่งต่อไปนี้ด้วยกัน

  • การประกาศโครงสร้างเพจแบบต่างๆ (ยกตัวอย่างการใส่ role ในส่วนๆ หนึ่งของหน้าเพจเพื่อวัตถุประสงค์อย่างใดอย่างหนึ่ง ไม่ว่าจะเป็น ตัวนำทาง (navigation) กล่องค้นหา (search) หรือ เนื้อหาหลัก (main content) และอื่นๆ เป็นต้น)
  • เพิ่มการเข้าถึงได้ของ interactive control ต่างๆ (อย่างเช่น tree menu, drag and drop, slider, sort control และอื่นๆ) ด้วยการประกาศค่า 'state' ของพวกมัน (อย่างเช่นค่า enabled/disabled, hidden, required field เป็นต้น)
  • เป็นแนวทางสำหรับการประกาศ region ที่ๆ เนื้อหาสามารถ update ได้อย่าง dynamic (ที่เรียกว่า live region) ดังนั้นวิธีการนี้จะช่วยให้ดึงความสนใจจากผู้ใช้งานได้ดี

บราวเซอร์รุ่นเก่าจะไม่แสดงปัญหาที่นี่ ARIA นั้นได้รับการสนับสนุนโดยบราวเซอร์รุ่นใหม่ทั้งหมดและเครื่องอ่านหน้าจอ และนอกจากนั้นก็ไม่แสดงปัญหาความเข้ากันได้ (compatibility issue) ออกมา

ในซีรีย์นี้เราจะเน้นไปที่หัวข้อแรกๆ คือการประกาศ role ของอิลิเมนต์ที่เป็นส่วนหนึ่งของโครงสร้างหน้าเพจ

Roles

ถ้าโครงสร้างหน้าเพจสามารถถูกโปรแกรมได้และแต่ละ 'region' บนหน้าเว็บเพจสามารถถูกระบุได้ (อย่างเช่นตัวนำทางของเว็บไซต์ (navigation) เนื้อหาหลัก (main content) หรือ sidebar และอื่นๆ) เทคโนโลยีช่วยเหลือก็สามารถสร้างงานที่ดีกว่าในการแสดงโครงสร้างนั้นออกมาสู่ผู้ชม ยกตัวอย่างปุ่ม "skip to content" (ที่ซึ่งเราจะกล่าวถึงบทความถัดไป) นั้นจะต้องเลิกใช้ถ้าเครื่องอ่านหน้าจอรู้เองว่าเนื้อหาส่วนไหนเป็นเนื้อหาหลัก อย่างไรก็ตามสำหรับ HTML นั้น มันไม่มีตัวระบุจุดประสงค์ของเนื้อหาในหน้าเพจ และนี่คือที่ที่ ARIA roles ได้เข้ามาช่วยเหลือมัน

A screenshot of the TwentyThirteen theme with the ARIA landmarks Banner Navigation Main Complementary and Contentinfo highlighted

ARIA role นั้น โดยง่ายๆ คือค่าแอตทริบิวต์ที่ซึ่งระบุจุดประสงค์ของอิลิเมนต์ สำหรับตัวอย่างที่ตรงไปตรงมาอย่างนึงเลยคือการนำมาใช้กับ search form

role 'search' นั้นจะระบุลงบนแท็ก <form> นี้ แบบฟอร์มสำหรับการค้นหาเนื้อหาของเว็บไซต์ โปรแกรมอ่านหน้าจอสามารถพาผู้ใช้ไปได้โดยทันทีหากพวกเขาต้องการค้นหาเนื้อหา ยกตัวอย่างเครื่องอ่านหน้าจอบางตัวจะมี shortcut key เพื่อกระโดดไปยัง search form ในทางเดียวกันโครงสร้างเว็บเพจจะทำให้โปรแกรมที่ใช้เทคโนโลยีช่วยเหลือสร้างโครงสร้าง 'tree' ที่มีความหมายให้กับหน้าเพจ ยกตัวอย่างโปรแกรมอ่านหน้าจอ JAWS นั้นใช้ปุ่ม semi-colon สำหรับการกระโดดระหว่าง role ต่างๆ ช่วยให้ผู้ใช้สามารถสลับไปมาได้อย่างรวดเร็วระหว่างตำแหน่งต่างๆในไซต์ (เช่น header, navigation, main content, และอื่นๆ)

ซึ่งชนิดของแอตทริบิวต์เหล่านี้ถูกเรียกว่า Document Landmark Roles และ เราก็มีค่า role อื่นๆ ที่ใช้ดังนี้

Banner

ใช้กับเนื้อหาที่เกี่ยวข้องกับเว็บไซต์ ยกตัวอย่างชื่อเว็บไซต์ และ/หรือ Logo ของบริษัท ใน theme ส่วนมาก ข้อมูลส่วนนี้อยู่ใน header.php และ label ซึ่งเป็นอิลิเมนต์ที่ครอบ site title เนื้อหาภายใน และ logo มันจะใช้ role นี้

Navigation

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

จาก HTML5 specification การใช้ <nav> นั้นจะได้ role="navigation" ไปด้วยอยู่แล้ว ฉะนั้นไม่จำเป็นต้องใส่เพิ่ม อย่างไรก็ตาม มันไม่มีผลเสียอะไรถ้าจะใส่ซ้ำ

Main

เป็นเนื้อหาหลัก (main content) ของหน้าเพจ สิ่งนี้ จำเป็นต้อง ปรากฎแค่ครั้งเดียวบนหน้าเพจ ซึ่ง theme แต่ละอันจะแปรผันกันไป แต่ไฟล์ template ที่เกี่ยวข้องนั้นต้องมี

  • index.php
  • single.php
  • page.php

'main loop' ของคุณมันจะเป็นอย่างนี้

และ page templates ของคุณจะดูเหมือนแบบนี้

Search

กล่องนี้จะระบุ search form บนหน้าเว็บไซต์ของคุณ และมันสามารถใส่ได้หลายครั้ง theme ส่วนมากจะไม่ 'hardcode' ลงบน search form เข้าไปใน theme ของพวกเขา เว้นแต่ละทำให้เป็นส่วนของ widget ที่ๆ ซึ่งผู้ใช้งานสามารถเพิ่ม search widget เข้าไปได้ ในกรณีนี้ (และสมมุติว่าคุณกำลังใช้งาน WP 3.6 หรือ สูงกว่านั้น) คุณไม่ต้องทำอะไรเลย ค่าดีฟอลต์ของ Wordpress search form นั้นจะเพิ่ม search role ให้คุณอย่างเหมาะสมอยู่แล้ว ยิ่งไปกว่านั้น มันจัดการกับ form label และ ปุ่ม submit ในทางให้เข้าถึงได้โดยง่ายอีกด้วย

ถ้าคุณนั้น hardcode ฟอร์มค้นหาภายใน theme ของคุณ ให้แน่ใจว่ามันจะใช้ get_search_form() (ดูที่ codex) สุดท้ายแล้ว ถ้าคุณต้องการเปลี่ยน theme ให้ search form ที่มีค่าดีฟอลต์ คุณสามารถสร้าง template file ที่เรียกว่า searchform.php -- แต่ให้แน่ใจว่ามันเพิ่ม search role search form ที่เป็นค่าดีฟอลต์มี template แบบนี้

Article

มันจะระบุส่วนของเนื้อหาที่ stand-alone คือเนื้อหาที่แยกออกจากส่วนอื่นอย่างชัดเจน ตัวอย่างที่ดีที่สุดเกี่ยวกับกรณีนี้ก็คือ blog post ที่ปรากฎอยู่บนหน้า 'posts' ของคุณ โดยทั่วไปแล้วแต่ละ comment นั้นจะถูกกำหนดว่าเป็น 'article' มันสามารถใส่ไปในอิลิเมนต์อื่นไปได้ด้วย ยกตัวอย่างคอมเม้นต์ (article) ที่สามารถใส่ไว้ภายใต้ blog post (article)

Complementary

ส่วนนี้จะระบุส่วนที่มีกล่าวไว้ว่า "การสนับสนุนสำหรับเนื้อหาหลัก (main content)" ใน context ของ Wordpress สิ่งนี้สามารถหมายถึง sidebar ไฟล์ sidebar.php ของคุณนั้นจะดูเหมือนบางอย่างแบบนี้

Contentinfo

สิ่งนี้มักระบุและหมายถึง footer ในทางการแล้วมันอธิบายไว้ว่า

พื้นที่ขนาดใหญ่ที่ทำให้ทุกคนรับรู้ได้ว่ามันบรรจุข้อมูลเกี่ยวกับเอกสารที่เป็น parent document ของมัน

ยกตัวอย่าง มันจะเพิ่มใส่ footnotes, copyrights, ลิ้งค์ไปยัง privacy statements, และอื่นๆ อย่างไรก็ตาม มันมักจะใช้ label สำหรับ footer ของหน้าเพจ โดยไม่สนเนื้อหาหลัก Firefox, Safari และ Chrome นั้นจะใส่ contentinfo อย่างอัตโนมัติให้กับ <footer> tag

ARIA กับ HTML5

แม้ว่ามีการสนับสนุนจากเครื่องอ่านหน้าจอกับ HTML5 ที่เพิ่มขึ้น support for HTML5 by screen readers varies ส่งผลให้การสนับสนุนการใช้ ARIA นั้นจะดีขึ้นด้วย ดังนั้นแม้ว่าจำนวนบราวเซอร์ที่สนับสนุนนั้นจะมีจำนวนมากขึ้นๆ ที่สามารถ map semantic ของHTML5 tag เข้ากับ role มันนั้นได้โดยอัตโนมัติ มันก็เป็นหนทางที่ดีที่จะประกาศ role เหล่านี้ด้วยตนเอง อย่างไรก็ตาม ระวังที่จะประกาศไปทับกับ native 'role' ของเดิมของอิลิเมนต์ ยกตัวอย่าง คุณควรหลีกเลี่ยงที่จะทำแบบนี้

ด้านล่างคือรายการของอิลิเมนต์ HTML5 ที่มี ARIA role ผูกติดอยู่แล้วโดยอัตโนมัติ ไม่จำเป็นต้นประกาศมัน

HTML5 อิลิเมนต์ ARIA role ที่ประกาศไว้อัตโนมัติแล้ว Note อื่นๆ
<header> role="banner" ควรมี banner อยู่ที่เดียว
<nav> role="navigation"
<main> role="main" ควรมี main อยู่ที่เดียว
<article> role="article"
<aside> role="complementary"
<footer> role="contentinfo" ควรมี contentinfo อยู่ที่เดียว
<button> role="button"

เมื่อเราใช้ HTML5 คุณควรใช้ script เช่น HTML5 Shiv v3.6 ที่ใช้อยู่ใน Twenty* themes เพื่อให้มันสนับสนุนบราวเซอร์รุ่นเก่าด้วย

สรุป

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

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.