HTML & CSS

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchell

  Posted over 3 years ago

  Hi @grace-snow,

  There's an example of text content in <div>s right in the spec's <p> tag section!

  It literally says:

  "Authors wishing to conveniently style such 'logical' paragraphs consisting of multiple 'structural' paragraphs can use the 'div' element instead of the 'p' element."

  I know it's not identical to my use case, but it demonstrates that there's not some completely inviolable law in place. And if it can be done for the purposes of "convenient styling" I daresay I have enough justification.

  Not that I'm taking the spec as the limits of my concern, especially in relation to accessibility. Yes, not using sematic tags is potentially exclusive, but doesn't using the wrong tags carry the same, or even greater risk?

  My FEM challenge solution is a snapshot of a component in on-going development within a wider (imagined!) project. I don't know all the contexts in which its subcomponents will be consumed yet, so I've made the best choice I can with the knowledge I have.

  I'd expect a11y testing across the (notional) product as a whole to guide decisions about how the component should be refactored. Which is why, if you can describe any specific issues it would be more helpful than a general statement that for some unspecified usage of some unspecified assistive tech it might be problematic.

  I asked previously whether you think Annual Plan $59.99/year might legitimately be expressed as a table (I'm increasingly sceptical about that), and if you can point me to the section of the spec about phrasing content that you refer to, I'll check it out. There's also the matter of the placement of the background image, which was my original feedback request.

  These are things you can help me with, if you're taking the time to correspond.

  On the broad topic of using native elements and semantic tags for reasons of accessibility, you're preaching to the choir!

  00
• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  Hi Mark

  The main thing I notice thats worth addressing on this solution is the need to improve html semantics. It's such an important skill to master.

  As a rule, never place written content in a div or span alone. It always needs to be in a meaningful element, like paragraph.

  Annual plan deserves to be a heading. Headings must go in order as they are the main mechanism for giving structure to a page (and what assistive tech users rely on to navigate a page's content)

  Buttons and anchor links have very distinct purposes. Anything that triggers an action, like opening a modal, toggling a price etc must be a button element. Anything that triggers navigation must be an anchor tag.

  I haven't checked the css, but another top tip is to ensure all interactive elements always have a clear and obvious focus-visible style

  I hope these tips are helpful. Good luck

  04