W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2013

Re: <i>, <em> and font-style:italic in HTML 5

From: Adam Powell <adam@adaminfinitum.com>
Date: Fri, 25 Oct 2013 04:46:38 -0400
Message-ID: <CALsiKnPYwvrXKdddiB6keQCA9ahpt19CTycz0XBMyUer3FBhAQ@mail.gmail.com>
To: Ramón Corominas <listas@ramoncorominas.com>
Cc: Thomas Birch <thomas_birch@ieci.es>, davebest@cogeco.ca, w3c-wai-ig@w3.org
I built my own website with Twitter Bootstrap and this bothered me enough
that I customized it; here's my approach:

   - Even if you use a version of the framework which uses font icons
   (sharp on any screen, at any resolution, as they are vector based) instead
   of CSS sprites chances are high you are loading a whole lot of unnecessary
   stuff, this slows your site down and degrades user experience, especially
   in the context of mobile.
   - Instead, I downloaded a custom icon set (I used IcoMoon) that only
   included what I needed.
   - I then searched through the Unicode references to find proper,
   meaningful Unicode references whenever possible.
   - While I did use <i>, with data-attributes, I was able to find
   meaningful Unicode characters for the majority of icons (it was
   time-consuming, though).
   - While I know the support for this is lacking, it seemed better than
   nothing so I gave all icons a descriptive 'title' attribute.

I welcome feedback on these techniques, I do a fair amount of front-end
development and always try to bear accessibility in mind but I am pretty
new to serious accessibility considerations.

I wasn't thrilled with using <i> elements but out of brevity stayed with it
instead of <span>...I wish the spec. included something like <icon>.

*Adam Powell*
Learn more at my website:* *Adam Infinitum <http://www.adaminfinitum.com>

On Thu, Oct 24, 2013 at 2:59 PM, Ramón Corominas

> I would say that the "common practice" argument is not an argument. The
> most common practice is indeed "to be inaccessible". There are many popular
> libraries that make even more weird uses of the HTML elements, but that
> doesn't mean that we will accept them because of the "common practice".
> Anyway, the main issue with this use of <i> tags for icons is that they
> are usually left empty and the icon is inserted using some CSS background
> technique, which means that screen reader users and high contrast users
> receive no information at all.
> The semantic of the <i> tag will probably not cause big issues, but if the
> screen reader user configures it to read the tag with a different tone of
> voice, his/her perception of the content might be a bit strange.
> Cheers,
> Ramón.
> Thomas asked:
>  I have a follow-up question related with the use of the <i> tag. When
>> testing a web site's accessibility, we found an extensive use of the *<i>
>> tag **in conjunction with icons*, such as:
>> <i class="icon-right-default icon-white"></i>
>> We raised an issue because we consider this use of the tag doesn't meet
>> the defined semantics, but we were replied that this use of the tag is
>> common practice, and that popular libraries such as Twitter Bootstrap use
>> the i tag for this purpose and it has no affect on accessibility.
>> *Should this use of the tag be considered incorrect, or will the
>> semantics of the tag eventually evolve to include this common use?*
>> Thank you very much for your time. Regards,
Received on Friday, 25 October 2013 08:47:26 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:46 UTC