-
Notifications
You must be signed in to change notification settings - Fork 1
Image guidelines [Draft]
Alt text is announced by screen readers, therefore, mostly used by blind or partially sighted (BPS) users. Alt text needs to support the image role. If the image is part of the content, alt text needs to describe the image, if the image serves as a link the alt text will announce the link destination.
The way we implement alt text for KDLWEB is that we assign a description of the image to the alt text field/attribute where the image metadata is stored (json, csv, etc.) and we build the html alt attribute elsewhere with the appropriate content, which might mean ignoring the description of the image to announce the link destination.
For example: an image of a black bear in their natural habitat could have an alt text associated to it as “black bear climbing a tree in a pine forest”. If that image will serve as a link, that text may be ignored and replace with the title of the article it links to.
A caption is visible by all users, so any information associated to the image that it’s being captioned that needs to reach all users (for instance it’s not explicit in the image, hence not visible to sighted users), should be included in the caption.
E.g., for a picture of an animal in its natural habitat, a forest might be recognisable, but if the country of origin is a key information, it needs to be in the caption: “A black bear in the Grizzly Valley, British Columbia, Canada.”
Avoid repetition when alt text and caption are used in combination: when an image has a caption, limit the amount of information that is repeated and try to provide only the information that add to the image. A BPS user will hear both alt text and caption announced, possibly, but not necessarily, in sequence.
Copyright and credits to the image may also be included in the caption (unless displayed clearly elsewhere) and should not be added to the alt text.
-
No text on images
- There are titles and descriptions for that.
- Copyright: make sure we have the rights to publish on our site
-
Alt text: Description of the image.
- Consideration: alt text is a field that is bound to the image, no other consideration should be made at this stage. How it will be used will be determined by the site implementation. This is help who provides the text be consistent with the content, rather than worry about the use of the field/attribute.
- TO DO: tone of language to be set by the team. Needs wider discussion. (How many details? Use of emotions? Short?)
- Format: check for specific image types below, but webp format seems well supported > https://caniuse.com/?search=webp
If using a single image for both hero and thumbnail please make sure that there is no particular focal point, since automatic cropping may not be able to reflect that in the thumbnail.
- Alt text: follow all images and large image (hero) recommendations.
- Size: please refer to the “Large image (hero)” recommended size below.
- Format: jpeg, webp
- Credits: no credits (if the image is used in full elsewhere, that’s where credits and copyrights will be visible), but make sure we have the right to publish on our site.
- Alt text: the alt text should be handled in the code. A thumbnail usually links to content (a project, an post, etc.), the alt text in this case should announce the destination of such link rather than describe the image. E.g., the alt text could be the title of the post.
- Caption: no caption
- Size: TBD. Please bear in mind that this is one of those cases where images may be bigger on smaller screens (full width), so let’s go with the larger thumbnail’s size.
- Format: jpeg, webp for photographic images, svg, png or webp for non-photographic ones and those with transparent background.
- Credits: full credits and copyright for the images should be added and displayed. (They could be in the caption, unless specified otherwise).
- Alt text: applies as for all images.
-
Caption: Add a caption when information is not recognizable in the image, but it’s relevant to the context the image is place in.
E.g., following the example of the black bear in their habitat above, if the location is relevant to the content, it could be added to the caption to contextualise the image. - Size: TBD
- Format: jpeg, webp
- Credits: full credits and copyright for the images should be added and displayed. (They could be in the caption, unless specified otherwise).
- Alt text: applies as for all images
-
Caption: Add a caption when information is not recognizable in the image, but it’s relevant to the context the image is place in.
E.g., following the example of the black bear in their habitat above, if the location is relevant to the content, it could be added to the caption to contextualise the image. - Size: TBD
- Format: jpeg, webp