Design comparison
Solution retrospective
Hi, I'm Sakti, This is my solution in this challenge.
This is my first time & I am having difficulty with this challenge I have to make it with flow mobile first and make it as similar as possible to the design and also use the VeeValidate library to overcome validation & errors on the form.
Build, function or package i use:
š Nuxt.Js
- This project was installed using Nuxt.js v3.9.0
š Vue.js Some of the functions from Vue.js that I use in this project are :
- @click
- ref variables
- addEventListener javascript
š HTML
- Semantic Tags
- Accessibility
š Sass/Scss
- Sass/Scss Variables
- CSS Flexbox
- CSS Animation with keyframes
- CSS Media Queries
- CSS Transitions
- etc.
š Sweetalert2 v11.10.3
- Another library or packages for nice & easy to makes alert or message box
š VeeValidate
- Library to handle validation & error form
Any tips, comments & suggestion are welcome
Community feedback
- @grace-snowPosted 10 months ago
The accessibility needs improvement in this:
- a link wrapping the logo should not open in a new tab and must have an accessible name so you know where the link is going. Currently the name is "image, logo"
- the alt text on the logo must say the text of the logo
- the images should be served with the picture element not two Img tags (performance issue rather than accessibility)
- inputs must have a label
- the rest of the field is not exposed in the code as you're importing it so I don't know if it's OK or not. The error message container must have aria live and be programmatically linked to the input with aria-desciribedby. It wouldn't normally have a name attribute but I don't know if that's what that prop is doing (I'm away from my computer so can't inspect in browser)
- if sections don't have a heading (usually h2) they should be a div
- do not use br to force line breaks. That should be done with max width (often in ch units on text elements). The br element will be announced as "break" to some screenreader users so is best avoided when possible
Marked as helpful0@saktiajadehPosted 10 months agoHi @grace-snow, thanks a bunch for your awesome advice! I really appreciate your input on making things better. Your suggestions were spot on, and I wanted to let you know that I've already started making some updates. Your help means a lot, and I'm super grateful for your support and tips. Cheers!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord