Fig. 1 shows a wireframe for a wildlife rescue centre's adoption page. The centre needs a clear document that works for visitors who use a keyboard, a scree...
Question 1 Report
Fig. 1 shows a wireframe for a wildlife rescue centre's adoption page. The centre needs a clear document that works for visitors who use a keyboard, a screen reader or a small screen. The content manager wants the donation button to be easy to find, but does not want flashing images because these could distract some users. The page will form part of a presentation task B3 that asks students to create accessible digital information. The image area will eventually contain a photograph of a rescued hedgehog.
(a) Identify two features in Fig. 1 that help a visitor find the main purpose of the page. [2]
(b) Give two suitable items of alternative text for the hedgehog image, including one item that would be unsuitable. [2]
(c) Create CSS rules for the Donate now link that give it a visible keyboard focus state and ensure that its text can be read clearly against its background. [4]
Answer Details
(a) The clear page heading Adopt a rescued animal identifies the page purpose. The prominent Donate now button also directs visitors to the main action. Its position near the relevant adoption text and the uncluttered layout are further helpful features. [2]
(b) Suitable alternative text describes useful image content, for example Rescued hedgehog curled in a towel. An unsuitable alternative text item is image, a file name, or merely photo of, because it does not communicate the meaningful content. [2]
(c) For example:
a:focus {
outline: 3px solid yellow;
color: white;
background-color: black;
}The a:focus selector applies when a keyboard user tabs to the link. The visible outline shows where keyboard focus is, while white text against a black background gives clear contrast. [4]
Download The App On Google Playstore
Everything you need to excel in your exams
