- Accessibility is a vague term, which is why it is usually misunderstood. It is not just about people with specific disabilities. You can read more about what is accessibility and diverse abilities and barriers.
-
- WCAG (Web Content Accessibility Guidelines) is the international standard for web content accessibility, developed by W3C. Logseq is a web application, so conforming with WCAG should be our first priority. In general, there is no simple way to determine if a website is accessible or not, but WCAG can help us make the tool usable by as many people as possible.
-
- There are three levels of conformance defined by WCAG
- Level A is the minimum level.
- Level AA includes all Level A and AA requirements.
- Level AAA includes all Level A, AA, and AAA requirements.
- Many organizations strive to meet Level AA. The reason behind this decision, is that in some cases AAA standard is too strict. That doesn't mean that triple-A issues should be disregarded. On the contrary, all of them should be handled if possible.
- We can also provide alternative options in order to conform with AAA standards. For instance, our default themes can aim for AA, but we can provide a high-contrast theme that aims for AAA. Providing alternative versions with different levels of conformance is permitted according to WCAG, if there is an accessible way to reach those alternatives.
- There are three levels of conformance defined by WCAG
-
- Use semantically correct markup whenever possible. Every time you are about to decide which html tag you are going to use, choose the one that behaves the way you want it. For example, let's say you want to create an element that looks like plain text, but triggers an action on click. Usually, the best approach would be to create a
<button>
and make it look like a<span>
using css. If you use aspan
, you will also have to override other html attributes liketabindex
androle
to make the element behave like a button. This is almost always a bad sign, and should be avoided. If you use the appropriate html element, the browser will be able to properly handle it. - Do not skip headings. People who use screen readers and a keyboard to navigate through the app, use the headings structure to quickly jump to areas of interest. Skipping headings to visually conform with the design, makes this hard for them. If you want to create a heading that looks like an
<h4>
but is in terms of document structure an<h2>
, use the latter and make it look like an<h4>
. - A more in-depth guide about HTML and accessibility.
- Use semantically correct markup whenever possible. Every time you are about to decide which html tag you are going to use, choose the one that behaves the way you want it. For example, let's say you want to create an element that looks like plain text, but triggers an action on click. Usually, the best approach would be to create a
-
- Focus management is extremely important for keyboard navigation. Focusable elements can help people with motor disabilities navigate. Focus Order plays an important role in this.
-
- There is a huge list of tools that can help us test our application. Most of them use axe-core internally. There are browser extensions based on axe, a VSCode Linter Plugin and also multiple community projects.
- Basic accessibility testing could be integrated into our CI, by using the appropriate axe package (e.g. @axe-core/playwright)
-
- In theory, all of the cases described by WCAG should be testable. In practice, there are issues that can't be replicated by code. Also, manual accessibility testing would help us have a better understanding of the difficulties that certain people might encounter. Even if all the individual cases pass the tests, the overall navigation might be nonsensical.
-
- Keyboard-only navigation
- Screen reader testing and compatibility
- Zooming up to 200%
- Manually testing contrast issues that can't be automated