deblan-mirror/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome synced 2024-05-01 22:32:45 +02:00
Code Issues Projects Releases Wiki Activity

Changing name in Accessibility and removing CDN stuff

Browse source
This commit is contained in:
Julien Deswaef 2018-02-05 18:00:22 -05:00
parent 894ec2d54b
commit 635729fb51
5 changed files with 14 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/_includes/accessibility/accessibility-facdn.html
View file

@ -1,21 +0,0 @@
<section id="accessibility-cdn" class="accessibility-cdn">
<div class="row">
<div class="col-md-8">
<h3>
<i class="gg-col fa fa-magic text-muted fa-lg padding-right" aria-hidden="true"></i>
Use Font Awesome CDN's auto accessibility
</h3>
<p><a href="{{ page.relative_path }}get-started/#get-started-cdn">Font Awesome CDN</a> helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting, <a href="https://cdn.fontawesome.com/help#qa-autoa11y">use our simple syntax</a>, and any icons you use will have all of the best practices and manual techniques below <strong>applied automatically</strong>.</p>
</div>
<div class="col-md-4">
<a href="{{ page.relative_path }}get-started/#get-started-cdn" class="btn btn-success btn-block btn-lg margin-top-lg margin-bottom">Automate Your Icons' Accessibility</a>
<p class="text-sm text-center margin-bottom-none">
<a href="https://cdn.fontawesome.com/help#qa-autoa11y">Read more about our auto accessibility</a>
</p>
</div>
</div>
</section>

4
src/_includes/accessibility/accessibility-manual.html
View file

@ -5,10 +5,10 @@
Manually make your icons accessible
</h3>
<p>When using icons in your UI, there are manual techniques and ways to help assistive technology either ignore or better understand Font Awesome.</p>
<p>When using icons in your UI, there are manual techniques and ways to help assistive technology either ignore or better understand {{ site.forkawesome.name }}.</p>
<h4 class="margin-top-xl">Icons used for pure decoration or visual styling</h4>
<p>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 <code>aria-hidden="true"</code> to your Font Awesome markup.</p>
<p>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 <code>aria-hidden="true"</code> to your {{ site.forkawesome.name }} markup.</p>
<div class="margin-top-lg margin-bottom-lg">
{% highlight html %}

11
src/_includes/accessibility/cta-cdn-ally.html
View file

@ -1,11 +0,0 @@
<div class="well text-center">
<div class="text-center margin-bottom">
<i class="gg-col fa fa-magic fa-3x text-muted padding-right" aria-hidden="true"></i>
<i class="gg-col fa fa-plus fa-2x text-muted padding-right" aria-hidden="true"></i>
<i class="gg-col fa fa-universal-access fa-3x text-muted" aria-hidden="true"></i>
</div>
<h3>Automate your icons' accessibility</h3>
<p><a href="{{ page.relative_path }}get-started/#get-started-cdn">Font Awesome CDN</a> helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting and any icons you use will have all of the best practices we recommend applied automatically.</p>
<a href="{{ page.relative_path }}get-started/#get-started-cdn" class="btn btn-success btn-lg">Get Automated Accessibility</a>
</div>

5
src/accessibility.html
View file

@ -15,7 +15,10 @@ relative_path: ../
<div class="row">
<div class="col-md-6">
<p class="lead">
Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. It's important that we create and use them so that they can reach the largest amount of people possible.
Icons are symbols that can convey a ton of information and really help
people comprehend directions, signs, and interfaces. It's important
that we create and use them so that they can reach the largest amount
of people possible.
</p>
</div>
<div class="col-md-6">

10
src/cheatsheet.html
View file

@ -12,11 +12,17 @@ relative_path: ../
<div class="container">
{% capture stripe_ad_content %}
<p class="lead">
Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf, set it as the font in your application, and copy and paste the icons (not the unicode) directly from this page into your designs.
Print this page to PDF for the complete set of vectors. Or to use on the
desktop, install FontAwesome.otf, set it as the font in your application,
and copy and paste the icons (not the unicode) directly from this page into
your designs.
</p>
{% endcapture %}
<h2 class="page-header">Every Font Awesome {{ site.fontawesome.version }} Icon, CSS Class, &amp; Unicode</h2>
<h2 class="page-header">
Every {{ site.forkawesome.version }} {{ site.fontawesome.version }} Icon,
CSS Class, &amp; Unicode
</h2>
<div class="row">
{% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}