jojochuu on Warpcast

Content pfp

0 reply

0 recast

0 reaction

jojochuu pfp

1/10 Going to start bringing my tech content into Warpcast, starting with accessibility which is often overlooked but very important. Here are some simple tips that can make a huge difference for users with disabilities, and it can even improve SEO! A little user empathy can go a long way 🧵👇

10 replies

2 recasts

18 reactions

jojochuu pfp

2/10 Always set an "alt" on <img> tags. Otherwise, screen readers might announce the whole file name. Set "alt" to an empty string for purely decorative images: <img alt="" />

1 reply

0 recast

1 reaction

jojochuu pfp

3/10 Use semantic HTML elements as much as possible, since those have accessibility built in for most browsers and devices. For example, using <ul> and <li> for lists enables screen readers to tell users the total number of list items.

1 reply

0 recast

1 reaction

jojochuu pfp

4/10 Use accessibility tools like Lighthouse from Chrome's DevTools. It will scan your page and surface issues. For example, here the page is using text that doesn’t have enough color contrast with the background which makes it hard to read.

1 reply

0 recast

1 reaction

jojochuu pfp

5/10 Make sure color isn't the only way information is conveyed. Some users are color blind!

1 reply

0 recast

1 reaction

jojochuu pfp

6/10 Set a unique and concise title per web page. This helps visually impaired users understand the page content without needing to navigate inside the page.

1 reply

0 recast

1 reaction

jojochuu pfp

7/10 Each web page should only have one <h1> heading, and make sure not to skip heading levels (using <h3> with no <h2>). This helps users using screen readers to easily navigate to the information they're looking for.

1 reply

0 recast

1 reaction

jojochuu pfp

8/10 If you use React, eslint-plugin-jsx-a11y is a handy linter to surface accessibility issues as you code.

1 reply

0 recast

1 reaction

jojochuu pfp

9/10 All inputs should be properly associated with a <label>. Side note - it's especially difficult to create an accessible custom dropdown input that works on all browsers and devices, so I recommend using <select> instead.

1 reply

0 recast

1 reaction

jojochuu pfp

10/10 There is so much more to learn about accessibility and there are endless resources online. Look up “WCAG” to learn more. Share this thread to help spread awareness on accessibility!

0 reply

0 recast

1 reaction