### Example of Plain Text Document Structure Source: https://github.com/w3c/silver/blob/main/methods/visually-distinct/examples.html This snippet provides an example of a plain text document, illustrating basic paragraph and heading separation. It shows how content flows naturally without any special formatting or markup, relying solely on line breaks and blank lines for structure. This format is suitable for simple, unformatted textual content. ```Text Here’s the end of a paragraph about something very interesting that you’re fascinated in and want to read more about. Here’s a heading to describe the next block of text Here’s the beginning of a new paragraph about something even more interesting than the previous paragraph that was, frankly, amazing. ``` -------------------------------- ### Inapplicable Image with Non-Empty Alt Attribute (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example demonstrates an `img` element that is not subject to the 'purely decorative' evaluation because it explicitly provides meaningful alternative text via its `alt` attribute. This ensures it is included in the accessibility tree and its content is conveyed to assistive technologies. ```HTML

``` -------------------------------- ### Setting Primary Page Language in HTML Source: https://github.com/w3c/silver/blob/main/how-tos/changes-of-natural-language/get-started.html This HTML snippet demonstrates how to declare the primary human language of an entire web page using the 'lang' attribute on the '' tag. This is crucial for assistive technologies to correctly interpret and pronounce content, ensuring the entire document is processed with the appropriate language rules. ```HTML Example Page

Welcome

This is some content in English.

``` -------------------------------- ### Supplementing Content with Images in HTML Source: https://github.com/w3c/silver/blob/main/methods/informative-images/examples.html This example shows an image that supplements nearby text. The `alt` attribute describes visual information not fully explained in the surrounding text, such as 'A dog with a bell attached to its collar.' This ensures that users understand the visual context even if the image is not displayed. ```HTML

Dog with a bell attached to its collar. Off-duty guide dogs often wear ...

``` -------------------------------- ### Linking an Image as a Print Preview Icon - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This example shows how to create a link using an image as a print preview icon. The link directs to a version of the page with a print stylesheet applied. The `alt` attribute provides a concise description of the link's function, ensuring accessibility for users who cannot see the image. ```HTML

``` -------------------------------- ### Annotating Captions with 3D Coordinates (Room Scale) - XML Source: https://github.com/w3c/silver/blob/main/methods/audio-metadata/examples.html This XML snippet demonstrates how to attach 3-axis (x, y, z) spatial coordinates to captions for room-scale experiences. This allows for precise determination of the sound source's location, enabling users to move freely and interact with digital/physical objects based on sound direction. The example is adapted from W3C TTML1. ```XML

It seems a paradox, does it not,

that the image formed on
the Retina should be inverted?

It is puzzling, why is it
we do not see things upside-down?

``` -------------------------------- ### Declaring Decorative Image with Empty Alt Attribute (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example demonstrates an `img` element correctly identified as purely decorative. It uses an empty `alt` attribute, which excludes it from the accessibility tree, making it suitable for images that do not convey essential information. ```HTML

Happy new year!

``` -------------------------------- ### Basic Document Structure with Markdown Source: https://github.com/w3c/silver/blob/main/methods/visually-distinct/examples.html This Markdown example illustrates a basic document structure, including a top-level title and a second-level heading, followed by introductory and body paragraphs. It showcases how Markdown can be used to organize content hierarchically. This snippet is useful for understanding the fundamental layout of a Markdown document. ```Markdown # An exciting document title Here’s the introduction to the document, hopefully with a summary to help readers understand if the contents will be useful to them. ## Here’s an interesting second-level heading This is the beginning of an interesting paragraph of text that you, dear reader, will hopefully enthuse about. ``` -------------------------------- ### Using an Image as a Heading with Alt Text in HTML Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML snippet demonstrates using an image as the content of an `

` heading. The `alt` attribute provides the text 'Get Happy!', which is the exact text displayed in the image, ensuring the heading's content is accessible even when presented graphically. ```HTML

``` -------------------------------- ### Functional Stand-alone Icon - HTML/JavaScript Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This example demonstrates a stand-alone icon image that serves a specific function, in this case, activating the print dialog. The `alt` attribute is set to 'Print this page' to clearly describe the action performed when the icon is activated, making its purpose accessible. ```HTML

