Is your website 'closed the door', put millions of customers? Open the checklist Web Accessibility (WCAG) that everyone must know.

Imagine ... You have a huge marketing budget. Shoot heavily The website is designed beautifully. But there is a group of people who "want to buy" your products will be missing But can't ... not because he doesn't have money But because your website "Used" for him

That group of people may be visually impaired using screen readers, but your website does not have an explanation. Or may be the elderly that the hands begin to tremble Makes you click on your small button or even a person with temporary arms Unable to use the mouse easily ... They are all the "customers" that you are pushing out without knowing.

This problem is not a small matter. And it's not a distant matter anymore In an age that everyone talks about the equality, having a website that everyone can access or Web Accessibility is not just "good things to do", but it is "the standard that needs" to unlock the enormous business opportunities. And prevent legal risk that may occur in the future

‍

Prompt: Split-Screen images compared. One side is a picture of a customer smiling easily. The other side is a picture of a customer that has eye defects. (There may be a symbol of the white staff beside). I'm making a disappointment while trying to use the same website. But his computer screen shows a distortion Conveys obstacles in accessing

‍

Why is the beautiful website becoming a "wall" blocking customers?

This problem arises from "blind spots" that many businesses overlook. We tend to be obsessed with the design of the web to "beautiful" in the eyes of most people until forgetting that each person's "good experience" is not the same. The main reason is from:

• Focus on "images" rather than "structure": designers and marketers tend to focus on the beauty of Layout, color, and Animation, but neglecting the correct HTML structure, which is the key to helping technology (Assistive Technology), such as screen reader, can "understand" and "communication" on the web.
• Issue and misunderstanding: Many people think that Web Accessibility Is a matter of "Small disabled people" only, but in truth it is related to many people. Both the elderly, people with temporary disabilities (such as broken arms), or even people in a limited situation (such as using the web in the sun that is not seen in a small contrasting color). From the data in 2022, Thailand has about 4.19 million people with disabilities, or about 6% of the total population. This is a market that you can't overlook.
• I think it's a technique that "Complicated and expensive": the word "standard" or "WCAG" may sound scary and full of technical terms. Causing the business owner to feel that it is a distant matter and has to invest high Despite actually Starting Accessibility Can start from a small point That can use very little budget

‍

Prompt: Simple infographic images Show a brain image with gear inside But there are some gear coming out with eye -shaped icons, ears, and hands, with a short message "Focus on Visuals Only", "Lack of Awareness", "Seems Complicated" to convey the cause of the problem.

‍

Leave ... risky than you think! The impact when your website "does not welcome" everyone

Introduction to Web Accessibility Not just missing business opportunities But it is the risk of your brand in many dimensions.

• Loss of income and customer: This is the most clear effect. You are closing the opportunity to sell with a large group of customers with purchasing power. Whether directly to the disabled Or their families and friends who choose to support brands that care about all groups
• Legal risk: in many countries around the world There are many private companies that do not make a website for the disabled. For Thailand itself Act for the Promotion and Development of the Quality of Life of the Disabled 2007 and the relevant ministerial regulations, which promotes the right to access information and services. Although the current 100% of the private sector may not be as intense as government agencies But this is the trend of the world that the business that looks far away must be prepared.
• Break the brand's credibility (Brand Trust): In the era when consumers choose to support the brand from "value" that the brand holds Having a website that discourages a group of people Able to create a negative and destroyed image The composition creates trust on the website. That you try to create
• Affecting SEO: Google is very important to the User Experience (UX). The hard access website often has a high bounce rate, low -on Page, which is a bad signal for SEO. In addition, many elements of Accessibility, such as the use of correct heading tags, alt text, and clear structures Also has a direct good effect on the ranking and Core Web Vitals as well.

‍

Prompt: The picture shows 4 effects in the form of 4 cards: the first card has a picture of money flying away, the second leaves are the hammer, the third leaf is a broken brand logo, and the fourth leaves are the SEO graphs that have a red tone to convey the risk.

‍

Opening the scriptures to solve problems: starting with 4 principles of WCAG

Don't worry. Making the web access is not as difficult as you think. Its heart is in an international standard named Web Content Accessibility Guidelines (WCAG) , which is divided into 4 major principles that are easy to remember "POUR". Let's see what each item is and what checklist do you start immediately?

1. Perceivable (perception) - allowing users to recognize content through various senses

• [] All images must have an explanation (Alt Text): Write to explain what that picture is. So that the screen reader program can be read for the visually impaired
• [] Video and audio files must have other options: such as captions for the deaf, or audio description for blind people, and transcript.
• [] The color that must be contradicted properly: text and background must have enough Contrast Ratio (at least 4.5: 1 for normal text) so that people with blurred or blindness are easy to read.
• [] Do not communicate with only colors: such as making a link to just red without underneath May cause color blindness, do not know if it is a link

2. OPERBLE (available) - allows users to control and use various web components.

• [] All functions must be used via keyboard: users who cannot use the mouse must be able to press the TAB to slide to the link, button, and various form.
• [] No "Keyboard Trap": users must use the keyboard to move in and "come out" from various parts of the website, not stuck in the pop-up.
• [] Give enough user time: If there is an automatic session There should be options for users to request timely.
• [] Avoid severe flashing content: The light that blinks (more than 3 times per second) may stimulate seizures in some people.

3. Undertandable (easy to understand) - making the content and usage are not too complicated.

