Show only the initial character for glyph fonts (accessible format)

Question

Show only the initial character for glyph fonts (accessible format)

I'm working with a glyph font and looking to create a specific visual effect:

Here's the code I have so far:

<div class="ico linkedin">linkedin</div>
        
.ico {border-radius:10em; background:black; color:white}
.linkedin {visibility:hidden;}
.linkedin:first-letter {
    font-family:'JustVector'; 
    font-size:900%; 
    text-indent:1em; 
    visibility:visible
 }

This approach works in Chrome, but turns out it doesn't work in Firefox or Internet Explorer 9. It also raises accessibility concerns as screen readers like JAWS don’t acknowledge the elements with hidden or display:none.

In an attempt to address this issue, I experimented with:

.linkedin {position:absolute; left:-5em}
.linkedin:first-letter {/*etc*/ position:absolute; left:6em}

Unfortunately, this solution didn’t yield the desired result. Is there a proper and accessible way to achieve this effect?

css accessibility

Answer 1

Answer №1

To ensure accessibility when using icons, it is best to utilize img elements with descriptive alt attributes, like this:

<img src=smiley.gif alt="Just kidding!">

Icon fonts, often referred to as “glyph fonts,” present inherent accessibility challenges. Attempting to manipulate letters into appearing as icons through CSS tricks results in incorrect information if CSS is disabled. Similarly, using empty content elements with CSS-generated content leads to no information when the visual aspect of CSS is turned off.

Answer 2

To ensure accessibility when using icons, it is best to utilize img elements with descriptive alt attributes, like this:

<img src=smiley.gif alt="Just kidding!">

Icon fonts, often referred to as “glyph fonts,” present inherent accessibility challenges. Attempting to manipulate letters into appearing as icons through CSS tricks results in incorrect information if CSS is disabled. Similarly, using empty content elements with CSS-generated content leads to no information when the visual aspect of CSS is turned off.

Answer 3

Answer №2

Utilizing icon fonts in an accessible manner can be challenging at the moment. To tackle this issue, consider following this approach:

Start by enclosing the text within a span element for hiding purposes. Additionally, include another span element for the icon.

<div class="ico">
    <span aria-hidden="true" class="linkedin"></span>
    <span class="hide">linkedin</span>
</div>

Note the inclusion of aria-hidden="true" in the icon span to prevent screen readers from reading out the symbol used for rendering.

Once the text is hidden to accommodate screen readers, you can proceed to apply the icon using the before pseudo-element selector.

.linkedin:before {
    font-family: 'JustVector'; 
    content: 'l';
}

.hide{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Answer 4

Utilizing icon fonts in an accessible manner can be challenging at the moment. To tackle this issue, consider following this approach:

Start by enclosing the text within a span element for hiding purposes. Additionally, include another span element for the icon.

<div class="ico">
    <span aria-hidden="true" class="linkedin"></span>
    <span class="hide">linkedin</span>
</div>

Note the inclusion of aria-hidden="true" in the icon span to prevent screen readers from reading out the symbol used for rendering.

Once the text is hidden to accommodate screen readers, you can proceed to apply the icon using the before pseudo-element selector.

.linkedin:before {
    font-family: 'JustVector'; 
    content: 'l';
}

.hide{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Answer 5

Answer №3

Thank you for providing answers that have sparked some questions in my mind on how to handle this situation.

In the end, I decided to go with the simpler option. It is accessible, more semantic, works even without CSS on the page, and can be easily printed.

I made sure to separate the first letter (the icon) from the surrounding text with a margin, and kept the layer with overflow:hidden;. Then, I adjusted the margin and line-height to properly center the character/icon inside the circle.

Here is the final code:

.ico {background:black; border-radius:10em; height:5em; overflow:hidden; position:relative; width:5em; color:white;}
.linkedin:first-letter {font-family:'JustVector'; font-size:400%; line-height: 1.3em; margin-left:0.2em; margin-right:1em;}

With this solution, screen readers will read "linkedin" while visually displaying only the icon to provide enough information for other users.

Answer 6

Thank you for providing answers that have sparked some questions in my mind on how to handle this situation.

In the end, I decided to go with the simpler option. It is accessible, more semantic, works even without CSS on the page, and can be easily printed.

I made sure to separate the first letter (the icon) from the surrounding text with a margin, and kept the layer with overflow:hidden;. Then, I adjusted the margin and line-height to properly center the character/icon inside the circle.

Here is the final code:

.ico {background:black; border-radius:10em; height:5em; overflow:hidden; position:relative; width:5em; color:white;}
.linkedin:first-letter {font-family:'JustVector'; font-size:400%; line-height: 1.3em; margin-left:0.2em; margin-right:1em;}

With this solution, screen readers will read "linkedin" while visually displaying only the icon to provide enough information for other users.

Show only the initial character for glyph fonts (accessible format)

Answer №1

Answer №2

Answer №3

Similar questions

Tips for avoiding accidental unit conversion in jQuery

Issue Encountered While Loading CSS using Webpack and Babel

Display a different div when hovering over an li element

Ensure that the display is set to block to stack the input elements on top of each other

Design cards in a particular sequence using either bootstrap or CSS

"Maximizing TableView Cell Height to Utilize the Entire Screen

What is the best way to elegantly finish a live CSS animation when hovering?

Steps for adjusting the position of this div in relation to the main container

In ReactJs, you can use break tags to format a lengthy string and also apply color to certain words within the string

A step-by-step guide on extracting the image source from a targeted element

Issue with functionality of inline list menu

What is the best way to incorporate vertical lines into a set of progress bars?

Is it better to use one large CSS file for Angular 2 or opt for separate files per component

What is the best way to ensure that my Material UI container occupies the entire width and height of the

Organize Radio Selectors

Conceal series of images with a click; reveal them again once completed

What is the best way to switch a single class using jQuery without impacting other elements with the same class

Ensure the column breaks before the element without disrupting the wrapper in CSS

Click to solve the equation

Text area featuring unique border design, with border color change upon focus?