Order Summary Component using HTML | CSS | Flexbox

Community feedback

• 

  Mohamed Waled•230

  @Mohamed-WaledPosted over 2 years ago

  Hello @mayanksetia13, I hope this comment finds you well you have done marvelous work!! I saw the report that the website provides to you and the code, and I suggest you make some changes to your code : 1- For the Accessibility Issues : a - Images must have alternate text => you must put an "alt" attribute in the image tag in the HTML file and put a descriptive line about what is in the photo to make it easier for people who use screen readers. b - Document should have one main landmark, All page content should be contained by landmarks => for these issues you just can change the first "div" tag that has the "class: main" to make it a "main" tag, why is that? this is called semantic HTML and you use it to make the HTML more comprehensible by better defining the different sections and layout of web pages. c - Page should contain a level-one heading => for the same reason of the screen readers when you use the heading element (i.e. h1, h2, h3 ...) you should use them in order so the first one in the page should be h1 and the second h2 and so on because screen readers when reading the screen starts with heading assuming that it contains important information about what is in the page so you just use them in order and you can change the size with CSS (i.e. h1 { font-size: 24px;} it makes the h1 looks more like h2). d - <ul> and <ol> must only directly contain <li>, or <template> elements => here you just need to nest the span element in the li element because in the ul element it is preferred not to put any thing in it except the li, script and template elements. After these edits, you will still have 3 issues with the HTML validations you can solve them by : a - Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections => here you just can use either the h2 element in the first li and change its size by CSS or just change section tag by div tag but I would prefer to use the first solution to use the order heading elements along with the semantic HTML it will make better SEO and Accessibility in your website. b - The element button must not appear as a descendant of the "a" element => I think you put the button element inside an anchor element to make it clickable you do not need to do it the button is already clickable and if have done it to make the mouse looks like a pointer you just need to make it with CSS (i.e. .class-name {Cursor: pointer;}) it will make the button looks like an anchor element without putting it inside an anchor element. I hope I helped you with this comment please try to apply those changes in your Github repo. and come back here and click the view report button and after that click generate new report button after 1 or 2 minutes from your changes to the code in Github. if any new issues have appeared I will happily help in solving them keep up the good work ❤.

  Marked as helpful

  0