Usable by everyone
Dynatrace firmly believes that technology and the advantages it creates should be accessible for everyone no matter their age, education, geographic location, language, or disability. With Barista we commit to comply to best practices and industry standards following the WCAG 2.1 standard.
Creating inclusive experiences
Using Barista components is a way to improve constistency and usability and as a result accessiblity throughout the Dynatrace platform.
Building experiences using Barista components means the accessibility knowledge of the designers and developers who built them are available to everyone and come for free with the usage of the components. Neverthesless it is still important to check a few things post implementation. Therefore we created the Barista Accessibility checklist which is based on the WCAG 2.1 AA standard. Barista's patterns and components are perceivable, operable, and understandable to users, even when using assistive technologies.
Barista accessibility checklist
- 1.1.1 (A) Non-text Content: Images, illustrations and infographics have text alternatives.
Provide alternatives for time-based media.
- 1.2.1 (A) Audio-only and Video-only: Audio and video files have text alternatives.
- 1.2.2 (A) Captions: Audio and video files have captions.
- 1.2.3 (AA) Audio Description: Audio description is provided for video content.
Create content that can be presented in different ways without losing information or structure.
- 1.3.1 (A) Info and Relationships: Information, structure (of a page) and relationships (between pieces of information) are available as text or are programmatically determinable.
- 1.3.2 (A) Meaningful Sequence: If the sequence of content is important for its meaning, it is accessible for assistive technology.
- 1.3.3 (A) Sensory Characteristics: Understanding content or any piece of information does not rely exclusively on shape, color, size, visual location, orientation, or sound.
- 1.3.4 (AA) Orientation: Content is not restricted when viewed in either landscape or portrait format.
- 1.3.5 (AA) Identify Input Purpose: The purpose of an input field is accessible for assistive technologies.
Make it easier for users to see and hear content including separating foreground from background.
- 1.4.1 (A) Use of Color: Color is not used as the only visual element that conveys information (or meaning).
- 1.4.2 (A) Audio Control: Audio has to be pauseable and stopable (if it plays longer than 3 seconds).
- 1.4.3 (AA) Contrast: Text has a contrast of at least 4.5:1.
- 1.4.4 (AA) Resize text: Text is resizable up to 200% without loss of content or functionality.
- 1.4.5 (AA) Images of Text: Text is preferred over images of text to convey information.
- 1.4.10 (AA) Reflow: Content is scrollable either vertically or horizontally, but not both.
- 1.4.11 (AA) Non-text Contrast: UI components and graphical objects have a contrast ratio of at least 3:1 against neighbouring colors.
- 1.4.12 (AA) Text Spacing: When using text style properties using markup languages no loss of content or functionality must happen.
- 1.4.13 (AA) Content on Hover or Focus: Content that is presented on focus or on hover is persistent, yet dismissible.
Make all functionality available from a keyboard.
- 2.1.1 (A) Keyboard: All content functionality is operable through a keyboard.
- 2.1.2 (A) No Keyboard Trap: Components focused with keyboard must also lose focus with keyboard.
- 2.1.4 (A) Character Key Shortcuts: Keyboard shortcuts can be turned off or remapped.
Provide users enough time to read and use content.
- 2.2.1 (A) Timing Adjustable: Time-based content changes should be able to be extended or disabled.
- 2.2.2 (A) Pause, Stop, Hide: Information that is moving, blinking, scrolling or auto-updating can be paused, stopped or hidden by the user.
Seizures and Physical Reactions
Do not design content in a way that is known to cause seizures or physical reactions.
- 2.3.1 (A) Three Flashes or Below Threshold: The website does not contain any content that flashed more than 3 times a second.
Provide ways to help users navigate, find content, and determine where they are.
- 2.4.1 (A) Bypass Blocks: Blocks of content that are repeated on multiple web pages can be bypassed.
- 2.4.2 (A) Page Titled: Web pages have titles that describe topic or purpose.
- 2.4.3 (A) Focus Order: Components receive focus in a meaningful sequence.
- 2.4.4 (A) Link Purpose: The purpose of every link can be determined by its text alone or its text in context.
- 2.4.5 (AA) Multiple Ways: There are multiple ways to locate a web page within a set of web pages.
- 2.4.6 (AA) Headings and Labels: Headings and labels describe topic or purpose.
- 2.4.7 (AA) Focus Visible: Any keyboard-operable UI has a focus state.
Make it easier for users to operate functionality through various inputs beyond keyboard.
- 2.5.1 (A) Pointer Gestures: Functionality that uses multipoint gestures is also operable with a single point gesture.
- 2.5.2 (A) Pointer Cancellation: Single point gestures either have no down-event, complete a function on up-event, or the up-event reverses the down-event.
- 2.5.3 (A) Label in Name: All functionality that uses multipoint gestures is operable with a single point gesture.
- 2.5.4 (A) Motion Actuation: Functionality that is operated by device or user motion can also be triggered by interface components.
Make text content readable and understandable.
- 3.1.1 (A) Language of Page: The language of a page can be identified by assistive technology.
- 3.1.2 (AA) The language of the content can be identified by assistive technology.
Make Web pages appear and operate in predictable ways.
- 3.2.1 (A) On Focus: Components that receive focus do not initiate major changes in the content of the page that could disorient the user.
- 3.2.2 (A) On Input: Changing the settings of a component does not initiate major changes in the content of the page.
- 3.2.3 (AA) Consistent Navigation: Navigation does not change within a set of web pages, unless the user initiates it.
- 3.2.4 (AA) Consistent Identification: Components are consistent if they look the same, they must function the same, and vice versa.
Help users avoid and correct mistakes.
- 3.3.1 (A) Error Identification: Input errors are identified and communicated as text.
- 3.3.2 (A) Labels or Instructions: Labels or instructions are provided whenever user input is required.
- 3.3.3 (AA) Error Suggestion: Suggestions for how to avoid input errors are provided to the user.
- 3.3.4 (AA) Error Prevention: User-controllable data input fields (e.g. name, address fields for user account) are reversible, correctable and confirmable for the user.
Maximize compatibility with current and future user agents, including assistive technologies.
- 4.1.1 (A) Parsing: Is content implemented using markup languages, elements have start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique.
- 4.1.2 (A) Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
- 4.1.3 (AA) Status Messages: Is 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.