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!

Edge cases to consider when choosing or building bespoke UI components:

• keyboard navigation + Esc key behavior
• headless/overridable styles
• i18n
• screen reader support
• date pickers
• nested modals
• sorting/filtering/multiselect in comboboxes/data grids

What else?

https://youtu.be/9-6deom3ZdY

Great thread and cute illustrations! 🤩

Accessibility tends to be an afterthought for many frontend projects, so it’s also important to know how to pick frameworks/libraries that automate as much as possible while still fulfilling your architectural/design constraints.

/frontend dev・founder/decentralized data wrangler /blockhead・ritual.net・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx・x.com/darryl__yeo

Absolutely! I’ve been starting to use Radix UI more which has accessible components. And thank you! I like to doodle ✍🏻

Great thread and cute illustrations! 🤩

Accessibility tends to be an afterthought for many frontend projects, so it’s also important to know how to pick frameworks/libraries that automate as much as possible while still fulfilling your architectural/design constraints.

https://warpcast.com/darrylyeo/0xcb1488a5

great thread + reminders for dev! love the cute lil illos too 🥹

i work with people who have disabilities so i vibe with this.

100 $degen

Nothing gets by jojo 🔥
Very thoughtful