Accessibility and Inclusion

**Color**
- [x] Consider using [Open Color](https://yeun.github.io/open-color/)
- [ ] Tools to check [color contrast](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939)

**Type** [source](http://alistapart.com/article/accessibility-whack-a-mole)
- [ ] Use bold (not italics) for emphasis
- [x] Just use [one `<h1>` per page](https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412)
- [x] 1.5 line-height
- [x] Tips on [line-height and line-length](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939)
- [ ] [Check type contrast](http://webaim.org/resources/contrastchecker/)
- [ ] Check [`:focus` states](https://uxdesign.cc/designing-accessible-products-e8aa79b55ebc)

From **[Accessibility According to People with Disabilities](https://axesslab.com/accessibility-according-to-pwd/)**
- [x] Stay away from super-busy or continually moving graphics, including `:hover` states. (Autism, ADHD)
- [ ] Underline links in running text, don't rely on color. (Colorblind)
- [x] Include focus outlines.
- [ ] On that note, make sure you can tab through the UI. (Some have trouble with mouse)

**Hiding Stuff**
- [ ] [A few ways to do this, (including 'Skip to content' links)](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939)
- [ ] [Use the hidden attribute](https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412)

**Images**
- [x] Include a blank `alt=""` attribute for decorative, unimportant images.
- [x] [Don't say it's an image](https://axesslab.com/alt-texts/)
- [x] [End with a period.](https://axesslab.com/alt-texts/), but (you can say it's something else. Illustration.)
- [x] [use `role="img"` and `aria-label="<the alt-text>"` for SVG](https://axesslab.com/alt-texts/)
- [x] [Write using context](https://axesslab.com/alt-texts/), [alt decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/).
- [x] [Don't duplicate filename or caption](https://axesslab.com/alt-texts/)

**Misc**
- [x] [Define `<html lang="en">`](https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412)
- [x] Use [HTML5 landmarks `<article>`, `<aside>`, `<nav>`, `<section>`, etc.](https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412)
- [ ] Do [this](https://twitter.com/LeaVerou/status/1045768279753666562): `:focus:not(:focus-visible) { outline: none }` : Gets rid of the annoying outline for mouse users but preserves it for keyboard users, and is ignored by browsers that don’t support :focus-visible.

---

👉 [web.dev/measure](https://web.dev/measure) is helpful!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessibility and Inclusion #52

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Accessibility and Inclusion #52

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions