Juxt
免費訂閱
文章 · 收錄於 2020.08
MGN-BLOG-3-QUICK-
索引 · 部落格

3 Quick Wins To Make Your Website Accessible

2 分鐘閱讀

The first tip from @juxtdesign is Accessibility ✌️ ! Accessibility matters because making your site accessible meaning even more people (more than 1 billion disabled people in the world 🧑‍🦯🧏🧑‍🦽) can easily access your site. It stands for diversity and inclusion for your company and there are guidelines for you to follow.

Step 1: How to evaluate my site's accessibility?

Why does accessibility matter? 15% of world's population live with disability, Design for diversity & inclusion meaning more traffic, Implement the best practice in the world

Use Web.dev or WAVE to spot out the accessibility problems on your website. Little effort to your site can make your accessibility score up to 90+.

Evaluate my accessibility with web.dev Evaluate my accessibility with Wave WebAim

You can also use Stark on Figma & Sketch when you are designing app interfaces.

Step 2: Quick wins to make your site accessible

Add Alt Text to Images. Describe or explain the purpose of the image in alternative text field, allow screen readers to announce your image content for disabled users

Add alt text to images on your website to make your images speak for themselves. You can also double-check your color contrast is accessible to visually impaired users. Keep in mind that your site should be properly organized in a hierarchy.

Check your color contrast with Contrast Checker, minimum contrast should be (4.5:1 & 3:1)

Set proper content hierarchy. Reflect page content organisation help people navigate your page

Alt Text is also great for SEO too because search engines does not read your image

Step 3: There is no step 3! Sit and wait for more traffics to come over time.

Have I mentioned accessible websites are easier found by search engines as well?

索引 · 相關文章

延伸閱讀

文章 · 01
預覽圖
accessibility
Accessibility Toolkit Stark Launched Chrome Extension

Stark has been a very helpful tool for creating accessible designs. The all-in-one accessibility toolkit has launched Chrome version after focusing on design platforms like Figma, Sketch and Adobe XD. Two main features launched today include color contrast checker and colorblind simulation. Smart color suggestion, recommendation of alternative colors if the contrast does not pass WCAG 2.0 level, h

部落格
文章 · 02
預覽圖
accessibility
Using Chrome DevTools for Color Accessibility

One simple step to enhance your website's accessibility is checking your colors. 8% of all men suffer from color vision deficiency (0.5% in women), so 1 in 12 males that visited your website may experience difficulties if your design is not accessible. Until few years ago, colors on a website have to check one by one using contrast checker or by completing a site audit. Recently, I discovered Chro

部落格