``` -------------------------------- ### Failing Non-Decorative Image with Empty Alt (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example demonstrates an `img` element that fails accessibility because it is not purely decorative (it's a logo) but has an empty `alt` attribute. This makes it inaccessible to users of assistive technologies who rely on the `alt` text to understand the image's content. ```HTML

``` -------------------------------- ### Editor Interface Buttons with Informative Icons - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This example presents a list of buttons within an editor interface, each using an icon to represent a specific action. Crucially, each image's `alt` attribute is set to the corresponding action name (e.g., 'Bold', 'Italics'), providing essential accessibility for users who rely on screen readers. ```HTML

``` -------------------------------- ### Applying Background Image to Div in HTML Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example illustrates a `div` element with an inline background image. Background images are typically handled by CSS and are not directly part of the accessibility tree in the same way `img` elements are, requiring separate testing considerations. ```HTML

Happy new year!

``` -------------------------------- ### Failing Non-Decorative Image with role='none' (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example illustrates an `img` element that fails accessibility. It has meaningful content (a logo) but is incorrectly marked with `role="none"`, which removes its semantic meaning and hides it from assistive technologies, making its content inaccessible. ```HTML

``` -------------------------------- ### Declaring Decorative Image with role='none' (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example illustrates an `img` element designated as purely decorative by setting its `role` attribute to `none`. This explicit semantic role removes the element's default semantics, causing assistive technologies to ignore it, regardless of its `alt` attribute content. ```HTML

Happy new year!

``` -------------------------------- ### Displaying Guidelines with Liquid in Jekyll Source: https://github.com/w3c/silver/blob/main/prototypes/PlainLanguage/home.html This Liquid templating snippet iterates through all pages in the Jekyll site. It checks if a page's layout is 'guideline' and, if so, generates an HTML link to that guideline. The link text includes the guideline's success criteria and title, providing a dynamic navigation list for all documented guidelines. ```Liquid {% for instance in site.pages %} {% if instance.layout=="guideline"%} [Guideline {{instance.successCriteria}}: {{instance.successCriteriaTitle}}]({{instance.successCriteria}}/index.html) {% endif %} {% endfor %} ``` -------------------------------- ### Specifying Language for Content Blocks in HTML Source: https://github.com/w3c/silver/blob/main/how-tos/changes-of-natural-language/get-started.html This HTML snippet illustrates how to declare a language change for a specific block or phrase of content within a page using the 'lang' attribute on elements like '

' or ''. This ensures that assistive technologies switch to the correct pronunciation rules for the embedded text, preventing mispronunciations when a different language is introduced. ```HTML

The French phrase for 'hello' is Bonjour.

Dies ist ein Absatz auf Deutsch.

This paragraph is in German.

``` -------------------------------- ### Conveying Succinct Information with Images in HTML Source: https://github.com/w3c/silver/blob/main/methods/informative-images/examples.html This snippet illustrates using an image to convey simple, succinct information. The `alt` attribute provides a brief, descriptive sentence ('Push the cap down and turn it counter-clockwise.') that summarizes the visual instruction, making the content accessible and understandable without the image. ```HTML

Push the cap down and turn it counter-clockwise.

``` -------------------------------- ### Positioning Image Off-Screen with CSS Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example shows an `img` element that is not visible because it is positioned far off-screen using CSS. The `position: absolute` and `top: -9999em` properties effectively remove it from the viewport, making it visually inaccessible. ```HTML

``` -------------------------------- ### Drawing Text on Accessible Canvas with JavaScript Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example demonstrates a `canvas` element with a `role="img"` and `aria-label` attribute, making it semantically an image with an accessible name. The accompanying JavaScript draws text onto the canvas, providing visual content for the accessible image. ```HTML

``` -------------------------------- ### Implementing a Three-Column HTML Layout with Headings Source: https://github.com/w3c/silver/blob/main/methods/headings-in-html/examples.html This example illustrates an HTML structure for a three-column page layout. It highlights how the main content's `h1` can be placed within the middle column, not necessarily as the first element on the page, while side columns use `h2`, reflecting the content's relative importance rather than strict sequential order. ```HTML Stock Market Up Today

Site Navigation

Stock Market up today

Space Teddy Inc.

An inside look at the new Space Teddy 6

…

Cotton Fur

…

