1. Rhagarweiniad

Mae gan dros 11 miliwn o bobl yn y DU anabledd corfforol, gweledol, sain, lleferydd neu wybyddol. Erbyn cyrraedd 51 oed, mae llawer ohonon ni’n dechrau colli’r gallu i ganolbwyntio ar wrthrychau gerllaw. Yn aml, nid yw anableddau gwybyddol yn cael eu diagnosio. Mae AGE UK yn amcangyfrif y bydd gan 7% o bobl dros 65 oed ddementia sy’n dechrau’n hwyr ac erbyn 2051 bydd nifer y bobl â dementia yn y DU yn codi i dros ddwy filiwn. Mae anhwylderau gorbryder a diffyg sylw yn aml yn anableddau cudd. Mae ADHD Action yn amcangyfrif bod gan 1.5 miliwn o oedolion yn y DU ADHD ond dim ond cyfran fach sy’n cael diagnosis.

Roedd gan bron i un o bob pump o bobl ryw fath o anabledd yng Nghymru a Lloegr

Y Swyddfa Ystadegau Gwladol

Mae llawer o anableddau dros dro fel ysgwyddau wedi’u fferru ac anafiadau straen ailadroddus sy’n cyfyngu ar y defnydd o lygoden neu fysellfwrdd. Hefyd, mae defnydd sefyllfaol yn effeithio ar bawb, fel defnyddio ffôn symudol mewn golau haul llachar, mewn amgylcheddau tawel neu brysur i gael mynediad at gynnwys fideo a lled band isel/data isel.Mae’n hollbwysig bod gwefannau’n hygyrch ac yn addas at eu diben. Mae hyn yn golygu eu bod nhw’n cael eu dylunio a’u datblygu fel y gall unrhyw un eu defnyddio nhw, waeth beth fo’u hanabledd. Yn wreiddiol, cafodd y rhyngrwyd ei hadeiladu i fod yn hygyrch, felly beth yw’r broblem? Ni yw’r broblem; rydyn ni’n rhoi rhwystrau yn y ffordd, fel:

• Dyluniad cymhleth sy’n diystyru HTML sylfaenol
• Golygydd gwefannau nad yw’n darparu dewisiadau amgen hygyrch
• Lliwiau brand nad ydyn nhw’n gweithio pan fyddan nhw’n cael eu defnyddio fel testun
• Peidio â gwirio’r hyn mae pobl yn ei roi ar eich gwefan
• Cynnwys wedi’i animeiddio neu ryngweithiol
• Fideos heb gapsiynau neu drawsgrifiadau
• Dewislenni a chynlluniau tudalennau gorgymhleth

Y rheolau; ddylai fod ots gyda ni?

Ym 1997, sefydlodd Consortiwm W3C, corff rhyngwladol o 400 o sefydliadau sy’n llywodraethu safonau’r we, Ganllawiau Hygyrchedd Cynnwys y We, wedi’i fyrhau i WCAG. Bu sawl fersiwn ers hynny; 2.1 yw’r diweddaraf. Mae’r canllawiau hyn yn nodi bod rhaid i wefannau:

• Ddarparu ffyrdd i bawb gael mynediad i gynnwys
• Galluogi pobl i bori gwefannau gan ddefnyddio bysellfwrdd neu ddarllenydd sgrîn
• Sicrhau bod y testun yn ddarllenadwy a bod y cynnwys yn gwneud synnwyr
• Bod yn gydnaws ar draws pob dyfais fel bwrdd gwaith a symudol

Mae gan bob canllaw restr o feini prawf y gellir eu profi sy’n ein helpu i sicrhau bod gwefannau’n addas at eu diben. Mae gan y meini prawf llwyddiant dair lefel A, AA ac AAA, lle mai A yw’r lefel hawsaf i’w chyflawni ac AAA yw’r anoddaf. Yn y DU, mae’r safon wedi’i gosod ar AA ar gyfer pob corff neu sefydliad cyhoeddus sy’n cael mwy na 50% o gyllid cyhoeddus. Hyd yn oed os nad ydych chi’n cael eich ariannu’n gyhoeddus, mae Deddf Cydraddoldeb 2010 yn nodi ei bod yn ofyniad cyfreithiol peidio â gwahaniaethu yn erbyn pobl ar sail anableddau ac mae’n ei gwneud yn ofynnol i berchnogion gwefannau ddarparu profiad cyfartal i bob defnyddiwr.

Fodd bynnag, fel sefydliadau treftadaeth, mae angen i ni edrych y tu hwnt i’r gydymffurfiaeth gyfreithiol ar gyfer gwefannau hygyrch. Yn ein sector ni, mae hygyrchedd yn un o werthoedd craidd y rhan fwyaf o’n gwaith. Mae ein sector yn ysgogi cydraddoldeb, cynhwysiant a hygyrchedd.

Sut mae pobl yn defnyddio gwefannau?

Yn yr adnodd ymarferol hwn, does dim amser i fanylu ar sut mae pobl ag anableddau yn defnyddio gwefannau. Fodd bynnag, argymhellir yn gryf eich bod chi’n ymweld â’r fideos sydd wedi’u cyhoeddi gan W3C i ddysgu mwy am dechnolegau cynorthwyol a’r anawsterau mae pobl yn eu hwynebu. Mae hefyd straeon am bobl ag anableddau.

Y tri phrif rwystr

Y materion hygyrchedd mwyaf yw cyferbyniad lliwiau, disgrifiadau delweddau a labeli ffurflenni. Os ydych chi’n datrys y rhain, byddwch chi wedi gwneud llawer i wneud eich gwefan yn hygyrch. Ewch yn syth i’r adrannau hyn yn gyntaf os ydych chi am wella’ch hygyrchedd yn gyflym.

Os nad oes llawer o amser gyda chi, gallwch chi ganolbwyntio ar y materion blaenoriaethol canlynol. Mae WebAIM, sy’n darparu un o’r teclynnau gwirio awtomataidd gorau, yn adrodd yn flynyddol ar y materion hygyrchedd a geir yn y filiwn uchaf o hafan dudalennau.

Y mathau mwyaf cyffredin o fethiannau hygyrchedd

