Accessibility made simple
Everything you need to know to eliminate barriers for your users and meet new regulatory requirements.
What is accessibility?
Digital accessibility means ensuring that everybody can access and use your website or application, regardless of whatever disability or impairment they may have. For example, users with impaired fine motor skills may be unable to use a mouse, trackpad, or touch screen. And users with severe vision impairments may require screen reader software to interact with the user interface (UI).
Accessibility standards and legislation
In recent years, there has been substantial growth in the awareness of the significance of digital accessibility. As a result, many jurisdictions worldwide have enacted laws mandating that companies, particularly in the public sector, provide unrestricted access to individuals with disabilities.
The Web Accessibility Initiative (EU directive 2016/2102), which has been in effect in the European Union since 2018, requires all public sector organizations and service providers to ensure that all public websites, mobile applications, and intranets are accessible.
The European Accessibility Act (EU directive 2019/882) expands these requirements to many private sectors, including e-commerce, consumer banking, and consumer transportation services, with an enforcement deadline in 2025.
These EU directives are implemented in EU member states’ national legislation, such as BITV 2.0 in Germany.
In the United States, the Section 508 Amendment to the Rehabilitation Act of 1973 mandates that public sector websites, applications, and intranets, including those of companies receiving public funding, must be accessible.
All of the above, and a bulk of other digital accessibility laws worldwide, base their requirements on level AA of version 2.0 or 2.1 of the WCAG standard for web-based tools and services.
Ensuring Accessibility in the Vaadin Platform
Accessibility is included in the technical requirements for all new UI features developed for the Vaadin platform, taking care to build all user-facing features according to WCAG 2.1 level AA criteria, using semantic HTML and WAI-ARIA features and techniques.
To further ensure accessibility, screen readers are utilized in testing new UI features both during development and before shipping them as part of the Vaadin platform. In addition, all Vaadin components undergo holistic testing once a year with the help of the reputable accessibility agency TetraLogical. Finally, as part of our ongoing maintenance efforts, known accessibility issues are added to our backlogs and are regularly resolved.
Recommended Screen Readers and Browsers
The following screen reader and browser combinations are used to test Vaadin UI features and are recommended for use with Vaadin-based applications:
- NVDA + Chrome or Firefox on Windows
- JAWS + Chrome or Firefox on Windows
- VoiceOver + Safari on MacOS
- VoiceOver + Safari on iOS
The following versions or features are currently not covered by the accessibility policies and procedures described above:
- Versions prior to Vaadin 23
- Classic Component pack
- Flow Spreadsheet component for Vaadin 23+
- Third party and Vaadin ComponentFactory add-ons in the Directory
- Vaadin Charts (see below)
Although the procedures above don’t cover Vaadin Charts, the component is based on the HighCharts library that provides good keyboard navigation and screen reader support. In addition, the Vaadin Charts Java API offers partial access to the accessibility configuration options in HighCharts. This configuration API will be further improved in future versions.
Accessibility Overview of Vaadin Components
The table below outlines the compliance of Vaadin components to WCAG 2.1 level A and AA accessibility criteria in the latest version of the Vaadin platform. Most issue cells contain links to the corresponding issues in GitHub.
The following statuses are used:
- Pass: Conforms to the WCAG criterion and works on tested screen readers without issues
- Fail: Major issues with WCAG conformance and/or screen reader usability.
- Minor: Minor issues with WCAG conformance, screen reader usability or default colors, many of which can be worked around.
- Note: Developers should be aware of certain limitations (open in a separate tab and hover a cell to see a note about the issue)
- i18n: Internationalization APIs for localizing invisible text content announced by screen readers are absent (open in a separate tab and hover a cell to see a note about the issue)
Note that some issues may appear multiple times for the same component, if they relate to multiple WCAG criteria.
You can find all accessibility-related issues in the following GitHub repositories:
- Web Components repository
- Flow component repository (for Flow-specific component issues)
- Flow framework repository (for non-component issues in Flow)
If you discover an accessibility issue, please file an accessibility bug report in GitHub. Prime and Enterprise subscribers can use bugfix warranty to prioritize accessibility issues.
Beyond Accessible Components
Although accessible components, on their own, constitute a prerequisite for building accessible applications, they cannot guarantee that the application is fully accessible. For example, developers using the components to build the application UI still need to ensure that the components are used in accessible ways. In addition, other UI features like layouts and styling need to be implemented in a way that ensures sufficient color contrast, keyboard usability, compatibility with screen readers, etc. You’ll find some basic tips on improving accessibility in our blog.
Vaadin's consulting services are also available to guide you on accessibility both in the design and implementation phases, whether you're building a new application from scratch or modernizing an existing one. As a first step towards great accessibility, you can contact our sales team and request an accessibility review of your current UI.