``` -------------------------------- ### Creating Six Levels of Headings in Markdown Source: https://github.com/w3c/silver/blob/main/methods/visually-distinct/examples.html This Markdown snippet demonstrates the syntax for creating six different levels of headings using the `#` symbol. It highlights the importance of having a blank line before headings for proper conversion to other formats. This standard Markdown practice ensures consistent rendering across various platforms and tools. ```Markdown # Heading level one ## Heading level two ### Heading level three #### Heading level four ##### Heading level five ###### Heading level six ``` -------------------------------- ### Failing Non-Decorative Image with aria-hidden (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example shows an `img` element that fails accessibility. Despite having an `alt` attribute with meaningful text, it is incorrectly hidden from the accessibility tree using `aria-hidden="true"`, preventing assistive technologies from conveying its content to users. ```HTML ``` -------------------------------- ### Positioning Captions with Angular Position (Sit Down) - XML Source: https://github.com/w3c/silver/blob/main/methods/audio-metadata/examples.html This XML snippet illustrates how to position captions for sit-down experiences, where the user remains stationary but can rotate. Captions are positioned using an angular 'position' attribute (0-360 degrees) instead of 3D coordinates, allowing for directional sound based on the user's rotation. This provides an alternative method for spatial audio in fixed-position scenarios. ```XML

It seems a paradox, does it not,

that the image formed on
the Retina should be inverted?

It is puzzling, why is it
we do not see things upside-down?

``` -------------------------------- ### Alt Text for Custom Character Images (HTML) Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML example uses an `` tag to represent a custom currency symbol. The `alt` attribute provides the pronunciation, 'euro ', making the character accessible. It highlights that images should only be used when Unicode characters are not suitable, such as for non-standard or decorative characters. ```HTML

Only euro 5.99!

``` -------------------------------- ### Failing Non-Decorative SVG with Empty Accessible Name (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example demonstrates an `svg` element that fails accessibility. It represents a meaningful graphic (W3C logo) but lacks an accessible name, despite having a semantic role. This prevents assistive technologies from conveying its purpose or content to users. ```HTML

Best W3C logo:

``` -------------------------------- ### Declaring Decorative SVG without Accessible Name (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example demonstrates an `svg` element correctly treated as purely decorative. It lacks any attributes that would provide an accessible name, ensuring it is ignored by assistive technologies, which is appropriate for purely visual, non-informative graphics. ```HTML

Happy new year!

``` -------------------------------- ### Styling Text with Relative Units in CSS Source: https://github.com/w3c/silver/blob/main/methods/visually-distinct/examples.html This CSS snippet demonstrates the use of relative units like `rem` and `em` for text sizing and margins, ensuring text resizes proportionally with user browser settings for improved accessibility. It also shows unitless `line-height` for adaptive line spacing based on computed font size. This approach maintains visual consistency and responsiveness across different display environments. ```CSS :root{ font-size:100%; } body{ font-size:1rem; } h1, .h1{ font-size:2.441rem; font-weight:700; line-height:1.25; margin:0.8em 0 0.262em; } h2, .h2{ font-size:1.953rem; font-weight:700; line-height:1.25; margin:1em 0 0.262em; } p{ margin-top:0; } ``` -------------------------------- ### Indicating File Format with Images in HTML Source: https://github.com/w3c/silver/blob/main/methods/informative-images/examples.html This snippet shows how images can indicate file formats within text links. The `alt` attributes ('[HTML]', '[Word document]', '[PDF]') clearly distinguish the file type for each download link, improving usability and accessibility by informing users about the expected file format before they click. ```HTML

2012 Annual report and accounts $HTML$ (43KB) , also available in $Word document$ (254KB) or $PDF$ (353KB) format.

``` -------------------------------- ### Creating a Transparent Canvas Element in HTML Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This snippet shows a `canvas` element that is not visible because it is completely transparent by default. Without any drawing operations or background, a canvas element remains visually empty. ```HTML

``` -------------------------------- ### Creating a Submit Button with an Image Input - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This example demonstrates creating a form submit button using an `` element. The `src` attribute specifies the image to be used, and the `alt` attribute provides an accessible text alternative for the button's purpose. This method allows using a custom image for form submission. ```HTML ``` -------------------------------- ### Declaring Decorative Image with aria-hidden (HTML) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example shows an `img` element marked as purely decorative using `aria-hidden="true"`. This attribute explicitly hides the element from assistive technologies, ensuring it is not announced, even if it has other attributes like `role="img"` or an `alt` attribute. ```HTML

Happy new year!

``` -------------------------------- ### Creating a Linked Image with Text Alternative in HTML Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML snippet demonstrates how to embed an image that serves as a link to a newsletter. The `alt` attribute provides a comprehensive text alternative that matches the visible text within the image, ensuring accessibility for users who cannot see the image. ```HTML Free newsletter. Get free recipes, news, and more. Learn more.

``` -------------------------------- ### Including Visible Image in Accessibility Tree in HTML Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This snippet shows an `img` element that is both visible and included in the accessibility tree, providing an `alt` attribute. While it might lead to redundant announcements if text is also present, it correctly conveys the image's purpose to assistive technologies. ```HTML

PDF document ``` -------------------------------- ### Failing Non-Decorative Canvas with Empty Accessible Name (HTML, JS) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example shows a `canvas` element that fails accessibility. It displays meaningful text ('WCAG Rules!') but lacks an accessible name. This prevents assistive technologies from conveying the canvas's content, making it inaccessible to users who cannot perceive the visual output. ```HTML

``` -------------------------------- ### Hiding Image Element in HTML Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This snippet demonstrates an `img` element that is neither visible nor included in the accessibility tree due to its `display:none` style. It illustrates how an element can be programmatically hidden from both visual rendering and assistive technologies. ```HTML ``` -------------------------------- ### Referencing Broken Image Source in HTML Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This snippet demonstrates an `img` element with an `src` attribute pointing to a non-existent image file. This will cause the image request state to be 'Broken', resulting in a broken image icon being displayed by the browser. ```HTML

``` -------------------------------- ### HTML Multilingual Newsletter Example Source: https://github.com/w3c/silver/blob/main/how-tos/changes-of-natural-language/examples.html This HTML snippet demonstrates how to define the primary language of a document using `lang="es"` on the `` tag and how to switch to a different language for specific content blocks using `lang="en"` on a `

` tag. This ensures proper rendering, accessibility, and search engine indexing for multilingual content. ```HTML boletín escolar

¡Hemos comenzado a contar las últimos días antes de verano! Es hora de apreciar el arduo trabajo de los maestros y los estudiantes por un flujo constante de compromiso en el mejor trabajo que existe, el desarrollo infantil. Qué tremendo tiempo hemos tenido. Estoy asombrado por los logros del año.

We have started counting down the last days before summer! It is time to appreciate the hard work of the staff and students for a steady stream of engagement in the best work there is, childhood development. What a tremendous time we have had. I am in awe of the year’s accomplishments.

``` -------------------------------- ### Using longdesc for Detailed Illuminated Letter Descriptions (HTML) Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML example demonstrates using both `alt` and `longdesc` attributes for an illuminated letter. The `alt` attribute provides the character 'O', while `longdesc` links to 'letters/story-0.html' for a more detailed description of the letter's design, useful when visual details are crucial for understanding. ```HTML

nce upon a time and a long long time ago...

``` -------------------------------- ### Declaring Decorative Canvas without Accessible Name (HTML, JS) Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This example shows a `canvas` element correctly identified as purely decorative. It has no attributes providing an accessible name, making it ignored by assistive technologies. The JavaScript code draws a simple graphic, reinforcing its visual-only, non-informative purpose. ```HTML

Happy new year!

``` -------------------------------- ### Indicating All Inputs Required with Page Instructions (HTML) Source: https://github.com/w3c/silver/blob/main/methods/required-inputs-indicated/examples.html This example shows how to inform users that all form inputs are required by providing a general instruction at the top of the page using a

tag. Individual input fields use 'aria-required="true"' to programmatically convey their required status. ```HTML

Note: All inputs are required

Name Email ``` -------------------------------- ### Concise Alt Text for Advertising Images (HTML) Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML snippet demonstrates providing `alt` text for an advertising image. The `alt` attribute contains a concise description, 'The BIG sale ...ends Friday.', avoiding repetition for visual effects to prevent confusion for screen reader users. It ensures the core message is conveyed without unnecessary verbosity. ```HTML

The BIG sale ...ends Friday.

``` -------------------------------- ### Decorative Logo Image within Link Text - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This example shows a logo image used within a link that also contains descriptive text. Since the image is purely decorative and its information is redundant with the link text, its `alt` attribute is intentionally left empty (`alt=""`) to prevent screen readers from announcing duplicate information, improving user experience. ```HTML

W3C Home ``` -------------------------------- ### Displaying W3C Accessibility Guidelines Flavor (HTML/Bootstrap) Source: https://github.com/w3c/silver/blob/main/prototypes/FlavorPrototype/site/componentExamples.html This HTML snippet demonstrates how to structure a 'flavor' section using Bootstrap's grid system. It includes a column, a flavor-specific area, a title, and placeholder content, illustrating the visual presentation of a W3C Accessibility Guideline 'flavor'. This example uses Bootstrap classes like 'col-md-6' for layout. ```HTML

W3 Accessibility Guidelines Core

Lorem ipsum...

``` -------------------------------- ### Labeling Content with Images in HTML Source: https://github.com/w3c/silver/blob/main/methods/informative-images/examples.html This snippet demonstrates how to use images as labels for associated content, such as phone or fax numbers. The `alt` attribute provides a clear text alternative ("Telephone", "Fax") to identify the purpose of the image and the following number, ensuring accessibility for users who cannot see the image. ```HTML

Telephone : 0123 456 7890

Fax: 0123 456 7891

``` -------------------------------- ### Linked Logo Image with Alt Text - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This snippet demonstrates a linked logo image where the image is the sole content of the link. The `alt` attribute is set to 'W3C home' to clearly describe the link's destination for assistive technologies, ensuring accessibility when the image is the only interactive element. ```HTML

``` -------------------------------- ### Embedding Decorative Text Image with Alt Text in HTML Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML snippet shows an image used to convey a slogan with decorative effects. The `alt` attribute provides the slogan text, 'Your access to the city', without describing the decorative styling, as the styling is not relevant to the image's core meaning. ```HTML Your access to the city.

``` -------------------------------- ### Indicating Required Input with Image and Instructions (HTML) Source: https://github.com/w3c/silver/blob/main/methods/required-inputs-indicated/examples.html This example demonstrates using an image as a non-text indicator for required fields, such as a star icon. A paragraph explains the image's meaning, and the image is included both in the legend and within the label itself, with the 'required' attribute on the input. ```HTML

Note: denotes a required field

``` -------------------------------- ### Defining Headings in Native iOS (Apple News JSON) Source: https://github.com/w3c/silver/blob/main/methods/relevant-headings/examples.html This JSON snippet demonstrates how to define a heading component within the Apple News format for native iOS applications. It specifies the role as "heading" and provides the text content for the heading, enabling accessibility services to identify it as a heading. ```JSON { "components": [ { "role": "heading", "text": "Mars - Earth’s neighbor" } ] } ``` -------------------------------- ### Linking an Image of Text as a Logo (External) - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This snippet demonstrates how to use an image of text as a linked logo, pointing to an external website (W3C). It emphasizes providing a brief, descriptive `alt` attribute for accessibility, indicating the link's target. This is a common pattern for navigation or branding elements. ```HTML

``` -------------------------------- ### Informative Icon within Link Text - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This snippet illustrates an icon image placed within a link to convey additional information, specifically that the link opens in a new window. The `alt` attribute is set to 'new window' to provide this crucial context to users of assistive technologies, ensuring they are aware of the link's behavior. ```HTML W3C Homepage

``` -------------------------------- ### Image Input Button with Alt Text - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This snippet shows an `` element used as a button. The `alt` attribute is set to 'Search' to provide a textual description of the button's purpose (a magnifying lens icon), ensuring accessibility for users who cannot see the image. ```HTML ``` -------------------------------- ### Embedding SVG within an Accessible Link in HTML Source: https://github.com/w3c/silver/blob/main/methods/decorative-images/examples.html This snippet illustrates an `svg` element nested within an `` tag. The `svg` is ignored for accessibility purposes because the parent link provides its accessible name via the `aria-label` attribute, making the SVG content redundant for screen readers. ```HTML ``` -------------------------------- ### Alt Text for Illuminated Manuscript Letters (HTML) Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML snippet shows how to provide `alt` text for an image representing a single character, like an illuminated letter in a manuscript. The `alt` attribute simply contains the character itself, 'O', ensuring that the character's meaning is conveyed to assistive technologies. ```HTML

nce upon a time and a long long time ago...

