Html Question posted in
Some basic documentation can be found here.

Html – Accessibility concerns of span/mark tags nested in paragraphs

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.

Tags:

2

Answers


  1. 0

    I would like to recommend you to use<strong> or you can use <em> instead of <mark> for better screen reader support, because they are better for inline emphasis and are treated more naturally by screen readers.

    <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.
</p>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search