From 092d523f3b901d5ce6f1495cba736a5758f738d0 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 1 Apr 2016 17:13:44 -0400 Subject: [PATCH] adding in accessibility-minded examples --- src/_includes/examples/accessible.html | 96 ++++++++++++++++++++++++++ src/examples.html | 1 + 2 files changed, 97 insertions(+) create mode 100644 src/_includes/examples/accessible.html diff --git a/src/_includes/examples/accessible.html b/src/_includes/examples/accessible.html new file mode 100644 index 000000000..588469e7d --- /dev/null +++ b/src/_includes/examples/accessible.html @@ -0,0 +1,96 @@ +
+

+ Accessibility-Minded +

+
+
+

+ + + + + + + + + + + +

+ +

+ + +

+ +

+

+ + +
+
+ + +
+

+ +

+ + + View 3 items in your shopping cart + +

+ +

+ Battery Remaining: 50%; +

+
+
+

+ With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. +

+ +{% highlight html %} + + + + + + + + + + + +{% endhighlight %} + +{% highlight html %} + + +{% endhighlight %} + +{% highlight html %} +
+ + +
+
+ + +
+{% endhighlight %} + +{% highlight html %} + + + View 3 items in your shopping cart + +{% endhighlight %} + +{% highlight html %} + +Battery Remaining: 50%; +{% endhighlight %} +
+
+
diff --git a/src/examples.html b/src/examples.html index 99706dceb..4a08a89f0 100644 --- a/src/examples.html +++ b/src/examples.html @@ -26,6 +26,7 @@ relative_path: ../ {% include examples/list.html %} {% include examples/bordered-pulled.html %} {% include examples/animated.html %} + {% include examples/accessible.html %} {% include examples/rotated-flipped.html %} {% include examples/stacked.html %} {% include examples/bootstrap.html %}