Stop losing customers. Here’s how to design for a more accessible web.

design-accessibility-symbols

When you think about your website design, surely you think about your audience. How do you make your website appealing to prospective customers? How will you draw them in and encourage them to engage with your company? These are all good things to be thinking about- but have you thought about design accessibility?

Design accessibility is the practice of creating digital content and applications that can be used by a variety of different people, including people that have visual, motor, auditory, speech or cognitive disabilities.

It doesn’t require extra features, cost or effort to integrate design accessibility in your website. It is just a standard that should be kept in mind when creating site elements. If you’re already convinced that you need design accessibility, that’s great! We’d love to chat about how you can make it happen for your site. Otherwise, read on to learn more:

Why is it important to design accessibility?

Here are some reasons you should consider:

1. Equal Opportunity

Websites are a key channel for people to learn about and interact with your company. Therefore it is critical that your website is designed to be accessible to provide equal access and equal opportunity to people with disabilities. Equal access to the Internet and other accessible information and communication technologies (ICT) is a human right that is recognized in the UN Convention of the Rights of Persons with Disabilities, so it is imperative that you provide your audience with accessible content. In fact, nearly ⅕ of people in the United States have a disability and in 2017, there were 814 website accessibility lawsuits. So website accessibility is a real issue that you need to consider.

2. Better Experience for Everyone

Designing to allow for accessibility is critical because it ensures that everyone can have a good experience. Design accessibility does not only apply to people with disabilities but also people who just prefer to browse your website using, for example, the tab key instead of a mouse. For instance, people with carpal tunnel syndrome (CTS) have difficulty using a mouse to browse and would prefer to use the keyboard to navigate. Design accessibility also just makes your website easier to navigate and read in general.

3. Better search results

Accessible websites also experience better search results because they are designed to reach a larger audience, they are more SEO friendly, they have faster download times, they encourage good coding practices and have better usability. Of course, there are also many other factors that play a role in SEO, but accessibility is definitely a relevant factor. You can learn more about the marketing and search optimization services we offer here.

So now that you’re convinced you should value design accessibility, how do you do it?

The World Wide Web Consortium (W3C) created a set of standards called the Web Content Accessibility Guidelines (WCAG) that provide many recommendations on how to make your web content more accessible. They also created levels of conformance based on specific success criteria (A, AA, AAA) to evaluate web content.

Menikmati Labs offers custom web design solutions that incorporate design accessibility. If you’re interested in learning more about what we’ve done so far, you can take a look at our past work.

Otherwise, here are some general recommendations that you can implement in your site:

1. Maintain Appropriate Color Contrast

contrast-ratios

Maintaining an appropriate color contrast is important to make it easier to read the text of your web page. To achieve conformance level AA, it is recommended that the contrast ratio between text and its background is at least 4.5 to 1. If the text is larger or heavier, the ratio can be lower- if your text size is at least 18pt or 14pt bold, the ratio drops to 3 to 1.

You can use the WebAIM color contrast checker to calculate contrast ratio and see if your colors pass WCAG standards.

2. Don’t rely on color to convey critical information

error-messaging-with-color-indication

People with low visual acuity or color blindness will have a difficult time distinguishing messages conveyed using color indications. For example, in the photo above, error messaging is displayed in red. However, people who are color blind will not be able to tell the difference between the different fields so they will be unable to recognize that there is a problem. Instead of just showing an error message in red, try using other visual cues as well such as a symbol, bold or underline to draw attention to the message to help it stand out more. Another example would be graphs. Instead of just shading each bar of a bar graph a different color, try to add patterns so that it is easier to distinguish the differences.

You’ll know you’ve done a good job if you can understand everything on your web page when it is printed out in black and white. You can also use the app Color Oracle to help you get a perspective of how people with common vision impairments see your site

3. Use visible labels and boundaries on form fields and inputs

form-fields-with-placeholder-text

Labels should never be put in form fields as placeholder text. First of all, placeholder text in the input fields are often gray and have low contrast, which makes it hard to read. Also, it is hard to know what to input into the fields once you begin typing in it because the label disappears. It is particularly frustrating for people that use screen readers because they navigate forms using the Tab key and rely on the reader to read each element of the page for them. Screen readers can read <label> elements, but usually skip over non-label text such as placeholder text. This makes it difficult for them to understand what to put in each input.

Instead, put the label outside of the input field and keep it there even while the person is filling an input.

It is also important to define a boundary around text inputs fields to help users with mobility impairments or cognitive disabilities. Boundaries can also help to define the location and size of a click target for people using adaptive pointing devices. Users may find it difficult figuring out where to point and click if the field does not have a boundary.

