News homepage

Community feedback

• 

  P

  Jairo Valderrama•420

  @jairovgPosted over 1 year ago

  Hi @josh76543210, congrats on your solution; here are some comments that might help you to improve it:

  Accessibility and semantics

  • This is your heading map:

  Frontend Mentor | News homepage
  
  1 - The Bright Future of Web 3.0?
  2 - New    
  3 - Hydrogen VS Electric Cars    
  3 - The Downsides of AI Artistry    
  3 - Is VC Funding Drying Up?
  2 - 01    
  3 - Reviving Retro PCs
  2 - 02    
  3 - Top 10 Laptops of 2022
  2 - 03    
  3 - The Growth of Gaming
  

  • Even the New title has a correct hierarchy, this is the text the assistive technology will read out loud; I would consider an extended title to screen readers only like "New articles".
  • The other h2 seems incorrect to me and they should be the h3 you have as level 2 titles.
  • There is an axe-core ruleset that can be improved. It's related to the document title, in this case, the best practice that may be applied is Put all unique information first. ...company’s name or brand ... should go after the unique content.. So the suggested document title should be News homepage | Frontend Mentor
  • You have multiple elements with a hover state, but they are not links and are not accessible with the keyboard either. So you're injecting an a11y issue. Here is a page from Deque with more info about the keyboard-inaccessible.
  • Nice setup you made for the page responsive considering users that may change their browser font size.
  • You're using the aside to handle the mobile version for the main navigation. You may achieve the same result using one single navigation, avoiding duplicating the elements, which is not a good practice and may impact SEO.

  Styles

  • Try some naming methodologies like BEM. They will allow you to have a better structure in your style rules and also to have better rules specificity.
  • Using colour variables linked to colour names, like grayish-blue or soft-orange may take you to unnecessary refactors if the colour changes or you apply theming to the page; instead, try to use variables scoped to features or categories using tokens.
  • Regarding the hamburger menu, you're using another resource to be downloaded when the user hovers over the element, try it using a mask image changing the element background colour on hover.

  I hope you find it useful. I'm happy to look at your solution if you make other changes.

  Marked as helpful

  0