7 things that every designer should know about the design of accessible sites

Original author: Jesse Hausler
  • Transfer
image

Accessibility allows people with disabilities to understand, move around, interact and give feedback to websites. If all the designers knew how to make websites accessible, then only poor design could interfere with the use of sites.

1. Accessibility is not an obstacle to innovation


It’s not necessary to make ugly, boring or crooked products. Accessibility imposes a set of restrictions that must be taken into account.

Always remember that you are not designing for your peers. Design a website for a wide variety of people who will interact with your product.

These can be blind people, color blind people, poorly seeing, deaf and hard of hearing, people with problems of the musculoskeletal system, etc. Design sites for young, old, experienced users and beginners. Accept this set of rules as you accept any other set of design rules. This is just one of the challenges to creating amazing products.

2. Do not be limited to color to convey information


This will help users who have difficulty sharing colors. 1 out of 12 men and 1 out of 200 women do not distinguish colors, 1 out of 30 people do not see well, 1 out of 188 people are blind.

Use color to highlight or complement what is already visible. How many fields in the following example are in the error state? Most will say “one” - the captcha box contains an exclamation point.

image

But if we look at the color version, it turns out that all four fields contain errors.

image

There are many ways to solve this problem. Add exclamation points to all fields. Use text explaining where the error is. Hints, thick frames, bold text, underline, etc. There are many options - the main thing is not to use only color.

3. Ensure that there is sufficient text and background contrast


According to WCAG ( Web Content Accessibility Guidelines 2.0 ) rules , this contrast should be no less than 4.5 to 1. If the font size is 24 px or 19 px bold, then the minimum will be 3 to 1.

For example, if the text is 24 px, 19 px bold or more, the gray tint of the color on a white background should not be lighter than # 959595.

image

For smaller text, at least # 767676 must be used. If the background is gray, the text should be darker.

image

There are some great palette picking tools - Color Safe , WebAIM's Color Contrast Checker .

Logos or those elements that are currently disabled are disabled. Placeholder is NOT an exception.

Here is an example from a popular blog site with text contrast below normal. Only the letter M corresponds to the norm:

image

The following example from the BBC website shows the correct color selection - their lightest gray color is # 767676.

image

I am proudly working in the Salesforce Design Systems team, where they adopted these standards for color contrast and developed the Salesforce1 application with them in mind:

image

Play with contrasts. Designers who have tried this practice afterwards are amazed how much more pleasant it becomes for them to work with contrasting designs.

4. Indicate visually where the input focus is.


First, thank css reset for the versatility and uniformity they brought to the web.

Now scolding them for spoiling the input fields with this formula:

    :focus {outline: 0;}


This makes it almost impossible to use the website from the keyboard. Fortunately, many popular css reset kits have already excluded this directive.

It was included in the kit so that designers replaced it with something that is clearly visible and suits the style of the site.

image

Unfortunately, most designers did not create their own styles for focusing. These indicators are usually not found on the page.

Example: open the website of the company that made your phone. Press Tab to navigate the page. See the input focus designation? See it only for some links, but not for all? Imagine what it will be like to use this site to someone who does it exclusively from the keyboard.

If you remove the default focus, replace it with something better. Example: The BBC uses color underline to indicate focus:

image

Twitter uses a combination of default focus and tooltip. The icon turns from gray to green. These are three input focus indications.

image

If you will make your indication, do not forget to remove the default one, so that it doesn’t turn out like in the next screenshot, where the blue rectangle from Chrome is superimposed on the blue highlight of the menu item.

image

5. Be careful with the forms


Recently, forms have de-evolved. Designers discard traditional attributes and interactivity for the sake of minimalism. Forms lack two important properties needed for accessibility: frames and labels.

Frameless shapes

Here is an example of a traditional input field. This is a rectangle with clear frames. It can be filled with color, but not necessarily. There is a label to the left of the field.

image

Users with mobility or recognition problems need a clear framework. When using adaptive input devices, you need to know the size and position of the field. It may be difficult for users with disabilities to find and interact with fields that do not have standard visual cues.

Here is an example of a search field for one popular application for records:

image

Where can I click to enter a search query? There is only one input field on the screen. Can you determine where the field boundaries are?

Here is another example of fields without borders with one of the popular blogging platforms. Before you are two input fields. Where do I need to click to enter text in the "Tell your story" field?

image

And here is the same page with a frame.

image

Next is another example of a record entry field. It does not use traditional input fields, but provides more cognitive information. The title is located between the two horizontal lines, and the text is entered after clicking between the two lower lines.

image

Unmarked Forms

