-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
redo this PR to bypass github issue (#21557)
* redo this PR to bypass github issue * Minor typo fixes Co-authored-by: Aisha Blake <aisha.g.blake@gmail.com>
- Loading branch information
1 parent
a6b5ed4
commit 2c7212e
Showing
1 changed file
with
35 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
--- | ||
title: Challenge 8 - Make Your Forms and Images Accessible to Everyone | ||
date: 2020-02-19 | ||
author: "Hashim Warren" | ||
excerpt: "Learn how to enhance your site with a11y best practices." | ||
tags: ["learning-to-code", "contest", "100-Days-of-Gatsby", "accessibility"] | ||
--- | ||
|
||
_Gatsby was named the [#1 new technology to learn in 2020](https://www.cnbc.com/2019/12/02/10-hottest-tech-skills-that-could-pay-off-most-in-2020-says-new-report.html)!_ | ||
|
||
_To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to [build your first Gatsby Theme](/docs/themes/building-themes/)._ | ||
|
||
_Learn more about [#100DaysOfGatsby here](/blog/100days)!_ | ||
|
||
## Challenge 8: Enhance Your Site With Accessible Forms and Images | ||
|
||
Web developers love Gatsby because a Gatsby site gives you rock solid performance, SEO, and sets you up for success in building an accessible site. However as you continue to develop your project, and your editors begin adding content to the site, all three of those site features may suffer. | ||
|
||
Over the next three challenges, we’ll ask you to enhance your site’s performance, SEO, and accessibility, starting with the accessibility of your forms and images. | ||
|
||
As a Gatsby developer, you want to ensure that everyone can access your work, including users who rely on assistive technology to read and navigate your site. Two of the biggest sinkholes for these users are inaccessible forms and images. In previous prompts, we asked you to add images and forms to your project. Now that you have those elements on your site, we ask that you examine and ensure their accessibility. | ||
|
||
### Accessibility Challenge Resources | ||
|
||
#### Images | ||
|
||
Become familiar with [eslint-plugin-jsx-a11y](/docs/making-your-site-accessible/#linting-with-eslint-plugin-jsx-a11y). Gatsby ships with the`eslint-plugin-jsx-a11y` package and warnings for all of its rules enabled by default. `eslint-plugin-jsx-a11y` is an accessibility linting tool for your code, and encourages you to include alternative text for image tags. | ||
|
||
#### Forms | ||
|
||
Read why we believe [accessible forms are important](/docs/building-a-contact-form/#creating-an-accessible-form). Then apply [WebAIM’s advice](https://webaim.org/techniques/forms/) to your own forms. | ||
|
||
#### What to Do If You Need Help | ||
|
||
If you get stuck during the challenge, you can ask for help from the [Gatsby community](/contributing/community/) and the [AskGatsbyJS](https://twitter.com/AskGatsbyJS) Twitter account. You can find fellow Gatsby Developers on [Discord](https://discordapp.com/invite/gatsby), [Reddit](https://www.reddit.com/r/gatsbyjs/), [Spectrum](https://spectrum.chat/gatsby-js), and [Dev](https://dev.to/t/gatsby). |