What is a real world use case for the alt attribute being used in a website?
- For people who use text only browser, or for visually impaired users.
How can you improve accessibility of images in an HTML document?
- Use meaningful filename, and utilize alt text with concise description to enhance accessibility.
Provide an example of when the figure element would be useful in an HTML document.
- Figure tag can be used for SEO purpose so bots can ‘see’ the image via caption, or it can be used for enhancing accessibility for visually impaired users.
Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
- GIF can either be a static image or animated image, and SVG is static image only.
What image type would you use to display a screenshot on your website and why?
- Lossless WebP or PNG, lossless compression algorithm retains enough detail to minimize degradation of screencaptured text.
Learn CSS
Using Color in CSS. Styling HTML Text Elements
Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.
- Foreground color value set the color of texts and text decorations, meanwhile background color values set the color of background. Background color is analogous to color of printer paper, an foreground color is the color of the text it will be printed.
Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?
- Choose background color and foregound color with high contrast ratio. Web accessiblilty guidelines requirement is 4.5:1 for text content and 3:1 for larger text such as heading.”Large text is defined as 18.66px and bold order large, or 24px or larger”
What should you consider when choosing fonts for an HTML document?
- Not all fonts are universally available on all computers. Consider using web safe fonts that are generally known for universal availability, thanks to Microsoft core fonts for the web initiative in the late 90s.
What do font-size, font-weight, and font-style do to HTML text elements?
- Font size dictates the size of the font, font weight dictates bold value of the font, and font style dictates whether to italicize the font.
Describe two ways you could add spacing around the characters displayed in an h1 element.
- letter spacing and word spacing are two ways to set the spacing between letters and words, respectively.
References