Dolenni darllenydd sgrin

Mae Silktide yn dod o hyd i elfennau dolenni sydd wedi'u ffurfio'n anghywir mewn ffyrdd sy'n eu torri ar gyfer technoleg gynorthwyol - dolenni heb destun darllenadwy, dolenni heb gyrchfan, a thagiau dolenni gwag crwydrol sydd ar ôl yn y dudalen.

Er mwyn i ddolen weithio gyda thechnoleg gynorthwyol, mae angen iddi gael cyrchfan (priodwedd href) a rhywbeth darllenadwy y tu mewn iddi:

<!-- Yn gweithio: cyrchfan a thestun darllenadwy -->
<a href="/about">Amdanom ni</a>

<!-- Yn gweithio: dolen delwedd â thestun amgen -->
<a href="/apple"><img src="apple.png" alt="Afal"></a>

Pam mae hyn yn bwysig

Mae darllenydd sgrin yn cyhoeddi pob dolen yn ôl ei thestun. Cyhoeddir dolen â chyrchfan ond heb destun fel "dolen" yn unig - gall y ddefnyddiwr ei gweithredu, ond ni fydd ganddo unrhyw syniad i ble mae'n arwain. Mae dolen â thestun ond heb gyrchfan yn ymddangos fel petai'n glicadwy ond nid yw'n mynd i unman. Mae'r ddau batrwm yn torri'r cytundeb sylfaenol sy'n caniatáu i bobl sy'n defnyddio technoleg gynorthwyol lywio tudalen drwy ei chysylltau.

Sut i'w drwsio

1. Ar gyfer dolen â chyrchfan ond heb destun darllenadwy: ychwanegwch destun y tu mewn i'r ddolen, neu destun alt os yw'n cynnwys delwedd yn unig.
2. Ar gyfer dolen â thestun ond heb gyrchfan: ychwanegwch yr href sydd ar goll, neu os yw'r elfen mewn gwirionedd yn darged i ddolenni eraill neidio iddo, symudwch ei id i elfen nad yw'n ddolen yn lle hynny:

<!-- Angor targed etifeddol, ni argymhellir yn HTML5 -->
<a name="example"></a>

<!-- Ffafrir: id ar elfen gyffredin -->
<div id="example">...</div>

3. Ar gyfer tagiau <a></a> gwag heb unrhyw briodweddau o gwbl: dilëwch nhw, nid oes iddynt unrhyw bwrpas. Yn aml, cânt eu gadael ar ôl gan olygyddion neu sgriptiau.
4. Os botwm yw'r elfen mewn gwirionedd - mae'n sbarduno gweithred yn hytrach na llywio - defnyddiwch elfen <button>, neu ychwanegwch role="button" at y tag presennol.

Sut mae Silktide yn profi hyn

1. Dewch o hyd i bob elfen <a> ar y dudalen a darllenwch ei thestun (gan gynnwys testun alt delweddau a thestun a ychwanegwyd gan CSS), ei href, ac unrhyw briodweddau id neu name.
2. Nodwch dri phatrwm problem:
   • Dolen â href ond heb destun darllenadwy.
   • Elfen â thestun a id neu name ond heb href - targed sy'n esgus bod yn ddolen, neu ddolen sydd heb ei chyrchfan.
   • Angor hollol wag heb destun, href, id, na name.
3. Ni chaiff dau batrwm eu nodi'n fwriadol:
   • <a> â thestun ond heb href, id, na name - mae HTML5 yn caniatáu hyn fel "dolen dalfan", a lenwir yn gyffredin yn ddiweddarach gan JavaScript.
   • Angorau gwag â id neu name ond heb href - targedau neidio etifeddol yw'r rhain, nid dolenni.

Dysgwch ragor

• Deall Maen Prawf Llwyddiant 4.1.2: Name, Role, Value (WCAG 2.2)
• H91: Using HTML form controls and links (WCAG technique)
• Pwrpas dolen
• Dolen wag