From e5bbd3f3997fb86225c8ec8197531d4b0c8d4b0c Mon Sep 17 00:00:00 2001 From: Majid Paktinat Date: Wed, 14 Aug 2024 16:15:35 -0400 Subject: [PATCH 1/9] added structured data markup --- content/body/button.php | 63 ++++++++++++++++++++++++++++- content/body/checkbox.php | 81 ++++++++++++++++++++++++++++++++++++- content/body/radiogroup.php | 60 +++++++++++++++++++++++++++ 3 files changed, 201 insertions(+), 3 deletions(-) diff --git a/content/body/button.php b/content/body/button.php index 95812a81..e8bad4a4 100644 --- a/content/body/button.php +++ b/content/body/button.php @@ -29,6 +29,10 @@ The <button> tag has been available for a long time and developers should utilize it for this specific purpose.

+

+ An accessible HTML button is one that can be easily used by all individuals, including those with disabilities. Accessibility ensures that everyone, regardless of their abilities, can interact with web content. +

+

This may seem obvious to many developers. Unfortunately, there is a lot of code out there that uses <a> tags @@ -46,6 +50,10 @@

An HTML Button.

true]); ?> +

+ An HTML button is a clickable element that allows users to perform an action, such as submitting a form, triggering a function, or navigating to another page. +

+

The most bulletproof way to make a button. It "just works" for everyone.

@@ -250,4 +258,57 @@
- \ No newline at end of file + + \ No newline at end of file diff --git a/content/body/checkbox.php b/content/body/checkbox.php index 86de5ed9..fe49c212 100644 --- a/content/body/checkbox.php +++ b/content/body/checkbox.php @@ -386,5 +386,82 @@ true, -]) -?> +]) ?> + + diff --git a/content/body/radiogroup.php b/content/body/radiogroup.php index 23b13ca4..907f5dcb 100644 --- a/content/body/radiogroup.php +++ b/content/body/radiogroup.php @@ -333,4 +333,64 @@ "notes": "The radiogroup is like the fieldset tag. It should use the aria-labelledby to point to the element that labels the radiogroup (which acts as the legend tag)." }] } + + + \ No newline at end of file From d2f52222cfacbedac2bbb9d043ee3a0e75a38e00 Mon Sep 17 00:00:00 2001 From: Majid Date: Fri, 23 Aug 2024 14:23:18 -0400 Subject: [PATCH 2/9] added function in order to programatically generate structured data markup --- content/body/button.php | 62 +---------- content/body/checkbox.php | 78 -------------- content/body/radiogroup.php | 60 ----------- templates/data/meta-info.json | 177 +++++++++++++++++++++++++++++-- templates/includes/functions.php | 92 ++++++++++++++++ 5 files changed, 264 insertions(+), 205 deletions(-) diff --git a/content/body/button.php b/content/body/button.php index e8bad4a4..f4644656 100644 --- a/content/body/button.php +++ b/content/body/button.php @@ -29,9 +29,6 @@ The <button> tag has been available for a long time and developers should utilize it for this specific purpose.

-

- An accessible HTML button is one that can be easily used by all individuals, including those with disabilities. Accessibility ensures that everyone, regardless of their abilities, can interact with web content. -

This may seem obvious to many developers. @@ -50,9 +47,6 @@

An HTML Button.

true]); ?> -

- An HTML button is a clickable element that allows users to perform an action, such as submitting a form, triggering a function, or navigating to another page. -

The most bulletproof way to make a button. It "just works" for everyone.

