@vanzasetia
Posted
Hi, Yazdun! 👋
Congratulations on finishing this challenge! 👏
Glad you manage taking care of the lady image. 😂
I notice that you have a sr-only heading one. I would suggest removing it because it's a full webpage (not a component) and also every page should only contain one h1.
More feedback:
- Accessibility
- Good job on using
mainlandmark! 👍 - The most important content on the page is the logo, definitely not decorative, and surely not one with blank
alt=""text. Without that information, how would a screen reader user or a search engine know what your site/project is called? - Don't use
aria-requiredattribute when there's the nativerequiredattribute. In general, you should use the native HTML elements and attributes. - Well done on labeling the submit button but, there are better solutions. Use
spanwithsr-onlyfor the text content or even better use the alternative text of the icon as the text content for the button element. Also, there's no need to tell that it is a button. It's already a button element so the screen reader will pronounce it as a button. Currently, the screen reader will pronounce it as submit button, button.
- Good job on using
<button
id="btnSubmit"
type="submit"
class="showcase__form--submit"
>
<img src="./images/icon-arrow.svg" alt="Submit" />
</button>
- Input element needs a
labelelement. You might want to usesr-onlylabel instead or make thelabelas a placeholder instead. - Add
aria-describedbyattribute to theinputelement and reference the error element. - Styling
- Create a custom
:focus-visiblestyling to any interactive elements (button, links,input,textarea). This will make the users can navigate this website using keyboard (by usingTabkey) easily.
- Create a custom
- JavaScript
- I would prefer using
querySelectorand referencing or selecting the element withjs-classes. In my opinion, it makes your code more maintainable and readable because thejs-only be used for manipulating the DOM element with JavaScript (no CSS).
- I would prefer using
I like the custom validation that you've created, so great job! 👍
That's it! Hope you find this useful! 😁
Marked as helpful
@vanzasetia
Posted
Here are some resources to learn accessibility.
- Inclusive Components - Learn how to create an accessible components (toggle buttons, a todo list, etc).
- Deque - List of axe 4.4 Rules - A manual accessibility checks.
- Blog Post by Adrian Roselli - Stop Giving Control Hints to Screen Readers
- Scott O'Hara - Blog Posts
- Andy Bell - Piccalilli
- Stephanie Eckles - moderncss.dev - I like the Modern CSS Upgrades To Improve Accessibility blog post. It tells you a practical guide to improve your website accessibility.
- Checklist - The A11y Project - make sure that your webisite is accessible.
- WAVE Web Accessibility Evaluation Tool
I hope this helps you to learn more about accessibility!
Marked as helpful
@Yazdun
Posted
@vanzasetia Hello Vanza, Thanks for your awesome feedback 😍
I dived back to the challenge and fixed all the issues you mentioned, It was super helpful 👏
And the funny thing is : I've dedicated my whole time to learn accessibility and SEO for now, I tried to make this project accessible, and also navigatable (not sure if navigatable is a word 😃) with keyboard, so the resources you provided are like a gem to me right now and I can't thank you enough for that 💎❤️🔥
@vanzasetia
Posted
@Yazdun You're welcome! Glad to know it is helpful for you! 😊
Nice project! It looks great in my view and the :focus-visible styling is clear! 👏 Is the project is going to be a real blog app? Anyway, good luck with your learning process!
@Yazdun
Posted
@vanzasetia Yes, I'm prototyping it for now, once I gain enough confidence in SEO and nextjs, I'm gonna turn it into a real blog app
@vanzasetia
Posted
@Yazdun Awesome! Good luck with it! 👌
