AstraUI

Foundations

Accessibility (A11y)

AstraUI is committed to creating an inclusive experience for all users, including people with disabilities. Therefore, AstraUI follows accessibility standards in all its components and interfaces to ensure usability for everyone, thereby improving the overall user experience.

Principles

The accessibility principles of AstraUI are based on the POUR model:

  • Perceivable: Information and user interface components must be presented to users in ways they can perceive.
  • Operable: User interface components and navigation must be operable.
  • Understandable: Information and the operation of the user interface must be understandable.
  • Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

Approach

AstraUI's approach to accessibility includes the following steps:

  • Research: Understanding the needs of users with disabilities through research and user feedback.
  • Design: Integrating accessibility into the design process by using tools like color contrast checkers and screen reader compatibility.
  • Develop: Implementing accessibility best practices during development, such as using semantic HTML and ARIA roles.
  • Test: Regularly testing components with assistive technologies and conducting accessibility audits.
  • Maintain: Continuously monitoring and improving accessibility as part of the development lifecycle.

Engineering Considerations

  • ARIA Attributes

    Use ARIA attributes to enhance the accessibility of components. For example, aria-label can provide an accessible name for interactive elements.

  • Labels

    Ensure all form elements have associated labels. Use the <label> element or aria-labelledby attribute to associate labels with form controls.

  • Keyboard Navigation

    Ensure all interactive elements are focusable and operable using a keyboard. Implement logical tab order and use tabindex appropriately.

  • Responsive Design

    Ensure components are usable on all screen sizes and orientations. Use responsive design techniques to create adaptable layouts.

  • Inclusive Design

    Consider the diverse needs of users from the start. Design components that are flexible and can be adapted to different user preferences and needs.