Math o fethiant WCAG	% o hafan dudalennau ym mis Chwefror 2021	% o hafan dudalennau ym mis Chwefror 2020	% o hafan dudalennau ym mis Chwefror 2019
Testun cyferbyniad isel	86.4%	86.3%	85.3%
Testun amgen ar gyfer delweddau ar goll	60.6%	66.0%	68.0%
Labeli mewnbwn ffurflen yn eisiau	54.4%	53.8%	52.8%
Dolenni gwag	51.3%	59.9%	58.1%
Iaith dogfennau yn eisiau	28.9%	28.0%	33.1%
Botymau gwag	26.9%	28.7%	25.0%

Cyhoeddwyd gan WebAIM

 

2. Archwiliad hygyrchedd gwefan

2.1 Rhagarweiniad

Gall gwneud eich archwiliad eich hun ac unioni  materion ymddangos yn llethol, ond gobeithio y bydd dilyn y camau isod yn gwneud hyn yn llai brawychus! Gall canllawiau WCAG ymddangos yn frawychus, felly gobeithio y bydd yr adnodd hwn yn gwneud pethau’n haws i’w defnyddio.

Dewiswch sampl o rhwng 10-15 tudalen we o’ch safle yr hoffech chi eu profi. Mae nifer y sampl hon yn seiliedig ar adroddiad gan Velleman a van der Geest. Os oes safle bach gyda chi, yna bydd 5-10 yn ddigon. Dewiswch dudalennau sy’n cynrychioli’ch cynnwys yn dda, fel yr hafan dudalen, digwyddiadau a newyddion, yn ogystal ag unrhyw dudalennau â ‘gweithrededd’, fel basgedi siopa, tudalennau mewngofnodi, archebu ar-lein a thudalennau tanysgrifio i newyddlenni.

Bydd llawer o sefydliadau’n asesu cydymffurfiaeth â WCAG gan ddefnyddio teclyn gwirio awtomataidd fel WAVE Webaim. Awgrymir eich bod chi’n cyfyngu ar eich defnydd o hyn oherwydd:

• Efallai na fydd yn glir i chi beth yw’r gwallau yn yr adroddiad. Mae’n well gwneud eich archwiliad eich hun yn gyntaf fel eich bod chi’n deall yr hyn rydych chi’n chwilio amdano.
• Mae’r teclynnau awtomataidd hyn yn colli dros 50% o’r materion hygyrchedd.

Dilynwch bob adran a gwnewch nodiadau wrth i chi fynd ymlaen:

2.2 Strwythur tudalennau

Mae’r adran hon yn edrych ar strwythur ‘generig’ eich tudalennau gwe, y teitlau, yr adrannau a’r penawdau maen nhw’n eu cynnwys.

a. Teitl tudalen

Mae teitlau eich tudalennau yn caniatáu i bobl ag anableddau gweledol gael tabiau lluosog ar agor yn eu porwyr. Ar gyfer pobl ag anableddau gwybyddol, mae’n ddefnyddiol cael teitl hawdd ei adnabod ar y brig. Defnyddir y teitl hefyd yng nghanlyniadau eich peiriant chwilio.

Ar dab eich porwr, gwiriwch deitl y dudalen. Er enghraifft, mae’r ddelwedd isod yn dangos y teitl ‘Digital engagement and activities’ ar dab y porwr.

Sicrhewch fod teitlau’ch tudalennau’n ystyrlon a’u bod yn cynnwys llai na 60 nod. Os oes angen eu newid, yn y rhan fwyaf o olygyddion y we, teitl y dudalen yw enw’r dudalen. Yn WordPress, byddech chi’n ei newid drwy olygu’r dudalen a newid y teitl.

b. Tirnodau tudalennau

Caiff eich tudalennau gwe eu rhannu yn barthau neu dirnodau megis pennawd gyda dewislen gwe-lywio, prif gynnwys a throedyn. Mae’n bwysig bod yr adrannau hyn yn cael eu nodi yn y cod. I wirio hyn, gallwch chi osod estyniad porwr neu ychwanegyn yn y porwr o’ch dewis. Ewch i Landmarks a dewiswch eich porwr. Dyma ddolenni i’ch helpu i ychwanegu estyniadau:

Ar gyfer Chrome: https://support.google.com/chrome_webstore/answer/2664769?hl=en-GB

Firefox: https://support.mozilla.org/en-US/kb/find-and-install-add-ons-firefox-android

Edge: https://support.microsoft.com/en-us/microsoft-edge/find-add-or-remove-extensions-in-microsoft-edge-f3522273-d067-7435-6a9d-fdb99213e9a8

Safari: https://support.apple.com/en-gb/HT203051

Actifadwch yr estyniad ‘Landmarks’ ar eich porwr ac edrychwch ar bob tudalen sampl. Byddwch chi’n gweld panel fel hyn sy’n dangos pob adran o’r dudalen, fel baner, gwe-lywio, y brif adran a’r troedyn:

Os ydych chi’n dewis tirnod (‘landmark’), fel ‘main’, bydd hynny’n amlygu’r darn o’r dudalen we fel y dangosir yma:

 

Cadwch lygad allan am y tirnodau (‘landmarks’) penodol hyn: pennawd (‘header’), gwe-lywio (‘navigation’), prif adran (‘main’) a throedyn (‘footer’). Os nad ydych chi’n gallu dod o hyd iddyn nhw, efallai bydd rhaid i chi ofyn i ddatblygwr gwe am help. Dylai’r rhan fwyaf o adeiladwyr gwe cyffredin fel WordPress, Wix a SquareSpace eu rhoi i mewn yn ddiofyn.

c. Penawdau

Mae gan bob tudalen we gyfres o benawdau. Os ydych chi’n meddwl am dudalen we fel llyfr, yna teitl y llyfr fyddai tag pennawd H1; H2 fyddai pob pennod, ac adrannau ym mhob pennod yn H3 ac ati. Dim ond un H1 fyddai gyda chi fesul tudalen, ac yna byddai’r lleill yn dilyn mewn hierarchaeth. Gallai fod gan dudalen we strwythur penawdau fel y canlynol. Mae A yn dangos dilyniant cywir, a B un anghywir.

A. cywir
<h1>Pennawd y dudalen</h1>
paragraff(au)
<h2>Adran gyntaf</h2>
paragraff(au)
<h3>Isadran yr adran gyntaf </h3>
paragraff(au)
<h2>Ail adran</h2>
paragraff(au)

B. anghywir
<h1>Pennawd y dudalen</h1>
paragraff(au)
<h2>Adran gyntaf</h2>
paragraff(au)
<h6>Isadran yr adran gyntaf </h6>
paragraff(au)
<h2>Ail adran</h2>
paragraff(au)
<h1>Pennawd arall </h1>

Gallwch chi brofi eich penawdau gan ddefnyddio estyniad porwr arall o’r enw ‘HeadingsMap’

Firefox: https://addons.mozilla.org/en-GB/firefox/addon/headingsmap/

Chrome: https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en

Ewch i’r tudalennau gwe rydych chi’n eu profi, ac actifadwch yr HeadingsMap (eto, gwiriwch gyfarwyddiadau’ch porwr ynghylch sut i wneud hyn). Bydd hyn yn agor panel a ddangosir isod, yn rhestru’r holl benawdau ar eich tudalen. Os oes unrhyw bennawd nad yw’n dilyn y drefn, caiff hyn ei amlygu.

Mae’n gyffredin i benawdau beidio â dilyn y drefn, gan eu bod nhw’n cael eu defnyddio gan olygyddion cynnwys i greu’r maint ffont gofynnol. Dyma enghraifft o wefan yr AMA (a gafodd ei chywiro’n gyflym pan ddaethon ni o hyd iddi), lle ychwanegwyd ‘on sale now’ gan ddefnyddio teitl <h4>. Dylai fod wedi bod yn <h3> neu fformat testun arall.

 

d. Cysondeb tudalennau

Mae’n bwysig bod yr holl ddewislenni, botymau ac eiconau’n aros yn gyson ar draws eich safle. Gwiriwch nad oes gan wahanol dudalennau ddewislenni, botymau, na dyluniadau gwahanol.

 

2.3 Symud o gwmpas

Mae’r adran hon yn edrych ar sut mae’ch defnyddwyr yn symud o gwmpas eich gwefan.

a. Dewislenni neu we-lywio

Mae angen i chi roi dwy ffordd neu fwy i ddefnyddwyr ddod o hyd i dudalen we. Mae tudalennau sy’n rhan o ‘brosesau’, fel tudalennau mewngofnodi, basgedi, tudalennau lle gellir tanysgrifio i newyddlen wedi’u heithrio o’r meini prawf. Byddai’n annhebyg bod â llai na dwy, ond gwiriwch fod gan bob un o’ch tudalennau enghreifftiol o leiaf ddau o’r rhain.

• Chwilio
• Dewislen neu we-lywio
• Tabl cynnwys sy’n cysylltu ag adrannau yn y dudalen
• Map o’r safle sy’n dangos pob tudalen ar y wefan
• Dolenni yn y testun

b. Lleoliad

Mae hyn yn ofyniad AAA, felly nid yw’n hanfodol, ond fe’i hargymhellir yn fawr os ydych chi am helpu pobl ag anableddau gwybyddol i ddefnyddio’ch safle. Mae angen i ddefnyddwyr gael gweld eu lleoliad o fewn set o dudalennau gwe. Er enghraifft, os bydd defnyddiwr yn clicio ar ‘amdanom ni’, yna ‘gwirfoddoli’, sy’n isdudalen yn ‘amdanom ni’, mae rhaid dangos iddyn nhw’n weledol lle maen nhw. Mae tri opsiwn:

• Trywydd briwsion bara. Ar frig y dudalen, dangoswch le mae’r defnyddiwr, er enghraifft, Hafan > Amdanom ni > Gwirfoddoli (neu ‘Home > About us > Volunteer’ ar wefan Saesneg)
• Eitem wedi’i hamlygu ar y ddewislen yn eich dull gwe-lywio. Yn yr achos hwn, byddai ‘Amdanom ni (‘About us’)’ wedi’i amlygu ar y ddewislen i ddangos i’r defnyddiwr lle maen nhw yn yr adran honno
• Map o’r safle y gellir ei weld ar bob tudalen

c. Dolenni testun

Ydy’ch holl ddolenni testun yn rhai disgrifiadol, ac a ydyn nhw’n gallu cael eu darllen allan o’u cyd-destun? Gwiriwch nad oes gennych chi dudalennau gyda dolenni fel ‘ddarllenwch ragor’, ‘cliciwch yma’ a ‘rhagor o fanylion’. Ydy’ch holl ddolenni’n unigryw? Dim mwy nag un ‘archebwch nawr’ ar dudalen, er enghraifft.

d. Bysellfwrdd yn unig

Mae’n hollbwysig bod eich gwefan yn gallu cael ei defnyddio heb lygoden. Ceisiwch symud o gwmpas y tudalennau yn eich safle gan ddefnyddio ‘tab’, y bysellau saeth neu ‘enter’ yn unig. Pa mor bell gallwch chi fynd? Dyma beth dylech chi gadw llygad allan amdano:

Dolen ‘Skip to content’

Y tro cyntaf rydych chi’n clicio ‘tab’, oes dolen ‘skip to content’ yn ymddangos? Mae hyn yn eich galluogi i neidio’n syth i gynnwys y dudalen, yn hytrach na gorfod tabio drwy bob dewislen.

Ystad ffocws

Y cyfan y mae hyn yn ei olygu yw y gallwch chi weld ble rydych chi ar y dudalen pan fyddwch chi’n defnyddio bysellfwrdd. Gallwch chi weld yn glir pa ddolenni rydych chi arnyn nhw. Gall ystad ffocws fod yn llinell o amgylch dolen neu’n newid yn y cyferbyniad cefndirol. Tabiwch drwy’ch safle a gwiriwch fod pob dolen yn newid mewn rhyw ffordd. Os nad oes gennych chi ystadoedd ffocws, nid yw’n broblem fawr – mae cwpl o linellau cod y gall datblygwr gwe eu hychwanegu.

Dim newid cyd-destun wrth ffocysu

Mae hyn yn golygu na ddylai’r canlynol ddigwydd pan fyddwch chi’n amlygu dolen neu eitem ar ddewislen gan ddefnyddio’r bysellfwrdd neu lygoden, ond yn peidio â’u clicio:

• Mynd i dudalen newydd ar unwaith
• Agor tab neu ffenest newydd
• Agor adran sydd wedi’i hehangu ar yr un dudalen
• Agor neges ddeialog

Cwymplenni

Mae hwn yn fater ychydig yn ddadleuol ac yn gysylltiedig â’r ‘dim newid cyd-destun wrth ffocysu’. Mae rhai pobl yn dweud bod cwymplenni’n anhygyrch, gan eu bod nhw’n newid y cyd-destun wrth ffocysu – hynny yw, agor yr isddewislen. Er mwyn bod yn ddiogel, mae’n well bod cwymplenni’n cael eu hactifadu gan y defnyddiwr (edrychwch ar y ddewislen ar y safle hwn). Gall rhywun sy’n defnyddio bysellfwrdd dabio i’r ddewislen, ac yna mae angen iddyn nhw wasgu’r botwm ‘enter’ i actifadu’r gwymplen. Unwaith y byddan nhw yn y ddewislen, gallan nhw dabio eto neu bwyso ‘esc’ i adael yr isddewislen. Os oes gennych chi ddewislenni sy’n agor yn awtomatig, yna efallai y byddech chi am ofyn i ddatblygwr gwe ddisodli cod eich dewislenni.

Trapiau bysellfyrddau

Enghraifft dda o drap bysellfwrdd yw cwymplen nad ydych ch’n gallu dianc ohoni gan ddefnyddio bysellfwrdd. Mae trapiau cyffredin eraill yn cynnwys pethau fel calendrau naid; gall y defnyddiwr fynd i mewn iddyn nhw gan ddefnyddio bysellfwrdd, ond ni all byth adael.

Llusgo a gollwng

Os oes gennych chi unrhyw weithrededd llusgo a gollwng ar eich safle, gwiriwch fod torri a gludo (gan ddefnyddio bysellau llwybr byr, er enghraifft, CTRL + V ar Windows) hefyd yn gweithio.

 

2.4 Lliwiau a chyferbyniad lliwiau

Un methiant hygyrchedd cyffredin yw testun â chyferbyniad gwael. Mae hyn oherwydd lliw’r testun neu’r cefndir y mae’r testun arno.

Mae rheolau ynghylch lefel y cyferbyniad a ganiateir ar dudalennau gwe. Y ffordd hawsaf o ddod o hyd i broblemau cyferbyniad lliwiau yw defnyddio Teclyn Gwerthuso Hygyrchedd ar y We WebAIM (WAVE). Nodwch eich tudalen we yn y maes ‘web page address’. Gwiriwch sawl ‘gwall cyferbyniad’ sydd gennych chi. Mae hyn i’w weld ar ochr dde uchaf y tab cryno:

Gallwch chi ddod o hyd i’r gwallau cyferbyniad ar y dudalen drwy chwilio am y gwallau ‘cyferbyniad isel’ fel hyn:

 

Os ydych chi’n defnyddio bysellfwrdd, cyfeiriwch at awgrymiadau hygyrchedd WebAIM.

Mae canllawiau WCAG yn argymell cyferbyniad lliw o 4.5:1 ar gyfer maint testun arferol a 3:1 ar destun mawr. Teclyn defnyddiol yw Gwirydd Cyferbyniad WebAIM. Rhowch liw eich testun (blaendir) a lliw’r cefndir. Os yw cymhareb y cyferbyniad yn fwy na 4.5:1, byddwch chi’n pasio. Mae’r teclyn hwn yn cynnig llithrydd defnyddiol fel y gallwch chi dywyllu lliw eich testun yn raddol nes bod y gymhareb yn pasio.

Defnyddio lliwiau

Gwiriwch nad ydych chi’n defnyddio lliwiau i wahaniaethu rhwng pethau ar eich gwefan. Enghraifft o hyn fyddai defnyddio lliw penodol ar gyfer gwahanol adrannau neu ddefnyddio lliwiau i wahaniaethu rhwng gwahanol fathau o ddata fel prisiau (heb arwyddion punt).

Teclyn gwych arall yw’r estyniad High Contrast. Mae hyn ar gyfer Chrome; mae ategion neu estyniadau tebyg ar gael ar gyfer porwyr eraill. Mae hyn yn rhoi panel rheoli sy’n eich galluogi i roi cynnig ar eich safle mewn lliw llwyd, lliw gwrthdro a melyn ar ddu. Os cewch chi anhawster wrth ddarllen testun mewn graddlwyd, mae angen i chi wirio cyferbyniad eich lliwiau.

 

2.5 Delweddau, sain, fideo ac animeiddiadau

a. Delweddau

Gwiriwch fod gan eich delweddau destun amgen neu ‘alt text’. Disgrifiad byr o’r ddelwedd yw hwn. Peidiwch â defnyddio mwy na 100 o nodau, gan y gall sgrîn-darllenwyr wrthod dangos unrhyw beth ar ôl hyn. Fel arfer, gall eich golygydd gwe ychwanegu’r testun amgen yn hawdd. Gwiriwch fod eich delwedd yn ychwanegu at y cynnwys; os mai dim ond addurniad yw hi, gadewch y testun amgen yn wag. Os caiff y ddelwedd ei defnyddio fel botwm, yna mae angen i’r testun amgen ddisgrifio pwrpas y ddolen, yn hytrach na sut mae’r botwm yn edrych.

Mae hefyd yn dda gwirio maint eich delweddau. Mae delweddau mwy yn cymryd mwy o amser i’w lawrlwytho, a gallan nhw wneud eich safle yn llawer llai hawdd i bobl ei ddefnyddio, yn enwedig ar gyfer pobl sydd â lwfansau data symudol cyfyngedig. Rhedwch brawf mewnwelediadau cyflymder tudalennau ar eich tudalennau gwe enghreifftiol. Rhowch URL y dudalen we a chliciwch ‘analyse’.

Mae llawer yn digwydd yn yr adroddiad hwn. Os ydych chi’n methu, yna efallai y byddwch chi am ymchwilio pam mae hyn yn digwydd, gyda datblygwr gwe. Yn yr achos hwn, rydych chi’n chwilio am drafferthion gyda delweddau; sgroliwch i lawr i’r adroddiad ‘opportunities’ a gwiriwch am y llinell ‘serve images in next-gen formats’ a’i hagor. Bydd hyn yn rhestru unrhyw ddelweddau y mae angen eu newid oherwydd maint eu ffeil.

Y teclyn mewnwelediadau cyflymder tudalennau yn dangos gwallau. Diolch i Google am y ddelwedd ©Un rheol dda yw sicrhau bod eich delweddau i gyd ar ffurf JPEG, yn hytrach na PNG, a’u bod wedi’u hailfeintio i lai na 2000px o led. Bydd hynny’n lleihau maint y ddelwedd. Bydd yr adroddiad mewnwelediadau yn awgrymu eich bod chi’n defnyddio fformatau delweddau fel AVIF neu WebP, ond nid yw’r rhain yn cael eu cefnogi’n gyffredinol eto, felly mae’n well eu hosgoi am nawr.

b. Delweddau cymhleth fel graffiau, siartiau, diagramau a ffeithluniau

Mae’n bwysig rhoi disgrifiad hirach gyda delweddau cymhleth, i ddisgrifio’r wybodaeth maen nhw’n ei chyfleu. Mae llawer o dechnegau ar gyfer ychwanegu disgrifiad sy’n seiliedig ar god; fodd bynnag, y ffordd hawsaf yw defnyddio’r testun amgen sydd eisoes yn bodoli. Yn y testun amgen, cyfeiriwch at adran o’r dudalen sy’n disgrifio’r ddelwedd. Gallwch chi ddisgrifio’r ddelwedd fel rhan o’r testun, neu mewn adran wahanol ar y gwaelod. Dyma enghraifft:

Yn y testun amgen ar gyfer y ddelwedd hon, byddech chi’n rhoi “Siart cylch yn dangos ffynonellau trafferthion hygyrchedd. Wedi’u disgrifio yn yr adran sy’n dwyn y teitl Trafferthion Hygyrchedd”.

Felly, mae hyn yn cyfeirio darllenwyr at yr adran yn eich testun rydych chi’n ei hesbonio yn y siart cylch. Byddwch yn ofalus i gadw o dan derfyn 100 nod ar y testun amgen hwn.

c. Sain yn unig

Os oes gennych chi sain ar eich gwefan fel pennod podlediad, bydd angen i chi ychwanegu trawsgrifiad testun, gan nodi pwy sy’n siarad ac unrhyw effeithiau sain dieiriau. Mae gwasanaethau ar-lein i helpu gyda hyn, megis Rev a GoTranscript sy’n rhesymol am tua £1.20 fesul munud o sain.

d. Fideo’n unig

Mae’n anghyffredin cael fideos heb sain, ond os gwnewch chi hyn, bydd angen i chi ychwanegu disgrifiad sain i’r fideo. Gweler isod am ffyrdd o wneud hyn. Mae meini prawf WCAG yn nodi nad oes angen testun sy’n cyfateb fel trawsgrifiad, ond efallai yr hoffech chi gynnwys hyn hefyd, gan y bydd yn gwella optimeiddio peiriannau chwilio.

e. Fideo a sain

Mae Digiday yn adrodd bod 85% o fideos Facebook yn cael eu chwarae gyda’r sain wedi’i diffodd, sy’n dangos bod angen capsiynau ar lawer o’ch defnyddwyr, mewn gwirionedd. Mae angen capsiynau ar gyfer meini prawf WCAG, ac mae angen iddyn nhw fod yn fwy nag isdeitlau, a chynnwys synau dieiriau, fel cerddoriaeth neu effeithiau sain. Gallwch chi ddefnyddio gwasanaethau fel Rev a GoTranscript i greu ffeil drawsgrifio. Gellir lanlwytho’r ffeil hon i ddarparwr fel YouTube sy’n gallu awto-gysoni’ch testun i sain y fideo i greu capsiynau. Mae’n wych cael y trawsgrifiad yn rhedeg ochr yn ochr â’r fideo, hefyd.

Os oes darnau o’ch fideo sy’n rhedeg heb sain, efallai bydd angen i chi gynnwys disgrifiad sain, hefyd. Caewch eich llygaid pan fyddwch chi’n chwarae’ch fideo; allwch chi ei ddilyn gan ddefnyddio sain y fideo’n unig? I ychwanegu disgrifiad sain, y ffordd gyflymaf yw defnyddio gwasanaeth fel VEED.IO. Lanlwythwch eich fideo ac ychwanegwch haen sain newydd. Gallech chi recordio hyn eich hun wrth i’r fideo chwarae. Ar ôl i chi orffen, mae gennych fideo newydd i’w gyhoeddi ochr yn ochr â’ch fideo presennol.

f. Animeiddiadau

Os oes gennych chi ddarn o gynnwys wedi’i animeiddio, yna gallwch chi drin hynny fel fideo ac ychwanegu capsiynau a sain-ddisgrifiad, os oes angen.

 

2.6 Rhoi’r awenau i’ch defnyddiwr

Mae llawer o bobl ag anableddau gwybyddol yn ei chael hi’n anodd canolbwyntio, ac mae cynnwys symudol yn arbennig yn tynnu eu sylw

a. Sain a fideo

Mae angen i bob sain a fideo gynnig seibiwr / rheolydd chwarae neu stopio os yw’n chwarae am fwy na 5 eiliad. Mae llawer o bobl ag anableddau gwybyddol yn cael trafferth gyda fideos yn chwarae wrth iddynt geisio darllen cynnwys arall ar y sgrin.

c. Cynnwys sy’n symud, fflachio a sgrolio

Mae llawer o wefannau’n defnyddio carwsél, yn enwedig ar yr hafan dudalen. Dyma oriel sy’n cylchdroi o ddelweddau a thestun i roi gwybod i ddefnyddwyr am y pethau pwysicaf ar y wefan neu’r newyddion. Efallai y bydd gennych chi hefyd adrannau neu lithryddion llai sy’n cylchdroi ar eich tudalennau. Nid yw’r rhain yn dda i bobl ag anableddau gwybyddol. Os oes gennych chi unrhyw gynnwys sy’n dechrau’n awtomatig ac yn para mwy na phum eiliad, mae angen i chi gynnig ffyrdd o seibio/chwarae a stopio. Os nad yw hynny’n bosibl, yna ffordd o guddio’r cynnwys, efallai.

