Unobtrusive icons
source link: https://hidde.blog/unobtrusive-icons/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
In this article, I describe a way to add icons to descriptive links, and one that makes icons by themselves more accessible.
Icons are often employed to provide a visual description of an action. In some recent projects, I have treated such descriptive icons as merely enhancements of descriptive text. Because surely, text that describes some action is a basic yet functional substitute for an icon that describes that same action.
Icons preceding descriptive links#heading-1
For example: an RSS link. In its most basic form, it would be:
<a href="http://site.com/feed" class="icon icon-rss">RSS</a>
The link with just the word ‘RSS’ is sufficient, it does the job of pointing the user to the RSS feed. Or the finely tuned searchbot, a browser plug-in that looks for RSS feeds or even a screenreader.
In its enhanced form, it would have a super sharp, retina proof vector icon in front of it.
Now, as we already made sure everyone is pointed to the RSS feed in a basic way, we have already included almost everyone, we can apply the enhancement to only the browsers that understand it.
The icon would be a character from an icon font. Let’s add the character with a pseudo element in CSS:
.icon-rss:before {
content: 'foo'; /* character in your icon font, preferably
one from Unicode's private use areas */
}
Icons with descriptive fallbacks#heading-2
Sometimes, a web interface uses an icon by itself, without a label. In this case, it does not come with a useful descriptive text out-of-the-box. Adding it with generated content would exclude users whose browsers don’t understand :before
or :after
.
Support for generated content can be detected by Modernizr. Taking advantage of the class Modernizr adds, we could show or hide descriptive alternatives for generated content.
<span class="generatedcontent-alt">Enlarge text</span>
.generatedcontent .generatedcontent-alt {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
This will “visually” hide the alternative in the case it is no longer needed, when generated content support has been detected by Modernizr.
Another example:
<a href="printversion.html" class="icon icon-print">
<span class="generatedcontent-alt">Print</span>
</a>
The text ‘Print’ is no longer needed if the print icon is there. If generated content is not supported, the text provides an acceptable alternative.
Text as the most basic alternative#heading-3
Icons have great advantages, and can help users finding their way around a website. But there will be cases in which the icons don’t work, for example if your web font fails, generated content is not supported or your user only processes text (e.g. Googlebot or a blind user).
With text, you can be sure you reach almost all web users. This makes it the ideal alternative, that is always good to have it in place, even if you (visually) hide it from most users.
Recommend
-
121
statty A tiny and unobtrusive state management library for React and Preact apps The current size of statty/dist/statty.umd.min.js is: The problem Most of the time, I see coll...
-
105
-
33
README.md Animated Mask Label
-
76
README.md pixo Convert SVG icons into React components npm i pixo Pass a directory or SVG file path as the first argument. $ pixo src --out-dir dist
-
80
README.rst Scratch.vim Unobtrusive scratch window. Inspired by scratch.vim, enhanced.
-
20
README.md LoadingShimmer An easy way to add a shimmering effect to any view with just single line of code. It is useful as an unobtrusive loading indic...
-
23
README ZLIB DATA COMPRESSION LIBRARY zlib 1.2.11 is a general purpose data compression library. All the code is thread safe. The data format used by t...
-
4
IPFS Desktop IPFS Desktop gives you all the power of IPFS in a convenient desktop app: a complete IPFS node, plus handy OS menubar/taskbar shortcuts and an all-in-one file manager, peer map, and...
-
5
Adding client-side validation to ASP.NET Core, without jQuery or unobtrusive validation ASP.NET Core is heavily influenced by the legacy .NET Framework System.Web-based ASP.NET Framework, bu...
-
1
GPTMagicPromptsOptimized ChatGPT prompts with unobtrusive UIGPTMagicPrompts shows optimized (and constantly improved!) prompts to get the most out of ChatGPT with minimal effort....
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK