Skip to content

Remove unnecessary classes from inline code tags #4621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 24, 2025
Merged

Remove unnecessary classes from inline code tags #4621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions techniques/aria/ARIA1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
</head>
<body>
<h1>Using the <code class="language-html">aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
<h1>Using the <code>aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
<section class="meta">
<p class="id">ID: ARIA1</p>
<p class="technology">Technology: aria</p>
Expand All @@ -16,18 +16,18 @@ <h2>When to Use</h2>
</section>
<section id="description">
<h2>Description</h2>
<p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code class="language-html">aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <code class="language-html">aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <code class="language-html">id</code> reference list. The <code class="language-html">id</code> reference list contains one or more unique element <code class="language-html">id</code>s.</p>
<p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code>aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <code>aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <code>id</code> reference list. The <code>id</code> reference list contains one or more unique element <code>id</code>s.</p>
<p>Refer to <a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.</p>
<div class="note">
<p>The <code class="language-html">aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <code class="language-html">id</code>, it must reference an element in the same <abbr title="Document Object Model">DOM</abbr> document.</p>
<p>The <code>aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <code>id</code>, it must reference an element in the same <abbr title="Document Object Model">DOM</abbr> document.</p>
</div>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Using <code class="language-html">aria-describedby</code> to associate instructions with form fields</h3>
<h3>Using <code>aria-describedby</code> to associate instructions with form fields</h3>

<p>Sample form field using <code class="language-html">aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
<p>Sample form field using <code>aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
&lt;label for="fname"&gt;First name&lt;/label&gt;
&lt;input aria-describedby="int2" autocomplete="given-name" id="fname" type="text"&gt;
Expand All @@ -36,7 +36,7 @@ <h3>Using <code class="language-html">aria-describedby</code> to associate instr

</section>
<section class="example">
<h3>Using <code class="language-html">aria-describedby</code> property to provide more detailed information about the button</h3>
<h3>Using <code>aria-describedby</code> property to provide more detailed information about the button</h3>

<pre xml:space="preserve"><code class="language-html">&lt;div&gt;
&lt;span id="fontDesc"&gt;Select the font faces and sizes to be used on this page&lt;/span&gt;
Expand All @@ -59,7 +59,7 @@ <h2>Tests</h2>
<section class="procedure">
<h3>Procedure</h3>
<ol>
<li>Check that there is a user interface control having an <code class="language-html">aria-describedby</code> attribute that references one or more elements via unique <code class="language-html">id</code>.</li>
<li>Check that there is a user interface control having an <code>aria-describedby</code> attribute that references one or more elements via unique <code>id</code>.</li>
<li>Check that the referenced element or elements provide additional information about the user interface control.</li>
</ol>
</section>
Expand Down Expand Up @@ -93,7 +93,7 @@ <h2>Resources</h2>
<a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/web/accessibility/aria/attributes/aria-describedby"><code class="language-html">aria-describedby</code> attribute (<abbr title="Mozilla Developer Network">MDN</abbr>)</a>.
<a href="https://developer.mozilla.org/en-US/docs/web/accessibility/aria/attributes/aria-describedby"><code>aria-describedby</code> attribute (<abbr title="Mozilla Developer Network">MDN</abbr>)</a>.
</li>
<li>
<a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>.
Expand Down
10 changes: 5 additions & 5 deletions techniques/aria/ARIA10.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!DOCTYPE html><html lang="en"><head><title>Using aria-labelledby to provide a text alternative for non-text content</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Using aria-labelledby to provide a text alternative for non-text content</h1><section class="meta"><p class="id">ID: ARIA10</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>This technique applies to HTML with <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
</section><section id="description"><h2>Description</h2>
<p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the <code class="language-html">aria-labelledby</code> attribute. The <code class="language-html">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an <code class="language-html">id</code> reference value that matches the <code class="language-html">id</code> attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code class="language-html">aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
<p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the <code>aria-labelledby</code> attribute. The <code>aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an <code>id</code> reference value that matches the <code>id</code> attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code>aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Providing a short description for a complex graphic</h3>

