HTML/SCSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @BurakOzcancf , Congratulation on completing your first project .
  Your solution is really nice . I have few suggestions :

  • whenever you include interactive elements( button, links, input, textarea), make sure you include clearly visible focus-visible styles as well as hover ones. This will make the users can navigate this website using keyboard (by using Tab key) easily. For future use , you have to specify the type of button .

  • To get rid of the accessibility issues you can add a <h1> with class="sr-only"(Hidden visually, but present for assistive tech).

  .sr-only {
  
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important;  /* 2 */
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;       
      
  }
  

  This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.

  • You can replace the <div > by <h2> as they are heading .

  • Don't use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  I really hope this feedback helps , happy and keep coding

  Marked as helpful

  1

  ---

  

  Burak•380

  @BurakOzcancfPosted almost 3 years ago

  @PhoenixDev22 Thanks! Your feedbacks are really helpful and valuable. I will consider all of them. 🙏🏻

  0