One of the great promises of the Internet is the democratization of knowledge, information and communication using technology. And if it’s democratization that we believe in, then the websites we design should be equally accessible to all users. There are many different types of users: those who can’t physically use a mouse and rely on just the keyboard; those who are visually impaired and browse using assistive technology; and even those using their mobile devices out in the glaring sunlight, making it harder to tell color apart. How can we as designers live up to our responsibility of catering to these many kinds of users? Before we delve into this question, let’s first conduct a small experiment in experiencing the Web in non-traditional forms. To do so, turn on the screen reader on your computer (press Command+F5 for VoiceOver on a Mac, or Windows+Control+Enter for Narrator on a PC). A computer-synthesized voice should then begin reading this paragraph out loud – and if you close your eyes to listen (no peeking!), you might get a sense of how visually impaired people experience the online world.

This small shift in the way we can consume online content, opens the door to the realization that there’s more than one way of browsing the Internet. And when we design for the Web, we need to make sure that our message is articulated equally well across all platforms and methods, and can reach as many diverse users as possible. This following checklist for accessible Web design, based on the WCAG accessibility standards, is surprisingly easy to implement. The eight simple steps described below will not only make your website accessible to a wide range of users, but will also, as a bonus, do wonders to your website’s SEO and boost your ranking on Google:

01. Include text alternatives for visual content

For the visual content on your website, such as photographs, illustrations or graphs, include textual alternatives. Adding alternative text (a.k.a alt text) descriptions to each of your images, allows assistive technologies such as screen reading programs to interpret it into spoken form. The alt text is a brief sentence that describes the image clearly, not too differently from the way you’d explain the image over the phone to a friend. If you neglect to add alt text, screen readers will either skip the image altogether, or worse, read out its file name (and we all know that ‘FinalFinalForReal2.png’ isn’t the most informative of phrases).

How to add alt text to your image on your Wix website: Go to the Wix Editor → Click on your image → Click the gear icon for “Settings” → Fill in the “What’s in the image? Tell Google” section.

For the video content on your website, incorporate subtitles into the video for users who are deaf or hard of hearing (or, for instance, are watching the video on mute in a public space). In cases where the video is mostly visual and has no dialogue or narration, make sure to add a video caption briefly describing its content for those with visual impairment.

02. Use live text, not flattened

When adding copy to your design portfolio or any other website, try to use only live text, enabling screen readers to fully understand your content. No matter how beautiful your typographical piece may be – if you want it to be legible to all users, opt for live text, rather than a JPEG, PNG or any other image file. In the instances in which it’s necessary to include flattened text, like a logo, for example, make sure to have the same information repeated as either live text or alt text, to make it fully readable and understandable.

03. Retain text hierarchy

The visual hierarchy you craft so masterfully with your design skills, should be just as easily interpreted by assistive technology. No matter how big, bold or all-caps your title is, no machine will be able to tell that it’s a title unless you clearly specify that. Labeling your text using heading and paragraph themes, allows browsers and screen readers to navigate through your content correctly and present it to disabled users in the right order.

The Wix Editor offers six heading presets and three paragraph ones. Heading 1 (or h1) should be used for the main title of each page. The rest of the headings should go in chronological order – Heading 2 is second in hierarchy, Heading 3 is third, and so on. Use paragraph styles for the body text, and follow the same chronological order.

04. Implement good color

Color is a key factor in any design project, and picking out the right color palette is essential to setting the right mood and tone. Moreover, proper use of color is also a major component in the legibility of your website. Color contrast is one of the most important factors in ensuring that all elements on the page are distinguishable and clearly displayed. The WCAG recommendation is a minimal contrast ratio of 4.5 to 1 between the text color and its background color. For larger type, starting at 18 point (or a bold 14 point type), the ratio is a more lenient 3 to 1.

There are many online tools for testing your color contrast quickly and easily. We recommend Google’s Color Tool, or Colorable by Jxnblk. Both of these websites use hex values to rate your color combos based on WCAG accessibility guidelines.

05. Don’t rely on color alone to convey information

Green means go, and red means no – we get this instinctively. But what if you’re color-blind and can’t tell the two apart? Many visually impaired users can’t perceive color accurately, or not at all. For that reason, make sure to use more than just color to convey information – from adding text, to icons or patterns – to ensure full readability. For example, when designing buttons for your website, even if you make them green and red, be sure to add text labels on both so that all types of users can immediately know what they mean. To test the color accessibility of your website, try converting your design to black and white to see if the same information still comes across.

06. Enable keyboard navigation and visual indicators

From the motorically disabled to the vision impaired, there are many kinds of users that rely solely on the keyboard – and not the mouse – to navigate online. Ensure that all your website’s functionalities are accessible from the keyboard (with keys such as tab, enter, and the arrows). You can easily test this yourself by trying to navigate your website without once using the mouse.

Another important tool in reinforcing keyboard navigation is the use of visual indicators. These are the thin blue outlines that appear around links or other clickable items on the webpage. They signify which page element currently has the keyboard focus, or in other words, where the user is located on the page at a given moment.

Keyboard navigation and visual indicators are automatically enabled on Wix websites. To find out more, click Settings on the top bar of your Wix Editor → Click Accessibility → Enable Visual Indicators.

07. Clearly label form fields

When designing an online submission form (such as a log in or contact form), it’s important to provide the user with enough necessary guidance, enabling them to easily understand what they need to fill in, and where. This means naming each field in its label element, and not as placeholder text. Additionally, the text that’s visible to the users should be the same as the field’s name. So if the user sees a ‘Email (required)’ label, then the field name should be exactly that, too, as opposed to something like ‘Contact_Field02’. These practices make it easier for people using assistive technology to correctly fill out forms, as it is the field name and label element, and not the placeholder text, that tools such as screen readers use.

08. Avoid content that can cause seizures

The WCAG accessibility guidelines suggest that no element on the webpage should flash or flicker over three times per second. Anything above that threshold might trigger seizures for people suffering from photosensitive epilepsy. For any flashing content, it’s also advisable to reduce its contrast, and avoid using saturated reds. As a rule of thumb, it’s always better to enable users to freeze or disable the animation on screen, so that they can have more control over their experience of your content.