Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- A step is submitted, but no selection has been made
- Live Site URL: Multi Form App
- Semantic HTML5 markup
- SASS(SCSS)
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JS
- Jest
- MVC Architectural pattern
This is the first time I've applied some structure regarding SCSS files and I also learned about the MVC archetictural pattern with regards to JS code. I learned about some accessibility attributes such as role='listbox' which makes it so it lets user know that there is a list of items to select that are not elements that contain images. In conjuction with the role ='option' attribute which tells users which elements are options. I also learned about some aria attributes like aria-label, aria-selected, etc. These help visually impaired users understand what is happening via screenreaders informing them. Useful resources webdesignerdepot.com - This helped me learn how to better structure my SCSS files/folders. developer.mozilla.org - This helped me learn more specific accessibility attributes to make non-semantic elements more accessible for screenreaders/visually impaired users.