Dante
Dante copied to clipboard
Published
20 hours ago •
TedGoas
TedGoas
Accessibility and Inclusion
Color
- [x] Consider using Open Color
- [ ] Tools to check color contrast
Type source
- [ ] Use bold (not italics) for emphasis
- [x] Just use one
<h1>per page - [x] 1.5 line-height
- [x] Tips on line-height and line-length
- [ ] Check type contrast
- [ ] Check
:focusstates
From Accessibility According to People with Disabilities
- [x] Stay away from super-busy or continually moving graphics, including
:hoverstates. (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
Images
- [x] Include a blank
alt=""attribute for decorative, unimportant images. - [x] Don't say it's an image
- [x] End with a period., but (you can say it's something else. Illustration.)
- [x] use
role="img"andaria-label="<the alt-text>"for SVG - [x] Write using context, alt decision tree.
- [x] Don't duplicate filename or caption
Misc
- [x] Define
<html lang="en"> - [x] Use HTML5 landmarks
<article>,<aside>,<nav>,<section>, etc. - [ ] Do this:
: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 is helpful!
