Recipe Page

Community feedback

• 

  David Casanova 💫•180

  @DavidCasanova83Posted 5 months ago

  Hey, very good job ! Your design matches perfectly ✅✅

  Some tips about web accessibility :

  Improve the Accessibility of Your HTML Code

  Semantic Tags:

  Use HTML5 semantic tags to improve the document structure.

  1. Image Container:

     • Replace <div class="image-container"> with <figure class="image-container"> and add a caption if needed using <figcaption>.

  2. Header:

     • Add a <header> tag to group the title and description of the recipe.

  3. Sections:

     • Use <section> for different parts such as ingredients, instructions, and nutritional information.

  Contrast and Readability:

  Ensure that your CSS colors provide good contrast for visually impaired users. Use tools like the Colour Contrast Analyser to check the contrast.

  Navigation and Structure:

  Add ARIA elements to improve navigation with screen readers. For example, use aria-label or aria-labelledby for important sections.

  Links:

  Ensure that links have descriptive text to clearly indicate their destination.

  • For example, replace "Coded by Jesse Gile" with "Coded by Jesse Gile - Visit my website" to be more explicit.

  Marked as helpful

  0

  ---

  

  P

  Jesse Gile•40

  @jessegilePosted 5 months ago

  @DavidCasanova83 Thanks! I refactored with your suggestions.

  0
• 

  Justin•120

  @andrew-j-brownPosted 5 months ago

  Hi Jesse!

  As you mentioned bullet point sizing and spacing -

  padding-left can be used on the list element to add some space between the li bullet and the li content. To shrink the bullet itself, you can use font-size. I'll place some examples below:

  li {
      ...
      padding-left: 1rem;
      ...
  }
  
  ul > li::marker {
      ...
      font-size: 0.8rem;
  }
  

  Hope this helps, and have a great day!

  Marked as helpful

  0

  ---

  

  P

  Jesse Gile•40

  @jessegilePosted 5 months ago

  @andrew-j-brown

  Thanks Justin!

  That fixed it!

  1