@@ -257,58 +251,4 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/content/body/checkbox.php b/content/body/checkbox.php index fe49c212..3af71910 100644 --- a/content/body/checkbox.php +++ b/content/body/checkbox.php @@ -387,81 +387,3 @@ true, ]) ?> - - diff --git a/content/body/radiogroup.php b/content/body/radiogroup.php index 907f5dcb..23b13ca4 100644 --- a/content/body/radiogroup.php +++ b/content/body/radiogroup.php @@ -333,64 +333,4 @@ "notes": "The radiogroup is like the fieldset tag. It should use the aria-labelledby to point to the element that labels the radiogroup (which acts as the legend tag)." }] } - - - \ No newline at end of file diff --git a/templates/data/meta-info.json b/templates/data/meta-info.json index 4cd9f43e..031a4655 100644 --- a/templates/data/meta-info.json +++ b/templates/data/meta-info.json @@ -35,8 +35,53 @@ "wip": true }, "button.php": { - "title": "Accessible Buttons", - "desc": "Native HTML5 buttons are the best when you have existing inaccessible code, using roles can help." + "title": "How to Create Accessible Buttons", + "desc": "An accessible HTML button is one that can be easily used by all individuals, including those with disabilities. Accessibility ensures that everyone, regardless of their abilities, can interact with web content.", + "url": "https://www.useragentman.com/enable/button.php", + "mainEntity":[ + { + "type": "Article", + "title": "Accessible Button ?", + "desc": "An accessible HTML button is one that can be easily used by all individuals, including those with disabilities. Accessibility ensures that everyone, regardless of their abilities, can interact with web content.", + "url": "https://www.useragentman.com/enable/button.php#an-html-button---heading" + }, + { + "type": "HowTo", + "title": "An HTML Button", + "desc": "An HTML button is a clickable element that allows users to perform an action, such as submitting a form, triggering a function, or navigating to another page.", + "url": "https://www.useragentman.com/enable/button.php#an-html-button---heading" + }, + { + "type": "HowTo", + "title": "Code Walkthrough to make button accessible", + "desc": "See the dropdown to highlight each of the individual steps that make the button accessible", + "url": "https://www.useragentman.com/enable/button.php#developer-walkthrough-1" + }, + { + "type": "HowTo", + "title": "A link with the role of button", + "desc": "Links can behave like a button, especially when it triggers an action rather than navigating to a different page.", + "url": "https://www.useragentman.com/enable/button.php#a-link-with-the-role-of-button--heading" + }, + { + "type": "HowTo", + "title": "A link with the role of button and be accessible", + "desc": "See the dropdown to highlight each of the individual steps that make the link behave like a button and be accessible", + "url": "https://www.useragentman.com/enable/button.php#developer-walkthrough-2" + }, + { + "type": "HowTo", + "title": "A Div with the role of button and be accessible", + "desc": "See the dropdown to highlight each of the individual steps that make the div behave like a button and be accessible", + "url": "https://www.useragentman.com/enable/button.php#developer-walkthrough-3" + }, + { + "type": "HowTo", + "title": "Disabled HTML Button", + "desc": "There are two ways of making a button disabled; Using one of these attributes, disabled=true or aria-disabled=true", + "url": "https://www.useragentman.com/enable/button.php#disabled-html-button---heading" + } + ] }, "carousel.php": { "title": "Accessible Carousels", @@ -44,8 +89,77 @@ "isNPM": "true" }, "checkbox.php": { - "title": "Accessible Checkboxes", - "desc": "This page will show you how to code HTML5 and custom checkboxes in an accessible way, including indeterminate checkboxes." + "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" + }, + { + "type": "Article", + "title": "A DIV with a role of checkbox", + "desc": "If you come across a
in that is marked up like a checkbox, that is not accessible", + "url": "https://www.useragentman.com/enable/checkbox.php#a-div-with-a-role-of-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 a
that is marked up like a checkbox accessible", + "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-2" + }, + { + "type": "Article", + "title": "HTML checkbox group", + "desc": "If you have a group of checkboxes, you could use instead of fieldsets", + "url": "https://www.useragentman.com/enable/checkbox.php#html-checkbox-group--heading" + }, + { + "type": "HowTo", + "title": "Step-by-Step to make a group of checkboxes accessible", + "desc": "See the dropdown to highlight each of the individual steps that make a group of checkboxes accessible", + "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-3" + }, + { + "type": "Article", + "title": "Indeterminate Checkboxes Using Native HTML", + "desc": "We usually think of checkboxes being either checked or unchecked. There is a third possible state: indeterminate. Note that this indeterminate state can be set via JavaScript. There is no indeterminate HTML attribute.", + "url": "https://www.useragentman.com/enable/checkbox.php#indeterminate-checkboxes-using-native-html--heading" + }, + { + "type": "HowTo", + "title": "Step-by-Step Indeterminate Checkboxes Using Native HTML", + "desc": "See the dropdown to highlight each of the individual steps that make the example accessible.", + "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-5" + }, + { + "type": "Article", + "title": "Indeterminate Checkboxes Using ARIA", + "desc": "Just like two-state checkboxes, we can use ARIA to create faux checkboxes.", + "url": "https://www.useragentman.com/enable/checkbox.php#indeterminate-checkboxes-using-aria--heading" + }, + { + "type": "HowTo", + "title": "Step-by-Step Indeterminate Checkboxes Using ARIA", + "desc": "See the dropdown to highlight each of the individual steps that make the example accessible.", + "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-7" + }, + { + "type": "HowTo", + "title": "How to Install the Hierarchical Checkbox Library into Your Projects", + "desc": "See the step-by-step installation guide for the Hierarchical Checkbox Library", + "url": "https://www.useragentman.com/enable/checkbox.php#how-to-install-the-hierarchical-checkbox-library-into-your-projects--heading" + } + ] }, "combobox.php": { "title": "Accessible Autocomplete (a.k.a Combobox)", @@ -155,8 +269,59 @@ "desc": "HTML5 Progress Bars should be coded so users who use screen readers and assistive technology know they are there what they are trying to tell them." }, "radiogroup.php": { - "title": "Accessible Radio Groups", - "desc": "They way radio buttons are made accessible is slightly different than other form controls." + "title": "How to Create Accessible Radio Groups", + "desc": "Here is a step-by-step guide to creating accessible radio groups", + "url": "https://www.useragentman.com/enable/radiogroup.php", + "mainEntity": [ + { + "type": "Article", + "title": "Radio Buttons grouped with fieldsets", + "desc": "This is the recommended way of grouping radio buttons. Please look at the next few examples.", + "url": "https://www.useragentman.com/enable/radiogroup.php#radio-buttons-grouped-with-fieldsets--heading" + }, + { + "type": "HowTo", + "title": "Step-by-Step to make the group radio buttons accessible", + "desc": "See the dropdown to highlight each of the individual steps that make the group radio buttons accessible", + "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-1" + }, + { + "type": "Article", + "title": "HTML5 radio buttons that have custom styling", + "desc": "Read this to style native radio buttons like a Jedi Master", + "url": "https://www.useragentman.com/enable/radiogroup.php#html5-radio-buttons-that-have-custom-styling--heading" + }, + { + "type": "HowTo", + "title": "Step-by-Step to make the custom styled radio buttons accessible", + "desc": "See the dropdown to highlight each of the individual steps that make the custom styled radio buttons accessible", + "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-2" + }, + { + "type": "Article", + "title": "Custom radio buttons", + "desc": "making
and/or tags look like radio buttons?", + "url": "https://www.useragentman.com/enable/radiogroup.php#custom-radio-buttons-using-aria--heading" + }, + { + "type": "HowTo", + "title": "Step-by-Step to make the custom radio buttons accessible", + "desc": "See the dropdown to highlight each of the individual steps that make the custom radio buttons accessible", + "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-3" + }, + { + "type": "Article", + "title": "An alternative to fieldsets", + "desc": "Replace fieldsets with an ARIA radiogroup role", + "url": "https://www.useragentman.com/enable/radiogroup.php#html5-version-that-uses-radiogroup-roles---heading" + }, + { + "type": "HowTo", + "title": "Step-by-Step to make replace fieldsets with an ARIA radiogroup", + "desc": "See the dropdown to highlight each of the individual steps that make an ARIA radiogroup", + "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-4" + } + ] }, "skip-link.php": { "title": "Skip Links (That Work In Mobile Too!)", diff --git a/templates/includes/functions.php b/templates/includes/functions.php index 43a262c0..e0ae0223 100644 --- a/templates/includes/functions.php +++ b/templates/includes/functions.php @@ -272,6 +272,11 @@ function getMetadata() // Let's ensure these properties are entified. foreach ($fileProps as $prop => $propValue) { + // Check if the argument is not a string + if (!is_string($propValue)) { + // Convert the array (or other non-string data types) to a JSON string + $propValue = json_encode($propValue); + } $fileProps->{$prop} = htmlentities($propValue); } return; @@ -354,4 +359,91 @@ function getURIPrefix() getMetadata(); +function processJsonFile() +{ + $uriFile = getURIFilename(); + $tokenToFind = trim(preg_replace("/^\//", "", $uriFile)); + $metaFile = "./data/meta-info.json"; + + // Check if the file exists + if (!file_exists($metaFile)) { + echo "File does not exist: $metaFile\n"; + return; + } + + // Read the file content + $jsonContent = file_get_contents($metaFile); + + // Decode the JSON content + $data = json_decode($jsonContent, true); + + // Check if the JSON was decoded successfully + if (json_last_error() !== JSON_ERROR_NONE) { + echo "Error decoding JSON: " . json_last_error_msg() . "\n"; + return; + } + + // Check if the token exists in the data + if (!array_key_exists($tokenToFind, $data)) { + echo "Key '$tokenToFind' does not exist in the JSON data.\n"; + return; + } + + // Get the item associated with the token + $item = $data[$tokenToFind]; + + $jsonLd = [ + "@context" => "https://schema.org", + "@type" => "WebPage", + "name" => isset($item["title"]) ? $item["title"] : "", + "description" => isset($item["desc"]) ? $item["desc"] : "", + "url" => isset($item["url"]) + ? str_replace("\/", "/", html_entity_decode($item["url"])) + : "", + "mainEntity" => [], + ]; + + // Process 'mainEntity' to generate JSON-LD structure + if (isset($item["mainEntity"]) && is_array($item["mainEntity"])) { + foreach ($item["mainEntity"] as $entity) { + $mainEntity = [ + "@type" => isset($entity["type"]) ? $entity["type"] : "", + "name" => isset($entity["title"]) ? $entity["title"] : "", + "articleBody" => isset($entity["desc"]) ? $entity["desc"] : "", + "url" => isset($entity["url"]) + ? str_replace("\/", "/", html_entity_decode($entity["url"])) + : "", + ]; + // Rename 'articleBody' to 'text' if type is 'HowTo' + if (isset($entity["type"]) && $entity["type"] === "HowTo") { + $mainEntity["text"] = isset($entity["desc"]) + ? $entity["desc"] + : ""; + unset($mainEntity["articleBody"]); + } + $jsonLd["mainEntity"][] = $mainEntity; + } + } + + // Remove 'mainEntity' if it is an empty array + if (empty($jsonLd["mainEntity"])) { + unset($jsonLd["mainEntity"]); + } + + // Remove empty attributes from the main jsonLd array + $jsonLd = array_filter($jsonLd, function ($value) { + return !empty($value); + }); + + // Output JSON-LD with pretty print + $jsonLdStr = json_encode($jsonLd, JSON_PRETTY_PRINT); + + // Ensure slashes are not escaped in the final output + $jsonLdStr = str_replace("\\/", "/", $jsonLdStr); + + echo '"; +} + +processJsonFile(); + ?> From f00b7040ed7e1290710d8528b4db3a07f46130c8 Mon Sep 17 00:00:00 2001 From: Majid Date: Fri, 23 Aug 2024 14:32:56 -0400 Subject: [PATCH 3/9] cleanup --- content/body/button.php | 2 -- content/body/checkbox.php | 3 ++- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/content/body/button.php b/content/body/button.php index f4644656..ca7039ed 100644 --- a/content/body/button.php +++ b/content/body/button.php @@ -29,7 +29,6 @@ The <button> tag has been available for a long time and developers should utilize it for this specific purpose.

-

This may seem obvious to many developers. Unfortunately, there is a lot of code out there that uses <a> tags @@ -47,7 +46,6 @@

An HTML Button.

true]); ?> -

