Osgoi labeli ar reolyddion na ellir eu labelu

Mae Silktide yn gwirio labeli ffurflenni sy'n pwyntio at elfen arall drwy ID, ac yn adrodd am labeli sydd wedi'u cyfeirio at elfennau na ddylent gael label — botymau, mewnbynnau tebyg i fotymau, ac elfennau na allant gymryd label o gwbl. Caiff yr elfennau hyn eu henwi gan eu testun neu eu gwerth eu hunain, ac mae label ar wahân yn creu enwau sy'n gwrthdaro.

Yn HTML, mae <label> yn enwi maes ffurflen drwy ei briodwedd for. Ond mae rhai rheolyddion eisoes yn cario eu henw eu hunain: testun botwm yw enw botwm, a value mewnbwn cyflwyno yw enw mewnbwn cyflwyno. Ni ellir labelu elfennau eraill, fel <div> plaen neu fewnbwn cudd, fel hyn o gwbl.

<!-- Problem: mae'r botwm eisoes yn dweud "Cadw"; mae'r label yn cystadlu ag ef -->
<label for="save">Cadw</label>
<button id="save">Cadw</button>

Pam mae hyn yn bwysig

Pan fo gan reolydd ddwy ffynhonnell ar gyfer ei enw — ei destun ei hun a label sy'n pwyntio ato — mae gwahanol borwyr a darllenwyr sgrin yn datrys y gwrthdaro'n wahanol. Efallai y caiff y rheolydd ei gyhoeddi ddwywaith, ei gyhoeddi gyda'r testun anghywir, neu ymddwyn yn annisgwyl pan gaiff y label ei glicio. Mae dileu'r label diangen yn sicrhau bod pob ymwelydd yn clywed yn union yr hyn y mae'r rheolydd yn ei ddweud.

Sut i'w drwsio

1. Ar gyfer botymau a mewnbynnau tebyg i fotymau, tynnwch y <label> a dibynnwch ar destun neu value y rheolydd ei hun:

<!-- Wedi'i drwsio: mae'r botwm yn enwi ei hun -->
<button id="save">Cadw</button>
<input type="submit" value="Cyflwyno">

2. Ar gyfer label sy'n pwyntio at fewnbwn cudd, tynnwch y label — ni chaiff meysydd cudd byth eu dangos na'u cyhoeddi, felly nid oes angen enw arnynt.
3. Os oeddech yn labelu elfen nad yw'n elfen ffurflen, fel <div> sy'n gweithredu fel rheolydd personol, defnyddiwch ARIA yn lle hynny: rhowch aria-labelledby i'r elfen sy'n pwyntio at y testun sy'n ei henwi.

Sut mae Silktide yn profi hyn

1. Canfyddwch bob elfen <label> sydd â phriodwedd for ar bob tudalen.
2. Chwiliwch am yr elfen y mae ei id yn cyfateb. Caiff labeli sy'n pwyntio at IDau nad ydynt yn bodoli eu hepgor yma — cânt eu hadrodd gan IDau labeli dilys yn lle hynny.
3. Adroddwch am y label pan fo ei darged yn un o'r canlynol:
   • elfen <button>,
   • <input> â'r math button, submit, reset, image, neu hidden,
   • unrhyw elfen na all gymryd label, fel <div> neu bennawd.
4. Mae labeli sy'n pwyntio at feysydd cyffredin — mewnbynnau testun, <select>, <textarea>, a rhai tebyg — yn pasio.

Dysgu mwy

• Deall Maen Prawf Llwyddiant 1.3.1: Gwybodaeth a Pherthnasoedd (WCAG 2.2)
• Techneg H44: Defnyddio elfennau label (WCAG)
• Yr elfen label (MDN)
• Labeli meysydd