``` -------------------------------- ### Embedding Accessible Pie Chart Image in HTML Source: https://github.com/w3c/silver/blob/main/methods/informative-images/examples.html This snippet demonstrates how to embed an image of a pie chart using the `` tag and provide a comprehensive textual description of its content via the `alt` attribute. The `alt` attribute ensures that users who cannot see the image (e.g., screen reader users) still receive the essential information conveyed by the chart. It's crucial for accessibility, especially for complex graphical representations. ```HTML A pie chart is titled Browser Share. The pie chart shows the percentages of users who prefer different browsers: Firefox 40%, Internet Explorer 25%, Chrome 25%, Safari 6% and Opera 4%.

A pie chart is titled Browser Share. The pie chart shows the percentages of users who prefer different browsers: Firefox 40%, Internet Explorer 25%, Chrome 25%, Safari 6% and Opera 4%.

``` -------------------------------- ### Embedding Mathematical Expression Image with Detailed Alt Text in HTML Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML snippet shows an image of a recurring decimal number. The `alt` attribute provides the numerical value and a crucial description of how the recurrence is visually indicated, ensuring that important visual information is conveyed to users who cannot see the image. ```HTML 0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)

0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)

``` -------------------------------- ### Distinguishing Navigation Landmarks with aria-label in HTML Source: https://github.com/w3c/silver/blob/main/prototypes/FlavorPrototype/site/1-1-1/aria.html This example demonstrates how to use the `aria-label` attribute to provide unique, accessible labels for multiple navigation landmarks of the same type on a single HTML page. It is particularly useful when no existing text can serve as a label, allowing assistive technologies to differentiate between similar elements. ```HTML ``` -------------------------------- ### Embedding an Image as a Search Button Icon - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This snippet illustrates embedding an image within a ` ``` -------------------------------- ### Structuring Content with HTML Headings Source: https://github.com/w3c/silver/blob/main/prototypes/PlainLanguage/_site/2-4-10/alt2.html This example demonstrates the hierarchical application of HTML heading tags (H1, H2, H3) to structure content, such as a menu. H1 is used for the main page title, H2 for major sections, and H3 for sub-sections, which significantly aids navigation and readability for all users, particularly those relying on screen readers. ```HTML

``` -------------------------------- ### Linked Text Logo with Alt Text and Dimensions - HTML Source: https://github.com/w3c/silver/blob/main/methods/functional-images/examples.html This snippet shows a linked logo image that is an image of text. The `alt` attribute is set to 'W3C web site' to describe the link's destination. `width` and `height` attributes are also included for layout stability, demonstrating best practices for accessible linked images. ```HTML

``` -------------------------------- ### Creating ARIA Level 7 Headings in HTML Source: https://github.com/w3c/silver/blob/main/methods/headings-in-html/examples.html This snippet demonstrates how to implement a heading beyond HTML's native `h6` limit using ARIA attributes. By applying `role="heading"` and `aria-level="7"` to a `div` element, it provides semantic meaning for deeper content hierarchies where standard HTML heading elements are insufficient. ```HTML

Fruit Trees

...

Apples

Apples grow on trees in areas known as orchards...

...

Jonagold

Jonagold is a cross between the Golden Delicious and Jonathan varieties...

``` -------------------------------- ### Embedding an Unlinked Logo Image with Text Alternative in HTML Source: https://github.com/w3c/silver/blob/main/methods/images-of-text/examples.html This HTML snippet displays an unlinked logo image. The `alt` attribute provides the organization's name, 'Web Accessibility initiative', which is the essential information conveyed by the logo, without explicitly stating it's a 'logo' since it's not functional. ```HTML

``` -------------------------------- ### Iterating and Displaying Silver Guidelines with Liquid Source: https://github.com/w3c/silver/blob/main/prototypes/FlavorPrototype/home.html This Liquid code block iterates through all pages available on the site. It conditionally displays a link and description for each page identified as a 'guideline' based on its layout property, dynamically generating the list of guidelines. ```Liquid {% for instance in site.pages %} {% if instance.layout=="guideline"%} [Guideline {{instance.successCriteria}}: {{instance.successCriteriaTitle}}]({{instance.successCriteria}}/index.html) - {{instance.description}} {% endif %} {% endfor %} ``` -------------------------------- ### Indicating Page and Section Language in HTML Source: https://github.com/w3c/silver/blob/main/how-tos/changes-of-natural-language/develop.html This HTML example demonstrates how to set the primary language of a web page to Dutch ('lang="nl"') on the '' element, ensuring the page title is also correctly pronounced. It further illustrates how to override the language for a specific paragraph to English ('lang="en"') to ensure correct pronunciation by assistive technologies for multilingual content within the same page. ```HTML Met de kippen op stok