The most bulletproof way to make a button. It "just works" for everyone.

diff --git a/content/body/checkbox.php b/content/body/checkbox.php index 3af71910..86de5ed9 100644 --- a/content/body/checkbox.php +++ b/content/body/checkbox.php @@ -386,4 +386,5 @@ true, -]) ?> +]) +?> From 6e1e175e0ed1722a72f795fd4c43729d581bc10e Mon Sep 17 00:00:00 2001 From: Majid Date: Mon, 26 Aug 2024 10:43:46 -0400 Subject: [PATCH 4/9] added names into acknowledgements --- content/body/acknowledgements.php | 1 + content/body/button.php | 3 ++- templates/data/meta-info.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/content/body/acknowledgements.php b/content/body/acknowledgements.php index 584f3c79..d831763e 100644 --- a/content/body/acknowledgements.php +++ b/content/body/acknowledgements.php @@ -17,6 +17,7 @@

    +
  • Majid Paktinat and Akshaykumar Panchal for implementing dynamic Structured Data Markup for improving the SEO of the Enable Project. Majid Paktinat and Akshaykumar Panchal for implementing dynamic structured data markup for improving the SEO of the Enable Project.
  • Alison Hall 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).
  • Sahil Singh for unit tests for the input mask component.
    • diff --git a/content/body/button.php b/content/body/button.php index ca7039ed..178aac8c 100644 --- a/content/body/button.php +++ b/content/body/button.php @@ -249,4 +249,5 @@