Tags indicate the purpose of the field, and retain their usefulness even after entering information in the field. Placeholder is a poor replacement for a visual tag.

Usually they have no contrast. Of the few examples below, only one has a sufficient contrast of 4.5: 1.

image

Text from placeholders disappears. In the examples below, what do I need to enter in these fields? JetBlue website - email, first name, last name, number? Does Caviar have a dish, restaurant, address? Are the fields for the price a minimum and a maximum, more or less, or before and after?

image

Here is a more convenient way to design margins for the price. The labels min and max are visible even after data entry.

image

6. Define the meaning of the components more clearly.


Question: when is the menu not the menu anymore?
Answer: when it ceases to be modal.


This is one of the biggest problems with website accessibility. Check out W3C's Authoring Practices for Design Patterns . It says how to create an accessible version of different parts of sites - menus, modal menus, auto-completion, trees, bookmarks and much more.

For all templates, a set of recommended HTML elements, keyboard behavior and the use of ARIA ( Accessible Rich Internet Applications Suite) attributes are specified., a technology standard being developed by the consortium to enable people with physical disabilities to make full use of the Internet). Attributes are intended for screen readers, and in order to tell how to use components from the keyboard. They report changes occurring on the page when interacting with it. For example, they tell people that you need to use the up and down buttons to navigate the menu.

Here is an example of a modest input field with auto-completion:

image

But about the same thing, but with icons: The

image

user enters something into the input field. A box appears below the input results. The user can use the up-down keys or the mouse to select an option.

And below is an example of auto-completion with a crisis of self-identification. The user is invited not only to filter and select an option, they can also edit or delete items from the list through special icons. Auto-completion with hidden functions will not be able to inform auxiliary devices about itself in any way.

image

Such a system breaks the accepted work of the field with auto-completion from the keyboard. There are no specifications for it.

The same goes for the menu. In the examples below from the Virgin website, two are approximately the same fields, but only the right drop-down is the menu. Left is a non-modal dialogue.

image

The menu is a tool that offers the user several choices. As soon as we have several options in one line (as on the left) - this is no longer a menu. This is already a modified keyboard interaction model, since Tab must be used instead of arrows. This is another input focus changing system.

Non-modal dialogs can be made available. Understand their differences and how they affect user interaction with the site.

7. Do not force people to mouse over to find the right things.


This applies to people with reduced mobility. This also applies to those who use only the keyboard, and those who use systems for reading text from pages such as Dragon Naturally Speaking . All of them rely on the elements that are visible on the page. If they are not, they cannot be “clicked” with the help of a voice. If the user with the keyboard does not see the button, how can he go to the place where it “should appear”?

Below is a screenshot of Gmail where Dragon Naturally Speaking shows a layer with numbered links. The user pronounces the number and follows the link. What if the link is not visible until you hover over it? Will numbers appear next to empty spaces?

I understand why it has become fashionable to hide things until you hover over them. This is the implementation of the generally accepted rule formulated by Alan Kay:

Simple things must be simple, complex things possible.


Great, but this rule needs to be applied so that complex things are possible for all users. Unfortunately, many perceived this rule as:

Show the main things, and secondary - hide until you hover.


Do not hide actions and information - use other, more convenient alternatives.

- place the secondary actions inside the menu, or non-modal dialogs
- make the contrast of the secondary icons less vivid, and increase it when you hover over the mouse
- use noticeable things that bring up additional menus. Icon instead of empty space.

Here is an example from the LinkedIn site - profile:

image

And if I mouse over this card:

image

Suddenly indicators appear that I can edit all the fields on the page. Further, if I point to one of the fields, the text turns blue, indicating that you can click there:

image

Below is one of the solutions to the design problem that makes it easier for some users to use. Smaller pencils next to the fields that are visible all the time.

image

And when I point the mouse at the field, a blue color appears:

image

And then the designers will say:

But this makes the page heavier, no?

Maybe. But this is only one solution to the problem. Moreover, this is only my profile on my page. How often do you review your profile? Would this “weight” be justified in order to facilitate access to profile editing? What you can do if you don't like these pencils:

Here's another example with Evernote. List of notes. If you mouse over a row, four icons appear.

image

I would suggest the designer to leave them visible. They can be made green on white, and inverted on hover.

image

Perhaps this decision will also be "difficult", but we are not developing it for designers. We create websites for a diverse audience with different needs and different tools for accessing computers.

At first, it will seem to you that all of these rules for using components limit your creativity. But they, on the contrary, spur your creativity when you begin to find beautiful and at the same time affordable solutions for page design.

Also popular now: