Ychwanegwch ddisgrifiad cyfoethog at ddelweddau a graffiau i wella dealltwriaeth

Gall delweddau fod yn ddull gwych o ymgysylltu â'ch ymwelwyr a gallant hefyd helpu i gyfleu syniadau cymhleth.

Yn aml, gelwir disgrifiadau delweddau'n "disgrifiadau amgen" neu "testun amgen". Mae disgrifiadau delweddau yn darparu disgrifiad amgen, ar ffurf testun, i'r ddelwedd. Ar gyfer myfyrwyr â nam ar eu golwg, mae disgrifiadau delweddau sy'n esbonio cynnwys delwedd yn hanfodol ar gyfer eu haddysg. Ar gyfer pob myfyriwr, gall disgrifiadau testun ddarparu cyd-destun dyfnach i gynorthwyo eu dealltwriaeth.

Mae Ally yn chwilio am ddisgrifiadau delweddau lle bynnag bod yna ddelwedd. Mae Ally yn gwirio delweddau ar dudalen we neu mewn ffeil wedi’i hatodi.

Mae Ally yn trefnu problemau yn ôl problemau difrifol, mawr a bach.

  • Difrifol. Y problemau hyn sy’n cyflwyno’r risg fwyaf i hygyrchedd ac mae arnynt angen y sylw mwyaf.
  • Mawr. Mae'r materion hyn yn effeithio ar hygyrchedd, ac er nad ydynt yn ddifrifol, mae arnynt angen sylw.
  • Bach. Dylid ystyried y problemau hyn er mwyn cael sgôr hygyrchedd well.

Mae delwedd heb destun amgen yn broblem fawr.

Defnyddiwch Ally i ganfod disgrifiadau coll delweddau

Defnyddiwch adroddiad hygyrchedd Ally i ddarganfod a thrwsio problemau hygyrchedd ar eich safle. Defnyddiwch y ddolen a ddarparwyd ar gyfer yr adroddiad a mewngofnodwch. Agorwch yr adroddiad ac edrychwch ar y rhestr o broblemau yn y tabl Problemau Hygyrchedd.

Mae’r tabl Problemau Hygyrchedd yn y tabiau Trosolwg a Parth. Dechreuwch yn y tab Parth i weld problemau sy’n benodol i barth. 

Mae cael delweddau heb destun amgen neu ddisgrifiadau yn broblem fawr. Defnyddiwch y tab Mawr yn y tabl Problemau Hygyrchedd i weld y rhestr o broblemau mawr. Dewiswch y problemau lle nad oes gan ddelweddau ddisgrifiadau.

Os ydych yn dechrau yn y tab Trosolwg, dewiswch y broblem ac wedyn y parth sydd â’r broblem.

Gall problemau disgrifiadau delweddau ddechrau gyda Delwedd, Dogfen, neu HTML yn y rhestr.

O’r rhestr o broblemau disgrifiadau delweddau yn y parth, dewiswch y dangosydd sgôr nesaf at eitem â'r broblem. Bydd y panel adborth i olygyddion cynnwys yn agor.

Cael rhagolwg o’r delweddau heb ddisgrifiadau

Mae panel adborth Ally yn dangos rhagolwg o’r cynnwys yn ogystal ag adborth manwl a chymorth i'ch helpu i drwsio eich problemau hygyrchedd. Defnyddiwch y rhagolwg i weld y delweddau heb ddisgrifiadau.

Mae'r rhagolwg yn amlygu ble gallwch ganfod problemau hygyrchedd penodol yn y ddogfen. Mae amlygiadau'n dangos pob digwyddiad un math o broblem ar y tro. Er enghraifft, os nad oes disgrifiadau amgen ar eich delweddau, bydd yr amlygiadau yn dangos lle mae'r broblem benodol hon yn digwydd.

Offer y rhagolwg