-
\ No newline at end of file +
+ \ No newline at end of file diff --git a/templates/data/meta-info.json b/templates/data/meta-info.json index 031a4655..dab2b989 100644 --- a/templates/data/meta-info.json +++ b/templates/data/meta-info.json @@ -36,7 +36,7 @@ }, "button.php": { "title": "How to Create Accessible Buttons", - "desc": "An accessible HTML button is one that can be easily used by all individuals, including those with disabilities. Accessibility ensures that everyone, regardless of their abilities, can interact with web content.", + "desc": "Native HTML5 buttons are the best when you have existing inaccessible code, using roles can help.", "url": "https://www.useragentman.com/enable/button.php", "mainEntity":[ { From 77b9c95693a3cd77fe397b556ea86f0b43640e48 Mon Sep 17 00:00:00 2001 From: Majid Date: Mon, 26 Aug 2024 10:45:16 -0400 Subject: [PATCH 5/9] cleanup --- content/body/button.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/body/button.php b/content/body/button.php index 178aac8c..95812a81 100644 --- a/content/body/button.php +++ b/content/body/button.php @@ -250,4 +250,4 @@
- \ No newline at end of file + \ No newline at end of file From 1ffc070218ce8488fdb73469ae6b2419d82abc4e Mon Sep 17 00:00:00 2001 From: Majid Date: Mon, 26 Aug 2024 10:48:13 -0400 Subject: [PATCH 6/9] updated the acknowledgements --- content/body/acknowledgements.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/body/acknowledgements.php b/content/body/acknowledgements.php index d831763e..59f8dfaa 100644 --- a/content/body/acknowledgements.php +++ b/content/body/acknowledgements.php @@ -17,7 +17,7 @@

    -
  • Majid Paktinat and Akshaykumar Panchal for implementing dynamic Structured Data Markup for improving the SEO of the Enable Project. Majid Paktinat and Akshaykumar Panchal for implementing dynamic structured data markup for improving the SEO of the Enable Project.
    • +
  • Majid Paktinat and Akshaykumar Panchal for implementing dynamic Structured Data Markup for improving the SEO of the Enable Project.
  • Alison Hall 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).
  • Sahil Singh for unit tests for the input mask component.
    • From ddee2d9e73ff6318304905ef80aec9c9d5c0bdc0 Mon Sep 17 00:00:00 2001 From: Majid Date: Tue, 27 Aug 2024 09:42:21 -0400 Subject: [PATCH 7/9] fixed CI/CD pipeline error --- templates/includes/functions.php | 3 ++- templates/includes/meta-info.php | 9 ++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/templates/includes/functions.php b/templates/includes/functions.php index e0ae0223..5a90a63c 100644 --- a/templates/includes/functions.php +++ b/templates/includes/functions.php @@ -361,6 +361,7 @@ function getURIPrefix() function processJsonFile() { + global $jsonLdStrOutput; $uriFile = getURIFilename(); $tokenToFind = trim(preg_replace("/^\//", "", $uriFile)); $metaFile = "./data/meta-info.json"; @@ -441,7 +442,7 @@ function processJsonFile() // Ensure slashes are not escaped in the final output $jsonLdStr = str_replace("\\/", "/", $jsonLdStr); - echo '"; + $jsonLdStrOutput = $jsonLdStr; } processJsonFile(); diff --git a/templates/includes/meta-info.php b/templates/includes/meta-info.php index 385c7e1c..22ab9060 100644 --- a/templates/includes/meta-info.php +++ b/templates/includes/meta-info.php @@ -13,11 +13,18 @@ - + +' . $jsonLdStrOutput . ""; +} +?> From 173affac9f41575904dfd4b753a2c5b381f68bd7 Mon Sep 17 00:00:00 2001 From: AKSHAY PANCHAL Date: Wed, 28 Aug 2024 17:04:39 -0400 Subject: [PATCH 8/9] fix[SEO-Issue#171] - Added new title, description and structured content to Focus Management and ARIA Regions pages --- content/body/focus-styling.php | 14 +++ content/body/form-error-checking.php | 23 ---- templates/data/meta-info.json | 179 +++++++++++++++++++++++++-- templates/includes/logo-link.php | 2 +- templates/includes/stats.php | 2 +- 5 files changed, 182 insertions(+), 38 deletions(-) diff --git a/content/body/focus-styling.php b/content/body/focus-styling.php index 358a33c7..839d0154 100644 --- a/content/body/focus-styling.php +++ b/content/body/focus-styling.php @@ -1,3 +1,17 @@ +

    + 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. +

    + +

    What is a Focus Outline?

    + +

    + 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. +

    + +

    Focus states are used by keyboard users to know what interactive element they can currently manipulate. They are easily styled with the outline CSS property and the :focus and :focus-visible pseudo-classes. diff --git a/content/body/form-error-checking.php b/content/body/form-error-checking.php index ad15b276..473074a0 100644 --- a/content/body/form-error-checking.php +++ b/content/body/form-error-checking.php @@ -271,29 +271,6 @@ } - . There are exceptions." }, "status.php": { - "title": "The ARIA Status Role", - "desc": "If part of a page is updated (e.g. because of an AJAX call), users of screen readers and other assistive tech need to be informed. Enter the ARIA role \"status\"" + "title": "ARIA Status: Understanding, Live Example, and Code Walkthrough", + "desc": "Learn about the ARIA status role, its importance in accessibility, and see a live example with supporting code samples to improve user experience.", + "url": "https://www.useragentman.com/enable/status.php", + "mainEntity":[ + { + "type": "Article", + "title": "What is ARIA Status role?", + "desc": "Status messages allow screen readers and other assistive technology to tell users that content has changed on the page.", + "url": "https://www.useragentman.com/enable/status.php" + }, + { + "type": "HowTo", + "title": "Visually Hidden Status Message Example", + "desc": "Live example of how visually how hidden status role works", + "url": "https://www.useragentman.com/enable/status.php#visually-hidden-status-message--heading" + }, + { + "type": "HowTo", + "title": "Code Walkthrough for Accessible Status role", + "desc": "See the dropdown to highlight each of the individual steps that make accessible status messages", + "url": "https://www.useragentman.com/enable/status.php#developer-walkthrough-1" + } + ] }, "switch.php": { "title": "The ARIA Switch Role (a.k.a. Toggle)", @@ -407,8 +539,29 @@ "desc": "How you can ensure that your website's typography is legible for users that adjust text-spacing because of dyslexia or due to visual or cognitive disabilities ." }, "timer.php": { - "title": "ARIA Timer", - "desc": "If you have a countdown or a timer on your page, tell users of screen readers and other assistive tech when it updates without too much noise." + "title": "ARIA Timer: Understanding, Live Example and Code Walkthrough", + "desc": "Discover what ARIA Timer is, see a live example, and explore the supporting code. Learn how to implement an accessible countdown timer with ARIA roles and attributes.", + "url": "https://www.useragentman.com/enable/timer.php", + "mainEntity":[ + { + "type": "Article", + "title": "What is ARIA Timer?", + "desc": "The timer role is to be used on any timer or clock, including stopwatch readouts and countdown timers. Because of the immediate nature of the information given, it is recommended you use aria-live='assertive' to announce the value of the timer.", + "url": "https://www.useragentman.com/enable/timer.php" + }, + { + "type": "HowTo", + "title": "Accessible Timer Example", + "desc": "Live example of how accessible timer works", + "url": "https://www.useragentman.com/enable/timer.php#timer-example--heading" + }, + { + "type": "HowTo", + "title": "Code Walkthrough for Accessible Timer", + "desc": "See the dropdown to highlight each of the individual steps that make accessible timer", + "url": "https://www.useragentman.com/enable/timer.php#developer-walkthrough-1" + } + ] }, "tooltip.php": { "title": "Tooltip", diff --git a/templates/includes/logo-link.php b/templates/includes/logo-link.php index baa7b03a..a5888d87 100644 --- a/templates/includes/logo-link.php +++ b/templates/includes/logo-link.php @@ -1,6 +1,6 @@

    \ No newline at end of file diff --git a/templates/includes/stats.php b/templates/includes/stats.php index a2942353..5e98f076 100644 --- a/templates/includes/stats.php +++ b/templates/includes/stats.php @@ -3,7 +3,7 @@ if (isset($isForNewBuilds) && $isForNewBuilds == true) { ?>
    - + recommended solution
    From f745fb14959aee35983016175071413e1154c028 Mon Sep 17 00:00:00 2001 From: Majid Date: Wed, 4 Sep 2024 13:46:10 -0400 Subject: [PATCH 9/9] updated the readme file --- README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/README.md b/README.md index 6d901568..af2cc25a 100755 --- a/README.md +++ b/README.md @@ -197,6 +197,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: