akpbase.blogg.se

įor a useful guide on determining whether an image is informative or decorative, visit For example, do not write “Image of Sammy the Shark, DigitalOcean’s mascot” but “Sammy the Shark, DigitalOcean’s mascot.”įor decorative images, the alt attribute should still be used but with a null value, as this improves the screen reader experience. When adding alternative text, keep the following best practices in mind:įor informative images, alternative text should clearly and concisely describe the subject matter of the image, without referring to the image itself. This text is typically not displayed on the webpage but is used by screen readers to communicate content to visually-impaired site visitors. When adding an image, you should always include alternative text describing its content using the alt attribute. If the image is taken down by its host or if its address changes, it will no longer render on your site. However, when building a website it is generally better to host your images in your project directory to ensure the sustainability of the site. You can experiment with adding other online images by using their location links as the src attribute in the tag. The image should still load in your web document, but this time the image is being sourced from its online location rather than your local project directory. Save your file and reload it in the browser. To understand how this works, try replacing the image location with a link to our image of Sammy the Shark like this: Technically, you can also use links to images hosted online as file paths. Save your index.html file and reload it in your browser. Since our end goal is to create a publishable website, we will start using relative paths now when adding elements to our document. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would work if we decided to publish our website online. Note: Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image.