Defnyddiwch offer y rhagolwg i archwilio'r problemau yn eich dogfen.

  • Symudwch trwy’r rhagolwg fesul tudalen.
  • Gweld y nifer o weithiau mae problem benodol yn digwydd.
  • Neidiwch rhwng amlygiadau'r broblem.
  • Cuddio neu ddangos yr amlygiadau.
  • Chwyddo cynnwys y rhagolwg i mewn neu allan.
  • Os yw'r broblem mewn dogfen wedi’i hatodi, lawrlwythwch y ffeil wreiddiol.

Dilynwch gamau dan arweiniad Ally i ychwanegu disgrifiadau delweddau

Mae Ally yn cymryd eich bod yn gwybod hanfodion HTML a sut i ddefnyddio eich System Rheoli Cynnwys (CMS). I ddilyn y camau dan arweiniad, bydd angen i chi wybod sut i olygu tudalen we yng nghod HTML neu god ffynhonnell yn eich CMS.

Wrth ochr y rhagolwg, mae Ally yn rhoi arweiniad cam wrth gam i chi am sut i drwsio'r broblem.  Mae Ally yn trefnu’r adborth hwn mewn coeden benderfyniad. Yr unig beth mae angen i chi ei wneud yw darllen y cyfarwyddiadau ac ymateb i'r hysbysiadau. Dysgu beth yw'r broblem, pam mae'n bwysig, a sut i'w chywiro'n briodol.

Dewiswch Sut i ychwanegu disgrifiadau i ddilyn y camau dan arweiniad.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

Ffyrdd o ychwanegu disgrifiadau delweddau ar dudalennau gwe

Mae mwy nag un ffordd o ychwanegu neu olygu disgrifiadau delweddau ar eich tudalennau gwe.

  • HTML: Mae camau dan arweiniad Ally yn eich arwain trwy sut i ganfod a golygu disgrifiadau delweddau yn HTML. Yn syml, dewch o hyd i'r dudalen we sy’n cynnwys y ddelwedd. Golygwch y dudalen. Diweddarwch god HTML y ddelwedd i gynnwys priodoledd testun amgen. Cadwch y dudalen.
  • Gosodiadau delweddau: Mae’r rhan fwyaf o Systemau Rheoli Cynnwys yn darparu ffordd o olygu testun amgen yng ngosodiadau'r ddelwedd. Dewch o hyd i'r ddelwedd ar y dudalen we neu yn storfa ffeiliau'r CMS. Defnyddiwch offer y CMS i olygu'r ddelwedd. Ychwanegwch ddisgrifiad y ddelwedd ym maes testun amgen. Cadwch y ddelwedd.

Ewch i w3schools i ddysgu rhagor am HTML a CSS

Pam nad ydwyf yn gweld “img src” yn fy HTML?

Y ffordd fwyaf cyffredin o ychwanegu delweddau at dudalen we yw â'r priodoledd HTML img src. Mae Img src yn briodoledd HTML sy'n defnyddio URL y ffeil delwedd i roi'r ddelwedd ar y dudalen we. Ond mae pob CMS yn wahanol. Efallai bydd eich gwefan yn defnyddio cod neu briodoleddau gwahanol. 

Er enghraifft, yn Drupal, efallai byddwch yn gweld rhywbeth fel hyn yn lle hynny:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Ychwanegwch destun amgen at ddechrau'r priodoledd. Er enghraifft,

<drupal-entity alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Os nad ydych yn gweld img src yn yr HTML, rhowch gynnig ar ddefnyddio offer y CMS i olygu gosodiadau’r ddelwedd. Dewch o hyd i'r ddelwedd ar y dudalen we neu yn storfa ffeiliau'r CMS. Defnyddiwch offer y CMS i agor gosodiadau’r ddelwedd. Ychwanegwch ddisgrifiad y ddelwedd ym maes testun amgen. Cadwch y ddelwedd.

Os nad ydych yn gwybod sut i fwrw ymlaen o hyd, cysylltwch â gweinyddwr neu ddatblygwr eich gwefan. Gofynnwch iddynt ddangos i chi sut mae ychwanegu delweddau at eich tudalennau gwe a sut mae ychwanegu testun amgen.