From 4b8208aa4ea4ccf3d2b6cf8b590bc4324479ee56 Mon Sep 17 00:00:00 2001
From: alinkedd <alina.listunova@gmail.com>
Date: Mon, 20 May 2024 17:49:06 +0200
Subject: [PATCH 1/6] Fix homepage translations

---
 homepage.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/homepage.yml b/homepage.yml
index 9285953..fd73056 100644
--- a/homepage.yml
+++ b/homepage.yml
@@ -54,7 +54,7 @@ translations:
   - key: newsletter.stay_tuned
     t: Будьте на зв'язку
   - key: newsletter.leave_your_email
-    t: Залиште свою електронну адресу, щоб дізнатися про наступні опитуваннях.
+    t: Залиште свою електронну адресу, щоб дізнатися про наступні опитування.
   - key: newsletter.email
     t: Ваша електронна адреса
   - key: newsletter.submit

From 2c5a63bafe13f494234c2de276d0b56257c9abb8 Mon Sep 17 00:00:00 2001
From: alinkedd <alina.listunova@gmail.com>
Date: Mon, 20 May 2024 17:53:24 +0200
Subject: [PATCH 2/6] Add state of html files

---
 state_of_html.yml      | 908 +++++++++++++++++++++++++++++++++++++++++
 state_of_html_2023.yml | 172 ++++++++
 2 files changed, 1080 insertions(+)
 create mode 100644 state_of_html.yml
 create mode 100644 state_of_html_2023.yml

