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

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
<listas@ramoncorominas.com>wrote:

> 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,
>>
>
>
>