Is <p> </p> to add spacing in website content bad for accessibility?
Example:
<h3>Title</h3>
<p>Stuff here</p>
… (more paragraphs and stuff)
<p> </p>
<h3>Next Title</h3>
<p>Stuff here</p>
Basically the title. Currently in the middle of accessibility remediation for my workplace’s website. There’s a check on our automated tool for “All p elements are not used as headers.”
Someone mentioned <p> </p> “is more than likely the cause of this issue.” 🤔
So if it’s bad for accessibility then what are good alternatives to add spacing in page content? I’m a bit confused on this one.
31 Replies
for accessibility, it should read like an empty paper sheet, because
is just a space that doesn't allow the text to break to the next line
considering that the w3 org website suggests using for spacing a word (for stylistic reasons ... don't know why anyone would do that), instead of spaces, i conclude it shouldn't be any different from an empty element (for accessibility)
https://www.w3.org/WAI/WCAG21/Techniques/failures/F32.html
it probably isn't semantically correct, and you probably need an heading there instead of a <p> </p>I feel like it’s more of a styling issue where people want to have a section, add an extra space using
<p> </p> after the last paragraph before the next heading. Using <br /> is kinda gross toouse a transparent hr?
it's not great, but much better than an "empty" paragraph
Yeah that can work but if others are doing content creation they’re not really going to be able to do that
that's true
probably will be fine
i recommend actually testing it
Well they can type it in with a WYSIWYG editor but can’t make it transparent without editing the HTML… but maybe if the site CSS was better it would have good spacing between everything
I can do it but that’s more work for me to go back and change all of those to <hr> :thinkinghd:
leave it as-is
it's probably fine
maybe an awkward pause here and there, for a screenreader
Yeah I think the scanning tool actually does not pick it up like that person said it did, I’m not sure why they’re putting out conflicting information…
Oh well, I will document and then remember to make my own websites better 🤣
Thank you 🙂👍
probably a buggy tool
save the link, it will be useful for you
It’s not the best tool but it’s a starting point
But it shouldn’t be our only tool
you should always have multiple tools to compare results between them all
not all tools test everything
And manual testing
I think this is over everyone’s heads here and I don’t especially feel like being the accessibility encyclopedia for them
yeah, i know what you mean
Oh I think the link is talking about spacing between letters and such… let me find an example on our website
i know it is
But Drupal randomly injects anyway just like in the link which is REALLY ANNOYING
im using it to show that the
, from an accessibility standpoint, should be fine
yeah, plenty of old wysiwyg editors do that bullshitI understand
It’s not an error per say but a grey area and bad practice to do something like we do
but why's the tool pointing out stuff but doesn't tell you where the stuff is?
Well it tells you which page and what the snippets are (unless it’s something like a review item then it doesn’t tell you anything except the page and says “You must manually review this item to see if the issue exists” or whatever…). My organization has the Chrome Extension blocked that allows you to manually scan pages and (ideally?) see where on the page rather than having to hunt them down, but I guess the extension is hot garbage
So for this particular success criteria of “All p elements are not used as headers”, I have not actually seen the <p> </p> bit and I’m wondering if it will show up under different success criteria… it’s really annoying because the tool just updated a lot of items on their checklist so I have to hunt down where I think something would be under
For that SC I have seen bolded paragraph elements that are not headers or ones that should be, not too hard to figure out…
🤔 maybe it's a bug
I’m fairly confident that person who said it’s included under that check doesn’t exactly know, but I’ll have to check later
Also I’m deliberating how much I should care in general because I feel like I’ll be wrung out being depended on as the accessibility encyclopedia for them
if it is detected, according to the example i've sent, it should be a bug
in my opinion, you should care about it as long as it is your job: everything else reported to the manager for someone who's better equipped to do the accessibility testing
im not saying you're incompetent, but an expert is an expert for a reason
Right like it’s not up to me to get everyone on board and dictate PDF remediation and other department-wide practices. It’s funny because there’s like no experts in this state gov ecosystem so everyone is thinking “uh… how do we comply with this by next April?”
But I have been contemplating taking classes like at Deque University and getting accessibility certifications
I doubt it's flagging the space
since it is just a space
who knows tho, I would say there's 2 criteria they could use to flag it as a p being used as a header
- Font size & weight
- Length of pararaph
if you're using deque (axe) then their algo:
Ensures that paragraph elements do not use italic, bold or font size to give the appearance of headings.
lol I wish we had access to axe
sadge, prolly something similar tho
i think this is all being done inside the wysiwyg drupal editor
Yeah I can easily edit the HTML and add bootstrap classes to each element that needs spacing but that’s impractical in the case of our Drupal site
Here’s to hoping they come up with a better theme that has better spacing for everything lol
I wish I could just edit the CSS files myself 😔
well, you are doing what you can
And now Hope is up to date on the Rebecca lore 🤣
Rebecca wants to change something, but cruddy government red tape