Os oes gennych chi unrhyw gynnwys wedi’i animeiddio ar dudalennau, fel botymau naid, ardaloedd lle mae testun yn hedfan i mewn neu ddelweddau paralacs sy’n sgrolio, efallai y byddwch chi am ystyried analluogi’r animeiddiad. Mae hyn yn un o feini prawf lefel AAA, felly nid oes gofyniad cyfreithiol, ond o barch tuag at eich defnyddwyr, gallai fod yn gam da i’w gymryd.

d. Negeseuon rhybudd

Os oes gennych chi negeseuon rhybudd ar gyfer newyddion, arwyddion neu hysbysebion yna mae’n dda cynnig ffordd i ddefnyddwyr ddiffodd y rhain. Unwaith eto, mae hwn yn ofyniad AAA, felly nid yw’n hanfodol, ond bydd yn gwneud eich gwefan yn haws i bobl ei defnyddio

e. Rhyngweithiadau wedi’u hamseru (lefel AAA)

Gall rhoi terfyn amser i ddefnyddwyr gwblhau pryniannau neu lenwi ffurflenni achosi problemau i bobl ag anableddau gweledol, gwybyddol a chorfforol. Os gallwch chi, gadewch i ddefnyddwyr gwblhau heb derfyn amser. Os oes gennych chi ffurflenni hir, byddai cael ffordd i ddefnyddwyr eu cadw (neu eu cadw’n awtomataidd, hyd yn oed) yn wych.

f. Targedau cyffwrdd (lefel AAA)

Peidiwch â chyfyngu eich profion i’ch bwrdd gwaith. Ar ddyfais symudol, gwiriwch faint eich botymau. Dylai botymau fod o leiaf 1.6cm o led, tua lled bys oedolyn. Gwiriwch hefyd fod cliriad o amgylch y botwm, a dim botymau na dolenni eraill i gau. Mae angen i ddolen testun fod o leiaf 1.2cm o led. Yn aml, mae’r rheol lled botwm yn berthnasol i eiconau, yn enwedig eiconau gwybodaeth bach, sy’n eithaf cyffredin.

 

2.7 Tablau

Gwiriwch nad yw’ch tudalennau gwe’n defnyddio tablau fel ffordd o drefnu cynnwys. Mae’n gyffredin gwneud hyn mewn dogfen Word, ond mae’n creu cynnwys anhygyrch ar dudalen we.

Os ydych chi’n defnyddio tabl, mae rhaid iddo gynnwys data (testun neu rifau), a bod â chapsiwn a phenawdau diffiniedig. Heb benawdau, ni fydd darllenydd sgrin yn gwybod beth yw pennawd colofn neu res a beth yw’r data. Os ydych chi’n iawn yn golygu’r HTML ychydig, gwnewch y canlynol:

Dyma’r tabl:

Enw	Hoff liw
Judy Bench	Melyn
Denzel Dryington	Coch

Dyma sut mae hyn yn edrych yn y cod:

<table>
<tr>
<td>Enw</td>
<td>Hoff liw</td>
</tr>

<tr>
<td>Judy Bench</td>
<td>Melyn</td>

</tr>

<tr>

<td>Denzel Dryington</td>
<td>Coch</td>
</tr>

</table>

Gwnewch y newidiadau canlynol, gan roi capsiwn newydd i mewn ar ôl y tag <table> a newid y tagiau <td> cyntaf i <th>:

<table>

<caption>Hoff liwiau fy nhîm</caption>
<tr>
<th>Enw</th>
<th>Hoff liw</th>
</tr>

<tr>
<td>Judy Bench</td>
<td>Melyn</td>

</tr>

<tr>

<td>Denzel Dryington</td>
<td>Coch</td>
</tr>

</table>

2.8 Testun

a. Lefel llythrennedd

Gwiriwch fod gan eich copi lefel ddarllen o ysgol Uwchradd is. Teclyn gwych i wneud hyn yw’r Ap Hemmingway. Copïwch a gludwch samplau o’ch testun yn uniongyrchol i mewn i’r ap i gael awgrymiadau defnyddiol. Anelwch at sgôr o 8. Osgowch iaith oddrychol fel ‘hawdd’ neu ‘syml’; efallai na fydd yr hyn sy’n hawdd yn eich barn chi’n hawdd i’ch defnyddwyr. Osgowch fyrfoddau (gallwch gynnwys ‘BBC’ a ‘GIG’), trosiadau (‘mae’n bwrw hen wragedd a ffyn’), ymadroddiadau llafar fel bratiaith (‘i gyd o’r ffordd’), ymadroddion (‘mae’n ddiwrnod i’r brenin’) neu wirebau (‘deuparth gwaith yw ei ddechrau’).

b. Trefn darllen

Gwiriwch fod gan eich cynnwys drefn redeg glir, yn enwedig ar ddyfeisiau symudol. Os yw’r cynnwys wedi’i roi mewn sawl colofn ar draws y dudalen fel hyn:

Ar ffôn symudol, byddai’n edrych fel hyn:

c. Darllenadwyedd

Rhedwch y gwiriadau hyn i gyflawni meini prawf 2.1 AA WCAG:

Ffont

Nid oes teip gorau i’w ddefnyddio. Mae llawer o bobl yn dadlau bod ffontiau ‘sans serif’ yn well, ond mae unrhyw ffont cyfarwydd sy’n hawdd ei ddarllen yn iawn. Mae Cymdeithas Dyslecsia Prydain yn rhoi awgrymiadau defnyddiol ynghylch dewis ffont, ac maen nhw’n awgrymu ffontiau ‘sans’ serif’ fel Arial neu Verdana.

Maint y ffont

Maint safonol testun yw 16px (12pt neu 1em) neu’n uwch.

Teip italig a theip trwm

Osgowch ddefnyddio teip italig (gall technoleg gynorthwyol ei golli) a thrwm os mai’r bwriad yw cyfleu mwy o bwysigrwydd.

Bylchiad llinellau