• [] Use clear and simple language: avoid technical vocabulary or industry vocabulary without explanations.
• [] Navigation and navigation must be predicted: Design the menu and layout to be consistent on every page for users to learn and easily use.
• [] There is a clear error: when the user fills the form wrong Must have a clear message that "Where is wrong" and "How to fix" not just saying "Error"

4. Robust (durable) - allowing the web to work with various technology Stable

• [] Using the standard HTML code: Clean and correct code structure (such as using Tag
  ,,
  ,, To be responsible) will help the program to help read the best work
• [] Communicate status and changes to the program to help read: For example, when the product is added to the basket There should be a code that warns the program to help read and announce.

If wanting to study more in -depth information The official source of W3C Web Accessibility Initiative (Wai) and the community like The A11Y Project is an excellent starting point.

‍

PROMPT: Beautiful infographic, divided into 4 parts according to POUR (Perceivable, Operial, Undors Standable, Robust). Each part has a main icon (such as hand shape, brain shape, gears) and a short checklist 2-3 underneath.

‍

Examples from the real thing: when "Online stores" increase sales of 20% with accessibility.

Imagine "Baan Bakery", a famous online dessert shop. At first, the website is very beautiful. But received the feedback from the elderly customers that the small letters were difficult to read and the "adding button to the basket" was so light that it could not be seen The team decided to overhaul. Big Accessibility

What to do: They do not dismantle the web. But starting with the update according to the AA level WCAG. They adjust the color button to be darker. Increase the size of the font a little bigger, add Alt Text to every piece of cake that "Strawberry, soft cake, topped with berry sauce" and make sure that customers can order every step using only the keyboard.

Amazing results: Only 3 months after the sales of "Baan Bakery" increased by almost 20%, not just from the elderly. But still get new customers That admires the brand's attention They received 5 -star reviews with comments that "Thank you for making a website for our parents to use easily." This is the power of design for everyone. That changes from the design of UX/UI to normal to create a "cover" experience and "create sales"

‍

Prompt: Images of the product page on the website "Bake Bakery" on the side shows the light colored buttons and the small letters. The After shows the dark button contrasting to the background clearly. The letters are easier to read. With a small graph That shows sales rise

‍

Checklist ready to go! You start "upgrade" your website immediately.

Read here You probably want to do it, right? Try using this abbreviation checklist to explore your website. And start with a small victory (Quick Wins):

1. Explore the homepage: All important pictures, have Alt Text that mean? Try using the Extension tool in Browser to check.
2. Test with keyboard: Try to put the mouse down. And use only the Tab, Shift+Tab, Enter button, and Spacebar to surf your website. You can go to the menu, press the button, and fill out the form successfully?
3. Czech Contrast Color: Using online tools (searching "Color Contrast Check") to drop the color of the characters and background color of the button (such as the purchase button, contact button).
4. Read your content again: Is there a terminology or sentence that is too complicated? Try adjusting it to a language that people generally understand.
5. Watch your videos offscale: Do you still understand all the content via captions?

Just starting from these 5 items, it is considered a great step. And if you are going to create a new website Bringing these stories into part of the process Develop organizational website from the beginning will help save a lot of time and costs.

‍

Prompt: CHECKLIST images that have a cheap box With icons for each item such as icons, ketch icons, two -colored circles (instead of Contrast), book icons, and Play Button icons.

‍

Questions that people tend to wonder (And the clear answer)

Q1: Make Accessibility And the website will look boring Not as beautiful as before?

A: It's not true! This is the most common misunderstanding. Accessible design is a "smart" design, not a "boring" design. Able to create a website that is both beautiful and available for everyone at the same time It is a challenge that helps to enhance creativity even.

Q2: Do you need a lot of budget? Is our small business need to do?

A: You don't have to do everything 100% perfect. Starting from "Low-Hiving Fruit" or something that is easy to fix, such as adding alt text or adjusting the color button. Almost do not need to spend more budgets at all The most worthwhile investment is to create "Awareness" in your team and for small businesses This is the opportunity to create an advantage in the competition and create a loyal customer base for your brand.

Q3: WCAG has a level A, AA, AAA. What level should we aim?

A: For most business websites and organizations, AA is a Gold Standard that is accepted around the world. It creates a good balance during coverage access and possibilities in practice. The compliance with this standard is also in line with the guidelines of Requirements for website listed companies or credibility for web offices That emphasizes transparency and standard

Q4: What tools can you check?

A: There are many great automatic tools for starting, such as WAVE, AXE Devtools (Browser Extension), or Lighthouse in Chrome Devtools. Basic Accessibility, but remember that these tools can help detect only 30-40% of the problem. Testing by real testing is still the most important thing.

‍

Prompt: The image of a person sitting cross -legged on a comfortable chair. Along with a symbol of questions and answers floating around him. The smiley face shows confidence and relieving anxiety.

‍

It's time to open the door to welcome all customers.

At this point, I hope you see that Web Accessibility Not just a matter of complex techniques Or a terrifying legal burden, but it is the "heart" of doing business in the new era. Is to change the view from asking "What are we selling?" To ask "How can we give the best experience to 'everyone'?"

Investment in Accessibility Is an investment that provides returns in terms of numbers (sales, conversion rate), brand love, Trust, and most importantly, being a part of creating an artificial digital society and does not leave anyone behind

Do not wait for your website to become a "obstacle" that blocks customers anymore. Start exploring your website today with a simple checklist that we provided and made the opening of the door to welcome the customers "everyone" is the new standard of your business.

Want your website not only beautiful But also ready to welcome all customers and create tangible business results, right? Consult an expert in UX/UI and Web Accessibility. Ours get free! We are ready to help you create a great website for everyone.

‍