Skip to main content

Seven easy-to-implement guidelines to design a more accessible web

You can read more about this here - https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94

1. Add enough color contrast#

According to the W3C, the contrast ratio between text and its background should be at least 4.5 to 1 (conformance level AA.) The ratios become more forgiving with larger and heavier fonts since they’re easier to read at lower contrast. If your type is at least 18 pt or 14 pt bold, the minimum contrast ratio drops to 3 to 1.

2. Don’t use color alone to make critical information understandable#

When you’re communicating something important, showing an action, or prompting a response, don’t use color as the only visual cue. People with low visual acuity or color blindness will have a hard time understanding your content. Elements with more complex information like charts and graphs can be especially hard to read when you only use color to distinguish the data. Use other visual aspects to communicate information like shape, labels, and size.

3. Design usable focus states#

Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site. These are used by people who are blind and require screen readers, individuals with limited mobility, individuals who have suffered injuries like carpal tunnel, and power users who prefer this type of navigation.

4. Use labels or instructions with form fields and inputs#

People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over. Always help people understand what they should do and write in a form. It’s best if labels don’t go away, even when the person is filling an input; people should never lose context with what they’re writing. When designers hide descriptions or directions in their forms, they’re sacrificing usability in favor of simplicity.

5. Write useful alternative text for your images and other non-text content#

Try to describe what’s happening in the image, and how it matters to the story, rather than just saying something like “picture,” context is everything. If the image is purely decorative or if it creates redundancy because the surrounding context already explains the content. Then adding an empty <alt> attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.

6. Use correct markup on your content#

Titles with big font sizes help a reader understand the order of the content better. Likewise, screen readers also use heading tags to read content. This way, people with low-vision get an overview of the page by reading each heading in a hierarchical flow. It’s important to use proper structural elements when you develop a site. HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat that content. The components and structure of a page are what arranges an accessibility tree. This tree is what powers screen readers which are used by people who are blind so they can “listen” to a page.

7. Support keyboard navigation#

As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom — header, main navigation, content buttons and inputs, and finally the footer. A good practice is testing your site only using a keyboard. Use the Tab key to move through links and forms. Test using the Enter key to select an element. Verify that all the interactive components are predictable and in order. If you can navigate through all your site without a mouse, you’re in a good spot!