Mae bylchiad llinellau’n 1.5 gwaith maint eich testun, felly os yw’ch testun yn 16px, mae bylchau llinell yn 24px.

Byddai’r bylchiad llinellau hwn yn methu’r meini prawf, er enghraifft:

Ailfeintio testun

Gwiriwch eich bod chi’n gallu cynyddu maint y testun i 200% gan ddefnyddio rheolyddion y porwr heb i’r dudalen orfod sgrolio’n llorweddol.

Ail-lifo

Lleihewch led ffenestr eich porwr mor fach ag y gallwch. Gwiriwch nad oes angen sgrolio fertigol a llorweddol ar y dudalen.

 

2.9 Ffurflenni

Mae ffurflenni’n anodd eu cael yn iawn felly gofynnwch i ddatblygwr gwe am help os oes ei angen arnoch.

a. Cyfarwyddiadau clir

Rhowch gyfarwyddiadau clir wrth ymyl pob maes i helpu’r defnyddiwr. Byddwch yn ofalus, gan y gall gormod o wybodaeth fod mor ddryslyd â rhy ychydig.

b. Labeli

Y ffordd gyflymaf o wirio labeli ffurflenni yw defnyddio teclyn WAVE WebAim. Ychwanegwch URL eich tudalen we a gwiriwch yr adroddiad. Bydd gwallau mewn ffurflenni yn ymddangos fel ‘Errors’:

 

Edrychwch ar y tab ‘Details’ a chwiliwch am ‘missing form label’

Mae hyn yn dangos bod blwch mewnbynnu ffurflenni heb label. Mae’n annhebygol y byddwch yn dod o hyd i’r gwall hwn, ond os gwnewch chi, mae’n fater hygyrchedd difrifol. Os nad ydych chi am gymryd rhan yn y cod, yna gofynnwch i ddatblygwr gwe drwsio hyn i chi; fel arall darllenwch ymlaen.

Ystyriwch ffurflen sy’n gofyn am gyfeiriad e-bost:

E-bost:

Mae’r cod yn edrych fel hyn:

Enw: <input type=”text” name=”email” />

Does dim elfen label gysylltiedig. I gywiro hyn, nodwch elfen label:

<label for=”email”>Email: </label><input type=”text” name=”email” />

c. Meysydd gofynnol

Ar gyfer y meysydd gofynnol, dylech osgoi defnyddio rhywbeth fel ‘mae’r meysydd mewn coch yn ofynnol’, yn lle hynny, defnyddiwch ‘wedi’u marcio â seren’.

d. Ychwanegwch awto-lenwi os gallwch chi

Os gallwch chi, gofynnwch am feysydd awto-lenwi ar eich ffurflenni. Yr un mwyaf cyffredin yw teclyn chwilio am gyfeiriad yn ôl cod post i fewnosod cyfeiriad yn awtomatig.

e. Caniatáu i bobl ddadwneud camgymeriadau

Os yw’r defnyddiwr yn llenwi’r ffurflen yn anghywir, rhowch neges ddefnyddiol i mewn i ddangos sut y gallan nhw ei chywiro. Rhowch negeseuon dilysu mor agos â phosibl at y meysydd dan sylw.

f. Caniatáu i bobl adolygu ffurflenni cyn iddyn nhw eu cwblhau

Os gallwch chi, rhowch gyfle i ddefnyddwyr wirio ffurflenni cyn eu cyflwyno. Argymhellir hyn yn gryf ar gyfer unrhyw ffurflenni â thrafodion ariannol.

 

2.10 Eich archwiliad – ffyrdd ymlaen

Gobeithio y bydd yr archwiliad hygyrchedd hwn yn rhoi rhestr i chi o’r materion y mae angen i chi roi sylw iddynt ar eich safle. Dylech chi dderbyn ei bod yn debyg na fyddwch chi’n gallu trwsio popeth yn gyflym ac efallai y bydd angen i chi gyllidebu ar gyfer rhywfaint o gymorth datblygwr. Mae llawer o faterion y gallwch chi ddelio â nhw eich hun: pethau fel disgrifiadau amgen delweddau a chapsiynau fideo. Fodd bynnag, efallai y bydd materion mwy cymhleth o ran ffurflenni, dewislenni a gosodiad cynllun lle bydd angen rhywfaint o waith ychwanegol. Efallai y byddwch yn dod i’r casgliad bod angen gwefan newydd (cyfeiriwch at yr adnodd Ble i ddechrau wrth adeiladu gwefan newydd), neu fod angen i chi ddisodli eich system rheoli cynnwys neu’ch dyluniad. Trafodir y rhain yn fanylach isod.

Yn y cyfamser, gallwch chi gyhoeddi datganiad hygyrchedd erbyn hyn, yn seiliedig ar yr archwiliad rydych chi wedi’i wneud. Edrychwch ar y datganiad hygyrchedd ar wefan yr Amgueddfa Brydeinig. Mae hyn yn nodi’n glir yr hyn sy’n gweithio ond hefyd yr hyn nad yw’n gweithio. Sylwch ar sut mae’r Amgueddfa Brydeinig yn rhestru’r cynnwys nad yw’n cydymffurfio â’r rheoliadau. Nid oes angen i chi unioni popeth ar unwaith os gallwch chi ddweud wrth eich defnyddwyr lle mae’r problemau. Hefyd, darparwch gyswllt hygyrchedd a enwir yn benodol fel hygyrchedd@eich-cwmni.org.uk. Gallech chi roi eich manylion chi os mai chi sydd wedi gwneud yr archwiliad hwn. Dylech chi osgoi rhoi cyfeiriad e-bost cyffredinol oherwydd efallai na fydd y derbynnydd yn deall natur y cais.

 

3. Teithiau cynulleidfaoedd a phrofiad defnyddwyr

Hyd yn hyn, rydyn ni wedi edrych yn fanwl ar hygyrchedd, ond mae ffyrdd eraill o wneud eich gwefan yn haws i bobl ei defnyddio. Trwy adnabod eich cynulleidfa ar-lein ac edrych ar deithiau eich cynulleidfaoedd, gallwch chi ddod o hyd i feysydd i wneud gwelliannau.

