Schema.org

Выводим микроразметку в разных ситуациях

Разметка формы поиска

Легче добавить это после формы поиска, чем в саму форму пытаться внедрить разметку.

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://wseo.pw/",
        "potentialAction": {
            "@type": "SearchAction",
            "target": {
                "@type": "EntryPoint",
                "urlTemplate": "https://wseo.pw/search/?q={input-name}"
            },
            "query-input": "required name=input-name"
        }
    }
</script>

Search

• Wrap search components in a parent element role="search" to increase their discoverability to assistive technologies.
• Whenever possible, use the label element to explicitly associate text with form elements. The for attribute of the label must exactly match the id of the form control.
• Some form fields do not need explicit label elements, when next to a button with descriptive text. Ex. search field next to a button labeled search. In these cases you should still have a label in the markup, but you can hide it visually.
• Note that placeholders are not recognized by all assistive technologies, and thus are not adequate replacements for appropriate labeling. Additionally, assistive technologies that do announce placeholders will read the placeholder first, then the input's label and then type of input. So be sure not to repeat an input's label as its placeholder, otherwise it will be announced multiple times.

WCAG 2.1 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)

3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Option #1: Search Input with Visible Label

  <div role="search">
    <label for="search_1" style="display: block;">Search the site:</label>
    <input type="search" name="search" id="search_1" class="search-form__input">
    <button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
  </div>
  

Option #2: Hide the label element

  <div role="search">
    <label for="search_2" class="visuallyhidden">Search the site</label>
    <input type="search" name="search" id="search_2" class="search-form__input" placeholder="search for...">
    <button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
  </div>
  

Option #3: Use aria-label

  <div role="search">
    <input type="search" name="search" aria-label="Search">
    <button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
  </div>

Show Markup Example

<section class="search-section">
  <h3>Option #1: Search Input with Visible Label</h3>
  <div role="search">
    <label for="search_1" style="display: block;">Search the site:</label>
    <input type="search" name="search" id="search_1" class="search-form__input" />
    <button type="submit"><span class="visuallyhidden">Perform</span>Search</button>
  </div>
<div class="break"></div>
<h3>Option #2: Hide the label element</h3>

<div role="search">

<label for="search_2" class="visuallyhidden">Search the site</label>

<input type="search" name="search" id="search_2" class="search-form__input" placeholder="search for..." />

<button type="submit"><span class="visuallyhidden">Perform</span>Search</button>

</div>
<div class="break"></div>
<h3>Option #3: Use aria-label</h3>

<div role="search">

<input type="search" name="search" aria-label="Search">

<button type="submit"><span class="visuallyhidden">Perform</span>Search</button>

</div>

</section>

Copy

 Copied!