"Hij ging met de kippen op stok"

This Dutch phrase literally translates into "He went to roost with the chickens", but it means that he went to bed early.

``` -------------------------------- ### Modifying Contact Us Link Behavior (JavaScript) Source: https://github.com/w3c/silver/blob/main/prototypes/TestingDummyExamples/login-separate-pages/contact-us.html This JavaScript snippet executes once the DOM is fully loaded. It selects an HTML element with the class 'contact-us-link', updates its 'href' attribute to the current page's URL, and then attaches an event listener to prevent the default navigation action when the link is clicked. This setup is useful for dynamic link handling or testing scenarios where navigation should be suppressed. ```JavaScript document.addEventListener("DOMContentLoaded", function(e){ const contactUsLink = document.querySelector(".contact-us-link"); const currentUrl = window.location.href; contactUsLink.setAttribute("href", currentUrl); contactUsLink.addEventListener("click", function(e){ e.preventDefault(); }, false); }); ``` -------------------------------- ### Associating Instructions with aria-describedby (HTML) Source: https://github.com/w3c/silver/blob/main/methods/instructions-available-at-input/examples.html This snippet illustrates how to provide data entry instructions in a separate element (e.g., ) and programmatically associate it with an input field using the aria-describedby attribute. This approach allows for more flexible placement of instructions and ensures that assistive technologies announce the descriptive information after the label, providing additional context to the user. ```HTML DateMM/DD/YYYY ``` -------------------------------- ### Displaying W3C Accessibility Guidelines Core Flavor using Bootstrap HTML Source: https://github.com/w3c/silver/blob/main/prototypes/PlainLanguage/site/componentExamples.html This HTML snippet demonstrates how to structure a 'flavor' section using Bootstrap classes. It creates a column, a container for the flavor content, and displays the 'W3 Accessibility Guidelines Core' title along with placeholder text. This structure is intended for visually presenting different accessibility guideline categories. ```HTML

W3 Accessibility Guidelines Core

Lorem ipsum...

``` -------------------------------- ### Providing Instructions within Label Element (HTML) Source: https://github.com/w3c/silver/blob/main/methods/instructions-available-at-input/examples.html This snippet demonstrates how to include data entry instructions directly within the element. This method is simple, reliable across browsers and assistive technologies, and suitable for straightforward use cases where the instruction is concise and directly related to the label text. It shows how to specify a date format (MM/DD/YYYY) for an input field. ```HTML Date of Birth (MM/DD/YYYY) ``` -------------------------------- ### Defining a Basic Jekyll Layout with Liquid Includes Source: https://github.com/w3c/silver/blob/main/prototypes/PlainLanguage/_layouts/default.html This Liquid template snippet illustrates a standard Jekyll layout. It includes 'head.html' for the document's head section, 'foot.html' for the footer, and uses '{{ content }}' as a placeholder where the specific page's rendered content will be inserted. This structure promotes reusability and consistency across a website. ```Liquid {% include head.html %} {{ content }} {% include foot.html %} ``` -------------------------------- ### Displaying W3 Accessibility Guidelines Core Flavor (HTML) Source: https://github.com/w3c/silver/blob/main/prototypes/PlainLanguage/_site/componentExamples.html This HTML snippet demonstrates how to structure a 'flavor' section using Bootstrap classes. It creates a column (`col-md-6`) containing a 'flavor-area' with a title and placeholder paragraph, specifically for the 'W3 Accessibility Guidelines Core' flavor. This structure is intended for displaying different categories of accessibility guidelines. ```HTML

W3 Accessibility Guidelines Core

Lorem ipsum...

```

Welcome

` heading. The `alt` attribute provides the text 'Get Happy!', which is the exact text displayed in the image, ensuring the heading's content is accessible even when presented graphically. ```HTML

Site Navigation

Stock Market up today

Related links

Space Teddy Inc.

An inside look at the new Space Teddy 6

Cotton Fur

W3 Accessibility Guidelines Core

MENU

Appetizers

Salads

Soups

Entree

Dessert

Fruit Trees

Apples

W3 Accessibility Guidelines Core

W3 Accessibility Guidelines Core