Frontend

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
🧵👇

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="" />

Software engineer @chirulabs. Boba maxi🧋

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.

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.

5/10

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

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.

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.

8/10

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

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.

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!