diff --git a/state_of_html.yml b/state_of_html.yml
new file mode 100644
index 0000000..1a77fa4
--- /dev/null
+++ b/state_of_html.yml
@@ -0,0 +1,908 @@
+locale: ua-UA
+namespace: html
+translations:
+  ###########################################################################
+  # General
+  ###########################################################################
+  # Intro for stateofhtml.com
+  - key: general.state_of_html.intro
+    # aliasFor: general.html2023.survey_intro # Can we do that?
+    t: |
+      While web developers tend to focus on JavaScript and CSS, none of what we do would be possible without HTML acting as the foundation.
+
+      It has long seemed like HTML wasn't evolving, but things may be changing.
+      New elements like `<selectlist>` are on the horizon, cool new features like popovers,
+      and a swath of related browser APIs (Web Components, PWAs, etc.).
+
+      This year, [Lea Verou](https://lea.verou.me/) took on the formidable task of leading the design of this brand new survey, from content to UX and beyond.
+
+      Building on the success of [State of JS](http://stateofjs.com/) and [State of CSS](https://stateofcss.com/), we introduce **State of HTML**;
+      the last missing piece that completes the trilogy, so we can track the evolution of the web platform as a whole.
+
+      Benefits to you:
+      - Survey results are **used by browsers** and standards groups **for roadmap prioritization**.
+      Your responses can help get features you care about implemented, browser incompatibilities being prioritized, and gaps in the platform being addressed.
+      - Learn about new and upcoming features; add features to your reading list and get a list of resources at the end!
+      - Get a personalized knowledge score and see how you compare to other respondents
+
+      The survey will be open for 3 weeks, but responses entered **within the first 9 days (until October 1st)** will have a much higher impact on the Web,
+      as preliminary data will be used for certain prioritization efforts that have deadlines before then.
+
+  - key: general.state_of_html.description
+    t: The annual developer survey about the web platform
+
+  ###########################################################################
+  # Sections
+  ###########################################################################
+
+  - key: sections.forms.title
+    t: Forms
+  - key: sections.forms.description
+    t: Form-related elements and attributes
+
+  - key: sections.interactivity.title
+    t: Interactivity
+  - key: sections.interactivity.description
+    t: APIs that enable richer user interactions.
+
+  - key: sections.web_components.title
+    t: Web Components
+  - key: sections.web_components.description
+    t: Making & using web components.
+
+  - key: sections.content.title
+    t: Content
+  - key: sections.content.description
+    t: Embedding, multimedia, data, and other content-related features.
+
+  - key: sections.external_content.title
+    t: External Content
+  - key: sections.external_content.description
+    t: Embedding external resources, and other multimedia APIs.
+
+  - key: sections.accessibility.title
+    t: Accessibility
+  - key: sections.accessibility.description
+    t: Making sites and apps accessible by all.
+
+  - key: sections.mobile_web_apps.title
+    t: Native-like Web Apps
+  - key: sections.mobile_web_apps.description
+    t: Authoring mobile and desktop-optimized web apps.
+
+  - key: sections.other_features.title
+    t: Other Features
+  - key: sections.other_features.description
+    t: Other HTML elements & browser APIs.
+
+  - key: sections.other_tools.title
+    t: Other Tools & Features
+  - key: sections.other_tools.description
+    t: Other tools or features you use as part of your work.
+
+  - key: sections.usage.title
+    t: Usage
+  - key: sections.usage.description
+    t: How you use HTML.
+
+  ###########################################################################
+  # Features
+  ###########################################################################
+
+  # forms
+
+  - key: features.form_controls
+    t: Form Controls
+  - key: features.form_controls.question
+    t: Which form controls have you used?
+
+  - key: features.form_input_types
+    t: Input Types
+  - key: features.form_input_types.question
+    t: Which input types have you used?
+  - key: options.form_input_types.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.form_validation_features
+    t: Form Validation
+  - key: features.form_validation_features.question
+    t: Which of the following form validation features have you used?
+  - key: options.form_validation_features.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.forms_pain_points
+    t: Form Pain Points
+  - key: features.forms_pain_points.question
+    t: What are your pain points around HTML forms?
+  - key: features.forms_pain_points.prompt
+    t: |
+      Think of the various form controls (e.g. `<input>`, `<textarea>`, `<select>`, `<button>` etc.),
+      behaviors (e.g. validation, autocomplete), handling forms via JS, editing APIs (e.g. `contentEditable`) etc.
+      Anything that bothers you is fair game — browser support, missing features, styling, etc.
+  - key: features.forms_pain_points.placeholder
+    t: |
+      Pain point #{index}…
+
+  # interactivity
+
+  - key: features.dom_attribute_features
+    t: DOM Attribute-related methods
+  - key: features.dom_attribute_features.question
+    t: Which of the following DOM attribute-related methods have you used?
+
+  - key: features.dom_html_features
+    t: HTML String-handling Features
+  - key: features.dom_html_features.question
+    t: Which of the following DOM HTML string-handling features have you used?
+
+  - key: features.dom_methods
+    t: Element reparenting DOM Methods
+
+  - key: features.dom_moving_element_features
+    t: Element-moving DOM Methods
+  - key: features.dom_moving_element_features.question
+    t: Which of the following element-moving DOM methods have you used?
+  # - key: options.dom_methods.element_innerhtml.description
+  #   t: |
+  #     `element.innerHTML = rawHTML`
+  # - key: options.dom_methods.element_textcontent.description
+  #   t: |
+  #     `element.textContent = text`
+  # - key: options.dom_methods.element_insert_adjacent_html.description
+  #   t: |
+  #     `element.insertAdjacentHTML("beforebegin", rawHTML)`
+  # - key: options.dom_methods.element_insert_adjacent_element.description
+  #   t: |
+  #     `element.insertAdjacentElement("afterend", otherElement)`
+  # - key: options.dom_methods.element_append.description
+  #   t: |
+  #     `parent.append(...children)`
+  # - key: options.dom_methods.element_append_child.description
+  #   t: |
+  #     `parent.appendChild(child)`
+  # - key: options.dom_methods.element_before_after.description
+  #   t: |
+  #     `element.before(otherElement)`
+  # - key: options.dom_methods.element_replace_with.description
+  #   t: |
+  #     Replaced the older `parent.replaceChild(el2, el1)` method.
+  # - key: options.dom_methods.element_replace_child.description
+  #   t: |
+  #     `parent.replaceChild(newChild, oldChild)`
+  # - key: options.dom_methods.element_replace_children.description
+  #   t: |
+  #     `element.replaceChildren(...newChildren)`
+  # - key: options.dom_methods.element_toggle_attribute.description
+  #   t: |
+  #     `element.toggleAttribute("data-selected", isSelected)`
+  # - key: options.dom_methods.document_create_document_fragment.description
+  #   t: |
+  #     `let fragment = document.createDocumentFragment()`
+  - key: options.dom_methods.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.interactivity_pain_points
+    t: Interactivity Pain Points
+  - key: features.interactivity_pain_points.question
+    t: What are your pain points around dynamic HTML changes?
+  - key: features.interactivity_pain_points.prompt
+    t: |
+      Browser incompatibilities or lack of support, missing features, and other problems you face
+      around interactive elements and behaviors (except forms), DOM manipulation, events, and related APIs.
+
+  - key: features.interactivity_pain_points.placeholder
+    t: |
+      Pain point #{index}…
+
+  - key: features.interactivity_techniques
+    t: Interactivity Methods
+  - key: features.interactivity_techniques.question
+    t: Which of these methods have you used to add interactivity or dynamically modify HTML?
+  - key: options.interactivity_techniques.css_for_interactivity
+    t: CSS for interactivity (toggles, tabs, etc.)
+  - key: options.interactivity_techniques.js_dom_libraries
+    t: JavaScript DOM libraries (jQuery, etc.)
+  - key: options.interactivity_techniques.js_framework
+    t: JavaScript frameworks (React, Vue, etc.)
+  - key: options.interactivity_techniques.vanilla_js
+    t: Plain JavaScript (no frameworks or libraries)
+  - key: options.interactivity_techniques.web_components
+    t: Web Components
+  - key: options.interactivity_techniques.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  # content
+
+  - key: features.machine_readable_features
+    t: Machine-Readable Data
+  - key: features.machine_readable_features.question
+    t: Which of the following have you used to include machine-readable data in HTML?
+  - key: options.machine_readable_features.rdfa.description
+    t: |
+      `property`, `typeof`, etc.
+  - key: options.machine_readable_features.json_ld.description
+    t: |
+      `<script type="application/ld+json">`
+  - key: options.machine_readable_features.microdata.description
+    t: |
+      `itemprop`, `itemscope`, etc.
+
+  - key: features.multiple_languages_support
+    t: Multiple-Language Support
+  - key: features.multiple_languages_support.question
+    t: How often do you work on projects that require supporting more than one language?
+  - key: options.multiple_languages_support.never
+    t: Never
+  - key: options.multiple_languages_support.infrequently
+    t: Infrequently (less than once a year)
+  - key: options.multiple_languages_support.frequently
+    t: Frequently (more than once a year)
+  - key: options.multiple_languages_support.all_the_time
+    t: All the time
+
+  - key: features.i18n_features
+    t: Internationalization Features
+  - key: features.i18n_features.question
+    t: Which of the following internationalization features have you used?
+  - key: options.i18n_features.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  # - key: options.i18n_features.intl_datetimeformat.description
+  #   t:
+  # - key: options.i18n_features.intl_collator.description
+  #   t:
+  # - key: options.i18n_features.intl_listformat.description
+  #   t:
+  # - key: options.i18n_features.intl_numberformat.description
+  #   t:
+  # - key: options.i18n_features.intl_messageformat.description
+  #   t:
+  # - key: options.i18n_features.intl_pluralrules.description
+  #   t:
+  # - key: options.i18n_features.intl_relative_time_format.description
+  #   t:
+  # - key: options.i18n_features.intl_segmenter.description
+  #   t:
+  # - key: options.i18n_features.intl_localematcher.description
+  #   t:
+
+  - key: features.content_pain_points
+    t: Content Pain Points
+  - key: features.content_pain_points.question
+    t: What are your pain points around managing content in HTML?
+  - key: features.content_pain_points.prompt
+    t: |
+      Think of embedding (multimedia, iframes, SVG, etc), machine-readable data, internationalization & localization, security & privacy, performance etc.
+      Missing features, browser incompatibilities, and other problems you face are all fair game.
+  - key: features.content_pain_points.placeholder
+    t: |
+      Pain point #{index}…
+
+  # Content
+
+  - key: features.external_content_elements
+    t: External Content Elements
+  - key: features.external_content_elements.question
+    t: Which of the following elements have you used?
+  - key: options.external_content_elements.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.privacy_security_features
+    t: |
+      Security & Privacy Features
+  - key: features.privacy_security_features.question
+    t: |
+      Which of the following security & privacy features have you used?
+  - key: options.privacy_security_features.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.rel_attribute
+    t: Resource Hints
+  - key: features.rel_attribute.question
+    t: |
+      Which of these values have you used for the `rel` attribute of `<link>` ?
+
+  # - key: features.external_content_pain_points
+  #   t: External Content Pain Points
+  # - key: features.external_content_pain_points.question
+  #   t: What are your biggest pain points around using external content in HTML?
+  # - key: features.external_content_pain_points.placeholder
+  #   t: |
+  #     Pain point #{index}…
+  # - key: features.external_content_pain_points.description
+  #   t: |
+  #     External content includes `<iframe>`, graphics and multimedia, etc.
+
+  # Web Components
+
+  - key: features.web_components_libraries
+    t: Web Components Libraries
+  - key: features.web_components_libraries.question
+    t: Have you used any Web Components libraries?
+
+  - key: features.web_components_features
+    t: Other Web Component Features
+  - key: features.web_components_features.question
+    t: Which of the following web component features have you used?
+  - key: options.web_components_features.host_pseudos.description
+    t: |
+      `:host` , `:host()` , `:host-context()`
+  - key: options.web_components_features.is_attribute.description
+    t: |
+      `<button is="fancy-button">`
+  - key: options.web_components_features.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.using_web_components_pain_points
+    t: Using Web Components Pain Points
+  - key: features.using_web_components_pain_points.question
+    t: What are your biggest pain points around *consuming* web components?
+  - key: features.using_web_components_pain_points.prompt
+    t: Using Web Components that you or others have made. Missing features, browser incompatibilities, etc.
+  - key: features.using_web_components_pain_points.placeholder
+    t: |
+      Pain point #{index}…
+
+  - key: features.making_web_components_pain_points
+    t: Making Web Components Pain Points
+  - key: features.making_web_components_pain_points.question
+    t: What are your biggest pain points around *making* web components?
+  - key: features.making_web_components_pain_points.prompt
+    t: |
+      What prevents you from creating the amazing components you envision? Missing features, browser incompatibilities, etc.
+  - key: features.making_web_components_pain_points.placeholder
+    t: |
+      Pain point #{index}…
+
+  # Accessibility
+
+  - key: features.accessibility_features
+    t: Accessibility Features
+  - key: features.accessibility_features.question
+    t: Which of these accessibility features have you used?
+
+  - key: features.accessibility_tools
+    t: Accessibility Tools
+  - key: features.accessibility_tools.question
+    t: What tools do you use for accessibility testing?
+
+  - key: features.accessibility_pain_points
+    t: Accessibility Pain Points
+  - key: features.accessibility_pain_points.question
+    t: What are your biggest pain points around web accessibility?
+  - key: features.accessibility_pain_points.placeholder
+    t: |
+      Pain point #{index}…
+
+  - key: features.accessibility_disabilities
+    t: User Disabilities
+  - key: features.accessibility_disabilities.question
+    t: What kind of user disabilities do you account for when making websites?
+
+  - key: options.accessibility_disabilities.hearing_impairments
+    t: Hearing impairments
+  - key: options.accessibility_disabilities.hearing_impairments.description
+    t: Deafness, tinnitus, etc.
+
+  - key: options.accessibility_disabilities.mobility_impairments
+    t: Mobility impairments
+  - key: options.accessibility_disabilities.mobility_impairments.description
+    t: Arthritis, carpal tunnel, etc.
+
+  - key: options.accessibility_disabilities.learning_disabilities
+    t: Learning disabilities
+  - key: options.accessibility_disabilities.learning_disabilities.description
+    t: Dyslexia, dyscalculia, etc.
+
+  - key: options.accessibility_disabilities.cognitive_impairments
+    t: |
+      Other cognitive impairments
+  - key: options.accessibility_disabilities.cognitive_impairments.description
+    t: |
+      Anxiety, Autism, OCD, ADHD, etc.
+
+  - key: options.accessibility_disabilities.vestibular_disorders
+    t: Vestibular disorders
+  - key: options.accessibility_disabilities.vestibular_disorders.description
+    t: Epilepsy, vertigo, etc.
+
+  - key: options.accessibility_disabilities.low_vision
+    t: Low vision
+  - key: options.accessibility_disabilities.low_vision.description
+    t: Blindness, high myopia, etc.
+
+  - key: options.accessibility_disabilities.atypical_vision
+    t: Atypical color vision
+  - key: options.accessibility_disabilities.atypical_vision.description
+    t: Color blindness
+
+  - key: features.accessibility_screenreaders
+    t: Screen Readers
+  - key: features.accessibility_screenreaders.question
+    t: Which screen readers do you use for accessibility testing?
+
+  - key: features.accessibility_techniques
+    t: Other Accessibility Techniques
+  - key: features.accessibility_techniques.question
+    t: What other techniques are part of your regular accessibility strategy?
+
+  - key: options.accessibility_techniques.tabindex
+    t: |
+      Improving focus order with `tabindex`
+  - key: options.accessibility_techniques.tabindex.description
+    t: |
+      Roving `tabindex`, `tabindex="0"` to enable focus, etc.
+  - key: options.accessibility_techniques.keyboard_navigation
+    t: Intuitive keyboard navigation
+  - key: options.accessibility_techniques.keyboard_navigation.description
+    t: Other than tab order.
+  - key: options.accessibility_techniques.aria_attributes
+    t: ARIA attributes
+  - key: options.accessibility_techniques.aria_attributes.description
+    t: |
+      `role` and `aria-*` attributes
+  - key: options.accessibility_techniques.descriptive_alt_text
+    t: |
+      Descriptive `alt` text
+  - key: options.accessibility_techniques.descriptive_alt_text.description
+    t: Providing alt text that describes the purpose or content of an image.
+  - key: options.accessibility_techniques.skip_to_content
+    t: Skip-to-content link
+  - key: options.accessibility_techniques.skip_to_content.description
+    t: Letting users skip straight to the main content of a page.
+  - key: options.accessibility_techniques.fieldset_and_legend
+    t: |
+      `<fieldset>` and `<legend>`
+  - key: options.accessibility_techniques.fieldset_and_legend.description
+    t: |
+      Using `<fieldset>` and `<legend>`  to group related form elements.
+  - key: options.accessibility_techniques.headings_hierarchy
+    t: Information Hierarchy
+  - key: options.accessibility_techniques.headings_hierarchy.description
+    t: |
+      Using headings (`<h1>` - `<h6>`) that correctly represent a page's information hierarchy.
+  - key: options.accessibility_techniques.meaningful_link_text
+    t: Meaningful Link Text
+  - key: options.accessibility_techniques.meaningful_link_text.description
+    t: Ensuring that link text makes sense out of context
+  - key: options.accessibility_techniques.form_control_label
+    t: Form Control Labels
+  - key: options.accessibility_techniques.form_control_label.description
+    t: |
+      Ensuring every form control has a `<label>` (or `aria-label`, etc.).
+  - key: options.accessibility_techniques.visible_focus
+    t: Visible Focus Ring
+  - key: options.accessibility_techniques.visible_focus.description
+    t: Ensuring focus ring outline is clearly visible when needed.
+  - key: options.accessibility_techniques.pointer_alternative
+    t: Not Relying on Pointer Only
+  - key: options.accessibility_techniques.pointer_alternative.description
+    t: Ensuring pointer interactions (e.g. hover) have a keyboard alternative.
+  - key: options.accessibility_techniques.good_color_contrast
+    t: Sufficient Contrast
+  - key: options.accessibility_techniques.good_color_contrast.description
+    t: Using contrast checkers to ensure sufficient color contrast.
+  - key: options.accessibility_techniques.color_alternative
+    t: Not Relying on Color Only
+  - key: options.accessibility_techniques.color_alternative.description
+    t: Ensuring that no information is conveyed by color alone.
+  - key: options.accessibility_techniques.prefers_reduced_motion
+    t: |
+      `prefers-reduced-motion` media query
+  - key: options.accessibility_techniques.prefers_reduced_motion.description
+    t: Providing alternative CSS for users who prefer reduced motion.
+  - key: options.accessibility_techniques.prefers_contrast
+    t: |
+      `prefers-contrast` media query
+  - key: options.accessibility_techniques.prefers_contrast.description
+    t: Providing alternative CSS for users who prefer increased contrast.
+
+  # PWAs
+
+  - key: features.pwa_features
+    t: PWA Features
+  - key: features.pwa_features.question
+    t: Have you used any of the following PWA technologies/APIs?
+  - key: options.pwa_features.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.local_storage_features
+    t: Local storage features
+  - key: features.local_storage_features.question
+    t: Have you used any of the following to store data client-side?
+  - key: options.local_storage_features.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: features.pwa_app_manifest_fields
+    t: App Manifest Fields
+  - key: features.pwa_app_manifest_fields.question
+    t: |
+      Which of these app manifest fields (`<link rel="manifest">`) have you used, if any?
+
+  - key: features.native_apps_tools
+    t: Native Apps Tools
+  - key: features.native_apps_tools.question
+    t: Have you used any of these tools to build native apps?
+  - key: features.native_apps_tools.description
+    t: Excluding scripts, command-line apps, server-side code, etc.
+  - key: options.native_apps_tools.na
+    t: <span aria-hidden="true">🚫</span> I haven't developed native apps
+  - key: options.native_apps_tools.native_languages
+    t: Native technologies
+  - key: options.native_apps_tools.native_languages.description
+    t: Objective-C, Swift, Kotlin, .NET, etc.
+  - key: options.native_apps_tools.webviews
+    t: Web app loaded via Webviews
+  - key: options.native_apps_tools.js_frameworks
+    t: JavaScript-based frameworks
+  - key: options.native_apps_tools.js_frameworks.description
+    t: React Native, Ionic, Electron, etc.
+  - key: options.native_apps_tools.other_frameworks
+    t: Non-JavaScript frameworks
+  - key: options.native_apps_tools.other_frameworks.description
+    t: Tauri, Flutter, etc.
+
+  - key: features.mobile_web_apps_pain_points
+    t: Native-like Web Apps Pain Points
+  - key: features.mobile_web_apps_pain_points.question
+    t: What are your biggest pain points around making web apps that feel native?
+  - key: features.mobile_web_apps_pain_points.description
+    t: Capabilities the Web Platform doesn't yet have, browser differences in related APIs, etc.
+  - key: features.mobile_web_apps_pain_points.placeholder
+    t: |
+      Pain point #{index}
+
+  # Other Tools
+
+  - key: other_tools.site_generators
+    t: Site Generators
+  - key: other_tools.site_generators.question
+    t: Which of these static or dynamic site generators do you regularly use?
+
+  - key: other_tools.ai_tools
+    t: AI Tools
+  - key: other_tools.ai_tools.question
+    t: Which of these AI tools do you regularly use to help you write code?
+
+  - key: other_tools.machine_readable_features
+    aliasFor: features.machine_readable_features
+  - key: other_tools.machine_readable_features.question
+    aliasFor: features.machine_readable_features.question
+
+  - key: options.machine_readable_features.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  - key: other_tools.blast_from_the_past
+    t: Blast from the Past!
+  - key: other_tools.blast_from_the_past.question
+    t: Have you ever used any of the following old-school elements?
+  - key: other_tools.blast_from_the_past.description
+    t: Blast from the past!
+  - key: options.blast_from_the_past.na
+    t: <span aria-hidden="true">🚫</span> None of the above
+
+  # Usage
+
+  # - key: usage.html_existing_features
+  #   t: Unusable HTML Features
+  # - key: usage.html_existing_features.question
+  #   t: Which existing HTML features are you unable to use?
+  # - key: usage.html_existing_features.description
+  #   t: |
+  #     Existing HTML features that you find yourself recreating using custom components.
+  # - key: usage.html_existing_features.placeholder
+  #   t: |
+  #     ﹤foo type="bar"﹥ (browser incompatibilities, styling limitations, doesn't do X)
+
+  - key: usage.html_interoperability_features
+    t: Browser Interoperability
+  - key: usage.html_interoperability_features.question
+    t: Which existing HTML features or browser APIs are you unable to use because of browser differences or lack of support?
+  # - key: usage.html_interoperability_features.description
+  #   t: |
+  #     Any type of API the survey has asked about is within scope.
+  - key: usage.html_interoperability_features.placeholder
+    t: |
+      Feature #{index}
+
+  - key: usage.html_functionality_features
+    t: Limited Functionality
+  - key: usage.html_functionality_features.question
+    t: Which existing HTML features or browser APIs are you unable to use for other reasons (and why)?
+  - key: usage.html_functionality_features.description
+    t: |
+      Existing HTML features that you often have to recreate or augment using JS.
+  # - key: usage.html_functionality_features.description
+  #   t: |
+  #     Existing HTML features that you often have to recreate or augment using JS.
+
+  #     Please also specify the reason, such as lack of functionality, difficult styling, poor accessibility, etc.
+
+  - key: usage.html_functionality_features.placeholder.1
+    t: |
+      Feature #1 (hard to style)
+  - key: usage.html_functionality_features.placeholder.2
+    t: |
+      Feature #2 (limited functionality, poor accessibility)
+
+  - key: usage.what_do_you_use_html_for
+    t: HTML Usage
+  - key: usage.what_do_you_use_html_for.question
+    t: What do you use HTML for?
+  - key: options.what_do_you_use_html_for.blogs
+    aliasFor: options.what_do_you_use_css_for.blogs
+  - key: options.what_do_you_use_html_for.design_systems
+    aliasFor: options.what_do_you_use_css_for.design_systems
+  - key: options.what_do_you_use_html_for.desktop_apps
+    aliasFor: options.what_do_you_use_css_for.desktop_apps
+  - key: options.what_do_you_use_html_for.emails
+    aliasFor: options.what_do_you_use_css_for.emails
+  - key: options.what_do_you_use_html_for.marketing_sites
+    aliasFor: options.what_do_you_use_css_for.marketing_sites
+  - key: options.what_do_you_use_html_for.mobile_apps
+    aliasFor: options.what_do_you_use_css_for.mobile_apps
+  - key: options.what_do_you_use_html_for.printed_documents
+    aliasFor: options.what_do_you_use_css_for.printed_documents
+  - key: options.what_do_you_use_html_for.web_apps
+    aliasFor: options.what_do_you_use_css_for.web_apps
+
+  - key: usage.tools_for_other_developers
+    t: Ecosystem Impact
+  - key: usage.tools_for_other_developers.question
+    t: Other than yourself, how many developers use the libraries, packages, components, APIs etc. that you create or maintain?
+  - key: usage.tools_for_other_developers.description
+    t: |
+      Total, if you work on multiple projects that are used by other developers.
+      If you’re not sure, pick the closest to your best estimate.
+      For open source code, npm downloads might offer a useful data point.
+  - key: options.tools_for_other_developers.na
+    t: 🚫 None (Just me)
+  - key: options.tools_for_other_developers.a_few
+    t: A few other developers (e.g. developers within a small team)
+  - key: options.tools_for_other_developers.less_than_100
+    t: Less than a hundred developers
+  - key: options.tools_for_other_developers.less_than_1000
+    t: Less than a thousand developers
+  - key: options.tools_for_other_developers.more_than_100
+    t: Hundreds of developers
+  - key: options.tools_for_other_developers.more_than_1000
+    t: Thousands of developers
+  - key: options.tools_for_other_developers.more_than_1000000
+    t: Millions of developers
+
+  - key: usage.html_missing_elements
+    t: Missing Elements
+  - key: usage.html_missing_elements.question
+    t: If you could add 3 elements to HTML, what would they be?
+  # - key: usage.html_missing_elements.description
+  #   t: |
+  #     If you use any component technologies, the components you find yourself reusing across multiple projects could be good candidates.
+
+  #     These could be things like Accordion, Alert, Calendar, Carousel, Combobox/Autocomplete, Context menu, Data Grid, Rating, Tabs, Image Zoom, Switch, Skeleton loading pattern etc.
+
+  - key: options.html_missing_elements.accordion
+    t: Accordion
+  - key: options.html_missing_elements.alert
+    t: Alert
+  - key: options.html_missing_elements.calendar
+    t: Calendar
+  - key: options.html_missing_elements.carousel
+    t: Carousel
+  - key: options.html_missing_elements.combobox_autocomplete
+    t: Combobox / Autocomplete
+  - key: options.html_missing_elements.command_palette
+    t: Command Palette
+  - key: options.html_missing_elements.context_menu
+    t: Context Menu / Right-Click Menu
+  - key: options.html_missing_elements.datatable
+    t: Data table (with sorting, filtering, etc.)
+  - key: options.html_missing_elements.dropdown_menu
+    t: Dropdown Menu
+  - key: options.html_missing_elements.image_zoom
+    t: Image Zoom
+  - key: options.html_missing_elements.progress_bar
+    t: Progress Bar
+  - key: options.html_missing_elements.skeleton_loading_placeholder
+    t: Skeleton UI / Loading Placeholder
+  - key: options.html_missing_elements.switch
+    t: Switch / Toggle
+  - key: options.html_missing_elements.tabs
+    t: Tabs
+  # - key: options.html_missing_elements.toast_message
+  #   t: Toast Message
+  - key: options.html_missing_elements.tooltip
+    t: Tooltip
+  - key: options.html_missing_elements.offcanvas
+    t: Off-Canvas Area
+  - key: options.html_missing_elements.spinner
+    t: Loading Spinner
+  - key: options.html_missing_elements.segmented_button
+    t: Segmented Button
+  - key: options.html_missing_elements.scroll_area
+    t: Infinite Scroll
+  - key: options.html_missing_elements.icon
+    t: Icon
+  - key: options.html_missing_elements.star_rating
+    t: Star Rating
+
+  - key: usage.html_pain_points_freeform
+    t: Other Pain Points
+  - key: usage.html_pain_points_freeform.question
+    t: Any other pain points around using HTML and related technologies?
+
+  - key: usage.html_css_js_balance
+    t: HTML/CSS vs JavaScript/TypeScript Balance
+  - key: usage.html_css_js_balance.question
+    t: How do you divide your time between writing HTML/CSS and JavaScript (or TypeScript) code?
+  - key: options.html_css_js_balance.0
+    t: 100% HTML/CSS
+  - key: options.html_css_js_balance.4
+    t: 50%–50%
+  - key: options.html_css_js_balance.8
+    t: 100% JS
+
+  # other features
+
+  - key: features.foo_attribute
+    t: "`{id}` attribute"
+
+  - key: features.slot_assignment
+    t: Explicit slot assignment (`slot="foo"`)
+
+  - key: features.tabindex
+    t: "`tabindex` attribute"
+
+  - key: features.respimg
+    t: "`srcset` and `sizes` attributes"
+
+  - key: features.model_element
+    t: "`<model>` for AR/VR/3D content"
+
+  - key: features.slot_def
+    t: Defining slots (`<slot>` and `::slotted()`)
+
+  - key: features.controlslist
+    t: "`controlslist` attribute"
+
+  - key: features.popover_api
+    t: Popover API
+
+  - key: features.lazy_loading
+    t: Lazy loading
+
+  - key: features.sandbox_attr
+    t: "`sandbox` attribute for iframes"
+
+  - key: features.details_element
+    t: "`<details>` and `<summary>`"
+
+  - key: features.crossorigin
+    t: "`crossorigin` attribute"
+
+  - key: features.host_css
+    t: Styling component host (`:host`, `:host()`, `:host-context()`)
+
+  - key: features.element_internals
+    t: "`ElementInternals` API"
+
+  - key: features.cors
+    t: CORS
+
+  - key: features.csp
+    t: Content-Security Policy (CSP)
+
+  - key: features.structured_data
+    t: Structured data (RDFa, Microdata, Microformats)
+
+  - key: features.extended_builtins
+    t: Extended built-ins
+
+  - key: features.html_modules
+    t: HTML Modules
+
+  - key: features.accordion
+    t: Exclusive accordion
+
+  - key: features.imperative_slot
+    t: Imperative slot assignment
+
+  # - key: features.focusgroup
+  #   t: "`focusgroup` attribute"
+
+  - key: features.form_validation
+    t: Form validation
+
+  - key: features.aria
+    t: ARIA
+
+  - key: features.rh_preconnect
+    t: "Resource Hints: preconnect (`<link rel=preconnect>`)"
+
+  - key: features.rh_prerender
+    t: "Resource Hints: prerender (`<link rel=prerender>`)"
+
+  - key: features.rh_preload
+    t: "Resource Hints: preload (`<link rel=preload>`)"
+
+  - key: features.resource_hints
+    t: Resource Hints (all)
+
+  - key: features.rh_prefetch
+    t: "Resource Hints: prefetch (`<link rel=prefetch>`)"
+
+  - key: features.declarative_shadow
+    t: Declarative Shadow DOM (`<template shadowrootmode="open">`)
+
+  - key: features.referrerpolicy
+    t: "`referrerpolicy` attribute"
+
+  - key: features.integrity
+    t: Subresource Integrity (`integrity` attribute)
+
+  - key: features.pwa_manifest
+    t: PWA manifest
+
+  - key: features.part_attr
+    t: Exposing component parts (`part` attribute)
+
+  - key: features.part_selector
+    t: Styling component parts (`::part()`)
+
+  - key: features.svg_element
+    t: Inline SVG (`<svg>`)
+
+  - key: features.math_element
+    t: Inline MathML (`<math>`)
+
+  - key: features.scoped_element_registries
+    t: Scoped Custom Element Registries
+
+  - key: features.navigation_api
+    t: Navigation API
+
+  - key: features.custom_elements_defining
+    t: Defining Custom Elements
+
+  - key: features.decoding
+    t: "`decoding` attribute"
+
+  - key: features.custom_elements_using
+    t: Using Custom Elements
+
+  - key: features.fencedframe
+    t: Fenced frames
+
+  - key: features.credentialless
+    t: Credentialess iframes
+
+  - key: features.media_capture
+    t: HTML Media Capture
+
+  - key: features.contenteditable_plaintext
+    t: "`plaintext-only` value for `contenteditable`"
+
+  - key: features.dom_parts
+    t: DOM Parts
+
+  - key: features.fetchpriority
+    t: Fetch Priority API (`fetchpriority` attribute)
+
+  - key: features.autocomplete
+    t: '`autocomplete="hint"`'
+
+  - key: features.inert_attribute
+    t: "`inert` attribute"
+
+  - key: features.client_hints
+    t: HTTP client hints
+
+  ###########################################################################
+  # Survey Help
+  ###########################################################################
+
+  - key: features.features_intro_html
+    t: |
+      Welcome to the survey! These first couple sections are all about figuring out
+      which **features** of HTML (and related APIs) you know about.
+
+      By the way, if you want to learn more about any item in the survey, you can add it to your reading list by clicking its little "+" icon!
diff --git a/state_of_html_2023.yml b/state_of_html_2023.yml
new file mode 100644
index 0000000..fa05fa9
--- /dev/null
+++ b/state_of_html_2023.yml
@@ -0,0 +1,172 @@
+locale: ua-UA
+translations:
+  ###########################################################################
+  # General
+  ###########################################################################
+
+  - key: general.results.description
+    t: The 2023 edition of the annual survey about the latest trends in the HTML ecosystem.
+
+  - key: introduction.html2023
+    t: >
+      While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, 
+      it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. 
+      After all once you've learned about `<div>`s and `<h>`s 1 through 6, what else is there to know?
+
+
+      Quite a lot, as it turns out! Once again we drafted [Lea Verou](https://lea.verou.me/) to put her in-depth
+      knowledge of the web platform to work, and help us craft a survey that ended up reaching far
+      beyond pure HTML to cover accessibility, web components, and much more.
+
+
+      This partly explains why this report has taken so long to come out – there was 
+      just a *lot* of new data to process! Hopefully you'll find that the result was worth the wait.
+
+
+      Beyond the data included here, we've also improved our **chart customization** feature to let you tailor 
+      each data visualization to an even greater degree. If you find any interesting
+      insights in the process, be sure to let us know!
+
+
+      You can learn more about all this in [this post](https://dev.to/sachagreif/discover-the-state-of-html-2023-survey-results-n10), or by watching a [quick YouTube video](https://www.youtube.com/watch?v=G-rFwp2zUT4)
+
+
+      With all this out of the day, welcome to the results for the first ever State of HTML survey. 
+      After this, I'm willing to bet you won't look at good old HTML quite the same way ever again!
+
+  ###########################################################################
+  # Tshirt
+  ###########################################################################
+
+  - key: sections.tshirt.title
+    t: T-shirt
+
+  - key: sections.tshirt.description
+    t: |
+      ## Support the Survey With the State of HTML T-Shirt
+
+      Do you miss the the good old days of the mid-90s, when HTML was king and VHS tape covers featured futuristic, colorful artwork? 
+
+      The bad news is that even with 2024's technology, you can't yet go back in time to relive those glory days. But what you *can* do is wear this awesome original retro t-shirt, designed by none other than the talented Christopher Kirk-Nielsen.
+
+  - key: tshirt.about
+    t: About the T-shirt
+
+  - key: tshirt.description
+    t: |
+      We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+
+  - key: tshirt.getit
+    t: Get It
+
+  - key: tshirt.price
+    t: USD $32 + shipping
+
+  - key: tshirt.designer.heading
+    t: About the Designer
+
+  - key: tshirt.designer.name
+    t: Christopher Kirk-Nielsen
+
+  - key: tshirt.designer.bio
+    t: |
+      Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+  ###########################################################################
+  # Sections Introductions
+  ###########################################################################
+
+  - key: sections.user_info.description.html2023
+    t: |
+      Welcome to the State of HTML survey results. This first-ever edition reached **20,904** participants from all around the world.
+
+  - key: sections.features.description.html2023
+    t: |
+      HTML features and other browser APIs
+
+  ###########################################################################
+  # Other Content
+  ###########################################################################
+
+  - key: features.all_features.description
+    t: |
+      This chart recaps all of the survey's feature questions. The main bars represent a respondent's experience; and they are then further subdivided according to that respondent's sentiment. You can change the grouping to alternate between both. 
+
+
+      Note that you can also find a more specific breakdown of the same data in each feature sub-section.
+
+  ###########################################################################
+  # Sponsors
+  ###########################################################################
+
+  - key: sponsors.frontendmasters.description
+    t: Advance your skills with in-depth, modern front-end engineering courses.
+  - key: sponsors.google_chrome.description
+    t: Thanks to the Google Chrome team for supporting our work.
+  - key: sponsors.tokyodev.description
+    t: Find your dream developer job in Japan today.
+  - key: sponsors.renderatl.description
+    t: The tech conference focused on Front-End Engineering.
+
+  ###########################################################################
+  # Conclusion
+  ###########################################################################
+
+  - key: conclusion.html2023.bio
+    t: W3C Technical Architecture Group Member & MIT CSAIL Researcher
+  - key: conclusion.html2023
+    t: >
+      *Phew!* This survey has taken a monumental effort by dozens of people across six continents. Not only did it set a new record for the most responses in a “State of…” survey debut, its data collection UI pioneered innovations that gave us unparalleled insight into developer attitudes, and will ripple far beyond its scope. 
+
+
+      Some argue that improving HTML is futile, but the survey resoundingly demonstrates the contrary. **Developers crave more interactive HTML elements**: not only were interactive elements like `<datalist>` or the Popover API among those accumulating the most positive sentiment across all categories, but in addition all top [missing elements](https://2023.stateofhtml.com/en-US/usage/#html_missing_elements) were interactive widgets. 
+
+
+      However, **making simple things easy** by providing canned functionality is no longer sufficient. **Making complex things possible** by supporting thorough customization is a necessity: insufficient customizability, especially around **styling**, was by far the top recurring pain point. 
+
+
+      As a result, form elements were also the elements [most frequently recreated](https://2023.stateofhtml.com/en-US/usage/#html_functionality_features); a lose-lose outcome that makes both developers and end-users suffer. Thankfully, there are many new initiatives to improve this, so the future looks bright.
+
+
+      Another big need is extensibility. It does not scale if only standards bodies have the privilege to extend HTML; and besides, generic elements cannot possibly address the enormous diversity of needs. Unfortunately, **Web Components APIs** (and especially Shadow DOM), while widely used, appear to fall short in terms of meeting developer needs and providing a smooth developer experience, as they topped the charts of worst experiences across the survey. However, the ongoing activity in this area (some of which I have been part of) leaves me hopeful that while it has been a rocky path, they are on track to reach their full potential.
+
+
+      Which brings me to my final point: it is important to remember that this survey is only a snapshot of developer perspectives and reflects the state of the web platform at the time. However, a primary goal of these surveys is to improve the status quo by providing better visibility into developer needs. How many of today’s pain points will be addressed tomorrow as a result? Join us later this year for the survey’s second iteration and let’s find out!
+
+  ###########################################################################
+  # About
+  ###########################################################################
+
+  - key: about.content
+    t: |
+      The 2023 State of HTML survey ran from September 19 to October 19 2023, and collected 20,904 responses. 
+
+      The survey design effort was lead by [Lea Verou](https://lea.verou.me/) thanks to a grant from Google. Lea also oversaw the prototyping, testing, and implementation of new UI data collection elements; contributed to data processing; and helped with data visualization. 
+
+      The survey infrastructure is run by [Sacha Greif](https://sachagreif.com/) and [Eric Burel](https://www.lbke.fr/), with help from a team of open-source contributors and consultants. 
+
+      This year's logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+      ### Survey Goals
+
+      This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. 
+
+      As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included. 
+
+      It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire ecosystem. 
+
+      The survey was openly accessible online and respondents were not filtered or selected in any way.
+
+      ### Project Funding
+
+      Funding from this project comes from a variety of sources:
+
+      - **T-shirt sales**. 
+
+      - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).
+
+      - **Other Funding**: [Google](https://www.google.com/) and [TokyoDev](https://www.tokyodev.com/) also funded work on the survey.
+
+      ### Technical Overview
+
+      You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a).

From fde447bf70faf4783ee0ae3ae1f0247a65b4addc Mon Sep 17 00:00:00 2001
From: alinkedd <alina.listunova@gmail.com>
Date: Tue, 21 May 2024 15:04:49 +0200
Subject: [PATCH 3/6] Add translations for state of html and related files

---
 state_of_html.yml      | 300 +++++++++++++++++++++--------------------
 state_of_html_2023.yml |  26 ++--
 state_of_js.yml        |   4 +-
 surveys.yml            |   4 +-
 4 files changed, 168 insertions(+), 166 deletions(-)

diff --git a/state_of_html.yml b/state_of_html.yml
index 1a77fa4..30288b5 100644
--- a/state_of_html.yml
+++ b/state_of_html.yml
@@ -8,82 +8,82 @@ translations:
   - key: general.state_of_html.intro
     # aliasFor: general.html2023.survey_intro # Can we do that?
     t: |
-      While web developers tend to focus on JavaScript and CSS, none of what we do would be possible without HTML acting as the foundation.
+      Поки веброзробники зосереджуються на JavaScript та CSS, нічого з того, що ми робимо, не було б можливим без HTML в основі.
 
-      It has long seemed like HTML wasn't evolving, but things may be changing.
-      New elements like `<selectlist>` are on the horizon, cool new features like popovers,
-      and a swath of related browser APIs (Web Components, PWAs, etc.).
+      Довго здавалося, що HTML не розвивається, але все змінюється.
+      На горизонті з'являються нові елементи, як-от `<selectlist>`, приголомшливі нові функції, наприклад, спливаючі вікна,
+      та ряд суміжних API браузера (вебкомпоненти, PWA тощо).
 
-      This year, [Lea Verou](https://lea.verou.me/) took on the formidable task of leading the design of this brand new survey, from content to UX and beyond.
+      Цього року [Lea Verou](https://lea.verou.me/) взяла на себе величезне завдання з проведення цього абсолютно нового опитування — від змісту до UX і більше.
 
-      Building on the success of [State of JS](http://stateofjs.com/) and [State of CSS](https://stateofcss.com/), we introduce **State of HTML**;
-      the last missing piece that completes the trilogy, so we can track the evolution of the web platform as a whole.
+      Спираючись на успіх опитувань ["Стан JS"](http://stateofjs.com/) та ["Стан CSS"](https://stateofcss.com/), ми запускаємо **Стан HTML**;
+      останній відсутній елемент, що доповнює трилогію, щоб ми могли відстежувати еволюцію вебплатформи загалом.
 
-      Benefits to you:
-      - Survey results are **used by browsers** and standards groups **for roadmap prioritization**.
-      Your responses can help get features you care about implemented, browser incompatibilities being prioritized, and gaps in the platform being addressed.
-      - Learn about new and upcoming features; add features to your reading list and get a list of resources at the end!
-      - Get a personalized knowledge score and see how you compare to other respondents
+      Переваги для вас:
+      - Результати опитування **використовуються браузерами** та групами стандартів **для визначення пріоритетів розробки**.
+      Ваші відповіді можуть допомогти реалізувати цікаві вам функції, визначити пріоритети для усунення несумісностей між браузерами та вказати на прогалини у платформі.
+      - Дізнайтеся про нові та майбутні функції; додайте функції до вашого списку читання та отримайте список джерел у кінці!
+      - Отримайте індивідуальну оцінку знань та порівняйте з іншими респондентами.
 
-      The survey will be open for 3 weeks, but responses entered **within the first 9 days (until October 1st)** will have a much higher impact on the Web,
-      as preliminary data will be used for certain prioritization efforts that have deadlines before then.
+      Опитування буде відкрите протягом 3 тижнів, але відповіді, внесені **протягом перших 9-ти днів (до 1 жовтня)**, матимуть набагато більший вплив на вебплатформу,
+      оскільки попередні дані будуть використовуватися для визначення певних пріоритетних напрямків, що мають граничний строк до того часу.
 
   - key: general.state_of_html.description
-    t: The annual developer survey about the web platform
+    t: Щорічне опитування розробників щодо вебплатформи
 
   ###########################################################################
   # Sections
   ###########################################################################
 
   - key: sections.forms.title
-    t: Forms
+    t: Форми
   - key: sections.forms.description
-    t: Form-related elements and attributes
+    t: Елементи й атрибути, що відносяться до форм.
 
   - key: sections.interactivity.title
-    t: Interactivity
+    t: Інтерактивність
   - key: sections.interactivity.description
-    t: APIs that enable richer user interactions.
+    t: API, які забезпечують розширену взаємодію з користувачем.
 
   - key: sections.web_components.title
-    t: Web Components
+    t: Вебкомпоненти
   - key: sections.web_components.description
-    t: Making & using web components.
+    t: Створення та використання вебкомпонентів.
 
   - key: sections.content.title
-    t: Content
+    t: Наповнення сайту
   - key: sections.content.description
-    t: Embedding, multimedia, data, and other content-related features.
+    t: Вбудовування елементів, мультимедіа, розмітка даних та інші пов'язані із наповненням функції.
 
   - key: sections.external_content.title
-    t: External Content
+    t: Наповнення сайту ззовні
   - key: sections.external_content.description
-    t: Embedding external resources, and other multimedia APIs.
+    t: Вбудовування зовнішніх ресурсів та інших мультимедійних API.
 
   - key: sections.accessibility.title
-    t: Accessibility
+    t: Доступність
   - key: sections.accessibility.description
-    t: Making sites and apps accessible by all.
+    t: Як зробити сайти та застосунки доступними для всіх.
 
   - key: sections.mobile_web_apps.title
-    t: Native-like Web Apps
+    t: Вебзастосунки, які схожі на нативні
   - key: sections.mobile_web_apps.description
-    t: Authoring mobile and desktop-optimized web apps.
+    t: Створення вебзастосунків, оптимізованих для мобільних пристроїв і настільних комп'ютерів.
 
   - key: sections.other_features.title
-    t: Other Features
+    t: Інші функції
   - key: sections.other_features.description
-    t: Other HTML elements & browser APIs.
+    t: Інші HTML-елементи та API браузера.
 
   - key: sections.other_tools.title
-    t: Other Tools & Features
+    t: Інші інструменти чи функції
   - key: sections.other_tools.description
-    t: Other tools or features you use as part of your work.
+    t: Інші інструменти чи функції, якими ви користуєтеся в роботі.
 
   - key: sections.usage.title
-    t: Usage
+    t: Використання
   - key: sections.usage.description
-    t: How you use HTML.
+    t: Як ви використовуєте HTML.
 
   ###########################################################################
   # Features
@@ -92,56 +92,56 @@ translations:
   # forms
 
   - key: features.form_controls
-    t: Form Controls
+    t: Елементи керування формою
   - key: features.form_controls.question
-    t: Which form controls have you used?
+    t: Які елементи керування формою ви використовували?
 
   - key: features.form_input_types
-    t: Input Types
+    t: Типи input-елементів
   - key: features.form_input_types.question
-    t: Which input types have you used?
+    t: Які типи input-елементів ви використовували?
   - key: options.form_input_types.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.form_validation_features
-    t: Form Validation
+    t: Валідація форми
   - key: features.form_validation_features.question
-    t: Which of the following form validation features have you used?
+    t: Які з наведених функцій валідації ви використовували?
   - key: options.form_validation_features.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.forms_pain_points
-    t: Form Pain Points
+    t: Проблеми форм
   - key: features.forms_pain_points.question
-    t: What are your pain points around HTML forms?
+    t: Які проблеми HTML-форм найбільше вас розчаровують?
   - key: features.forms_pain_points.prompt
     t: |
-      Think of the various form controls (e.g. `<input>`, `<textarea>`, `<select>`, `<button>` etc.),
-      behaviors (e.g. validation, autocomplete), handling forms via JS, editing APIs (e.g. `contentEditable`) etc.
-      Anything that bothers you is fair game — browser support, missing features, styling, etc.
+      Подумайте про різні елементи керування формами (наприклад, `<input>`, `<textarea>`, `<select>`, `<button>` тощо),
+      поведінку (наприклад, валідація, автозаповнення), обробку форм за допомогою JS, API для редагування (наприклад, `contentEditable`) тощо.
+      Пишіть усе, що вас турбує у формах: підтримка браузерами, відсутні функції, додавання стилів тощо.
   - key: features.forms_pain_points.placeholder
     t: |
-      Pain point #{index}…
+      Проблема #{index}…
 
   # interactivity
 
   - key: features.dom_attribute_features
-    t: DOM Attribute-related methods
+    t: Методи DOM для атрибутів
   - key: features.dom_attribute_features.question
-    t: Which of the following DOM attribute-related methods have you used?
+    t: Які з наведених методів DOM для атрибутів ви використовували?
 
   - key: features.dom_html_features
-    t: HTML String-handling Features
+    t: Функції обробки тексту в HTML
   - key: features.dom_html_features.question
-    t: Which of the following DOM HTML string-handling features have you used?
+    t: Які з наведених функцій обробки HTML-тексту всередині DOM ви використовували?
 
   - key: features.dom_methods
-    t: Element reparenting DOM Methods
+    t: Методи DOM для зміни батьківського елемента
 
   - key: features.dom_moving_element_features
-    t: Element-moving DOM Methods
+    t: Методи DOM для переміщення елементів
   - key: features.dom_moving_element_features.question
-    t: Which of the following element-moving DOM methods have you used?
+    t: Які з наведених методів DOM для переміщення елементів ви використовували?
   # - key: options.dom_methods.element_innerhtml.description
   #   t: |
   #     `element.innerHTML = rawHTML`
@@ -179,37 +179,37 @@ translations:
   #   t: |
   #     `let fragment = document.createDocumentFragment()`
   - key: options.dom_methods.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.interactivity_pain_points
-    t: Interactivity Pain Points
+    t: Проблеми інтерактивності
   - key: features.interactivity_pain_points.question
-    t: What are your pain points around dynamic HTML changes?
+    t: Які проблеми динамічної зміни HTML найбільше вас розчаровують?
   - key: features.interactivity_pain_points.prompt
     t: |
-      Browser incompatibilities or lack of support, missing features, and other problems you face
-      around interactive elements and behaviors (except forms), DOM manipulation, events, and related APIs.
+      Несумісність між браузерами або відсутність підтримки, відсутні функції та інші проблеми, з якими ви стикаєтеся,
+      що пов'язані з інтерактивними елементами та поведінкою (крім форм), маніпулюванням DOM, подіями та суміжними API.
 
   - key: features.interactivity_pain_points.placeholder
     t: |
-      Pain point #{index}…
+      Проблема #{index}…
 
   - key: features.interactivity_techniques
-    t: Interactivity Methods
+    t: Методи для додавання інтерактивності
   - key: features.interactivity_techniques.question
-    t: Which of these methods have you used to add interactivity or dynamically modify HTML?
+    t: Які з наведених методів ви використовували для додавання інтерактивності або динамічної зміни HTML-коду?
   - key: options.interactivity_techniques.css_for_interactivity
-    t: CSS for interactivity (toggles, tabs, etc.)
+    t: CSS для інтерактивності (toggles, tabs, etc.)
   - key: options.interactivity_techniques.js_dom_libraries
-    t: JavaScript DOM libraries (jQuery, etc.)
+    t: JavaScript-бібліотеки для DOM (jQuery, etc.)
   - key: options.interactivity_techniques.js_framework
-    t: JavaScript frameworks (React, Vue, etc.)
+    t: JavaScript-фреймворки (React, Vue, etc.)
   - key: options.interactivity_techniques.vanilla_js
-    t: Plain JavaScript (no frameworks or libraries)
+    t: Лише JavaScript (без фреймворків чи бібліотек)
   - key: options.interactivity_techniques.web_components
-    t: Web Components
+    t: Вебкомпоненти
   - key: options.interactivity_techniques.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   # content
 
@@ -245,7 +245,7 @@ translations:
   - key: features.i18n_features.question
     t: Which of the following internationalization features have you used?
   - key: options.i18n_features.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   # - key: options.i18n_features.intl_datetimeformat.description
   #   t:
@@ -267,16 +267,16 @@ translations:
   #   t:
 
   - key: features.content_pain_points
-    t: Content Pain Points
+    t: Проблеми наповнення сайту
   - key: features.content_pain_points.question
-    t: What are your pain points around managing content in HTML?
+    t: Які проблеми керуванням наповненням у HTML найбільше вас розчаровують?
   - key: features.content_pain_points.prompt
     t: |
       Think of embedding (multimedia, iframes, SVG, etc), machine-readable data, internationalization & localization, security & privacy, performance etc.
       Missing features, browser incompatibilities, and other problems you face are all fair game.
   - key: features.content_pain_points.placeholder
     t: |
-      Pain point #{index}…
+      Проблема #{index}…
 
   # Content
 
@@ -285,7 +285,7 @@ translations:
   - key: features.external_content_elements.question
     t: Which of the following elements have you used?
   - key: options.external_content_elements.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.privacy_security_features
     t: |
@@ -294,7 +294,7 @@ translations:
     t: |
       Which of the following security & privacy features have you used?
   - key: options.privacy_security_features.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.rel_attribute
     t: Resource Hints
@@ -316,7 +316,7 @@ translations:
   # Web Components
 
   - key: features.web_components_libraries
-    t: Web Components Libraries
+    t: Бібліотеки вебкомпонентів
   - key: features.web_components_libraries.question
     t: Have you used any Web Components libraries?
 
@@ -331,28 +331,28 @@ translations:
     t: |
       `<button is="fancy-button">`
   - key: options.web_components_features.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.using_web_components_pain_points
-    t: Using Web Components Pain Points
+    t: Проблеми використання вебкомпонентів
   - key: features.using_web_components_pain_points.question
-    t: What are your biggest pain points around *consuming* web components?
+    t: Які проблеми *використання* вебкомпонентів найбільше вас розчаровують?
   - key: features.using_web_components_pain_points.prompt
     t: Using Web Components that you or others have made. Missing features, browser incompatibilities, etc.
   - key: features.using_web_components_pain_points.placeholder
     t: |
-      Pain point #{index}…
+      Проблема #{index}…
 
   - key: features.making_web_components_pain_points
-    t: Making Web Components Pain Points
+    t: Проблеми створення вебкомпонентів
   - key: features.making_web_components_pain_points.question
-    t: What are your biggest pain points around *making* web components?
+    t: Які проблеми *створення* вебкомпонентів найбільше вас розчаровують?
   - key: features.making_web_components_pain_points.prompt
     t: |
       What prevents you from creating the amazing components you envision? Missing features, browser incompatibilities, etc.
   - key: features.making_web_components_pain_points.placeholder
     t: |
-      Pain point #{index}…
+      Проблема #{index}…
 
   # Accessibility
 
@@ -367,12 +367,12 @@ translations:
     t: What tools do you use for accessibility testing?
 
   - key: features.accessibility_pain_points
-    t: Accessibility Pain Points
+    t: Проблеми доступності
   - key: features.accessibility_pain_points.question
-    t: What are your biggest pain points around web accessibility?
+    t: Які проблеми доступності вебплатформи найбільше вас розчаровують?
   - key: features.accessibility_pain_points.placeholder
     t: |
-      Pain point #{index}…
+      Проблема #{index}…
 
   - key: features.accessibility_disabilities
     t: User Disabilities
@@ -504,14 +504,14 @@ translations:
   - key: features.pwa_features.question
     t: Have you used any of the following PWA technologies/APIs?
   - key: options.pwa_features.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.local_storage_features
     t: Local storage features
   - key: features.local_storage_features.question
     t: Have you used any of the following to store data client-side?
   - key: options.local_storage_features.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: features.pwa_app_manifest_fields
     t: App Manifest Fields
@@ -543,14 +543,14 @@ translations:
     t: Tauri, Flutter, etc.
 
   - key: features.mobile_web_apps_pain_points
-    t: Native-like Web Apps Pain Points
+    t: Проблеми вебзастосунків, що схожі на нативні
   - key: features.mobile_web_apps_pain_points.question
-    t: What are your biggest pain points around making web apps that feel native?
+    t: Які проблеми створення вебзастосунків, що мають відчуватися нативно, найбільше вас розчаровують?
   - key: features.mobile_web_apps_pain_points.description
     t: Capabilities the Web Platform doesn't yet have, browser differences in related APIs, etc.
   - key: features.mobile_web_apps_pain_points.placeholder
     t: |
-      Pain point #{index}
+      Проблема #{index}
 
   # Other Tools
 
@@ -570,7 +570,7 @@ translations:
     aliasFor: features.machine_readable_features.question
 
   - key: options.machine_readable_features.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   - key: other_tools.blast_from_the_past
     t: Blast from the Past!
@@ -579,7 +579,7 @@ translations:
   - key: other_tools.blast_from_the_past.description
     t: Blast from the past!
   - key: options.blast_from_the_past.na
-    t: <span aria-hidden="true">🚫</span> None of the above
+    t: <span aria-hidden="true">🚫</span> Нічого з вищевказаного 
 
   # Usage
 
@@ -671,9 +671,9 @@ translations:
     t: Millions of developers
 
   - key: usage.html_missing_elements
-    t: Missing Elements
+    t: Відсутні елементи
   - key: usage.html_missing_elements.question
-    t: If you could add 3 elements to HTML, what would they be?
+    t: Якби ви могли додати 3 елементи до HTML, якими б вони були?
   # - key: usage.html_missing_elements.description
   #   t: |
   #     If you use any component technologies, the components you find yourself reusing across multiple projects could be good candidates.
@@ -685,55 +685,57 @@ translations:
   - key: options.html_missing_elements.alert
     t: Alert
   - key: options.html_missing_elements.calendar
-    t: Calendar
+    t: Календар
   - key: options.html_missing_elements.carousel
-    t: Carousel
+    t: Карусель
   - key: options.html_missing_elements.combobox_autocomplete
     t: Combobox / Autocomplete
   - key: options.html_missing_elements.command_palette
     t: Command Palette
   - key: options.html_missing_elements.context_menu
-    t: Context Menu / Right-Click Menu
+    t: Контекстне меню / Меню, що викликається правою кнопкою
   - key: options.html_missing_elements.datatable
-    t: Data table (with sorting, filtering, etc.)
+    t: Таблиця для даних
+  - key: options.html_missing_elements.datatable.description
+    t: Таблиця для даних із сортуванням, фільтруванням тощо.
   - key: options.html_missing_elements.dropdown_menu
     t: Dropdown Menu
   - key: options.html_missing_elements.image_zoom
-    t: Image Zoom
+    t: Масштабування зображення (Image Zoom)
   - key: options.html_missing_elements.progress_bar
-    t: Progress Bar
+    t: Індикатор прогресу виконання (Progress Bar)
   - key: options.html_missing_elements.skeleton_loading_placeholder
     t: Skeleton UI / Loading Placeholder
   - key: options.html_missing_elements.switch
-    t: Switch / Toggle
+    t: Перемикач (Switch / Toggle)
   - key: options.html_missing_elements.tabs
-    t: Tabs
+    t: Вкладки
   # - key: options.html_missing_elements.toast_message
   #   t: Toast Message
   - key: options.html_missing_elements.tooltip
-    t: Tooltip
+    t: Підказка (Tooltip)
   - key: options.html_missing_elements.offcanvas
     t: Off-Canvas Area
   - key: options.html_missing_elements.spinner
-    t: Loading Spinner
+    t: Покажчик завантаження (Loading Spinner)
   - key: options.html_missing_elements.segmented_button
-    t: Segmented Button
+    t: Кнопка із сегментами
   - key: options.html_missing_elements.scroll_area
-    t: Infinite Scroll
+    t: Елемент безкінечного прогортування
   - key: options.html_missing_elements.icon
-    t: Icon
+    t: Іконка
   - key: options.html_missing_elements.star_rating
     t: Star Rating
 
   - key: usage.html_pain_points_freeform
-    t: Other Pain Points
+    t: Інші проблеми
   - key: usage.html_pain_points_freeform.question
-    t: Any other pain points around using HTML and related technologies?
+    t: Які ще проблеми HTML та суміжних технологій найбільше вас розчаровують?
 
   - key: usage.html_css_js_balance
-    t: HTML/CSS vs JavaScript/TypeScript Balance
+    t: Співвідношення HTML/CSS і JavaScript/TypeScript
   - key: usage.html_css_js_balance.question
-    t: How do you divide your time between writing HTML/CSS and JavaScript (or TypeScript) code?
+    t: Як поділяється ваш час між написанням коду HTML/CSS і JavaScript (або TypeScript)?
   - key: options.html_css_js_balance.0
     t: 100% HTML/CSS
   - key: options.html_css_js_balance.4
@@ -744,73 +746,73 @@ translations:
   # other features
 
   - key: features.foo_attribute
-    t: "`{id}` attribute"
+    t: "атрибут `{id}`"
 
   - key: features.slot_assignment
-    t: Explicit slot assignment (`slot="foo"`)
+    t: Явне присвоєння slot-елемента (`slot="foo"`)
 
   - key: features.tabindex
-    t: "`tabindex` attribute"
+    t: "Атрибут `tabindex`"
 
   - key: features.respimg
-    t: "`srcset` and `sizes` attributes"
+    t: "Атрибути `srcset` і `sizes`"
 
   - key: features.model_element
-    t: "`<model>` for AR/VR/3D content"
+    t: "`<model>` для додавання AR/VR/3D"
 
   - key: features.slot_def
-    t: Defining slots (`<slot>` and `::slotted()`)
+    t: Визначення slot-елемента (`<slot>` і `::slotted()`)
 
   - key: features.controlslist
-    t: "`controlslist` attribute"
+    t: "Атрибут `controlslist`"
 
   - key: features.popover_api
     t: Popover API
 
   - key: features.lazy_loading
-    t: Lazy loading
+    t: Ліниве завантажування
 
   - key: features.sandbox_attr
-    t: "`sandbox` attribute for iframes"
+    t: "Атрибут `sandbox` для елементів iframe"
 
   - key: features.details_element
-    t: "`<details>` and `<summary>`"
+    t: "`<details>` і `<summary>`"
 
   - key: features.crossorigin
-    t: "`crossorigin` attribute"
+    t: "Атрибут `crossorigin`"
 
   - key: features.host_css
-    t: Styling component host (`:host`, `:host()`, `:host-context()`)
+    t: Додавання стилів до host-елемента компонента (`:host`, `:host()`, `:host-context()`)
 
   - key: features.element_internals
-    t: "`ElementInternals` API"
+    t: "API `ElementInternals`"
 
   - key: features.cors
     t: CORS
 
   - key: features.csp
-    t: Content-Security Policy (CSP)
+    t: Політика безпеки вмісту (CSP)
 
   - key: features.structured_data
-    t: Structured data (RDFa, Microdata, Microformats)
+    t: Структуровані дaні (RDFa, Microdata, Microformats)
 
   - key: features.extended_builtins
     t: Extended built-ins
 
   - key: features.html_modules
-    t: HTML Modules
+    t: HTML-модулі
 
   - key: features.accordion
     t: Exclusive accordion
 
   - key: features.imperative_slot
-    t: Imperative slot assignment
+    t: Імперативне присвоєння slot-елемента
 
   # - key: features.focusgroup
   #   t: "`focusgroup` attribute"
 
   - key: features.form_validation
-    t: Form validation
+    t: Валідація форми
 
   - key: features.aria
     t: ARIA
@@ -831,43 +833,43 @@ translations:
     t: "Resource Hints: prefetch (`<link rel=prefetch>`)"
 
   - key: features.declarative_shadow
-    t: Declarative Shadow DOM (`<template shadowrootmode="open">`)
+    t: Декларативний Shadow DOM (`<template shadowrootmode="open">`)
 
   - key: features.referrerpolicy
-    t: "`referrerpolicy` attribute"
+    t: "Атрибут `referrerpolicy`"
 
   - key: features.integrity
-    t: Subresource Integrity (`integrity` attribute)
+    t: Перевірка цілісності ресурсу (SRI) (атрибут `integrity`)
 
   - key: features.pwa_manifest
-    t: PWA manifest
+    t: Маніфест PWA
 
   - key: features.part_attr
-    t: Exposing component parts (`part` attribute)
+    t: Додавання доступу до частини компонента (атрибут `part`)
 
   - key: features.part_selector
-    t: Styling component parts (`::part()`)
+    t: Додавання стилів до частини компонента (`::part()`)
 
   - key: features.svg_element
-    t: Inline SVG (`<svg>`)
+    t: Вбудовані елементи SVG (`<svg>`)
 
   - key: features.math_element
-    t: Inline MathML (`<math>`)
+    t: Вбудовані елементи MathML (`<math>`)
 
   - key: features.scoped_element_registries
     t: Scoped Custom Element Registries
 
   - key: features.navigation_api
-    t: Navigation API
+    t: API навігації
 
   - key: features.custom_elements_defining
-    t: Defining Custom Elements
+    t: Визначення власних елементів
 
   - key: features.decoding
-    t: "`decoding` attribute"
+    t: "Атрибут `decoding`"
 
   - key: features.custom_elements_using
-    t: Using Custom Elements
+    t: Використання власних елементів
 
   - key: features.fencedframe
     t: Fenced frames
@@ -879,19 +881,19 @@ translations:
     t: HTML Media Capture
 
   - key: features.contenteditable_plaintext
-    t: "`plaintext-only` value for `contenteditable`"
+    t: "Значення `plaintext-only` для `contenteditable`"
 
   - key: features.dom_parts
     t: DOM Parts
 
   - key: features.fetchpriority
-    t: Fetch Priority API (`fetchpriority` attribute)
+    t: API визначення пріоритетності запиту (атрибут `fetchpriority`)
 
   - key: features.autocomplete
     t: '`autocomplete="hint"`'
 
   - key: features.inert_attribute
-    t: "`inert` attribute"
+    t: "Атрибут `inert`"
 
   - key: features.client_hints
     t: HTTP client hints
@@ -902,7 +904,7 @@ translations:
 
   - key: features.features_intro_html
     t: |
-      Welcome to the survey! These first couple sections are all about figuring out
-      which **features** of HTML (and related APIs) you know about.
+      Ласкаво просимо до опитування! Ці перші кілька розділів присвячені тому, щоб з’ясувати,
+      які **функції** (features) мови HTML і суміжні API ви знаєте.
 
-      By the way, if you want to learn more about any item in the survey, you can add it to your reading list by clicking its little "+" icon!
+      До речі, якщо ви хочете дізнатися більше про будь-яку тему в опитуванні, ви можете додати її до свого списку читання, натиснувши на маленький значок "+" біля відповідного пункту!
diff --git a/state_of_html_2023.yml b/state_of_html_2023.yml
index fa05fa9..36abe33 100644
--- a/state_of_html_2023.yml
+++ b/state_of_html_2023.yml
@@ -5,7 +5,7 @@ translations:
   ###########################################################################
 
   - key: general.results.description
-    t: The 2023 edition of the annual survey about the latest trends in the HTML ecosystem.
+    t: Щорічне опитування про останні тенденції в екосистемі HTML за 2023 рік.
 
   - key: introduction.html2023
     t: >
@@ -39,38 +39,38 @@ translations:
   ###########################################################################
 
   - key: sections.tshirt.title
-    t: T-shirt
+    t: Футболка
 
   - key: sections.tshirt.description
     t: |
-      ## Support the Survey With the State of HTML T-Shirt
+      ## Підтримайте опитування за допомогою футболки "Стан HTML"
 
-      Do you miss the the good old days of the mid-90s, when HTML was king and VHS tape covers featured futuristic, colorful artwork? 
+      Чи ви сумуєте за старими добрими часами середини 90-х, коли HTML був королем, а обкладинки VHS-касет містили футуристичні барвисті ілюстрації?
 
-      The bad news is that even with 2024's technology, you can't yet go back in time to relive those glory days. But what you *can* do is wear this awesome original retro t-shirt, designed by none other than the talented Christopher Kirk-Nielsen.
+      Прикра новина в тому, що навіть із технологіями 2024 року ви все ще не можете повернутися в минуле, щоб знову пережити ті славетні дні. Але що ви *можете* зробити, так це одягнути цю дивовижну оригінальну ретро-футболку, яку розробив не хто інший, як талановитий Christopher Kirk-Nielsen.
 
   - key: tshirt.about
-    t: About the T-shirt
+    t: Про футболку
 
   - key: tshirt.description
     t: |
-      We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+      Ми використовуємо високоякісну, надм'яку футболку приталеного крою із тканини з трьох типів волокна (tri-blend), надруковану нашими партнерами з Cotton Bureau.
 
   - key: tshirt.getit
-    t: Get It
+    t: Отримати
 
   - key: tshirt.price
-    t: USD $32 + shipping
+    t: USD $32 + доставляння
 
   - key: tshirt.designer.heading
-    t: About the Designer
+    t: Про дизайнера
 
   - key: tshirt.designer.name
     t: Christopher Kirk-Nielsen
 
   - key: tshirt.designer.bio
     t: |
-      Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+      Christopher родом із Франції, але тепер проживає у Сполучених Штатах; він не лише чудовий розробник клієнтської частини, а й талановитий ілюстратор, який спеціалізується на зображеннях у стилі ретро. Насправді ми радимо вам також переглянути [інші дизайни його футболок](https://chriskirknielsen.com/designs)!
 
   ###########################################################################
   # Sections Introductions
@@ -78,11 +78,11 @@ translations:
 
   - key: sections.user_info.description.html2023
     t: |
-      Welcome to the State of HTML survey results. This first-ever edition reached **20,904** participants from all around the world.
+      Ласкаво просимо до результатів опитування "Стан HTML". У першій в історії хвилі опитування взяли участь **20 904** учасників з усього світу.
 
   - key: sections.features.description.html2023
     t: |
-      HTML features and other browser APIs
+      Функції HTML та інші API браузера
 
   ###########################################################################
   # Other Content
diff --git a/state_of_js.yml b/state_of_js.yml
index 243281e..cfa66f4 100644
--- a/state_of_js.yml
+++ b/state_of_js.yml
@@ -573,12 +573,12 @@ translations:
   - key: features.language_pain_points
     t: Проблеми мови
   - key: features.language_pain_points.question
-    t: Які проблеми найбільше розчаровують вас у мові JavaScript?
+    t: Які проблеми мови JavaScript найбільше вас розчаровують?
 
   - key: features.browser_apis_pain_points
     t: Проблеми API браузера
   - key: features.browser_apis_pain_points.question
-    t: Які проблеми найбільше розчаровують вас в API браузера?
+    t: Які проблеми API браузера найбільше вас розчаровують?
 
   # patterns
   - key: patterns.object_oriented_programming
diff --git a/surveys.yml b/surveys.yml
index 9c01cc6..d4c15e6 100644
--- a/surveys.yml
+++ b/surveys.yml
@@ -374,12 +374,12 @@ translations:
 
       Довго здавалося, що HTML не розвивається, але все змінюється.
       На горизонті з'являються нові елементи, як-от `<selectlist>`, приголомшливі нові функції, наприклад, спливаючі вікна,
-      та ряд суміжних API браузера (Web Components, PWAs тощо).
+      та ряд суміжних API браузера (вебкомпоненти, PWA тощо).
 
       Цього року [Lea Verou](https://lea.verou.me/) взяла на себе величезне завдання з проведення цього абсолютно нового опитування — від змісту до UX і більше.
 
       Спираючись на успіх опитувань ["Стан JS"](http://stateofjs.com/) та ["Стан CSS"](https://stateofcss.com/), ми запускаємо **Стан HTML**;
-      останній відсутній елемент, що доповнює трилогію, тож ми можемо відстежувати еволюцію вебплатформи загалом.
+      останній відсутній елемент, що доповнює трилогію, щоб ми могли відстежувати еволюцію вебплатформи загалом.
 
       Переваги для вас:
       - Результати опитування **використовуються браузерами** та групами стандартів **для визначення пріоритетів розробки**.

From 80a10b097fde18a3a21853d746f29ec03cb3e98f Mon Sep 17 00:00:00 2001
From: alinkedd <alina.listunova@gmail.com>
Date: Thu, 30 May 2024 22:00:51 +0200
Subject: [PATCH 4/6] fixup! Add translations for state of html and related
 files

---
 state_of_html_2023.yml | 44 +++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/state_of_html_2023.yml b/state_of_html_2023.yml
index 36abe33..6a228b0 100644
--- a/state_of_html_2023.yml
+++ b/state_of_html_2023.yml
@@ -9,30 +9,30 @@ translations:
 
   - key: introduction.html2023
     t: >
-      While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, 
-      it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. 
-      After all once you've learned about `<div>`s and `<h>`s 1 through 6, what else is there to know?
+      Поки JavaScript заполоняв інтернет, а CSS рік за роком набував нових суперсил, 
+      здавалося, що HTML утішно дрімав, радо віддаючи центр уваги своїм молодшим братам і сестрам. 
+      Адже, крім `<div>`-ів та заголовків від 1 до 6, що ще треба знати?
 
 
-      Quite a lot, as it turns out! Once again we drafted [Lea Verou](https://lea.verou.me/) to put her in-depth
-      knowledge of the web platform to work, and help us craft a survey that ended up reaching far
-      beyond pure HTML to cover accessibility, web components, and much more.
+      Виявляється, чимало чого! Вкотре ми залучили [Lea Verou](https://lea.verou.me/), щоби з її 
+      допомогою та глибоким розумінням вебплатформи створити опитування, яке зрештою сягнуло далеко 
+      за межі звичного HTML та охопило доступність, вебкомпоненти і багато іншого.
 
 
-      This partly explains why this report has taken so long to come out – there was 
-      just a *lot* of new data to process! Hopefully you'll find that the result was worth the wait.
+      Зокрема ось чому для цього звіту знадобилося стільки часу: необхідно було 
+      опрацювати *величезну* кількість нових даних! Сподіваємося, що результат вартує вашого очікування.
 
 
-      Beyond the data included here, we've also improved our **chart customization** feature to let you tailor 
-      each data visualization to an even greater degree. If you find any interesting
-      insights in the process, be sure to let us know!
+      Окрім наведених відомостей, ми також покращили функцію **налаштування діаграм**, щоб ви могли 
+      ще точніше адаптувати для себе кожну візуалізацію. Якщо ви заодно дійдете до будь-яких неочевидних оригінальних 
+      висновків, обов'язково повідомте нас!
 
 
-      You can learn more about all this in [this post](https://dev.to/sachagreif/discover-the-state-of-html-2023-survey-results-n10), or by watching a [quick YouTube video](https://www.youtube.com/watch?v=G-rFwp2zUT4)
+      Докладніше про все це у [цій статті](https://dev.to/sachagreif/discover-the-state-of-html-2023-survey-results-n10) або [короткому YouTube-відео.](https://www.youtube.com/watch?v=G-rFwp2zUT4)
 
 
-      With all this out of the day, welcome to the results for the first ever State of HTML survey. 
-      After this, I'm willing to bet you won't look at good old HTML quite the same way ever again!
+      А тепер ласкаво просимо до результатів першої хвилі опитування "Cтан HTML". 
+      Б'юся об заклад, що опісля ви більше ніколи не будете дивитися на старий добрий HTML так само!
 
   ###########################################################################
   # Tshirt
@@ -90,33 +90,33 @@ translations:
 
   - key: features.all_features.description
     t: |
-      This chart recaps all of the survey's feature questions. The main bars represent a respondent's experience; and they are then further subdivided according to that respondent's sentiment. You can change the grouping to alternate between both. 
+      Ця діаграма підсумовує всі основні запитання опитування. Основні стовпці або рядки відповідають певному досвіду респондента; всередині вони поділені відповідно до ставлення респодента. Ви можете змінити групування, щоб чергувати ці дві категорії.
 
 
-      Note that you can also find a more specific breakdown of the same data in each feature sub-section.
+      Зауважте, що ви також можете знайти більш деталізоване розбиття цих даних у розділі відповідної функції.
 
   ###########################################################################
   # Sponsors
   ###########################################################################
 
   - key: sponsors.frontendmasters.description
-    t: Advance your skills with in-depth, modern front-end engineering courses.
+    t: Вдосконалюйте свої навички за допомогою поглиблених сучасних інженерних курсів.
   - key: sponsors.google_chrome.description
-    t: Thanks to the Google Chrome team for supporting our work.
+    t: Дякуємо команді Google Chrome за підтримку нашої роботи.
   - key: sponsors.tokyodev.description
-    t: Find your dream developer job in Japan today.
+    t: Знайдіть роботу розробника своєї мрії в Японії вже сьогодні.
   - key: sponsors.renderatl.description
-    t: The tech conference focused on Front-End Engineering.
+    t: Технічна конференція, присвячена інженерії клієнтського коду.
 
   ###########################################################################
   # Conclusion
   ###########################################################################
 
   - key: conclusion.html2023.bio
-    t: W3C Technical Architecture Group Member & MIT CSAIL Researcher
+    t: Учасниця робочої групи з питань технічної архітектури (TAG) при W3C і дослідниця в лабораторії комп'ютерних наук і штучного інтелекту (CSAIL) при MIT
   - key: conclusion.html2023
     t: >
-      *Phew!* This survey has taken a monumental effort by dozens of people across six continents. Not only did it set a new record for the most responses in a “State of…” survey debut, its data collection UI pioneered innovations that gave us unparalleled insight into developer attitudes, and will ripple far beyond its scope. 
+      *Хху!* Це опитування потребувало колосальних зусиль десятків людей із шести континентів.  Not only did it set a new record for the most responses in a “State of…” survey debut, its data collection UI pioneered innovations that gave us unparalleled insight into developer attitudes, and will ripple far beyond its scope.
 
 
       Some argue that improving HTML is futile, but the survey resoundingly demonstrates the contrary. **Developers crave more interactive HTML elements**: not only were interactive elements like `<datalist>` or the Popover API among those accumulating the most positive sentiment across all categories, but in addition all top [missing elements](https://2023.stateofhtml.com/en-US/usage/#html_missing_elements) were interactive widgets. 

From fd2d7008fdc3aabe41b53945d197ee19c14fce7d Mon Sep 17 00:00:00 2001
From: alinkedd <alina.listunova@gmail.com>
Date: Thu, 6 Jun 2024 20:34:33 +0300
Subject: [PATCH 5/6] fixup! Add translations for state of html and related
 files

---
 state_of_html.yml | 58 +++++++++++++++++++++++------------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/state_of_html.yml b/state_of_html.yml
index 30288b5..5c50cef 100644
--- a/state_of_html.yml
+++ b/state_of_html.yml
@@ -318,12 +318,12 @@ translations:
   - key: features.web_components_libraries
     t: Бібліотеки вебкомпонентів
   - key: features.web_components_libraries.question
-    t: Have you used any Web Components libraries?
+    t: Чи ви використовували бібліотеки вебкомпонентів?
 
   - key: features.web_components_features
-    t: Other Web Component Features
+    t: Інші функції вебкомпонентів
   - key: features.web_components_features.question
-    t: Which of the following web component features have you used?
+    t: Які з наведених функцій вебкомпонентів ви використовували?
   - key: options.web_components_features.host_pseudos.description
     t: |
       `:host` , `:host()` , `:host-context()`
@@ -338,7 +338,7 @@ translations:
   - key: features.using_web_components_pain_points.question
     t: Які проблеми *використання* вебкомпонентів найбільше вас розчаровують?
   - key: features.using_web_components_pain_points.prompt
-    t: Using Web Components that you or others have made. Missing features, browser incompatibilities, etc.
+    t: Використання власних або чужих вебкомпонентів. Відсутні функції, несумісність між браузерами тощо.
   - key: features.using_web_components_pain_points.placeholder
     t: |
       Проблема #{index}…
@@ -349,7 +349,7 @@ translations:
     t: Які проблеми *створення* вебкомпонентів найбільше вас розчаровують?
   - key: features.making_web_components_pain_points.prompt
     t: |
-      What prevents you from creating the amazing components you envision? Missing features, browser incompatibilities, etc.
+      Що заважає вам створити дивовижні компоненти зі своєї уяви? Відсутні функції, несумісність між браузерами тощо.
   - key: features.making_web_components_pain_points.placeholder
     t: |
       Проблема #{index}…
@@ -357,14 +357,14 @@ translations:
   # Accessibility
 
   - key: features.accessibility_features
-    t: Accessibility Features
+    t: Функції доступності
   - key: features.accessibility_features.question
-    t: Which of these accessibility features have you used?
+    t: Які з наведених функцій доступності ви використовували?
 
   - key: features.accessibility_tools
-    t: Accessibility Tools
+    t: Інструменти доступності
   - key: features.accessibility_tools.question
-    t: What tools do you use for accessibility testing?
+    t: Які інструменти ви використовуєте для тестування доступності?
 
   - key: features.accessibility_pain_points
     t: Проблеми доступності
@@ -375,56 +375,56 @@ translations:
       Проблема #{index}…
 
   - key: features.accessibility_disabilities
-    t: User Disabilities
+    t: Порушення здоров'я користувача
   - key: features.accessibility_disabilities.question
-    t: What kind of user disabilities do you account for when making websites?
+    t: Які порушення здоров'я користувачів ви враховуєте під час створення вебсайтів?
 
   - key: options.accessibility_disabilities.hearing_impairments
-    t: Hearing impairments
+    t: Порушення слуху
   - key: options.accessibility_disabilities.hearing_impairments.description
-    t: Deafness, tinnitus, etc.
+    t: Глухота, шум у вухах тощо.
 
   - key: options.accessibility_disabilities.mobility_impairments
-    t: Mobility impairments
+    t: Порушення рухових функцій
   - key: options.accessibility_disabilities.mobility_impairments.description
-    t: Arthritis, carpal tunnel, etc.
+    t: Артрит, зап'ястковий тунельний синдром тощо.
 
   - key: options.accessibility_disabilities.learning_disabilities
-    t: Learning disabilities
+    t: Розлади навчання
   - key: options.accessibility_disabilities.learning_disabilities.description
-    t: Dyslexia, dyscalculia, etc.
+    t: Дислексія, дискалькулія тощо.
 
   - key: options.accessibility_disabilities.cognitive_impairments
     t: |
-      Other cognitive impairments
+      Інші когнітивні порушення
   - key: options.accessibility_disabilities.cognitive_impairments.description
     t: |
-      Anxiety, Autism, OCD, ADHD, etc.
+      Тривожний розлад, аутизм, ОКР, СДУГ тощо.
 
   - key: options.accessibility_disabilities.vestibular_disorders
-    t: Vestibular disorders
+    t: Вестибулярні розлади
   - key: options.accessibility_disabilities.vestibular_disorders.description
-    t: Epilepsy, vertigo, etc.
+    t: Епілепсія, запаморочення тощо.
 
   - key: options.accessibility_disabilities.low_vision
-    t: Low vision
+    t: Слабкий зір
   - key: options.accessibility_disabilities.low_vision.description
-    t: Blindness, high myopia, etc.
+    t: Сліпота, міопія високого ступеня тощо.
 
   - key: options.accessibility_disabilities.atypical_vision
-    t: Atypical color vision
+    t: Атиповий колірний зір
   - key: options.accessibility_disabilities.atypical_vision.description
-    t: Color blindness
+    t: Колірна сліпота
 
   - key: features.accessibility_screenreaders
-    t: Screen Readers
+    t: Екранні зчитувальні пристрої
   - key: features.accessibility_screenreaders.question
-    t: Which screen readers do you use for accessibility testing?
+    t: Які екранні зчитувальні пристрої ви використовуєте для тестування доступності?
 
   - key: features.accessibility_techniques
-    t: Other Accessibility Techniques
+    t: Інші методи забезпечення доступності
   - key: features.accessibility_techniques.question
-    t: What other techniques are part of your regular accessibility strategy?
+    t: Які ще методи складають вашу звичну стратегію забезпечення доступності?
 
   - key: options.accessibility_techniques.tabindex
     t: |

From eb9be1e274dd595cfe2971e162c3993393520fc7 Mon Sep 17 00:00:00 2001
From: alinkedd <alina.listunova@gmail.com>
Date: Thu, 6 Jun 2024 20:34:57 +0300
Subject: [PATCH 6/6] Update translations in common file

---
 common.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/common.yml b/common.yml
index ae42a23..5a290d9 100644
--- a/common.yml
+++ b/common.yml
@@ -850,7 +850,7 @@ translations:
       Порушення рухових функцій (як-от: артрит, зап'ястковий тунельний синдром тощо)
   - key: options.disability_status.cognitive_impairments
     t: >
-      Когнітивні порушення (як-от: тривога, дислексія, СДУГ тощо)
+      Когнітивні порушення (як-от: тривожний розлад, дислексія, СДУГ тощо)
   - key: options.disability_status.not_listed
     t: >
       Нічого з перерахованого
@@ -1417,7 +1417,7 @@ translations:
 
   # disability status
   - key: user_info.disability_status
-    t: Порушення працездатності
+    t: Порушення здоров'я
   - key: user_info.disability_status.question
     t: >
       Яке з наведених порушень ви маєте?
@@ -1427,7 +1427,7 @@ translations:
 
   # disability status (other)
   - key: user_info.disability_status.others
-    t: Інші порушення працездатності
+    t: Інші порушення здоров'я
   - key: user_info.disability_status_freeform
     aliasFor: user_info.disability_status.others