Article Preview Component. Mobile-first.

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @grace-snow & @renszo

  Thank you Grace for this valuable comment above.

  I have had such a nice discussion with Renszo a few days ago about the header. I think that's a reason why he has used it here in the tag article. During our conversation I have mentioned that point:

  The header is not sectioning content and therefore does not introduce a new section in the outline. Using header a few times doesn’t affect the web outline algorithm. The header is a flow content category - this element must not be a descendant of an address, footer or another header element. Check it out: => link;

  “HTML Header Element (header) defines a page area that typically contains a logo, title, and navigation. The header can also be used inside other semantic elements such as article or section. A section header might contain the section's heading, author name, etc. article, section, aside, and nav can have their own header. Despite its name, the header is not necessarily positioned at the beginning of a page or section”. => link.

  I was writing this comment in general meaning - of course, every project is different, contains different elements and I agree with you Grace that header doesn't have to be used if contains only the img. Every challenge is different. Lots of things are going on => it is not very easy to implement semantic tags but it is very easy to overuse them.

  I am curious what do you think about this example: article, inside of it header (contains img, h1, p) then footer (img, h2, p) ? I think it good be a good solution, maybe even without a footer.

  Another important point: not many people like you are giving such valuable comments. I know it takes time to make it and I appreciated it. A proper code review is very important for us because we are at the beginning of our web education => honestly, we do not have many examples on the internet about proper HTML structure in use.

  Thanks :D

  4

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hi, @SzymonRojek Thanks for stopping by and leaving your comment. Hopefully, @grace-snow gives us her opinion about this. And to be able to have everything clearer.

  Greetings.

  1

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @RenszCamacho @SzymonRojek I had indeed been using header elements in much the same way after reading the same documentation until recently. A disabled friend on twitter pointed out to me how unhelpful it was for screenreader users having multiple landmarks (headers) announced on a page. And she recorded a video of her using the screenreader to prove itm

  It turns out, in Voiceover on safari they all get announced in the document outline, which makes for a very confusing experience. I pointed out to her how misleading the docs are on this one, and she says a lot of disabled users agree!

  Here is what she said:

  "According to that doc, there can be many <header> on a page, but there should only be one <header> with a role of banner. <header> has a role of banner by default, unless that <header> is nested in an article, aside, main, nav, or section.

  "So the banners I referenced in my video are headers that have a role of banner by default.

  "Today, I tested nesting header in a section. Using VoiceOver with Chrome behaved as expected--that header was not announced as a banner in the landmarks menu. However, when I used VoiceOver with Safari, it WAS announced as a banner, even though it didn't have an explicit role="banner" and was nested inside a section."

  She also mentioned to me how frustrating it is when devs make everything into a 'list' 😂

  3

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @grace-snow @RenszCamacho

  I started to use VoiceOver a few days ago to Evaluate Web Accessibility - and VO was announcing an article => so it is harder to create the HTML structure with semantic tags if you care about ScreenReaders etc.

  I have concluded: in this main example above we could use divs if we want to get a proper arrangement of elements in an article without head or footer => so after your post Grace, I can say that divs can be used as an auxiliary tool for arranging items in an article etc.

  From the other hand, this challenge is only a component but when we have got the website or for example page with the hero element and all content below - we can use the wrapper, inside of this wrapper the header, and below the main tag with all content inside of it. Sometimes I have seen that people use the main tag as a wrapper (also, depending on the context). Huge subject.

  Thank you for this factual conversation. I think, we need an experience but it will come :D

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  This looks really nice!

  I'd suggest having a max-width on the card so you can lose the magic numbers like 731px / 33rem. As soon as I see stuff like that, it signals there is a problem... As long as you gave main a little padding or the card some side margin it wouldn't hit the sides of the screen once you lose the explicit widths

  To fix the img distortion, you could set height 100% object fit cover instead I think.

  I think the HTML markup definitely needs to change. This would be fine as an article but shouldn't then include a header with an image in it, or a section element within it. That's a case of over-using semantic tags that would actually result in a poorer experience for assistive tech users (something I discovered quite recently!)

  I'm pretty sure you don't need to repeat the share button. You could probably use z-index effectively to keep the one button...? Just an idea there, might be tricky or involve too much markup restructuring.

  General best practice tips for your repo structure:

  • don't forget to add a gitignore
  • vendor means third-party scripts. It should be where you'd place things like bootstrap js or css...
  • similarly, you don't need an src folder unless you're doing some build tooling where it outputs to a different directory. It's not an issue - and you're using Parcel brilliantly here - it's just that it's much more usual for src to only be used for development code (the stuff you work on) with a separate public or dist folder for production code (e.g. minified assets, your outputted compiled files)

  I hope all that's helpful. This is a nice solution overall, just needs some small tweaks

  4

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  p.s. definitely fix those accessibility issues in your report! aria-label should sort it :)

  2

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hi, @grace-snow Thank you very much for take your time and check my code. All your advice is gold to me. As always you are very helpful.

  And big thanks for how to structure my repo. It is quite enlightening.

  2
• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @RenszCamacho

  How do you feel with all this information?

  Hopefully, it is not confusing you much. Don't worry about it - practice makes us better. Let me ask you, are you working as a web dev?

  Greetings :D

  1

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @SzymonRojek All this information is great for me. I can see different points of view, from people like you or Grace. Many times it is difficult to know if you are going the right way when you are self-taught. Regarding your question, I don't work as a web developer yet. But it is what I aspire to and it is my main goal to be able to work on what I like.

  Greetings. 😊

  2

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @RenszCamacho

  We have to just keep going and hopefully you will get a job :)

  1