Introduction to Web Accessibility

computer key with accessibility logo and text on

Audience we should have in mind

Basic consideration in Web design

1. Provide sufficient contrast between foreground and background

low versus high contrast text example image

2. Don’t convey information with color alone

example image of conveying information with text and color

3. Ensure that interactive elements are easy to identify

4. Provide clear and consistent navigation options

5. Ensure form elements include clear labels

form with or without clear label comparison

6. Provide easily identifiable feedback

7. Create designs for different viewport sizes

example image for same website displayed on different sizes of screen

8. Include image and media alternatives in your design





Software Engineer, React.js || Javascript || RoR

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Cookie banners and accessibility

Lorem Ipsum cookie banner template — “Our Cookie Policy” OK I agree button

Designing for the extremes

curve bell L-R: People w Disability, people getting older, average users, people under serious stress, mobile & power users.

Who decides how disability is represented in stock photography?

Smiling man with a learning disability works on a laptop in a meeting with other colleagues.

Creating accessibility personas

Persona describing the digital needs of a woman who wants simple pages and layouts

Empower All Users, Part One: Beyond Accessibility

Accessibility: 7 best practices to get you started

A team of people from all walks of life, celebrating.

Deciphering accessibility

Illustration of a diverse group of people with and without disabilities

Why you should design for a tiny ruined phone

An iPhone 5S with a broken screen seen from the front

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pan Li

Pan Li

Software Engineer, React.js || Javascript || RoR

More from Medium

Website Accessibility

Colors accessibility — Know the top 3 problems and how to fix them…

On the left, the Accessibility For Devs logo in color, with the 6 colors of neurodiversity, and on the right, the same logo in grayscale.

How to create large component sets in Figma

How to create large component sets in Figma

Universal design : the need for assistive & accessible technology

A linear illustration of the wide range of disabilities