4. Design usable focus indicators

focus-indicators-selection

Focus indicators are the outlines that appear around buttons and form fields when they are selected. Most browsers use a CSS pseudo class by default to display these outlines around elements when they’re selected but you may find that they are unappealing and want to remove them. Instead of removing them all together, you can redesign them to fit your theme better. It is important to have usable focus indicators because it helps people identify which element has the keyboard focus so that they can navigate your website more easily. They are especially important for people who use screen readers or have limited mobility.

Elements that should be focusable include:

Links

Form fields

Widgets

Buttons

Menu items

5. Write useful alternative text for your non-text content

alt-text-example

Alternative text is presented within the <alt> attribute of an image element and should be used to describe what’s happening in the image and its significance to the context. It is useful for people who use screen readers to hear the web because these tools convert text to speech so that the person can hear the text instead of viewing the image. If no alt text is written, some screen readers will just provide the file name to the individual, which does not help them understand the context and significance of the image. So it’s important to provide text that will help people to grasp the meaning and function of images in your content.

6. Use the right markup

heading-tags-example

HTML elements communicate to the browser the type of content they contain. For example, headers mark the beginning of content and there are tags given to headers to define its style, but also its purpose. Screen readers navigate web pages by identifying elements tagged as headers. If a heading is styled like a header (big and bold) but it is not tagged as a header, screen readers will not be able to identify that it is supposed to be a header. To make it easier, make sure that you tag your HTML elements with the appropriate structure rather than just relying on style to convey the hierarchy of content. This way, people can navigate your site by listening to the list of headings and jumping through content by the titles.

7. Avoid hover features

hover-feature-example

Designers love hover features because it eliminates clutter on a page. Unfortunately, hover features are not very accessible for people that use keyboard navigation or other assistive technologies. This is because these tools can only identify items that are already visible on the screen. So if a link or button is not identified by the technologies, users cannot choose to click it. If the keyboard-only users can’t see that there is a button on the page, it’s not possible for them to navigate into empty space to allow for the button to appear. So it’s just better to avoid hover features in general.

Even though you should avoid hover features, it doesn’t mean you should avoid interactive elements on your page altogether. Interactive elements are a great way for you to engage site visitors to improve their experience and provide more value. You can learn more about interactive elements in our previous post.

8. Support keyboard navigation

keyboard-navigation-example

Keyboard navigation is an essential aspect of accessible design. There are many people that use a keyboard instead of a mouse to navigate a content on a web page by using the Tab key to move through interactive elements on the page.

As mentioned before, focus indicators are important to provide a visual indication of the element that is selected. The order of the elements is also important to improve the ease of navigation. When pressing the Tab key to move from one element to the next, the selection should move intuitively- from left to right and top to bottom rather than jumping back forth throughout the page. The enter key should also allow for the selection of the element.

To check that your site supports keyboard navigation, you should try for yourself! Verify that you are able to navigate through your site completely without a mouse.

To make navigation even more simple, you should also take into consideration the length of your navigation menu. It will be difficult for people with motor disabilities to move through your site if your menu is very long and complex. The names of your links should also be concise to make it easier for people with screen readers.

You can also improve navigation by labelling all elements on your page with ARIA landmarks or HTML5 structural elements such as <main> or <nav> so that screen readers can help users to get to where they want to be on your site.

9. Avoid component identity crises

component-identity-crisis-example

Each element on your web page (menus, modals, autocompletes, etc) has a specific set of expected HTML semantics, keyboard behaviours and ARIA attribute usage. ARIA attributes tell screen reader users how to interact with each component with a keyboard. For example, a menu is a widget that offers users a list of choices. If multiple choices are offered per row, then the widget is no longer a menu, and it changes the way that users interact with the component using his/her keyboard, making it difficult to navigate.

So it’s better to keep your website components simple. Don’t try to embed different elements together because it will make it too complex for keyboard navigation to handle.

Conclusions

As you can see, it doesn’t take any extra effort to make sure your website design is accessible. But when you do so, it makes it much easier for your audience to navigate and understand your web content. So if you are thinking of creating a website for your company, make sure that you keep design accessibility in mind. If you already have a website, take some time to evaluate whether your website meets accessibility standards and make changes accordingly.

Menikmati Labs is committed to ensuring that all of our clients prioritize accessible design in the websites and applications. Feel free to reach out if you’d like to start a conversation.

Show some love!

This is a unique website which will require a more modern browser to work!

Please upgrade today!