Accessibility : Using ICON Fonts

Accessibility : Using ICON Fonts

Methods for handling icon fonts to ensure a text alternative is available, catering for all users and screen readers.


<a href=”index.html”>
<span class=”icon-home” aria-hidden=”true”</span>Home</a>

The usability advice is to always use an icon with text and you could provide an option for a more concise interface that removes the text for people who know the icons mean.

The characters used by icon fonts are also often unintelligible to a screen reader, so you need to hide them. The best way is using the “aria-hidden” attribute, which leaves it visible ti everyone else.

And use CSS such as:


Icon-home:before{
Font-famliy: icons;
Content: &#x21dd; /* whatever your icon reference is */
}

There needs to be alternative text for a home icon:

<a href=”index.html”>
<span class=”icon-home” aria-hidden=”true”></span>
<span class=”alt”>Home</span>
</a>

The text can be moved off-screen with:


.alt{
border:0;
font: 0/0 a;
text-shadow:none;
color:transparent;
background-color:transparent;
}

IE Restrictions to AngularJS Directives

ie-restrictions

If your web site supports older versions of ie, there is few things you need to keep in mind if your going to use angular.

Polyfill JSON.stringify

The first one is your going to have to Polyfill JSON.stringify.
If you don’t know how to do that then googling this quickly bring a plenty of sites tell you what exactly you need to do.You can use JSON2 or JSON3 polyfills for this.

  1. <!doctype html>
  2. <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  3. <head>
  4. <!--[if lte IE 8]>
  5. <script src="/path/to/json2.js"></script>
  6. <![endif]-->
  7. </head>
  8. <body>
  9. ...
  10. </body>
  11. </html>

Don’t use Tag form of directives

The other thing you need to do is when ever you use angular directive, don’t use the tag form of the directive.

Let’s look at exactly what I mean.

IE has some restrictions on custom tag names. The problem is the angular directives in tag form are not recognized by older versions of IE.

So for example, the
<ng-view> ... </ng-view>
<ng-pluralize> ... </ng-pluralize>
<ng-include> ... </ng-include>

these directives can be used as tag, but in order to work with IE, we can insist directive in this way.

As we discussed previously, directives can be written in multiple ways.
Which are the tag form
<ng-view> ... </ng-view>
the attribute form
<ANY ng-view> ... </ANY>
and class name form.
<ANY class="ng-view"> ... </ANY>

So when supporting older versions of IE , never use the tag form directive, instead, try to use the attribute form or class form.

Here we see ng-view written as an attribute, remember that not all directives can be written in all three forms.

Some of them has restrictions on which forms they can be written. Be sure and check the official angular documentation for specifics.

So if your going to support old version browser of IE in your applications using angular, be sure in following these guidelines.

It’s worth noting that there are ways used with custom tag names in older versions of ie, there’s actually quite few hoops jump through to get that done.