Merge branch 'main' into Issue128-tooltipupdate

README.md

@@ -200,6 +200,44 @@ If you are trying to contribute to the Enable site from a forked version of this
 
 You will need to update the version number that NPM broadcasts as the latest version number. Please use [np](https://github.com/sindresorhus/np) to do this (it is what we have used in the past). This should be done by development lead of the Enable project (as of this writing, this is [Zoltan Hawryluk](https://www.npmjs.com/~zoltandulac)).
 
+### Strcutured Data Markup
+
+Structured Data Markup is a way to label or tag the content on your website so that search engines and other platforms can better understand it.
+
+The Article and HowTo tags are two types of structured data markup that help search engines understand specific kinds of content.
+
+#### Article Tag:
+
+This is used to mark up articles, blog posts, or other written content. By using the Article tag, we help search engines identify the main parts of your article, like the headline. This can make your article show up better in search results, sometimes with extra features like the headline or image preview.
+
+#### HowTo Tag:
+
+This is used for content that gives step-by-step instructions on how to do something. When you use the HowTo tag, search engines can display your instructions in a more detailed way, often showing each step directly in the search results.
+
+Example of checkbox in the meta-info.json, where the mainEntity can be an array of 'Article' and 'HowTo' objects extracted from page:
+
+```json
+"checkbox.php": {
+    "title": "How to Create Accessible Checkboxes",
+    "desc": "Here is a step-by-step guide to creating accessible checkboxes",
+    "url": "https://www.useragentman.com/enable/checkbox.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "A real styled HTML5 checkbox",
+      "desc": "You can style an HTML5 checkbox using CSS easily.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#a-real-styled-html5-checkbox--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the styled checkboxe accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the styled checkboxe accessible",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-1"
+      },
+  ]
+}
+```
+
 ## References
 
 When testing using screen readers, these resources may be of help to you:

content/body/acknowledgements.php

@@ -17,6 +17,7 @@
 </p>
 
 <ul>
+  <li><a href="https://github.com/majid-paktinat">Majid Paktinat</a> and <a href="https://github.com/akshaypanchal">Akshaykumar Panchal</a> for implementing dynamic Structured Data Markup for improving the SEO of the Enable Project.</li>
   <li><a href="https://github.com/alisonhall">Alison Hall</a> for cleaning up and streamlining the unit testing and automated testing NPM tasks (and also doing the difficult task of updating the NPM packages within the project in 2024).
   </li>
   <li>Sahil Singh for unit tests for the <a href="input-mask.php">input mask component</a>.</li>

content/body/focus-styling.php

@@ -1,3 +1,17 @@
+<p>
+  Before we dive into making focus outlines accessible, let's first understand what a focus outline is and why it’s important for web accessibility, particularly for screen readers. 
+  If you're already familiar with focus outlines, feel free to skip to the next section. For those who aren’t, here's a brief definition.
+</p>
+
+<h2>What is a Focus Outline?</h2>
+
+<p>
+  Simply put, when a specific HTML element is ready to accept keyboard input, it is considered to be "in focus." 
+  As users navigate a webpage using the keyboard (typically via the Tab key), different elements receive focus, allowing screen readers to read their content. 
+  According to accessibility standards, any element in focus should have a visible border around it, known as the focus outline. This helps users, especially those relying on screen readers or keyboard navigation, to know which element is currently active.
+</p>
+
+
 <p>
   Focus states are used by keyboard users to know what interactive element they can currently manipulate. They are easily
   styled with the <code>outline</code> CSS property and the <code>:focus</code> and <code>:focus-visible</code> pseudo-classes.

content/body/form-error-checking.php

@@ -271,29 +271,6 @@
       }
       </script>
 
-      <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@type": "WebPage",
-        "name": "Accessible Form Validation: HTML5 and Custom Approaches",
-        "description": "Learn how to make form validation and error checking accessible using HTML5 and custom validation methods. Includes code examples and best practices.",
-        "url": "https://www.useragentman.com/enable/form-error-checking.php",
-        "mainEntity": [
-          {
-            "@type": "HowTo",
-            "name": "Using HTML5 for Accessible Form Validation",
-            "text": "You can use just the required and pattern attributes on HTML forms to do client-side validation without JavaScript.",
-            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-native-html5-validation--heading"
-          },
-          {
-            "@type": "HowTo",
-            "name": "Using Custom Validation for Accessible Form Validation",
-            "text": "You can use enable-a11y node package to handle client-side form validation and error messages.",
-            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-custom-validation--heading"
-          }
-        ]
-      }
-    </script>
 
 
 <?= includeNPMInstructions("accessibility", [], null, false, [