ImagesAlt intext (alternative text) is a written description of an image for users who cannot see it. Good alt text states what an image means. It is not a description of the image itself.

For example, the alt text for the GOV.UK canlogo might be broken‘GOV.UK’ downor into‘UK threegovernment categories:website’. It would not be ‘Royal crown above the word GOV.UK written in capital letters’.

Alt text makes images accessible to:

• informativescreen reader users, because it allows them to hear what the image conveys
• decorativeusers who cannot download the image, because they can read the alt text that appears in place of the image
• charts,search diagrams,engines, infographicsbecause andalt scientifictext equationshelps them decide how relevant the page content is to the search

Informative

Decorative images

DoAn notimage useis imagesconsidered alonedecorative toif it providedoes information.not Thisadd willany excludeimportant usersinformation whoto cannotwhat’s seealready orin access the image.written content.

TextDo isnot easieradd toalt readtext thanto imagesdecorative whenimages.

Examples scaledof updecorative byimages peopleon usingGOV.UK screeninclude magnifiers.generic Imagesphotos maysuch becomeas pixelatedthe andones needthat toillustrate benews scrolledstories, verticallyor andfeatured horizontallycontent whenon zoomeddepartments’ in.organisation pages.

Informative images

OnlyInformative use images ifgive theyadditional helpinformation usersthat’s understandrelevant to the body text. You need to make this information accessible in aone differentof way.the following ways:

Avoid

• a imagesshort withalt text.text Writedescription
• a itdescription in the body text.

  Informativetext imagesnext canto helpthe usersimage, understandand theno writtenalt text

• a inshort alt text description, with a differentfull way.description Youof mustthe leaveimage content in the ‘Altadjacent text’body fieldtext

Do emptynot andrepeat writethe asame descriptionwording in alt text that’s in the adjacent body text. Captions may be an exception to this. For example, a photo of content.a Thisminister meansthat’s thecaptioned descriptionwith istheir availablename toand everyone.

Screenrole readingshould softwarehave willthe ignoresame imagesinformation withoutin alt text. IfThis youis can,because describesome thescreen contentreaders ofdo thenot imageread ascaptions thoughif therethe alt text field is noempty.

For a complex image onlike thea page.graph, Forgive example,a writesummary “thedescription ministerin tweeted…”,the insteadalt oftext “anfield. In imagethe ofadjacent body text, include a tweetfull bydescription of the minister”.information.

AnotherRead waythe tosection make‘Graphs, surecharts, youdiagrams areand describinginfographics’ thein imagethis properlychapter isto find out how to imaginedo thatthis.

Logos

Logos you’recan readingbe outdecorative theor contentinformative, ofdepending on the pagecontext. onAdd aalt telephone.text Whenonly if you getdecide toit’s thean image,informative whatimage.

Easy wouldRead youformats

Do saynot touse helpalt text for the listenerimages understandin theEasy pointRead theformats. pageEasy Read is making?

Whena specialist format using photosextremely orsimplified logos,text useand simplea shortened version of information. Simple images thatare canused beto explainedhelp easilyusers withunderstand text.the content.

YouAdding canalt usetext ato captionthese toimages attributecreates anauditory imageclutter orand nameincreases athe persondifficulty inof anthe image.content.

DecorativeMore imagesguidance and tutorials on alt text

DecorativeTo imagesunderstand aremore genericabout images whichand doalt nottext, givego anyto additionalthe informationimages totutorial produced by the content.Web ForAccessibility example,Initiative.

Read an imageexplanation ofand laptopsexamples inof aalt blogtext post,good orpractice featuredby contentthe onDisability departments’awareness organisation pages.WebAIM.

YouRead do5 notgolden needrules for compliant alt text, forby decorativeAbilityNet, images.the charity that focuses on disability awareness in technology.

Format

CheckWhen text is the examplesprimary purpose of tablesthe andimage, chartsfor youexample cana createscanned usingimage Govspeakof ona GOV.UK.

Ifminister’s correspondence, you cannotmust createpublish youra chartfull transcript in Govspeak,HTML youalongside maythe needimage.

Examples toof uploadlong ittext asdocuments anmight image.include:

