Accessibility content updates

content/user/accessibility/accessibility.md

@@ -9,7 +9,7 @@ Before you read this article, please be sure you are familiar with [Basic Terms]
 
 ## What is Accessibility? 
 
-Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with the goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.  You'll find a great article on the [W3C Web Design and Applications page](https://www.w3.org/standards/webdesign/accessibility).
+Web Content Accessibility Guidelines (WCAG) were developed with the goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.  You'll find a great article on the [W3C Web Design and Applications page](https://www.w3.org/standards/webdesign/accessibility) that explains this initiative.
 
 What follows are just a few of the things that Zen Cart users should consider when creating or editing their template and site.  Think of it as a quick triumvirate of accessibility steps to think about.  These three are the most common accessibility standards that should be considered when adding anything to your site.
 
@@ -35,12 +35,22 @@ In fact, the contrast ratio this produces is 3.99 to 1, which fails three out of
 </div>
 <br>
 
-
 See the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) for more details.
 
+Can we improve this message further?  Yes we can!  
+
+People with visual impairments may not realize that the red message you are displaying is a serious error (rather than just a status message).  You can enhance the accessibility of messages using icons or other images that re-enforce what you are saying. 
+
+<div border="1" style="background:#FFFFFF; border: 1px solid black; padding: 5px;">
+<i class="fas fa-exclamation-triangle" title="error" style="color: #B30000"></i><font color="#B30000"></i>This is an error message!</font>
+</div>
+<br>
+
+You could also use a stop sign, or high/medium/low icons to ensure your message is understood by the visually impaired.  And what's best is that this is a win-win, because it helps your fully sighted viewers recognize the importance of the message too. 
+
 ## What Am I Looking At?
 
-But Accessibility is not just about the visually challenged.  What about the folks in developing countries or a remote ranch in Texas or Montana?  What's the average internet speed in the Alaskan Bush?  You might wonder what they would have in common but, probably just because you're in your home or office with megabytes of bandwidth.  There are folks who are still using virtual dial-up speed to surf the net!
+Accessibility is not just about the visually challenged.  What about the folks in developing countries or a remote ranch in Texas or Montana?  What's the average internet speed in the Alaskan Bush?  You might wonder what they would have in common but, probably just because you're in your home or office with megabytes of bandwidth.  There are folks who are still using virtual dial-up speed to surf the net!
 
 "What am I supposed to do about their problem?" you might ask.  The answer is Alternative Text for Images.  How does that help their problem?
 
@@ -73,21 +83,29 @@ Any time you add an image to your site, make sure the alt tag is included and un
 
 Remember the number of visually challenged individuals in the US?  Well, there's another 1.2 percent of the population that can be affected by "Special Effects" on your website.  Remember the big rage of blinking text in the \'80s and \'90s?  Well, there are a lot of folks who got physically ill from the blinking.  Fast-moving sliders, quick pop-ups, and even color changes on hover can be a problem for these folks.
 
-## Where Can I find ...?
+## What should I test? 
+
+Testing every single page on your site is not practical or even required.  You can get good coverage starting with these tests: 
 
-The manager at your local grocery will keep the milk, bread, and eggs separate.  Not to meet some federal, state, or local standard, but to make you go throughout the store while shopping rather than go to one counter and leave.  Is it good practice for your website?  Probably not.  If I'm looking for the latest team tee shirts for my wife and me, what would be the most convenient way to shop for those?  Maybe mixing the men's and women's together in one product is over the top but, having a separate product for each size or color can go the other way and frustrate the customer.  Imagine having to go to one page for the shirt, another for the color, and another for the size.  You might think no one would do that but, it happens.  Zen Cart provides the Attributes Controller to help you consolidate the options for an item and make shopping easier for your client.
+- Home Page 
+- Category Listing page (if you have categories with a depth of 2 or greater)
+- Product Listing page 
+- Product Info page 
+- Shopping Cart page 
 
-Additionally, from the SEO standpoint, search engines frown upon separate products for each option and reward logical attribute use.
+Once you've done that, look for non-product pages on your site: 
+- See what links are included in the site map - custom pages, define pages, etc. 
+- See what links are in the header, sideboxes and footer of your home page.  
 
 ## Where's My Help?
 
 As the digital landscape evolves, web accessibility has become a crucial aspect of website development. Ensuring that all users, regardless of disabilities or impairments, can access and interact with online content is not only ethically important but also a legal requirement in many jurisdictions. 
 
-The following articles include Important items you should check on your site, commonly used test programs, and other useful tools. By using a combination of these tools, website owners can gain valuable insights into potential barriers and take necessary steps to make their websites accessible to all users, regardless of their abilities or disabilities.
+The following articles include important items you should check on your site, commonly used test programs, and other useful tools. By using a combination of these tools, you can gain valuable insights into potential barriers and take necessary steps to make your websites accessible to all users, regardless of their abilities or disabilities.
 
 ### Accessibility Tools
 
-The following free tools are valuable in assessing the accessibility of a website.  Most will only test the current page and all are not infallible.  Along with viewing the website's actual code, using several of the following tools on any site where accessibility compliance is in doubt is a good practice.
+The following free tools are valuable in assessing the accessibility of a website.  Most will only test the current page and none are infallible.  Along with viewing the website's actual code, using several of the following tools on any site where accessibility compliance is in doubt is a good practice.
 
 * [Accessibility Checker from Siteimprove](/user/accessibility/tools/siteimprove/)
 * [ANDI from SSA](/user/accessibility/tools/andi/)
@@ -96,16 +114,19 @@ The following free tools are valuable in assessing the accessibility of a websit
 * [Lighthouse](/user/accessibility/tools/lighthouse/)
 * [WAVE from WebAIM](/user/accessibility/tools/wave/)
 
+### Accessibility Widgets 
+
+[Accessibility Widgets](/user/accessibility/tools/widgets/), like the one on this site in the lower right corner, are a popular aid to accessibility.  If you'd like to get a widget for your site, you may purchase one from a [Zen Cart Certified hosting partner](https://ada4zencart.com/index.php?main_page=index&referrer=C4ADA_11659651175).
+
 ### Other Useful Tools
 
-Yes, there are several other free tools that can be included in the list to help website owners meet accessibility standards and ensure their websites are more inclusive. Here are a few notable ones:
+Yes, there are several other free tools that can be included in the list to help you meet accessibility standards and ensure your websites are more inclusive. Here are a few notable ones:
 
