Content
@
0 reply
0 recast
0 reaction
jojochuu
@jojochuu
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
14 reactions
jojochuu
@jojochuu
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
@jojochuu
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
@jojochuu
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
@jojochuu
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
@jojochuu
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
@jojochuu
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
@jojochuu
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
@jojochuu
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
