Accessibility Principles for Designers
The Web Content Accessibility Guidelines (WCAG), briefly, are a set of principles that must be adhered to for greater accessibility of all content on the web. Accessibility encompasses a variety of barriers, including visual, auditory, physical, speech, cognitive, language, learning, and neurological impairments.
According to the World Health Organization (WHO), 16% of the world’s population experiences disability. Unfortunately, much of the content on the web is not adapted to this class. Therefore, with a decision by the European Union, by June 28, 2025, companies in all EU member countries must adapt their products/services to these accessibility standards.
As designers, there are some principles within the scope of accessibility standards that we need to follow. Let’s briefly examine these principles without going into too much detail and provide some guidance. (I’m leaving the links to the relevant sources at the bottom.)
Pay attention to the contrast values of colors
Ensure that the contrast between colors is measured to ensure the readability of content and text. You can use “contrast checker” plugins in Figma or perform the necessary measurements on WebAIM. The basic limits are:
- Must provide a minimum validity ratio of 4.5:1.
- For large or bold fonts, a validity ratio of 3:1 is required.
- Logos and graphic elements are not subject to these rules.
Don’t rely solely on colors
Using color alone to convey information can make your website’s content inaccessible to many people.
- Ensure that links are not changed only in color; underline them to indicate to the user that they are clickable.
- In a scenario where an input field in a form is erroneous, don’t just turn the input’s border red; instead, make a structural change by thickening the border and support it with a subtext that specifies the cause of the error and how to resolve it, accompanied by an icon.
- Do not indicate a selected element solely through color; structural changes beyond color are also necessary for the appearance of the selected area. For example, you can add an underline beneath a navigation element to signify its selection.
Note: After designing, it is generally advisable to review your design in black and white mode or share it with others in your vicinity. This way, you can identify any errors that may exist.
Ensure that interface elements are clear and distinct
Users understand that interactive elements within the site contain interactions through their structure and the text they include. Therefore, ensure that interactive content elements are presented to the user in a clear and distinct manner.
- What makes a button a button is its form. Define a shape and create variations that will be consistent in structure. (If one button has a rounded border radius, the other should not have sharp corners.)
- Color the button and distinguish it from other elements. (Some button types like [ghost, outline, etc.] may resemble input types; separate them.)
- The text of buttons/links should be specific rather than generic. For example, on an e-commerce website’s “My Orders” screen, use text like “Cancel My Order” instead of just “Cancel.”
- Your form elements (inputs) should always have a title; do not rely solely on placeholder text (text inside an input when it’s empty).
Use alternative text for all non-text content
Add clear and concise alternative text for all content that does not contain text, whether it’s visual, graphical, or lacks textual information. This will enable programs like screen readers to read this type of content to the user.
- Add alternative text for all non-text content, such as visuals, videos, and audio, to ensure accessibility for users who rely on alternative means to consume content, like screen readers.
- There is no need for alternative text for elements that are purely decorative, such as separators or background decorations.
Ensure correct focus transitions using the “Tab” key on the keyboard
Some users with motor skill disabilities may struggle to use a mouse, so they navigate websites using a keyboard.
- Clearly indicate focus states during navigation done with the “Tab” key.
- Ensure that focus states logically progress according to the site hierarchy. For example, if the first element in the header at the top of the site is selected, pressing the “Tab” key on the keyboard should not jump directly to the “About Us” page in the footer; it should follow a logical sequence.
Useful Resources:
WCAG EU Decision https://digital-strategy.ec.europa.eu/en/policies/web-accessibility-directive-standards-and-harmonisation
WCAG Principles https://www.w3.org/TR/WCAG21/
WebAIM Contrast Checker https://webaim.org/resources/contrastchecker/
Accessible Color Palette Generator: https://toolness.github.io/accessible-color-matrix/
