Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

Wedi'i guddio'n weledol

Defnyddiwch y cynorthwywyr hyn i guddio elfennau yn weledol ond eu cadw'n hygyrch i dechnolegau cynorthwyol.

Cuddiwch elfen yn weledol wrth barhau i ganiatáu iddi ddod i gysylltiad â thechnolegau cynorthwyol (fel darllenwyr sgrin) gyda .visually-hidden. Defnyddiwch .visually-hidden-focusablei guddio elfen yn weledol yn ddiofyn, ond i'w harddangos pan fydd wedi'i ffocysu (ee gan ddefnyddiwr bysellfwrdd yn unig). .visually-hidden-focusablegellir ei roi ar gynhwysydd hefyd – diolch i :focus-within, bydd y cynhwysydd yn cael ei arddangos pan fydd unrhyw elfen plentyn o'r cynhwysydd yn cael ffocws.

Neidio i'r prif gynnwys
Cynhwysydd ag elfen y gellir canolbwyntio arni . 
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>

Gellir defnyddio'r ddau visually-hiddena hefyd fel mixins.visually-hidden-focusable

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}