58 lines
1.5 KiB
Plaintext
58 lines
1.5 KiB
Plaintext
The ``++<strong>++``/``++<b>++`` and ``++<em>++``/``++<i>++`` tags have exactly the same effect in most web browsers, but there is a fundamental difference between them: ``++<strong>++`` and ``++<em>++`` have a semantic meaning whereas ``++<b>++`` and ``++<i>++`` only convey styling information like CSS.
|
|
|
|
|
|
While ``++<b>++`` can have simply no effect on a some devices with limited display or when a screen reader software is used by a blind person, ``++<strong>++`` will:
|
|
|
|
|
|
* Display the text bold in normal browsers
|
|
* Speak with lower tone when using a screen reader such as Jaws
|
|
|
|
Consequently:
|
|
|
|
* in order to convey semantics, the ``++<b>++`` and ``++<i>++`` tags shall never be used,
|
|
* in order to convey styling information, the ``++<b>++`` and ``++<i>++`` should be avoided and CSS should be used instead.
|
|
|
|
|
|
== Noncompliant Code Example
|
|
|
|
[source,html]
|
|
----
|
|
<i>car</i> <!-- Noncompliant -->
|
|
<b>train</b> <!-- Noncompliant -->
|
|
----
|
|
|
|
|
|
== Compliant Solution
|
|
|
|
[source,html]
|
|
----
|
|
<em>car</em>
|
|
<strong>train</strong>
|
|
----
|
|
|
|
|
|
== Exceptions
|
|
|
|
This rule is relaxed in case of https://www.w3.org/WAI/GL/wiki/Using_aria-hidden%3Dtrue_on_an_icon_font_that_AT_should_ignore[icon fonts] usage.
|
|
|
|
----
|
|
<i class="..." aria-hidden="true" /> <!-- Compliant icon fonts usage -->
|
|
----
|
|
|
|
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
|
|
'''
|
|
== Implementation Specification
|
|
(visible only on this page)
|
|
|
|
include::message.adoc[]
|
|
|
|
'''
|
|
== Comments And Links
|
|
(visible only on this page)
|
|
|
|
include::comments-and-links.adoc[]
|
|
endif::env-github,rspecator-view[]
|