Aria-label คืออะไรและฉันควรใช้อย่างไร

321

ไม่กี่ชั่วโมงที่ผ่านมาฉันอ่านเกี่ยวกับคุณลักษณะaria-labelซึ่ง:

กำหนดค่าสตริงที่ติดป้ายองค์ประกอบปัจจุบัน

แต่ในความคิดของฉันนี่คือสิ่งที่titleแอตทริบิวต์ควรทำ ฉันค้นหาเพิ่มเติมในMozilla Developer Networkเพื่อรับตัวอย่างและคำอธิบาย แต่สิ่งเดียวที่ฉันพบคือ

<button aria-label="Close" onclick="myDialog.close()">X</button>

ซึ่งไม่ได้ให้ป้ายกำกับใด ๆ กับฉัน (ดังนั้นฉันถือว่าฉันเข้าใจความคิดผิด ๆ ) ฉันพยายามมันนี่ในjsfiddle

ดังนั้นคำถามของฉันคือ: ทำไมฉันต้องการaria-labelและฉันจะใช้มันได้อย่างไร

html assistive-technology

— ซัลวาดอร์ดาลี
แหล่งที่มา

3

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

— Fabrizio Calderan

13

fyi ARIA = แอปพลิเคชันอินเทอร์เน็ตที่สามารถเข้าถึงได้มากมาย

— Eric D'Souza

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

— HelloWorld

สิ่งที่คล้ายกันที่เหมาะสมที่คุณขอคือคุณสมบัติ "longdesc" (สำหรับภาพเท่านั้น) ที่ต้องการข้อมูลเพิ่มเติม - ไม่สามารถจินตนาการได้ว่าจะมีหนึ่งข้อความสำหรับมัน - @HelloWorld

— Jamie Paterson

427

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

ดังนั้นจึงมี<label>องค์ประกอบ:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

<label>อย่างชัดเจนบอกผู้ใช้สามารถพิมพ์ชื่อของพวกเขาลงไปในกล่องที่inputid="fmUserName"

aria-labelทำสิ่งเดียวกัน แต่สำหรับกรณีที่ไม่เหมาะกับการใช้งานlabelบนหน้าจอ ใช้ตัวอย่าง MDN :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

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

— Olly Hodgson
แหล่งที่มา

4

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

— Salvador Dali

1

ฉันเดาว่าส่วนขยายเช่นChromeVoxจะเป็นจุดเริ่มต้นที่ดีหรือไม่ ฉันไม่เคยใช้มันเลย พวกเขาทำงานโดยการอ่านหน้าจอออกเสียงให้กับผู้ใช้, การชี้นำจากแบบ HTML (เช่นh1ควรจะเน้นมากขึ้นกว่าp, aเห็นได้ชัดว่ามีการเชื่อมโยง, form` บ่งชี้บางที่จะป้อนข้อมูล aria-*แอตทริบิวต์ให้เบาะแสต่อไปสิ่งที่องค์ประกอบทำ ฯลฯ ) .

— Olly Hodgson

2

attributeเฉพาะในกรณีนี้ผมจะเพิ่มเข้าไปในชื่อ ไม่มีอันตรายใด ๆ ในการแสดงคำแนะนำเครื่องมือในการ 'เห็น' ผู้ใช้เมื่อพวกเขาเลื่อน X

— GolezTrol

3

นอกจากนี้ในการ ChromeVox มีNVDA ทั้งสองค่อนข้างง่ายต่อการติดตั้งและเริ่มและยากที่จะควบคุม

— ivarni

1

@SalvadorDali - สำหรับข้อมูลเท่านั้น ในคนตาบอดมือถือสามารถเปิดใช้งานเครื่องมือการเข้าถึงเช่นสำหรับมือถือ Android มันเป็น TalkBack และสำหรับโทรศัพท์มือถือ iOS มันเป็น VoiceOver โดยใช้สิ่งนี้หน้าจะได้รับการอ่านทีละบรรทัด

— Rahul J. Rane

71

ในตัวอย่างที่คุณให้คุณถูกต้องคุณต้องตั้งค่าแอตทริบิวต์ชื่อ

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

"X" ไม่เพียงพอที่จะให้ข้อมูลกับการกระทำที่นำโดยปุ่ม (คิดถึงคนที่ไม่มีความรู้ด้านคอมพิวเตอร์) อาจหมายถึง "ปิด", "ลบ", "ยกเลิก", "ลด", กากบาทแปลก ๆ , เส้นขยุกขยิกไม่มีอะไร

แม้ว่าข้อเท็จจริงที่ว่า W3C ดูเหมือนจะส่งเสริมaria-labelค่อนข้างว่าtitleแอตทริบิวต์ที่นี่: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14ในตัวอย่างที่คล้ายกันคุณจะเห็นว่าเทคโนโลยี การสนับสนุนไม่รวมเบราว์เซอร์มาตรฐาน: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

ในความเป็นจริงaria-labelในสถานการณ์ที่แน่นอนนี้อาจใช้เพื่อให้บริบทเพิ่มเติมกับการกระทำ:

ตัวอย่างเช่นคนตาบอดไม่รับรู้ป๊อปอัปเหมือนพวกเราที่มีวิสัยทัศน์ที่ดีมันเหมือนกับการเปลี่ยนบริบท "กลับไปที่หน้า" จะเป็นทางเลือกที่สะดวกกว่าสำหรับโปรแกรมอ่านหน้าจอเมื่อ "ปิด" มีความสำคัญมากกว่าสำหรับผู้ที่ไม่มีโปรแกรมอ่านหน้าจอ

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

— อาดัม
แหล่งที่มา

35

หากคุณต้องการทราบว่าaria-labelจะช่วยคุณได้จริง .. จากนั้นทำตามขั้นตอน ... คุณจะได้รับด้วยตัวเอง ..

สร้างหน้า html ที่มีรหัสด้านล่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

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

เมื่อติดตั้งเสร็จแล้วให้ใส่หูฟังไว้ในหูของคุณเปิดหน้า html และให้ความสำคัญกับปุ่มทั้งสอง (โดยการกดที่แท็บ) หนึ่งต่อหนึ่ง .. และคุณสามารถได้ยิน .. การมุ่งเน้นfirst x button.. จะบอกคุณเท่านั้นx button.. ในกรณีที่second x button.. คุณจะได้ยินback to the page buttonเพียง ..

ฉันหวังว่าคุณจะเข้าใจได้ดีตอนนี้ !!

— Moumit
แหล่งที่มา

1

จุดสำคัญคือtitleคุณลักษณะจะถูกละเว้นแม้ในปุ่มแรก ข้อมูลเพิ่มเติม: silktide.com/…

— Sphinxxx

2

มันยังคงเป็นกรณี? ยังดีกว่าที่จะให้อย่างใดอย่างหนึ่งtitle และ aria-label ?

— Kamafeather

2

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

— Raj Rajeshwar Singh Rathore

7

วิชาบังคับก่อน:

Aria ใช้เพื่อปรับปรุงประสบการณ์ผู้ใช้ของผู้ใช้ที่มีความบกพร่องทางสายตา ผู้ใช้ที่มีความบกพร่องทางสายตาสามารถนำทางผ่านแอพพลิเคชั่นที่ใช้ซอฟต์แวร์ตัวอ่านหน้าจอเช่น JAWS, NVDA, .. ในขณะที่นำทางผ่านแอพพลิเคชั่นซอฟต์แวร์ตัวอ่านหน้าจอจะประกาศเนื้อหาให้กับผู้ใช้ Aria สามารถใช้เพื่อเพิ่มเนื้อหาในรหัสซึ่งช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจบทบาทสถานะฉลากและวัตถุประสงค์ของการควบคุม

Aria ไม่เปลี่ยนแปลงอะไรที่มองเห็นได้ (Aria กลัวนักออกแบบด้วย)

เพลงฉลาก

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

วิธีใช้:

<input type="edit" aria-label="search" placeholder="search">

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

เพลง-labelledby

ทั้ง aria-label และ aria-labelledby ใช้เพื่อสื่อสารฉลาก แต่ aria-labelledby สามารถใช้เพื่ออ้างอิงป้ายกำกับใด ๆ ที่มีอยู่แล้วในหน้านี้ในขณะที่ aria-label ใช้เพื่อสื่อสารป้ายกำกับที่ฉันไม่แสดงด้วยสายตา

วิธีที่ 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

วิธีที่ 2:

aria-labelledby ยังสามารถใช้เพื่อรวมสองป้ายกำกับสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

— ndioewbnc
แหล่งที่มา

3

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

ดังนั้นวิธีการที่มีสติที่นี่จะให้บริการผู้ใช้ทุกคน ฉันจะเพิ่มทั้งtitleและaria-labelคุณสมบัติ (ให้บริการผู้ใช้ประเภทต่างๆและการใช้งานเว็บประเภทต่าง ๆ )

นี่คือบทความที่ดีที่อธิบายaria-labelในเชิงลึก

— lucalanca
แหล่งที่มา