-* [Accessibility Widgets](/user/accessibility/tools/widgets/) - Accessibility widgets (like the one on this site) are a popular aid to accessibility.
-* [AChecker](https://websiteaccessibilitychecker.com/checker/index.php) - AChecker is an open-source accessibility evaluation tool that allows website owners to upload their web pages for assessment against WCAG standards. It offers detailed reports and guidance for improving accessibility.
-* [HTML_CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/) - HTML_CodeSniffer is a bookmarklet that scans web pages for accessibility issues, providing feedback based on WCAG guidelines. It is a free, easy-to-use tool that can be added to any browser.
-* [NoCoffee Vision Simulator](https://uxpro.cc/toolbox/nocoffee/) - NoCoffee is a browser extension that simulates various visual impairments, such as color blindness and low vision, allowing website owners to experience how their content appears to users with these disabilities.
-* [NVDA Screen Reader](https://www.nvaccess.org/download/) - NVDA (NonVisual Desktop Access) is a free, open-source screen reader for Windows. Website owners can use NVDA to test their website's compatibility with screen readers and ensure a seamless experience for users with visual impairments.
-* [VoiceOver](https://www.apple.com/voiceover/info/guide/_1121.html) - VoiceOver is a built-in screen reader on macOS and iOS devices. Website owners with access to Apple devices can use VoiceOver to test their websites' accessibility for users with visual impairments.
+* [AChecker](https://websiteaccessibilitychecker.com/checker/index.php) - an open-source accessibility evaluation tool that allows you to upload your web pages for assessment against WCAG standards. It offers detailed reports and guidance for improving accessibility.
+* [HTML_CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/) - a bookmarklet that scans web pages for accessibility issues, providing feedback based on WCAG guidelines. It is a free, easy-to-use tool that can be added to any browser.
+* [NoCoffee Vision Simulator](https://uxpro.cc/toolbox/nocoffee/) - a browser extension that simulates various visual impairments, such as color blindness and low vision, allowing you to experience how your content appears to users with these disabilities.
+* [NVDA (Non Visual Desktop Access) Screen Reader](https://www.nvaccess.org/download/) - a free, open-source screen reader for Windows. You can use NVDA to test your website's compatibility with screen readers and ensure a seamless experience for users with visual impairments.
+* [VoiceOver](https://www.apple.com/voiceover/info/guide/_1121.html) - a built-in screen reader on macOS and iOS devices. Anyone with access to Apple devices can use VoiceOver to test their websites' accessibility for users with visual impairments.
 
 ### Important Accessibility Concerns
 

content/user/accessibility/concerns/alt_text.md

@@ -5,21 +5,19 @@ category: concerns
 weight: 10
 ---
 
-This document will discuss the significance of Alt Text in Web Accessibility,  and best practices for creating alt text.
-
 ## Introduction
 
-Alt text, short for alternative text, is a crucial aspect of web accessibility. It is used to provide a text alternative to non-text content such as images, videos, and graphics. Alt text ensures that users with visual impairments or those using assistive technologies, such as screen readers, can understand the content conveyed by these elements. The good news is that most of your alt text needs are met by the Zen Cart software.  However, images you add to areas other than categories or products (e.g., define_ or EZpages) will need to have the alt text added. In this article, we will explore the importance of alt text in web accessibility and recommend some best practices for creating effective alt text.
+Alt text, short for alternative text, is a crucial aspect of web accessibility. It is used to provide a text alternative to non-text content such as images, videos, and graphics. Alt text ensures that users with visual impairments or those using assistive technologies, such as screen readers, can understand the content conveyed by these elements. The good news is that most of your alt text needs are met by the Zen Cart software.  However, images you add to areas other than categories or products (e.g., define_ or EZpages) will need to have alt text added. In this article, we will explore the importance of alt text in web accessibility and recommend some best practices for creating effective alt text.
 
 ## The Importance of Alt Text in Web Accessibility
 
 * **Providing Context:** Alt text offers context and information about images and other non-text elements, enabling users who cannot perceive these elements visually to understand their purpose or content.
 
 * **Assisting Screen Reader Users:** Screen readers rely on alt text to describe images to users with visual impairments. Well-crafted alt text ensures that these users are not excluded from comprehending the visual content on the website.
 
-* Enhancing SEO:** Alt text is beneficial for search engine optimization (SEO). When search engine crawlers index a website, they use alt text to understand and rank the relevance of images and other non-text content, potentially improving the website's search engine rankings.
+* **Enhancing SEO:** Alt text is beneficial for search engine optimization (SEO). When search engine crawlers index a website, they use alt text to understand and rank the relevance of images and other non-text content, potentially improving the website's search engine rankings.
 
-* **Ensuring Compliance with Web Accessibility Standards:** Providing alt text is a requirement under Web Content Accessibility Guidelines (WCAG). By adding appropriate alt text, website owners demonstrate their commitment to accessibility and inclusivity.
+* **Ensuring Compliance with Web Accessibility Standards:** Providing alt text is a requirement under Web Content Accessibility Guidelines (WCAG). By adding appropriate alt text, you demonstrate your commitment to accessibility and inclusivity.
 
 ## Best Practices for Creating Alt Text
 
@@ -43,4 +41,4 @@ Alt text, short for alternative text, is a crucial aspect of web accessibility.
 
 ## Conclusion
 
-By adhering to best practices for creating alt text, website owners can enhance the overall user experience and demonstrate their commitment to inclusivity. Descriptive and informative alt text enables users of assistive technologies to engage with content effectively, while considering the image's context and purpose ensures relevancy.
+By adhering to best practices for creating alt text, you can enhance the overall user experience and demonstrate your commitment to inclusivity. Descriptive and informative alt text enables users of assistive technologies to engage with content effectively, while considering the image's context and purpose ensures relevancy.

content/user/accessibility/concerns/aria_labels.md

@@ -5,8 +5,6 @@ category: concerns
 weight: 10
 ---
 
-The Importance of ARIA Labels in Accessibility and How to Address Issues When Found
-
 ## Introduction
 
 ARIA (Accessible Rich Internet Applications) labels play a vital role in web accessibility, enhancing the user experience for individuals who rely on assistive technologies, such as screen readers, to navigate and interact with websites. These labels provide additional information about web elements, making them more meaningful and understandable for users with disabilities. In this article, we will explore the significance of ARIA labels in web accessibility and how to address issues when they are found.
@@ -29,7 +27,7 @@ ARIA labels are attributes that can be added to HTML elements to define their ro
 
 * **Identify Missing ARIA Labels** - Use accessibility auditing tools, such as Siteimprove's Chrome extension, Axe Dev Tools, or WAVE, to identify elements with missing or incomplete ARIA labels. The tools will highlight elements that require ARIA labels to improve accessibility.
 
-* **Add Descriptive ARIA Labels - For interactive elements like buttons, links, and form fields, add descriptive ARIA labels that explain their purpose or action. ARIA labels should be concise and meaningful, conveying essential information about the element.
+* **Add Descriptive ARIA Labels** - For interactive elements like buttons, links, and form fields, add descriptive ARIA labels that explain their purpose or action. ARIA labels should be concise and meaningful, conveying essential information about the element.
 
 * **Use ARIA Roles and States Appropriately** - When utilizing ARIA roles and states, ensure they are applied correctly. Incorrect or inappropriate usage can lead to confusion for assistive technology users. Refer to the W3C's ARIA Authoring Practices for guidance.
 
@@ -41,4 +39,4 @@ ARIA labels are attributes that can be added to HTML elements to define their ro
 
 ## Conclusion
 
-ARIA labels play a crucial role in web accessibility, improving the user experience for individuals with disabilities who rely on assistive technologies. By providing accurate and descriptive information about web elements, ARIA labels enable screen reader users to navigate and interact with web content effectively. Identifying missing ARIA labels and using them appropriately ensures a more inclusive and accessible website. Implementing ARIA labels responsibly and testing with screen readers contribute to creating a digital environment that welcomes all users, regardless of their abilities or disabilities. Embracing ARIA labels as part of a broader accessibility strategy helps website owners demonstrate their commitment to making the web a more inclusive space for everyone.
+ARIA labels play a crucial role in web accessibility, improving the user experience for individuals with disabilities who rely on assistive technologies. By providing accurate and descriptive information about web elements, ARIA labels enable screen reader users to navigate and interact with web content effectively. Identifying missing ARIA labels and using them appropriately ensures a more inclusive and accessible website. Implementing ARIA labels responsibly and testing with screen readers contribute to creating a digital environment that welcomes all users, regardless of their abilities or disabilities. Embracing ARIA labels as part of a broader accessibility strategy helps you demonstrate your commitment to making the web a more inclusive space for everyone.