So I am creating my portfolio right now and I want to put emphasis on some words inside my paragraph by changing their color. I've been using the mark tag, which makes sure screen readers are aware of the emphasis, but it also acts as if the mark tag is separate from the paragraph; making the screen reader stop until the user continues manually.
I just want to make sure this is not an accessibility concern. Here is my code:
<p>
Having <mark class="blue">authority</mark> over your brand is important in business. You decide how you want your brand to be <mark class="blue">perceived</mark>, interacted with, and <mark class="blue">connected</mark> to your community. If you ever need guidance on any of these aspects, I am more than willing to provide feedback and services related to brand identity.
</p>
If anyone could provide some tips that would be very appreciated. I just want to learn a little more about accessibility and ways to keep a good visual style at no cost.
The <mark> element is not for denoting emphasis. It is for—
...text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
A <strong> element is most appropriate here. It is—
...used to give portions of a sentence added importance.
<p>Having <strong class="blue">authority</strong> over your brand is important in business. You decide how you want your brand to be <strong class="blue">perceived</strong>, interacted with, and <strong class="blue">connected</strong> to your community. If you ever need guidance on any of these aspects, I am more than willing to provide feedback and services related to brand identity.</p>
As you've encountered, some screen readers will pause when encountering inline tags. There are settings and modes in some screen readers that will stop that pause from happening. But regardless, it's expected behavior, and using a <strong> is the correct way to denote these semantics for all users, including screen reader users.