Emphasis

Emphasizing content such as different types of fonts, colors and styles, shape, size, visual location, orientation, or sound. are used for text on a webpage. This is used to convey information or increase the aesthetics of a webpage. However, screen readers cannot convey these sensory characteristics. Hence, these sensory characteristics must be accompanied by instructions for the benefit of assistive technology users.

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

Bold text SHOULD be marked up using  element instead of element.
Italic text SHOULD be marked up using  element instead of  element.
Quotation marks or <blockquote> element CAN be used for some part of text to make it stand out from the remaining text. If it is not easy to understand, offscreen text CAN be used sparingly.
There SHOULD be an alternative programmatic way to convey the same information in case any visual styling is used. For example, if any link is styled as bold to indicate the selected state, there should also be a programmatic way through hidden off-screen text along with link text to provide the selected information for the link.

For example,
```
<h3 id="educators-heading">Training</h3>
Onsite, virtual & on-demand trainings
7 Options

 from Actual Price<del>$395.00 </del>
 Discounted Price $295.00

```

<section id="aimsWeb" lang="en-us">
    <div class="img-containor">
        <div class="image">
            <img src="./aimswebplus.png" alt="aimswebPlus" width="100%" height="50%">
        </div>
    </div>
    <div class="pageContent">
        <h2>AimswebPlus</h2>
        <p class="mb-4">
            <em>AimswebPlus</em> is a tool for teachers and
            educational teams in <strong>MTSS/RTI</strong> and
            special education contexts.<em>AimswebPlus</em>
            offers nationally-normed, skills-based benchmark
            assessments and progress monitoring integrated into
            one application across reading and math domains
            with additional add-on measures across dyslexia and
            behavior/social-emotional skills.
            <em>AimswebPlus</em> informs daily instruction and
            provides growth results to caregivers and
            district/state audiences in reading and math
            achievement using curriculum-based assessment and
            standards-aligned content for students in PreK
            through Grade 12.
        </p>
    </div>
</section>

<h2>Choose from our products</h2>

<div class="row">
    <div class="column">
        <h3 id="Learners-heading">Test forms & reports</h3>
        <p>
            Booklets, record forms, answer sheets, report usages
            &amp; subscriptions
        </p>
        <p><strong>7</strong> Options</p>
        <p>from <strong>$1.30</strong></p>
    </div>

    <div class="column">
        <h3 id="educators-heading">Training</h3>
        <p>Onsite, virtual & on-demand trainings</p>
        <p><strong>7</strong> Options</p>
        <p>
            from <span class="sr-only">Actual Price</span>
            <del>$395.00</del> <span class="sr-only">Discounted
            Price</span> <strong> $295.00</strong>
        </p>
    </div>

    <div class="column">
        <h3 id="practitioners-heading">All products</h3>
        <p>
            All tests &amp; materials offered for
            <em>AimswebPlus</em>
        </p>
        <p><strong>27</strong> Options</p>
        <p>from <strong>$1.30</strong></p>
    </div>
</div>

<h2 style="text-align: left;">Sources</h2>

<ol>
    <li>
        Torpey, Elka, <a href="#" rel="noreferrer">Clusters,
        pathways, and BLS: Connecting career information,</a>
        <span style="font-size: 12.0px; display: inline;"></span>
        <em>Career Outlook: U.S. Bureau of Labor
        Statistics,</em> March 25, 2015.
    </li>
    <li>
        Staklis, Sandra &amp; Zinth, Jennifer,
        <a href="#" rel="noreferrer">Washington CTE Dual Credit
        Research Report, (PDF)</a> <em>RTI International,</em>
        June 2021.
    </li>
    <li>
        Miller, Michaela; Boatwright, Jason &amp; Mahoney,
        Katherine, <a href="#" rel="noreferrer">Covering the
        Costs of Dual Credit for Students and Families,
        <span class="file-type-size"> (<span class="extension">
        PDF</span><span class="filesize"></span>)</span></a>
        <em>Washington Office of Superintendent of Public
        Instruction,</em> 2019.
    </li>
</ol>

<h2>About the author</h2>

<section id="authorBio-Donna-Butler" lang="en-us">
    <div class="img-containor1">
        <div class="image">
            <img src="./donna-butler-197x197.jpg" alt="" width="197" height="197">
        </div>
    </div>
    <div class="pageContent1">
        <h3>Donna Butler, Pearson</h3>
        <blockquote>
            "Donna is a Customer Success Faculty Advisor
            at Pearson. Her background includes teaching at the
            college level as well as K–12, developing bridge
            programs, and offering summer boot camps. She also
            served on statewide workgroups which launched the
            Corequisite model and First Year Experience courses
            to help increase student success."
        </blockquote>
    </div>
</section>

<section id="authorBio-Molly-Kirk" lang="en-us">
    <div class="img-containor1">
        <div class="image">
            <img src="./molly-kirk-197x197.jpg" alt="" width="197" height="197">
        </div>
    </div>
    <div class="pageContent1">
        <h3>Molly Kirk, Pearson</h3>
        <blockquote>
            "Molly is a K–12 Customer Success
            Representative at Pearson. Molly spent the last five
            years in elementary education. Outside elementary
            school, Molly has been a certified National
            Geographic educator and has presented to state
            conferences on behalf of the National Geographic
            education team."
        </blockquote>
    </div>
</section>

h1, h2, p { margin: 0.5em; }

h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; }

h3 {
    margin-top: 2rem;
    margin-left: 1rem;
}

p {
    font-size: 1.2rem;
    margin-left: 1rem;
    color: #565656;
}

.pageContent {
    flex-basis: 62%;
    margin: 1rem;
}

.pageContent1 {
    flex-basis: 75%;
    margin: 1rem;
}

#contentStart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.img-containor {
    flex-basis: 30%;
}

.img-containor1 {
    flex-basis: 20%;
}

@media screen and (max-width: 600px) {
    #contentStart { display: block; }

    .pageContent > div { flex-basis: 100%; }

    .pageContent1 > div { flex-basis: 100%; }
}

.span { color: red; }

.image {
    position: relative;
    display: inline-block;
}

.price {
    font-size: 2rem;
    display: block;
    font-weight: 800;
}

.btn {
    font-family: typefamily-primary,Helvetica,Verdana,sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
    white-space: normal;
    text-decoration: none;
    text-align: center;
    color: #f7f9fd;
    vertical-align: middle;
    border: none;
    cursor: pointer;
    padding: 0.6135em 1.25em 0.45em 1.25em;
    background: linear-gradient(135deg,#ee512e 0,#df006b 63.44%,#bd0071 100%) border-box;
    position: relative;
    z-index: 1;
    margin-left: 1rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

a:focus {
    outline: .10em solid #000000;
    outline-offset: 1px;
}

.font-2 {
    font-size: 2rem;
    margin-left: 0;
}

.column {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-top: 6px solid;
    border-color: #3e3d3d;
}

@media (min-width: 768px) {
    .column {
        width: 30%;
        float: left;
        margin: 10px;
    }
}

@media (max-width: 767px) {
    .row {
        display: flex;
        flex-direction: column;
    }
}

del { margin: 0 6px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Due to the nature of this demonstration, it is best viewed full screen .

Emphasis

Implementation

Why is it important?

Working Example