Jak zrobić kompatybilny z Font Whiev WCAG 2.0?

Question

Jeśli mam witrynę z kilkoma świetnymi ikonami czcionki, np.

<i class="fa fa-fw fa-cloud "></i> 

I uruchomić to przez walidator WCAG 2.0 pojawia się następujący błąd:

Success Criteria 1.4.4 Resize text (AA) 

    Check 117: i (italic) element used. 

    Repair: Replace your i elements with em or strong. 

    Error Line 185, Column 158: 

    <i class="fa fa-fw fa-cloud"></i> 

zdaję sobie sprawę, że zasada ta nie powinna naprawdę zastosować w tym przypadku, ponieważ jest tam, aby upewnić się, że <em> i używa się <strong> zamiast ich nie-semantycznych odpowiedników <i> i <b>. Ale problem nadal istnieje, jeśli mam klienta, który wymaga sprawdzenia wszystkich skrzynek WCAG2.0.

Czy ktoś wie, jaki byłby właściwy sposób. Czy zamiast tego powinienem zmienić je na <em>, czy to daje czytelnikom ekranów jakiekolwiek trudności? Wszelkie inne sugestie są mile widziane!

Answer 1

z font-niesamowite doc:

można umieścić Font Firma Awesome ikony tylko w dowolnym miejscu za pomocą CSS prefiks Fa i nazwisko ikonę za. Czcionka Awesome jest przeznaczona do użycia z elementami śródliniowymi (lubimy oznaczenie "i" dla zwięzłości, , ale użycie "span" jest bardziej semantycznie poprawne).

Możesz więc spróbować zmienić tagi "i" dla "zakresu".

Answer 2

To bardzo zależy od tego, jaka treść znajduje się wewnątrz znacznika i semantycznie. WCAG2.0 to zbiór wytycznych, a nie reguł twardych i szybkich.

Według specyfikacji HTML5:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

From: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element

Jeśli zawartość jest czymś, co musi być „podkreśla”, a następnie, nie ma sensu tag em jako że jest semantycznie poprawne we wszystkich agentów użytkownika. Przykład w specyfikacji, z łacińską nazwą techniczną dla zwierzęcia, jest doskonałym przykładem czegoś, co byłoby napisane kursywą, ale nie podkreślono (choć wizualnie wyglądałyby tak samo).

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p> 

Lepiej być stylizowany:

The Felis silvestris catus is cute.

Tak więc, jeśli można uzasadnić, dlaczego tekst jest „kursywa”, ale nie podkreślić, zachować je w takim stanie, w przeciwnym razie zmienić go na semantycznie odpowiednim tagiem.

Answer 3

Po pierwsze, <i>ma ma znaczenie semantyczne w HTML5 (ale było tylko prezentacyjne wcześniej). Zakładając, że używasz HTML5, używany przez Ciebie walidator jest niewłaściwy do oznaczania jako wszystkich wystąpień <i> jako nieodpowiednich.

Po drugie, zmiana

<i class="fa fa-fw fa-cloud"></i> 

do

<span class="fa fa-fw fa-cloud"></span> 

jest dobre, ale to nie rozwiąże prawdziwy dostępności problem, który jest, że nie mają żadnej alternatywy tekst do ikona (przynajmniej wydaje się, że nie).Dla większej argumentacji załóżmy, że twoja ikona z fa-chmury znajduje się wewnątrz znacznika <a>. Coś jak to (przy użyciu klasy sr-only CSS za Bootstrap):

<a href="..."> 
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span> 
    <span class="sr-only">Download</span> 
</a> 

lub tak (przy użyciu atrybutu WAI-ARIA za aria-label):

<a href="..." aria-label="Download"> 
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span> 
</a> 

jest rozwiązaniem. Jeszcze prostsze byłoby pokazać tekst każdego:

<a href="..."> 
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span> 
    Download 
</a> 

Answer 4

dodanie do danielnixon odpowiedzi (+1): jeśli chcę użyć ikonę fontawesome jako dekoracyjny rzeczy w interfejsie użytkownika (nie link, przycisk itp), dodam rozpiętość z atrybutem wai-aria:

<span class="fa fa-small-arrow" role="presentation"></span>