Vanza Setia• 27,855
@vanzasetia
Posted
Hi, Brian! 👋
There are a few changes you can do to make this solution better.
- Don't use
<picture>element for the logo. Use<picture>element when there is many versions of the same image. - Remove all
<br>elements. Screen readers may read out<br>elements as "break" and not read the content within<br>s. Let lines wrap where they need to. - Use
<a>withdownloadattribute for each download button. - Not every image needs alternative text. Decorative images should not have alternative text (
alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page. - For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
- If the logo is wrapped by an anchor tag, the alternative text of the image should tell the destination of the link. Usually, the destination will be the home page. So, the alternative text of the logo should be "Clipboard - Home".
- Don't change the
<html>or the:rootfont size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. - Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset
I hope you find this useful. 🙂
0