• photo Uploadof thea imagepage in SVGa (scaleablebook
• PDF vectorof graphic)a format.scanned SVGswritten allowdocument
• block usersquotes

These totypes magnifyof images withoutare losingonly anyused quality.in Findexceptional outcircumstances howon toGOV.UK.

Images inthat theinclude imagessome guidance.

Colourstext

DoAvoid notusing images that use colourtext aloneas topart conveyof information.the Someimage, visuallywhere impairedpossible. usersIf willit notcannot be ableavoided, tofor seeexample colouryou differences. Ensurehave thereto ispublish a highgraphic enoughthat colourincludes contrasta ratiocampaign betweenslogan, segments,you lines,should textrepeat andthe backgroundexact colour.

Readwords morefrom aboutthe usingimage colours in charts on the Governmentbody Analysistext Functionnext website.to it.

Charts

Incidental text

AllIf chartsan shouldimage havecontains twoincidental titles,text athat headlinehas titleno andpurpose afor statisticalthe title.content, Thedo headlinenot titlerepeat of the chartwords shouldin summarisealt thetext mainor messagebody oftext. theAn chart.example Thisof shouldthis would be followedbackground bysignage in a statisticalphoto titleof thatsomething describes the data shown.else.

Example

Use fundsSVG by(scalable percentagevector ongraphic) theformat verticalfor axisimages composed of simple structures and EUdata countriesor ontext thesuch horizontalas:

• graphs
• infographics
• diagrams

Use axis”bitmap isfile tootypes broad.like JPG and PNG for featured images and photos.

SVG

YouSVGs needare to‘scalable’ explainso keep the same quality no matter what isscreen happeningresolution inor thesize datathey andare anyviewed importantat. trends.This Domeans notusers justcan repeateasily themagnify headlineimages title,by forzooming mostin charts,and theout. descriptionThe willquality needof tobitmap befile moretypes detailedlike thanJPG theand title.PNG goes down when they are magnified.

IfFind youout choosehow to providecreate thean rawSVG datafile asin aImages tableand orvideos in anthe accessibleHow fileto inpublish GOV.UK,manual.

Do yournot tableuse iscolour formattedon correctlyits andown considerto ifconvey itinformation. isUsers anwho appropriateare alternative.colourblind Forcannot example,easily whensee youcolour havedifferences.

Use athe chartglitch showingcolour acontrast longchecker timeor seriesthe ofWebAIM data,colour acontrast descriptionchecker ofto check that the trendscontrast willratio bein morethe appropriateimage thanis aaccessible.

The experienceinformation shouldin data-rich images needs to be theaccessible sameto asall lookingusers, atincluding thepeople chart.with visual impairments.

Guidance

To frommake thedata-rich Governmentimages Analysisaccessible Function

Readyou guidanceneed fromto thedo Governmentall Analysisof Functionthe about:following:

• makingwrite analyticala publicationssentence accessiblesummarising forwhat informationthe aboutcontent publishingshows charts in anthe accessiblealt waytext field
• releasingdescribe statisticsthe main information in spreadsheetswords forin informationthe aboutadjacent creatingbody accessibletext, attachmentsor ofprovide rawa datalink to the dataset
• makingcheck tablescolour and contrast are accessible
• chart titles- read the section on ‘Colour and chartcontrast’ formattingin this chapter

DiagramsDescribing data-rich images

OnlyDescribe usethe adata, diagramnot ifthe itformat.

Explain makeswhat’s thehappening contentin clearer,the ordata, summarisesand aany largetrends amountthat ofstand information.out.

DiagramsFor needexample, toyou becould cleardescribe andthe easytrends, toand understand.add Followa thetable governmentshowing designimportant principles,data forpoints, exampleor bylink sticking to onean ideaattachment perof diagram.the raw data.

WhenWays you’reyou creatingcan theuse diagram,body trytext to:to make complex images accessible include:

• followa normaltable readingcontaining directionthe -important usersdata
• a wantdescription toof readthe frommost leftimportant toinformation right
• avoidand overlappingwhat connectorit linesmeans
• usea simplelink shapessending -users andto asa fewpage differentwith typesthe asfull possibledataset
• makean itattachment clearcontaining wherethe full dataset, either on the startingpublication pointpage isor foras processan andinline flowattachment chartswith a short explanation or link
• usean blackoption andfor whiteusers asto request a defaultcopy of the raw data

IncludeIf it’s an infographic or a detaileddiagram, include an explanation of the processesimportant andprocesses, relationships explainedand information in the diagrambody intext.

If you can, work with the bodydesigner text.to Thisplan the text description before or at the same time as the image is helpfuldesigned. forThis usersshould whohelp cannotto seeavoid the diagram.image becoming too complicated.

Formatting data-rich images

LeaveIf you need to add some text to the ‘Altimage text’for fieldaxis empty.and data labels, use a sans serif font. Avoid adding any other text into the image like headings or information about sources – these should go in the body content of the page.

InfographicsUsing Markdown to create charts

AnSimplify infographicdata isas anmuch imageas whichpossible usuallyso displaysthat data,you graphs,can create simple charts orusing textMarkdown. toWhen explainyou create a complexchart processusing orMarkdown, overviewusers ofcan toggle between viewing the data as a subject.chart or a table.

InfographicsThere are examples of graphs and charts you can bepublish hardusing toMarkdown makeon accessibleGOV.UK.

If ifyou they’recannot tooreproduce complicated.your Thisdata isusing becausea screenchart magnifierin usersMarkdown, you may need to scrollupload horizontallya andgraph verticallyas acrossan theimage image. Thisin mayan makeSVG themformat, hardand toinclude understandthe wheninformation notin seenthe allbody attext.

Find once.out Ithow canto alsocreate bean difficultSVG tofile describein Images and videos in text.the TheHow imageto maypublish alsomanual.

Using becomediagrams

Only blurreduse anda pixelateddiagram whento magnifiedsupport the content if you’reit notmakes usingthe ansubject SVGclearer, format.or summarises a large amount of information.

IfDiagrams youneed chooseto be clear, simple and easy to publishunderstand. anIf infographicyou’re youadvising shouldon provideor creating a plaindiagram, textread versionthe ofGovernment thedesign content.principles Thisand:

• follow shouldnormal explainreading everythingdirection that- isusers shownwant into read from left to right
• avoid overlapping lines that connect the infographicshapes of a diagram
• use simple shapes - and beas infew thedifferent bodytypes textas nextpossible
• make toit clear where the infographic.

  Readstarting morepoint aboutis creatingfor accessibleprocess infographicsand inflow thecharts

• use infographicsblack guidanceand onwhite as a default or make sure the Governmentcolour Analysiscontrast Functionis website.
  accessible

DescribeScientific equations can be published as SVG images. SVG images can be magnified without losing quality.

If you can, include the equation in the body text andas leavewell. If that’s not possible, you will need to add the ‘Altequation text’in fieldalt blank.text.

These copyright standards apply to all images on GOV.UK, including those within a publication.

If possible choose images that are free to use. These will usually be either:

• covered by crown copyright - these images are produced by or for government and can be reused by non-government users under the Open Government Licence
• available for reuse under a creative commons licence such as the CC-BY Licence

Paying for third party images

If you pay to use third party images you must:

1. Buy the right type of licence.

2. Accredit the image properly.

Buying the right licence

Content on all government websites will be permanently available on the UK Government Web Archive. If you’re using an image which is not covered by crown copyright you must:

• get worldwide rights
• get the rights to use the image forever (in perpetuity)
• get the rights to use the image on anything
• agree the fee

Image licences must not:

• be for a limited time period
• be based on page impressions

Do not use embedded images that remain under the control of the supplier.

Image credits

Always attribute images to their source, unless it’s an Open Government Licence (OGL) image. OGL images are covered by the statement at the foot of GOV.UK pages:‘Open Government Licence v3.0’.

Credit creative commons images and all third party images. State if the image cannot be reused for free.

Find out where to credit your image and how.

Using images of people

Check with the copyright holder if the people in the image are happy for you to use it.

Get written consent from people if you’re arranging the photography yourself.

Think about the context: avoid showing identifiable people in connection with things that may cause offence.