Edrychwch ar yr adnoddau hyn i ddod o hyd i’ch cynulleidfa ar-lein a’u teithiau: Sut i nodi teithiau cynulleidfaoedd allweddol ar eich gwefan. Hefyd, yr adnoddau Sut gall dulliau dadansoddi fy helpu i ddarganfod pwy yw fy nghynulleidfaoedd a Sut ydw i’n cael adborth gan ymwelwyr ar-lein i wella’r hyn a wnawn.

Bydd yr ymchwil yma’n eich helpu i nodi newidiadau y mae angen i chi eu gwneud, fel:

• Oes angen i mi ychwanegu mwy o dudalennau glanio ar gyfer mathau penodol o gynulleidfaoedd?
• Oes angen i mi newid fy newislen – ydy defnyddwyr yn mynd ar goll?
• Ddylwn i ailysgrifennu tudalennau a chynnwys botymau galw i weithredu amlwg?
• Rhoi mwy o ganllawiau am archebu ar-lein er mwyn osgoi’r gyfradd ymadael uchel

 

4. A oes angen gwefan neu system rheoli cynnwys newydd arna i?

Mae dechrau eto gyda gwefan newydd i unioni hygyrchedd yn benderfyniad enfawr. Ar ôl dilyn yr archwiliad hygyrchedd cyflym yn yr adnodd hwn, gallech chi benderfynu gwella eich gwefan bresennol neu ei disodli. Os oes angen help arnoch chi i ddechrau gwefan newydd, gweler yr adnodd Ble i ddechrau wrth adeiladu gwefan newydd ar gyfer fy sefydliad treftadaeth?

Un rheswm mawr dros ddisodli’r safle cyfan yw cael system rheoli cynnwys (CMS) newydd. Efallai y bydd eich CMS bresennol yn addas i’r diben. Mae’r tabl isod yn dangos gwahaniaeth mawr rhwng systemau rheoli cynnwys poblogaidd. Er enghraifft, mae Squarespace yn perfformio’n wael ar hygyrchedd o’i gymharu â systemau fel Drupal neu WordPress.

Gwallau hygyrchedd cyfartalog ar systemau rheoli cynnwys

CMS	Gwallau cyfartalog	% o wahaniaeth
Squarespace	19.7	−61.6%
Drupal	51.0	−0.7%
WordPress gydag Elementor	53.6	+4.3%
WordPress gyda Gutenberg neu olygydd clasurol	56/6	+10.1%

 

Os ydych chi’n defnyddio WordPress ar hyn o bryd, efallai y bydd gennych ddiddordeb mewn edrych ar y gwahaniaeth mewn sgoriau hygyrchedd y gwahanol olygyddion.

Mae hygyrchedd yn cael ei bennu gan y golygydd tudalennau rydych chi’n ei ddefnyddio. Mae golygyddion fel Elementor, Divi neu WP Bakery yn rhoi llawer o reolaeth i chi dros gynnwys tudalen. Fodd bynnag, gall eu defnyddioldeb i chi fel golygydd gwych achosi problemau hygyrchedd sylweddol drwy roi llawer o god diangen ar y dudalen. Efallai yr hoffech chi ystyried newid i Gutenberg, y golygydd sy’n rhan o WordPress. Mae Gutenberg wedi cael llawer o sylw gwael dros y blynyddoedd, ond yn ddiweddar, mae wedi dangos gwelliant amlwg, ac mae’n cynnig yr un weithrededd â’r golygyddion eraill.

 

5. Teclynnau hygyrchedd

Mae llawer o declynnau hygyrchedd masnachol ar gael. Mae’r rhain yn darparu cod mewnblannu i fewnosod troslun hygyrchedd ar eich gwefan. Mae hyn yn rhoi botwm hygyrchedd amlwg i chi sy’n actifadu dewislen o declynnau hygyrchedd defnyddiol fel chwyddo testun a newid cyferbyniad. Mae llawer o bobl yn gobeithio y bydd y teclynnau hyn yn cynnig yr holl weithrededd WCAG 2.1 sydd ei angen heb orfod gwneud y gwaith ar eu gwefan eu hunain.

Mae’r math hwn o ateb cyflym yn demtasiwn fawr. Chwiliwch am bobl fel Anna Cook a Shell Little sy’n dadlau bod y math hwn o ymarferoldeb yn sarhaus i bobl ag anableddau. Byddai’n dda dweud mwy wrthych chi am hyn, ond mae rhai cwmnïau’n cymryd camau cyfreithiol yn erbyn unrhyw un sy’n eu beirniadu. Gwnewch eich ymchwil eich hun cyn prynu unrhyw beth.

 

6. Casgliad

Gobeithio bod yr adnodd hwn wedi rhoi teclyn ymarferol i chi gynnal archwiliad o’ch safle a nodi meysydd lle gallwch chi wella. Dylai cael gwefan hawdd ei defnyddio a hygyrch fod ar frig yr agenda ar gyfer llawer o sefydliadau treftadaeth. Yn anffodus, nid yw hyn yn wir, yn bennaf oherwydd nad yw’n cael blaenoriaeth gan uwch reolwyr ac ymddiriedolwyr. Gofynnwch am bolisi hygyrchedd eich sefydliad – a oes un yn bodoli? A oes gennych chi ddatganiad cenhadaeth sy’n sôn am gynwysoldeb neu fynediad i bawb? Eglurwch oblygiadau peidio â mynd i’r afael â hygyrchedd eich gwefan a sut mae’n effeithio ar gynifer o’ch defnyddwyr.

Os ydych chi am ddysgu mwy am hygyrchedd gwefannau, edrychwch ar gwrs Cyflwyniad i Hygyrchedd y We edX. Mae hwn yn gwrs byr am ddim sy’n archwilio’r pynciau yn yr adnodd hwn ymhellach.

 

 

 

Browse related resources by smart tags:

Access Accessibility Digital engagement Website accessibility

Resource type: How to guide / Toolkit

Except where noted and excluding company and organisation logos this work is shared under a Creative Commons Attribution 4.0 (CC BY 4.0) Licence

Please attribute as: "How to improve your website to make it more user friendly, accessible and fit for purpose (2022) by Paul Blundell supported by The National Lottery Heritage Fund, licensed under CC BY 4.0