Skip to main content

Accessibility UI Guidelines: Inline Elements

Inline

2.11 Inline Elements

Inline elements are used to format text and other content within a block-level element without disrupting the flow of the document. Proper use of inline elements enhances readability, accessibility, and the overall user experience.

2.11.1 <span> Element

The <span> element is a generic inline container for phrasing content. It does not inherently represent anything and is typically used to apply styles or manipulate specific parts of text.

<!-- Applying a CSS class to a span -->
<p>This is a <span class="highlight">highlighted</span> word in a sentence.</p>

2.11.2 <a> Element

The <a> (anchor) element creates hyperlinks, enabling navigation between different parts of a website or to external resources. Ensuring that links are accessible is crucial for users relying on assistive technologies.

<!-- Descriptive Link Text -->
<a href="/contact">Contact Us for More Information</a>

<!-- Non-Descriptive Link Text (Avoid) -->
<a href="/contact">Click Here</a>

2.11.3 <strong> and <em> Elements

The <strong> element indicates that the text is of strong importance, while the <em> element emphasises text. Both elements carry semantic meaning and are recognised by assistive technologies.

<!-- Strong Importance -->
<p>This is a <strong>critical</strong> update that must be addressed immediately.</p>

<!-- Emphasised Text -->
<p>Please <em>read</em> the instructions carefully before proceeding.</p>

2.11.4 <abbr> Element

The <abbr> element represents an abbreviation or acronym, providing an expansion via the title attribute. This enhances accessibility by allowing assistive technologies to convey the full meaning.

<!-- Abbreviation with Expansion -->
<p>The <abbr title="World Health Organisation">WHO</abbr> provides global health guidelines.</p>

2.11.5 <img> Element

The <img> element embeds images into the document. Providing descriptive alternative text is essential for accessibility, allowing screen readers to convey the purpose of the image to users who cannot see it.

<!-- Image with Alt Text -->
<img src="logo.png" alt="Company Logo">

<!-- Decorative Image (Empty Alt Attribute) -->
<img src="decorative-line.png" alt="">

2.11.6 <code> and <pre> Elements

The <code> element represents a fragment of computer code, while the <pre> element preserves both spaces and line breaks, displaying text in a fixed-width font. These elements are important for presenting code snippets and preformatted text clearly.

<!-- Inline Code Example -->
<p>Use the <code class="language-html">getElementById()</code> method to access elements.</p>

<!-- Preformatted Code Block -->
<pre>
<code class="language-javascript">
function greet(name) {
    console.log('Hello, ' + name + '!');
}
greet('World');
</code>
</pre>

2.11.7 <mark> Element

The <mark> element highlights text for reference purposes, such as search results or important points. It provides semantic meaning, indicating that the text is relevant or noteworthy.

<!-- Highlighted Text -->
<p>To improve accessibility, use the <mark>semantic HTML elements</mark> appropriately.</p>

2.11.8 <small> and <big> Elements

The <small> element represents side comments or small print, while the <big> element increases the font size of the enclosed text. Use these elements judiciously to convey additional information without compromising readability.

<!-- Small Print -->
<p><small>© 2024 Company Name. All rights reserved.</small></p>

<!-- Increased Font Size -->
<p>This is a <big>larger</big> piece of text.</p>

2.11.9 ARIA Attributes for Inline Elements

Use ARIA (Accessible Rich Internet Applications) attributes to enhance the accessibility of inline elements when necessary. This is particularly useful for interactive or dynamic content.

<!-- Inline Button with ARIA Label -->
<span role="button" tabindex="0" aria-label="Close Window" onclick="closeWindow()">
    &times;
</span>