Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into feat/add-wcag-levels
Browse files Browse the repository at this point in the history
  • Loading branch information
@mxmason
mxmason committed May 9, 2021
2 parents d23b32a + 1d72c21 commit 0d27d87
Show file tree
Hide file tree
Showing 7 changed files with 702 additions and 781 deletions.
1,140 changes: 570 additions & 570 deletions src/_data/checklists.json
View file

Large diffs are not rendered by default.

73 changes: 73 additions & 0 deletions src/_data/resources.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -592,6 +592,79 @@
"url": "http://webaim.org/discussion/"
}
],
"conferences": [
{
"title": "#a11yTO Camp",
"description": "Opening the doors for a free day of accessibility learning.",
"url": "https://camp.a11yto.com/"
},
{
"title": "#a11yTO Conf",
"description": "A curated playlist of talks, focused on digital accessibility.",
"url": "https://conf.a11yto.com/"
},
{
"title": "ACCESS",
"description": "ACCESS is an annual conference by 3Play Media celebrating video, accessibility, & the people who make it happen.",
"url": "https://www.3playmedia.com/company/access-by-3play/"
},
{
"title": "Assistive Technology Industry Association (ATIA)",
"description": "Over the past 22 years, ATIA has been a community gathering for assistive technology practitioners, teachers, parents and caregivers, persons with disabilities and more to learn, network and share on the best in assistive technology.",
"url": "https://www.atia.org/conference/"
},
{
"title": "axe-con Digital Accessibility Conference",
"description": "Axe-con is an open and inclusive digital accessibility conference that welcomes developers, designers, business users, and accessibility professionals of all experience levels to a new kind of accessibility conference focused on building, testing, and maintaining accessible digital experiences.",
"additional": "March 10–11",
"url": "https://www.deque.com/axe-con/"
},
{
"title": "CSUN Assistive Technology Conference",
"description": "Known as a forum that showcases cutting edge technology and practical solutions that can be utilized to remove the barriers that prevent the full participation of persons with disabilities in educational, workplace and social settings, the conference is the largest of its kind in the world.",
"url": "https://www.csun.edu/cod/conference/"
},
{
"title": "The Digital Accessibility Legal Summit",
"description": "We bring together experts from the fields of accessibility and legal to discuss current trends, and to provide insights that will be helpful to practitioners in their work on digital accessibility.",
"url": "https://www.accessibility.legal/"
},
{
"title": "Funka Accessibility Days",
"description": "Funka Accessibility Days is northern Europe’s largest conference on accessible ICT. We are proud to welcome some of the world´s leading experts on web accessibility.",
"url": "https://www.funka.com/en/we-offer/funka-accessibility-days/"
},
{
"title": "Future Date",
"description": "Future Date is a free, volunteer-led, virtual accessibility conference. Our goal is to expose our audience to the pioneering work and lived experiences of disability and accessibility leaders.",
"url": "https://afuturedate.herokuapp.com/"
},
{
"title": "Global Accessibility Awareness Day",
"description": "The purpose of GAAD is to get everyone talking, thinking and learning about digital access and inclusion, and the more than One Billion people with disabilities/impairments.",
"url": "https://globalaccessibilityawarenessday.org/"
},
{
"title": "Inclusive Design 24 (#id24)",
"description": "A free 24-hour online event for the global community. It celebrates inclusive design and shares knowledge and ideas from analogue to digital, from design to development, from planners to practitioners, and everything and everyone in between.",
"url": "https://inclusivedesign24.org/"
},
{
"title": "John Slatin Virtual AccessU",
"description": "Whatever your role in digital accessibility, wherever you are on your journey, there is simply no better place to learn and connect to the global community than the annual John Slatin AccessU conference.",
"url": "https://knowbility.org/programs/accessu-2021"
},
{
"title": "Magnify Conference",
"description": "The Magnify Conference was created from a surge of inspiration when seeing so many talented people practicing inclusive design practices daily across the globe.",
"url": "https://www.magnifyconference.com/"
},
{
"title": "Web4All",
"description": "The conference focuses on all aspects of web accessibility. Areas of general interest include, but are not limited to the following: age, cognition, culture, education, emotions, dexterity, disability, diversity, health, hearing, income, infrastructure, language, learning, literacy, mobility, situation, society, and vision.",
"url": "http://www.w4a.info/2021/"
}
],
"courses": [
{
"title": "Accessibility Courses",
Expand Down
2 changes: 2 additions & 0 deletions src/_includes/card/resource.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
<use xlink:href="{{ '/img/icons.svg#html-aria' | url }}"></use>
{% elif resourceType == "Images and icons" %}
<use xlink:href="{{ '/img/icons.svg#images' | url }}"></use>
{% elif resourceType == "Conferences" %}
<use xlink:href="{{ '/img/icons.svg#meetups' | url }}"></use>
{% elif resourceType == "Meetups" %}
<use xlink:href="{{ '/img/icons.svg#meetups' | url }}"></use>
{% elif resourceType == "Mobile apps" %}
Expand Down
21 changes: 11 additions & 10 deletions src/_includes/checklist.njk → src/_includes/checklist__task.njk
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
{% set slugifiedTitle = checklist.title | slugify %}
{% set description = checklist.description | safe %}
{% set title = checklist.title | safe %}
{% set url = checklist.url %}
{% set wcag = checklist.wcag %}
{% set wcagLevel = checklist.wcagLevel %}
{% set slugifiedTitle = task.title | slugify %}
{% set description = task.description | safe %}
{% set title = task.title | safe %}
{% set url = task.url %}
{% set wcag = task.wcag %}
{% set wcagLevel = task.wcagLevel %}


<div class="c-checklist__wrapper">

<div class="c-checklist__checkbox">
<input
type="checkbox"
name="{{ checklist.checkboxId }}"
id="{{ checklist.checkboxId }}">
<label for="{{ checklist.checkboxId }}">
<span class="u-hide-visually">Task: {{ checklist.title | safe }}</span>
name="{{ task.checkboxId }}"
id="{{ task.checkboxId }}">
<label for="{{ task.checkboxId }}">
<span class="u-hide-visually">Task: {{ task.title | safe }}</span>
</label>
</div>

Expand Down
215 changes: 14 additions & 201 deletions src/checklist.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,213 +84,26 @@ templateClass: template-checklist

<hr class="c-divider" />

<h2 id="content" class="c-heading-large">
Content
</h2>
<p class="c-preface">
Content is the most important part of your site.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.content %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="global-code" class="c-heading-large">
Global code
</h2>
{% for category, content in checklists %}
{# 6 May 2021: We don't publish our guidelines about SVGs #}
{% if category !== 'svg' %}
<section data-checklist-category="{{ category | slug }}">
<h2 id="content" class="c-heading-large u-text-transform-sentence-case">
{{ category }}
</h2>
<p class="c-preface">
Global code is code that affects your entire website or web app.
{{ content.preface | safe }}
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.global %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% set tasks = content.tasks %}
{% for task in tasks %}
{% include "checklist__task.njk" %}
{% endfor %}
</div>
</section>
{% endif %}
{% endfor %}

<h2 id="keyboard" class="c-heading-large">
Keyboard
</h2>
<p class="c-preface">
It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for hovering or precise clicking.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.keyboard %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="images" class="c-heading-large">
Images
</h2>
<p class="c-preface">
Images are a very common part of most websites. Help make sure they can be enjoyed by all.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.images %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="headings" class="c-heading-large">
Headings
</h2>
<p class="c-preface">
Heading elements (<code>h1</code>, <code>h2</code>, <code>h3</code>, etc.) help break up the content of the page into related “chunks” of information. They are incredibly important for helping people who use assistive technology to understand the meaning of a page or view.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.headings %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="lists" class="c-heading-large">
Lists
</h2>
<p class="c-preface">
Lists elements let people know a collection of items are related and if they are sequential, and how many items are present in the list grouping.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.lists %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="controls" class="c-heading-large">
Controls
</h2>
<p class="c-preface">
Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.controls %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="tables" class="c-heading-large">
Tables
</h2>
<p class="c-preface">
Tables are a structured set of data that help people understand the relationships between different types of information.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.tables %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="forms" class="c-heading-large">
Forms
</h2>
<p class="c-preface">
Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.forms %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="media" class="c-heading-large">
Media
</h2>
<p class="c-preface">
Media includes content such as pre-recorded and live audio and video.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.media %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="video" class="c-heading-medium">
Video
</h2>
<p class="c-preface">
Video-specific checks.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.video %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="audio" class="c-heading-medium">
Audio
</h2>
<p class="c-preface">
Audio-specific checks.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.audio %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="appearance" class="c-heading-large">
Appearance
</h2>
<p class="c-preface">
How your website app content looks in any given situation.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.appearance %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="animation" class="c-heading-large">
Animation
</h2>
<p class="c-preface">
Content that moves, either on its own, or when triggered by a person activating a control.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.animation %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="color-contrast" class="c-heading-large">
Color Contrast
</h2>
<p class="c-preface">
<a class="c-preface__link" href="{{ '/posts/2015-01-05-what-is-color-contrast/' | url }}">Color contrast</a> is how legible colors are when placed next to, and on top of each other.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.colorContrast %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="mobile-touch" class="c-heading-large">
Mobile&#8202;/&#8202;Touch
</h2>
<p class="c-preface">
Things to check mobile experiences for.
</p>
<div class="c-card__wrapper">
{% set checklist = checklists.mobile %}
{% for checklist in checklist %}
{% include "checklist.njk" %}
{% endfor %}
</div>

<h2 id="next-steps" class="c-heading-large">
Next steps
Expand Down
18 changes: 18 additions & 0 deletions src/css/utilities/_text-transform.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,21 @@
// .u-text-transform-initial {
// text-transform: initial;
// }

// u-text-transform-sentence-case
//
// Converts the text of an element into sentence case.
// NOTE: This utility is not recommended for elements that contain proper nouns,
// as it will convert those proper nouns to lowercase.

// Markup:
// <p class="u-text-transform-sentence-case">The first letter in this sentence will be capitalized.</p>
//
// Styleguide Utilities.Type Alignment.u-text-transform-sentence-case
.u-text-transform-sentence-case {
text-transform: lowercase;

&::first-letter {
text-transform: uppercase;
}
}
14 changes: 14 additions & 0 deletions src/resources.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,20 @@ templateClass: template-resources
Groups and organizations
</h2>

{% set resourceType = "Conferences" %}
<h3 id="conferences" class="c-heading-medium u-spacing-top-long">
{{ resourceType }}
</h3>
<p class="c-preface">
Annual events about accessibility and inclusion.
</p>
<div class="c-card__wrapper">
{% set resource = resources.conferences %}
{% for resource in resource %}
{% include "card/resource.njk" %}
{% endfor %}
</div>

{% set resourceType = "Meetups" %}
<h3 id="meetups" class="c-heading-medium u-spacing-top-long">
{{ resourceType }}
Expand Down

0 comments on commit 0d27d87

Please sign in to comment.