Responsive 3-column component using Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @finng1337,

  I have some suggestions regarding your solution:

  • Whenever you include interactive elements(links , buttons , inputs , textarea ), make sure you include clearly visible focus-visible styles .

  • <svg> 's do not add important information to a document should be considered decorative. You can use aria-hidden="true" to hide the SVG from screen readers. focusable="false" is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.

  • Don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms.

  • 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;
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important; 
  	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 should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px will not allow the users to control the size of the page based on their needs.

  Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  finng1337•100

  @finng1337Posted over 2 years ago

  @PhoenixDev22 wow, thats very exhaustive feedback. This is one of my first projects and I am still in the beginning of learning, so that helped me a lot. Thanks for your time!

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hay ! Good Job finng

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

  Keep up the good work!

  1

  ---

  

  finng1337•100

  @finng1337Posted over 2 years ago

  @Crazimonk hey Naveen, thanks for the feedback. I just rly dont know what should I write as h1 heading(thats why its not there haha). Should I write something in it even though the design doesnt have any heading or should I just leav it blank(thats not a good idea I think)?

  1

  

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  @finng1337 check my solution see what i did you will get the idea

  0

  

  finng1337•100

  @finng1337Posted over 2 years ago

  @Crazimonk oh yes, i get it now, thanks for your time!

  1