From 7e49db5ddefe8c515b5f3931a5c701efaac33d91 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Fri, 16 Dec 2022 17:45:03 -0600 Subject: change structure for new pyssg version --- .../accessibility/accessibility-manual.html | 121 +++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 live/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html (limited to 'live/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html') diff --git a/live/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html b/live/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html new file mode 100644 index 0000000..1f68205 --- /dev/null +++ b/live/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html @@ -0,0 +1,121 @@ +
+ +

+ + Manually make your icons accessible +

+ +

When using icons in your UI, there are manual techniques and ways to help assistive technology either ignore or better understand {{ site.forkawesome.name }}.

+ +

Icons used for pure decoration or visual styling

+

If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your {{ site.forkawesome.name }} markup.

+ +
+{% highlight html %} + +{% endhighlight %} +an icon being used as pure decoration +
+ +
+{% highlight html %} +

+ + Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller +

+{% endhighlight %} +an icon being used as a logo +
+ +
+{% highlight html %} + View this project's code on Github +{% endhighlight %} +an icon being used in front of link text +
+ +

Icons with semantic or interactive purpose

+

+ If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this: +

+ +

If an icon is not an interactive element

+

+ The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title attribute on the icon to provide a tooltip for sighted mouse users. +

+ +
+{% highlight html %} +
+
+ + Time to destination by car: +
+
4 minutes
+ +
+ + Time to destination by bike: +
+
12 minutes
+
+{% endhighlight %} + an icon being used to communicate travel methods +
+ +
+{% highlight html %} + +60 minutes remain in your exam + + +30 minutes remain in your exam + + +0 minutes remain in your exam +{% endhighlight %} + an icon being used to denote time remaining +
+ +

If an icon represents an interactive element

+

+ In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar. For instance, simply adding the aria-label attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title attribute or a custom tooltip solution. +

+ +
+{% highlight html %} + + + +{% endhighlight %} + an icon being used to communicate shopping cart state +
+ +
+{% highlight html %} + + + +{% endhighlight %} + an icon being used as a link to a navigation menu +
+ +
+{% highlight html %} + + + +{% endhighlight %} + an icon being used as a delete button's symbol with a title attribute to provide a native mouse tooltip +
+ + +
+ +
+
-- cgit v1.2.3-54-g00ecf