<p>This example shows how to use the <code class="language-html">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
<p>This example shows how to use the <code>aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
<pre xml:space="preserve"><code class="language-html">&lt;div role="img" aria-labelledby="star-id"&gt;
&lt;img src="fullstar.png" alt=""&gt;
&lt;img src="fullstar.png" alt=""&gt;
Expand All @@ -22,9 +22,9 @@ <h3>Providing a short description for a complex graphic</h3>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Examine each element where the <code class="language-html">aria-labelledby</code> attribute is present and the element does not support the <code class="language-html">alt</code> attribute.</li>
<li>Check whether the value of the <code class="language-html">aria-labelledby</code> attribute is the <code class="language-html">id</code> of an element on the web page.</li>
<li>Determine that the text of the element identified by the <code class="language-html">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
<li>Examine each element where the <code>aria-labelledby</code> attribute is present and the element does not support the <code>alt</code> attribute.</li>
<li>Check whether the value of the <code>aria-labelledby</code> attribute is the <code>id</code> of an element on the web page.</li>
<li>Determine that the text of the element identified by the <code>aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
Expand Down
22 changes: 11 additions & 11 deletions techniques/aria/ARIA11.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ <h1>Using ARIA landmarks to identify regions of a page</h1>
</p>
<p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute designates the type of landmark. These role values are listed below. For HTML mappings of landmark roles, refer to the <cite>Rules of ARIA attribute usage by HTML element</cite> table in the <a href="https://www.w3.org/TR/html-aria/">ARIA In HTML recommendation</a>.</p>
<ul>
<li><code class="language-html">banner</code>: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.</li>
<li><code class="language-html">navigation</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
<li><code class="language-html">main</code>: A region that contains a page's main content.</li>
<li><code class="language-html">region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <code class="language-html">region</code> landmark isn't exposed as a landmark region unless it has an accessible name, often provided using <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code>.</li>
<li><code class="language-html">form</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <code class="language-html">form</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li></li>
<li><code class="language-html">search</code>: A region of the page containing search functionality.</li>
<li><code class="language-html">complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
<li><code class="language-html">contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
<li><code>banner</code>: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.</li>
<li><code>navigation</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
<li><code>main</code>: A region that contains a page's main content.</li>
<li><code>region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <code>region</code> landmark isn't exposed as a landmark region unless it has an accessible name, often provided using <code>aria-label</code> or <code>aria-labelledby</code>.</li>
<li><code>form</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <code>form</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li>
<li><code>search</code>: A region of the page containing search functionality.</li>
<li><code>complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
<li><code>contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
</ul>

<p>There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary blocks of navigation. In these cases, identical roles should be named using a valid technique for labeling regions.</p>
Expand All @@ -56,7 +56,7 @@ <h3>Simple landmarks</h3>
<section class="example" id="multiple-landmarks-aria-labelledby">
<h3>Multiple landmarks of the same type and aria-labelledby</h3>

<p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using <code class="language-html">aria-labelledby</code>:</p>
<p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using <code>aria-labelledby</code>:</p>

<pre xml:space="preserve"><code class="language-html">&lt;div aria-labelledby="site-nav-heading" role="navigation"&gt;
&lt;h2 id="site-nav-heading"&gt;Site&lt;/h2&gt;
Expand Down Expand Up @@ -97,7 +97,7 @@ <h3>Multiple landmarks of the same type and aria-label</h3>
</section>
<section class="example" id="search-form">
<h3>Search form</h3>
<p>The following example shows a search form with a "search" landmark. The <code class="language-html">search</code> role typically goes on the <code class="language-html">form</code> element or a <code class="language-html">div</code> surrounding the form:</p>
<p>The following example shows a search form with a "search" landmark. The <code>search</code> role typically goes on the <code>form</code> element or a <code>div</code> surrounding the form:</p>
<pre xml:space="preserve"><code class="language-html">&lt;form role="search"&gt;
&lt;label for="product-search" id="search-label"&gt;Search&lt;/label&gt;
&lt;input id="product-search" placeholder="title, author, or ISBN" type="text"&gt;
Expand All @@ -110,7 +110,7 @@ <h3>Search form</h3>
<h3>Procedure</h3>
<ol>
<li>Examine each element with a <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>.</li>
<li>Examine whether the correct element has been used to mark up content. For example: a <code class="language-html">navigation</code> role has been used to mark up a section with navigation links, or the <code class="language-html">main</code> role is used to contain the page's main content.</li>
<li>Examine whether the correct element has been used to mark up content. For example: a <code>navigation</code> role has been used to mark up a section with navigation links, or the <code>main</code> role is used to contain the page's main content.</li>
<li>If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.</li>
<li>If the same type of landmark appears multiple times on the page, check that each one is given a unique and meaningful accessible name.</li>
</ol>
Expand Down
Loading