Accessible Websites: Core Rules for a Site Everyone Can Use

When people hear web accessibility, many business owners picture something like a wheelchair ramp: well-meant, but an extra job with little to do with their own customers. In reality, most accessibility rules add up to a site that's easier for everyone to read, quicker to fill in and better understood by Google.

None of the rules below needs a big budget. Most come down to making the right decision during design and development.

Who is accessibility for?

The obvious groups are blind users with screen readers, people who struggle to tell colors apart and people who navigate by keyboard because they can't use a mouse. For people with hearing loss, captions on videos play the same role.

But the list doesn't end there. Someone checking your site on a phone in bright sunlight, a 60-year-old customer who left their glasses at home, someone using a phone one-handed because their arm is in a cast: they all benefit from the same rules. Accessibility isn't a niche feature; it covers a wide range of real conditions.

The international reference is the W3C's Web Content Accessibility Guidelines, WCAG for short. The current version is 2.2, with three conformance levels: A, AA and AAA. Many organizations aim for AA, and the figures in this post follow that level.

Legal obligations vary by country and sector. In the European Union, the European Accessibility Act is in force and can cover some online stores selling to EU consumers. If you sell abroad, check with an expert whether you're in scope. For rules in Turkey, check current legislation too.

Color contrast and font size

This is one of the problems we run into most. Light gray text on a white background looks elegant and can't be read.

At WCAG AA, the contrast ratio between normal text and its background must be at least 4.5:1, and at least 3:1 for large headings. A concrete example: #999999 gray on white comes in around 2.8:1, below the threshold. The lightest gray that passes 4.5:1 on white is around #767676. The soft gray your designer loves is probably lighter than that.

On mobile, don't set body text below 16 pixels, and keep line height around 1.5. Don't let paragraphs run edge to edge; on desktop, 60 to 80 characters per line reads comfortably.

Then there's not relying on color alone. Showing a form error only by turning the field border red means nothing to someone who can't tell red from green. Add text next to it, such as “Phone number must be 10 digits.” Likewise, distinguish links in body text with an underline, not just color.

If your brand colors are low contrast, you don't need a new logo. Deriving a darker shade of the main color for text and buttons is usually enough. We covered how to extend a color palette when bringing your brand identity to the web in a separate post.

Images and alt text

Alt text is a short description of what an image shows. Screen readers read it aloud, it appears if the image fails to load, and Google uses it to understand the image. One field, three jobs.

“image1,” “banner” or a pile of keywords is not good alt text. “Hairdresser coloring a client's hair at our salon in Moda” is. If an image is purely decorative, like a background pattern, leaving alt text empty is correct; screen readers will skip it.

Another frequent mistake is baking campaign information into an image as text. Screen readers can't read “20 percent off in September” inside a banner as text, and Google may not always interpret it correctly. Write that information as real text. We go deeper into file names, formats and alt text in our image SEO post.

Keyboard and screen readers

Put the mouse aside and try navigating your site with only the Tab key. Watch for three things: Can you see which element has focus, is the order logical, can you reach everything?

Many designs remove the browser's default focus outline because it looks “ugly.” The result is keyboard users not knowing where they are on the page. Instead of removing it, design a focus style in your brand colors.

Dropdown menus, pop-ups and cookie banners should open and close by keyboard and close with Esc. A pop-up that can't be dismissed is the end of the site for a keyboard user.

Every form field needs a visible label. The faint example text inside a field (the placeholder) doesn't replace a label, because it disappears once you start typing and people forget which field they're in. That can raise form abandonment for everyone, not only users with disabilities.

Screen reader users scan pages by jumping between headings. That's why having a single H1 and using headings in order (H2, then H3) matters. Link text should also make sense on its own: when a screen reader lists a page's links, hearing “click here” five times in a row helps no one.

One small but effective detail: declaring the page language (the lang attribute in HTML) as Turkish. Without it, some screen readers read Turkish text with English pronunciation and make it unintelligible.

Quick checking tools

You can start with automated tools:

• Lighthouse in Chrome developer tools gives an accessibility score out of 100 and a list of issues
• The WAVE and axe DevTools browser extensions mark problems right on the page
• WebAIM Contrast Checker calculates the contrast ratio of two colors in seconds

Automated tools catch only part of the problems. Software can't fully judge whether alt text is meaningful or whether the Tab order makes sense. So also do a manual check of about 10 minutes: navigate the site by keyboard only, set your phone's font size to the largest and see if the page breaks, then turn on VoiceOver on iPhone or TalkBack on Android and listen to your homepage once.

That last test is usually the most instructive. When you listen to your site with your eyes closed, you hear exactly where visitors get stuck.