WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Span classes in H1 tags

for

Number of posts in this thread: 2 (In chronological order)

From: Sudheer Babu
Date: Fri, Sep 28 2018 1:14PM
Subject: Span classes in H1 tags
No previous message | Next message →

There is an ask to use H1 and H2 etc tags with few styling options.
Example code snippet:

<h1>

<span class="boardit">Portfolio</span>

</h1>


Please let me know if this affects any of the wcag guidelines and be non
accessibility compliant.


Thanks in advance

Sudheer

From: Nick Beranek
Date: Fri, Sep 28 2018 1:20PM
Subject: Re: Span classes in H1 tags
← Previous message | No next message

Hi Sudheer,

What you have shared will be just fine. The heading will help satisfy SC
1.3.1 Info and Relationships and I think it's great that you're including a
different style while maintaining the heading tag level; a proper heading
hierarchy is very important! The <span> as a child of the <h1> is valid
HTML and will not negatively impact the accessibility of the heading unless
you style it so that the heading text cannot be read.

Nick

On Fri, Sep 28, 2018 at 3:14 PM Sudheer Babu < = EMAIL ADDRESS REMOVED = > wrote:

> There is an ask to use H1 and H2 etc tags with few styling options.
> Example code snippet:
>
> <h1>
>
> <span class="boardit">Portfolio</span>
>
> </h1>
>
>
> Please let me know if this affects any of the wcag guidelines and be non
> accessibility compliant.
>
>
> Thanks in advance
>
> Sudheer
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=dC_UMEUmMt99VWyKrKPEqR3CTKGfGj3o3ZNFy9eOtyTH5I1FN_SWdh0fxgPpm-RI&m=v-j8J-66GX3f4jFOpuIUhHr_j4pBxUSvDT9CMihZvTc&s=kZyj-g5mg85ZWsA0UZhIO6AmrB9Dy7QTGJK6AFQ0A9Q&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=dC_UMEUmMt99VWyKrKPEqR3CTKGfGj3o3ZNFy9eOtyTH5I1FN_SWdh0fxgPpm-RI&m=v-j8J-66GX3f4jFOpuIUhHr_j4pBxUSvDT9CMihZvTc&s=3kbYZffEgGZawxXiXeiwPqWeW7pHPo0XQWQvB_y6FKA&e=
> >


--
Nick Beranek
Accessibility Tech Lead
Digital Accessibility Team
Capital One

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.