Responsive access page using flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Nicolás Pírez!

  About your questions:

  • As a front-end developer, you should make your website looks good at all screen sizes, including smaller, larger, and everything in between. If the website only looks good at some screen sizes, it is not a responsive website.
  • No, you don't need absolute positioning. I recommend making the <header> live inside the same container as the <section class="outer-content-box">. After that, you can try giving some white space between the <header> and the <section> with margin.
  • I am not sure about your "bonus question". Let me tell you what I think. Previously you were putting all the images in the root folder, then you are trying to use the image as the background image. Then, you failed. I wonder what you were trying before.

  For the HTML suggestions:

  • Each page should only one <main> element. Replace the <main class="site-access-container"> with a <div> element.
  • Swap <section class="outer-content-box"> with a <div>. <section> element is the element that should live inside the <main>.
  • Remove the word "logo" from all alternative texts.
  • Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (<img>) so the screen reader will pronounce it as an image.
  • Don't use <label> elements for the error message. Use one <p> element instead.
  • Give the <input> an accessible name or label by using aria-label. For example, aria-label="Email" to tell the users that it is an email input.
  • <figure> does not need to wrap every <img> element. Only use <figure> when you need to include a <figcaption>.
  • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

  Some suggestions on the CSS:

  • Don't use id selectors for styling. There are two reasons for not using ID’s to style content:
    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.
  • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset

  I recommend learning to create accessible form validation. Accessible form validation means that the error messages get pronounced by screen readers, each input has a label, and using the correct type of input.

  How To Create Accessible Form with Boring Design?

  I hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @NicolasPirezGit

  Related resources:

  • Responsive design ground rules | Polypane
  • Quick tip: Using alt text properly - The A11Y Project
  • Avoid these common alt-text mistakes - Scope for business
  • What is an accessible name? - TPGi

  1

  

  Nicolás Pírez•40

  @NicolasPirezGitPosted almost 2 years ago

  @vanzasetia Thank you so much for your feedback! I'll try refactoring the code ASAP following your advice.

  I admit I haven't studied virtually anything about accessibility up until a few days ago. I'm kinda baffled by the fact that all front-end courses I've taken so far haven't dedicated at least a video or two to that topic.

  I was initially planning on submitting three projects before the 21st, but just looking at the vast amount of mistakes I've had on these last two have made me reconsider. I'll have to start digging deeper into the fundamentals before moving on.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @NicolasPirezGit

  You are welcome!

  Yeah, it's rare to find beginner tutorials that teach about accessibility. I have some resources to help you learn more about accessibility.

  • Solid Start - This is a good website for everyone that getting started to learn about web accessibility. It also provides some great resources.
  • Checklist - The A11y Project - This contains practical things to make sure your website is accessible.
  • Accessibility Myths - It is a small project debunking common accessibility myths. There are 22 myths that have been debunked.

  It's great to know that you are willing to improve your fundamental knowledge. 🙌

  It is rare to see a person who wants to learn again and fix the code.

  Good luck with your coding journey!

  1
• 

  Aldo Adabunu•290

  @KwakuAldoPosted almost 2 years ago

  Your site isn't responsive, it doesn't look good on mobile. It really looks good on desktop based on the screenshot comparison with the design. You should make the mobile design as the jpg in the design folder.

  1