We employ best accessibility practices to design our portal and products, ensuring they are usable by people with disabilities. Designers and developers collaborate closely to ensure accessibility is considered from the outset. This approach allows everyone, regardless of ability, to comfortably navigate and interact with our offerings.
These are the highlights of some of the most important accessibility concepts that pertains to designers. Always push yourself to think beyond the bare minimum. Aim to create designs that people with disabilities actually like, and that they find useful and well-suited to their needs.
Signicat commitment to accessibility remains unwavering. Our components adhere to industry standards, including WCAG AA, Section 508, and European guidelines. This ensures an inclusive experience for all users, regardless of their abilities or assistive technologies.
While the Web Content Accessibility Guidelines (WCAG) don’t specify a minimum font size, a common practice is to use at least 16 pixels for body text. This helps ensure readability for most users.
Text smaller than 12 pixels can be difficult to read, especially for users with visual impairments.
Ensuring sufficient contrast is crucial for readability and accessibility, particularly for users with visual impairments. High contrast ensures legibility, even for people with low vision or color blindness. Conversely, insufficient contrast can cause eye strain, hinder reading, and result in a poor overall user experience. Remember to verify that both foreground (text or graphics) and background colors meet the recommended contrast ratios. Additionally, test your design across various devices and lighting conditions to ensure consistent readability.
WCAG, text size is defined in points (pt). Large text is defined as 18 pt and larger, and 14 pt and larger for bold text style. On websites, pixels (px) are much more commonly used to define text size than points. 18 pt and 14 pt approximately correspond to 24 px and 18.5 px, respectively.
Figma uses pixels (px) to measure font sizes, just like the web uses px in CSS. For printing, font sizes are measured in points (pt), with 16px being the same as 12pt. For example, browsers usually have a default font size of 16px, while programs like Microsoft Word, which are used for printing, have a default font size of 12pt.
Graphical objects (with no text) and status icons on an application's dashboard (without associated text) that are essential for understanding content or functionality must have a contrast ratio of at least 4.5:1 against adjacent colors. Exceptions include thicker graphical objects (at least 3 CSS pixels in width and height), which require a contrast ratio of 3:1; sensory content intended for visual experience; and logotypes, which have no minimum contrast requirement. This ensures that important graphical elements are distinguishable for users with visual impairments. Information graphics Contrast (Minimum) WCAG
When using color to convey functionality or importance, you must supplement it with other methods to ensure all users understand what you are communicating. For sighted users, you should supplement with text, icons, or similar indicators.
In diagrams, different colors are often used to convey different information. To ensure that all sighted users understand the connection between color and information, there must also be other meaningful indicators. For example, the legend can be directly linked to the pie slice or graph, or different hatch patterns can be used in addition to color.
In forms, it is important that form elements, informational texts, and error messages are marked with more than just color. If color is used to convey information, it must also be presented in another way that is visually noticeable.
The user must be able to identify all links, regardless of the situation, abilities, and settings of the equipment used. This means that links must be marked with more than just color. For example, underlining of link text or an icon linked to the link would be preferable, ideally in combination with color.
Links in running text must meet one of the following criteria:
For form elements, instructions, and error messages that use color to convey information, indicate an action, request a response, or distinguish a visual element, the element must be marked with more than just color, and the marking must be visual.
For active controls any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.
This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.
Ensure a logical, clear and intuitive as possible visual order for users to navigate the page with as few steps as possible. Use headers to convey content structure. Making navigation simple and using clear design elements benefit all users. Focus on visible controls, good contrast, and a clear hierarchy.
Assistive technology users and individuals visually scanning web pages often rely on headings for navigation. Therefore, organizing headings based on content hierarchy is crucial. It’s recommended to use a single H1 for the page title. Additionally, when using headings, avoid skipping levels (e.g., going from H2 to H4 without an H3 in between).
Ensure that navigation across pages within a website has consistent naming, styling, and positioning. Provide more than one method of website navigation, such as a site search or a site map. Help users understand where they are in a website or page by providing orientation cues, such as breadcrumbs and clear headings. Consistent Navigation
The purpose of each link should be clear from the link text alone or from the link text combined with its context, aiding users in deciding whether to follow the link. Meaningful link text is crucial for users relying on assistive technologies, such as screen readers, by providing an easily understandable list of links. Sometimes, additional context within the same sentence, paragraph, or list item is necessary to clarify a link's purpose. Consistency is important, with links to the same destination having consistent text and links with different purposes having distinct text.
Exceptions exist for links where the purpose cannot be determined from the context. Links containing text meet the requirement if the link text alone describes the purpose or if the link text combined with programmatically determined context, such as text in the same paragraph, list, or table cell, or a table header associated with the table cell containing the link, describes the purpose. These requirements apply equally to apps and documents, ensuring that all users, including those with disabilities, can navigate and understand web content effectively.
Text should be presented as text as much as possible, and not as an image of text. This is because text quality deteriorates when magnified, and assistive technologies cannot utilize the text in the image.
In some cases, using images of text is necessary to achieve a visual effect, such as when formatting text isn’t possible, common browsers can’t display the effect, or the required techniques don’t meet WCAG standards. This includes logos, trademarks, product images, and text in graphics like diagrams and charts.
Logotypes (text that is part of a logo or brand name) are considered essential.
Logotypes, which are the text elements within a logo or brand name, are considered essential content. This is important in the context of web accessibility guidelines because it acknowledges that text within logos is a crucial part of a brand’s identity and cannot be easily replaced or removed without losing its meaning or recognition.
In other words, while the guidelines generally discourage the use of images of text to ensure accessibility, they make an exception for logotypes because they are integral to the brand and need to be presented as designed. This ensures that the brand’s identity is preserved and recognizable to all users.
An interactive element on a digital interface (such as a button, link, or icon) that users can interact with by tapping or clicking. Ensuring that touch targets are appropriately sized and spaced is crucial for usability, especially for people with motor impairments or using touch-based devices.
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
Spacing: If the target size is less than 24 by 24 CSS pixels, ensure that a 24 CSS pixel diameter circle centered on each target does not intersect with another target.
Equivalent: The function can be achieved through a different control on the same page that meets this criterion.
Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text.
User agent control: The size of the target is determined by the user agent and is not modified by the author.
Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
Proper spacing between touch targets prevents accidental clicks and improves accuracy. If the target size is less than 24 by 24 CSS pixels, ensure that a 24 CSS pixel diameter circle centered on each target does not intersect with another target.
Properly implemented animations and transitions benefit users with disabilities. For instance, subtle motion can draw attention to important content without overwhelming users. Smooth transitions between screens or elements help maintain context and reduce disorientation. Make animations and transitions non-disruptive, therefore consider motion sensitivity for users.
Provide pause and play controls for elements like auto-advancing carousels, image sliders, animated backgrounds, videos or background sound. Let users turn off, adjust, or extend time limits. People with disabilities may need more time to complete activities. 1.4.2 Audio Control
Web pages do not contain anything th. "Flashing" refers to content that can trigger a seizure (if it is more than 3 per second and large and bright enough). This cannot be allowed even for a second or it could cause a seizure. And turning the flash off is also not an option since the seizure could occur faster than most users could turn it off.
"Blinking" refers to content that causes a distraction problem. Blinking can be allowed for a short time as long as it stops (or can be stopped). Pause, Stop, regulation WCAG
For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
Provide clear instructions, error messages, and notifications to help users complete forms on your site. When an error occurs:
Create content that works across different technologies and devices. Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
This checklist can be used by developers to determine that they have covered all the basic accessibility requirements connected to their work role.
Label every form control. Use the ‘for’ attribute on the<label>element linked to the form element’s ‘id’, or WAI-ARIA attributes. Labels are essential for understanding input requirements. Read more at WCAG
Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.Header cells must be marked up with<th>, and data cells with<td>to make tables accessible. For more complex tables, explicit associations may be needed usingscope,id, andheadersattributes. WCAG
User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements.
Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations. Although it would be beneficial to some people to discern inactive controls, a one-size-fits-all solution has been very difficult to establish. A method of varying the presentation of disabled controls, such as adding an icon for disabled controls, based on user preferences is anticipated as an advancement in the future.
Ensure that alternative text for images and media is added to all informational and functional images and media.
Read more at WCAG
Ensure that alternative text for images is added to all informational and functional images. Use empty alternative text, alt="" for decorative images, or include them in the CSS instead. Text alternatives are usually provided by those responsible for written content. Read more at WCAG
A text alternative is used in place of non-text content (like pictures, charts, audio) for those who can’t view it. This helps people, such as those who are blind, to convert the information into speech. In the future, text can also be translated into sign language, pictures, or simpler writing.
For people with disabilities to use this text, it must be “programmatically determinable,” meaning assistive technologies can read and use it. The text must also be “programmatically associated” with the non-text content, so users can find the alternative text when they encounter non-text content they can’t use. Read more at WCAG
The objective of this technique is to identify the default language of a document by providing the ‘lang’ attribute on the HTML element, which benefits braille translation software, speech synthesizers, future technology developments, and user agents providing definitions. Read more at WCAG
All language tags must begin with a primary language subtag. Read more at WCAG
The default human language of each Web page can be programmatically determined. Guideline 3.1 - Readable
To ensure web content is accessible and correctly presented, specify the primary language of the webpage using thelangattribute in HTML (e.g.,<html lang="no">for Norwegian). Use valid language codes from the ISO 639-1 standard, such asnofor Norwegian orenfor English. This helps screen readers select the correct voice for reading aloud and allows search engines to find relevant content, enhancing both accessibility and SEO. Language of Page Criterion on WCAG
Use appropriate markup (including HTML5 elements like<nav>and<aside>) to convey meaning and structure, and consider WAI-ARIA roles for additional context. Read more at WCAG
To enhance user experience, offer clear instructions, specific error messages, and helpful notifications. Guide users to identify issues, explain errors understandably, suggest corrections, and be flexible with input formats (e.g., accepting phone numbers with or without spaces). Read more at WCAG
Automatically playing audio can be disruptive, especially for screen reader users. To address this, such audio should stop after three seconds, or users should have the option to stop the playback at any time. If the audio doesn’t stop within three seconds, users must be able to control or mute it using a pause, stop, or mute button.
Ensure the order of elements in your code aligns with the logical presentation of information. Examine the content without styling. Ensure that the sequence of elements (such as headings, paragraphs, lists, and images) logically follows the intended flow of information. Read more at WCAG
Write adaptive code using responsive design for various devices. Prevent horizontal scrolling and clipping when font size increases by 200%. Employ progressive enhancement for consistent functionality across technologies. Read more at WCAG
Use WAI-ARIA to provide function and state information for custom widgets like accordions and custom buttons. For example, use role="navigation" and aria-expanded="true". Remember to implement additional code for widget behavior, such as expanding/collapsing content and keyboard interactions. Read more at WCAG
All functionality and content on the website must be usable with only a keyboard, without getting stuck in any element. Ensure keyboard accessibility for interactive elements. Use tabindex="0" to include non-focusable elements (like <div> or <span>) in the navigation order. Employ scripting to handle keyboard events. Read more about Keyboard Accessibility at WCAG
Keyboard navigation is crucial for users who cannot or prefer not to use a mouse, such as those who are blind, have low vision, or have motor impairments. Websites should be fully navigable and usable with just a keyboard, including links, buttons, and form elements. Typical mouse actions like clicking, selecting, moving, and zooming should also be possible with a keyboard.
Users navigate using the Tab key to move between active elements, Shift + Tab to move backward, and Enter to activate elements. Arrow keys and the spacebar may be used in specific contexts, like dropdown menus.
If a website feature can be operated in multiple ways, such as a date picker, at least one method must be keyboard accessible. For example, users should be able to navigate a calendar with arrow keys and receive continuous feedback on the selected date.
The exception is content/functionality that is not practical to operate with a keyboard. Content or functionality that is impractical to operate with a keyboard, such as drawing tools, handwriting simulation, or certain games, is exempt from these requirements.
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. WCAG
Links are required to have a visible focus indicator by 2.4.7 Focus Visible. Where the focus style of the user-agent is not adjusted on interactive controls (such as links, form fields or buttons) by the website (author), the default focus style is exempt from contrast requirements (but must still be visible).
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. Ensure users are aware of important changes in content by allowing assistive technology to notify them about status changes without taking focus. Read more about Status Messages at WCAG
CAPTCHAs pose challenges for many users. Consider simpler alternatives like automatic detection or interface interactions. If using CAPTCHA, make it user-friendly and provide alternatives for people with disabilities, such as multiple solving methods, human assistance, or exemptions for authorized users. Read more at WCAG
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.
You can find more information at WCAG Text spacing