diff --git a/docs/guides/accessibility-conformance-report.md b/docs/guides/accessibility-conformance-report.md new file mode 100644 index 000000000..5234ff740 --- /dev/null +++ b/docs/guides/accessibility-conformance-report.md @@ -0,0 +1,216 @@ +--- +title: "Accessibility Conformance Report (VPAT 2.5)" +sidebar_label: "Conformance Report (VPAT)" +description: "DHTMLX Gantt Accessibility Conformance Report, based on VPAT 2.5 - conformance with WCAG 2.2 AA, Section 508, and EN 301 549." +--- + +# Accessibility Conformance Report + +This report documents how DHTMLX Gantt conforms to the major accessibility standards. It follows the **VPAT® 2.5 (International Edition)** structure, so you can map it directly against your own procurement or compliance checklist. For a task-oriented overview of the accessibility features and how to configure them, see the [Accessibility](guides/accessibility.md) guide. + +**Name of Product/Version:** DHTMLX Gantt v10.1.0 + +**Report Date:** July 2026 + +**Product Description:** DHTMLX Gantt is an interactive JavaScript Gantt-chart component for building project-scheduling interfaces in a web browser. It renders a task grid (tree) alongside a timeline, supports task dependencies, a resource panel, inline editors, and a modal task editor (the "lightbox"). It is embedded by a host web application. + +**Contact Information:** [info@dhtmlx.com](mailto:info@dhtmlx.com) + +## Notes + +- This report evaluates DHTMLX Gantt in its **recommended accessibility configuration**: the `keyboard_navigation` plugin **enabled**, ARIA output enabled (`gantt.config.accessibility.aria` / `wai_aria_attributes`, on by default), and an AA-conformant colour scheme selected - either the dedicated `contrast-black` / `contrast-white` themes, the built-in **dark** theme, or the default light skin with `gantt.config.accessibility.increase_contrast` enabled. Where a conformance level depends on this configuration, the Remarks say so. See the [Accessibility](guides/accessibility.md) guide for setup instructions. +- DHTMLX Gantt is **web content** rendered by a host application. Page-level responsibilities - the page title, ``, skip/bypass mechanisms, and site-wide navigation - belong to the host application and are reported as *Not Applicable* with an explanation. +- In the WCAG tables, only the **Web** response is populated. The *Electronic Docs*, *Software*, *Closed*, and *Authoring Tool* rows are *Not Applicable*: the product is not standalone (non-web) software, closed functionality, an authoring tool, or a piece of electronic documentation. + +**Evaluation Methods Used:** Testing was performed using a combination of automated testing (axe-core in a headless browser), manual code review of the component source (roles, ARIA attributes, keyboard handling and plugin behaviour), assistive-technology testing (manual passes with **NVDA + Firefox** and **JAWS + Chrome** on Windows), and browser overrides (colour-vision-deficiency emulation, `prefers-reduced-motion: reduce`, `forced-colors: active`, 200% / 400% zoom, and WCAG text-spacing overrides). + +## Applicable standards / guidelines + +| Standard / Guideline | Included in report | +|---|---| +| Web Content Accessibility Guidelines 2.0 | Level A (No) · Level AA (No) · Level AAA (No) | +| Web Content Accessibility Guidelines 2.1 | Level A (No) · Level AA (No) · Level AAA (No) | +| Web Content Accessibility Guidelines 2.2 | Level A (**Yes**) · Level AA (**Yes**) · Level AAA (No) | +| Revised Section 508 standards (published Jan 18, 2017; corrected Jan 22, 2018) | (**Yes**) | +| EN 301 549 - V3.1.1 (2019-11) and V3.2.1 (2021-03) | (**Yes**) | + +*WCAG 2.0 and 2.1 are not reported separately. Criteria that WCAG marks "2.1 and 2.2" are answered because +they are part of WCAG 2.2 and are referenced by EN 301 549.* + +## Terms + +- **Supports:** The functionality of the product has at least one method that meets the criterion without + known defects, or meets with equivalent facilitation. +- **Partially Supports:** Some functionality of the product does not meet the criterion. +- **Does Not Support:** The majority of product functionality does not meet the criterion. +- **Not Applicable:** The criterion is not relevant to the product. + +## WCAG 2.x report + +DHTMLX Gantt is web content, so only the **Web** response is populated below. "Requires the +`keyboard_navigation` plugin" and "requires ARIA output (on by default)" are configuration dependencies, +not defects. + +### Table 1: Success Criteria, Level A + +| Criteria | Conformance level | Remarks and explanations | +|---|---|---| +| **1.1.1** Non-text Content | Supports | Task bars expose `role="img"` with a descriptive `aria-label` (type, name, dates, duration, progress). Grid action icons (add `+`, tree expand/collapse) are `role="button"` with accessible names; decorative icons are `aria-hidden`. Resource load is exposed as text ("X of Y hours"), not colour/height alone. Labels are customizable via `gantt.ext.accessibility.labels.*`. | +| **1.2.1** Audio-only and Video-only (Prerecorded) | Not Applicable | The product contains no audio or video content. | +| **1.2.2** Captions (Prerecorded) | Not Applicable | No prerecorded multimedia. | +| **1.2.3** Audio Description or Media Alternative (Prerecorded) | Not Applicable | No prerecorded multimedia. | +| **1.3.1** Info and Relationships | Supports | The grid uses `treegrid` → `row` → `gridcell`/`columnheader` roles. In row-focus mode the announced row exposes type, `aria-level`, `aria-expanded`, `aria-selected`, `aria-posinset`/`aria-setsize`, and row/column counts and indices; dependencies are surfaced as text in the Predecessors/Successors columns; timeline scale cells are `columnheader`. Requires ARIA output (on by default). | +| **1.3.2** Meaningful Sequence | Supports | DOM/reading order follows the visual order; focus order is logical (task grid → intermediate layout cells → resource grid → resource timeline). | +| **1.3.3** Sensory Characteristics | Supports | Instructions and labels do not rely solely on shape, size, or spatial location; interactive elements carry text or ARIA names. | +| **1.4.1** Use of Color | Supports | Non-colour cues are built into the product and enabled with `gantt.config.accessibility.colorblind_friendly` (default off): a line at the progress boundary, a hatch on project bars, an outline/shadow on critical tasks, and a hatch on over-allocated resource cells. Verified under protanopia / deuteranopia / tritanopia / achromatopsia. Meeting the criterion requires enabling the option - one supported method meets it. | +| **1.4.2** Audio Control | Not Applicable | The product produces no auto-playing audio. | +| **2.1.1** Keyboard | Supports | With the `keyboard_navigation` plugin enabled: the grid is focusable; arrows/Home/End move focus; Space selects; Enter opens the lightbox; Ctrl+←/→ expand/collapse; Ctrl+Enter creates and Delete removes a task. The resource panel and the lightbox resource-assignments grid are keyboard-operable. Bar move/resize/progress without dragging are available via the lightbox form and custom shortcuts (`gantt.ext.keyboardNavigation.addShortcut`); dependency links are created via the inline predecessors editor. Keyboard operation requires the `keyboard_navigation` plugin (by design; documented). | +| **2.1.2** No Keyboard Trap | Supports | Focus is never trapped unintentionally; the lightbox modal focus-trap is intentional and releases on Esc, returning focus to the grid. Requires the `keyboard_navigation` plugin for modal focus management. | +| **2.1.4** Character Key Shortcuts | Supports | Shortcuts use modifier keys (Ctrl/Cmd + key); there are no single-character key shortcuts requiring a disable/remap mechanism. | +| **2.2.1** Timing Adjustable | Supports | The product imposes no time limits on user interaction. | +| **2.2.2** Pause, Stop, Hide | Supports | No auto-updating, moving, blinking or scrolling content lasting more than 5 seconds. | +| **2.3.1** Three Flashes or Below Threshold | Supports | No content flashes more than three times per second. | +| **2.4.1** Bypass Blocks | Not Applicable | Applies to full web pages with repeated blocks. The Gantt is a single embedded component; skip links and landmark structure are the host application's responsibility. | +| **2.4.2** Page Titled | Not Applicable | The host application owns the page ``. | +| **2.4.3** Focus Order | Supports | Focus order matches the logical/visual order; on lightbox close, focus returns to the originating grid row. Requires the `keyboard_navigation` plugin. | +| **2.4.4** Link Purpose (In Context) | Not Applicable | The UI contains no navigational hyperlinks. "Links" in a Gantt are task **dependencies** (data relationships), exposed as human-readable text in the Predecessors/Successors columns. | +| **2.5.1** Pointer Gestures | Supports | No multipoint or path-based gestures are required; drag operations use a single pointer and all have non-drag alternatives (see 2.5.7). | +| **2.5.2** Pointer Cancellation | Supports | Functions trigger on the up-event; a drag can be aborted (return to origin / Esc) before completion. | +| **2.5.3** Label in Name | Supports | Controls' accessible names include their visible label text; icon buttons (grid `+`, tree toggle) expose `role="button"` + `aria-label`. | +| **2.5.4** Motion Actuation | Not Applicable | No functionality is operated by device or user motion. | +| **3.1.1** Language of Page | Not Applicable | The host application owns `<html lang>`. (Bundled sample pages set `lang="en"` as good practice.) | +| **3.2.1** On Focus | Supports | Moving focus to a component does not trigger an unexpected change of context. | +| **3.2.2** On Input | Supports | Changing a form control's value does not automatically cause an unexpected change of context. | +| **3.2.6** Consistent Help (2.2 only) | Not Applicable | The widget provides no help mechanism; consistent placement of help is a host-application concern. | +| **3.3.1** Error Identification | Not Applicable | The product has no built-in error-indication design. The built-in date/time editors auto-correct out-of-range input by save time (`onLightboxSave`), so no invalid state is surfaced. If an integrator adds custom validation, identifying the field in error is the integrator's responsibility. | +| **3.3.2** Labels or Instructions | Supports | Lightbox sections are labelled ("Description", "Type", "Time period") and every form control exposes an accessible name. | +| **3.3.7** Redundant Entry (2.2 only) | Not Applicable | The widget has no multi-step process that re-requests previously entered information. | +| **4.1.1** Parsing | Supports | Per the September 2023 errata, this criterion is always supported for WCAG 2.0/2.1, EN 301 549 and Revised 508. It is obsolete/removed in WCAG 2.2. | +| **4.1.2** Name, Role, Value | Supports | Comprehensive roles/names/states: a named `treegrid` with counts/indices; rows carry type/level/expanded/selected; the lightbox is a named `role="dialog"` + `aria-modal="true"`; quick-info is a named non-modal dialog; resource cells use real grid semantics; all lightbox controls are named. Requires ARIA output (on by default). | + +### Table 2: Success Criteria, Level AA + +| Criteria | Conformance level | Remarks and explanations | +|---|---|---| +| **1.2.4** Captions (Live) | Not Applicable | No live multimedia. | +| **1.2.5** Audio Description (Prerecorded) | Not Applicable | No prerecorded video. | +| **1.3.4** Orientation | Supports | Content is not restricted to a single display orientation. | +| **1.3.5** Identify Input Purpose | Not Applicable | The product's forms collect task/scheduling data, not the user's own personal information covered by the WCAG input-purpose list. | +| **1.4.3** Contrast (Minimum) | Supports | The dedicated `contrast-black` / `contrast-white` themes and the built-in **dark** theme meet it out of the box, and for the default (terrace) light skin `gantt.config.accessibility.increase_contrast` (default off) raises it to AA. Meeting the criterion requires selecting one of these themes or enabling `increase_contrast`. | +| **1.4.4** Resize Text | Supports | Text can be resized to 200% without loss of content or functionality; the grid and bars do not break. | +| **1.4.5** Images of Text | Supports | Text is rendered as real text, not images of text. | +| **1.4.10** Reflow | Supports | Content reflows/scrolls at 400% zoom. As a data grid + timeline, two-dimensional layout is intrinsic to the content, for which the criterion permits two-dimensional scrolling. | +| **1.4.11** Non-text Contrast | Supports | The focus indicator is a 2px inset ring in the theme primary colour (visible on default and contrast themes). Under `forced-colors: active`, bars retain their fill (`forced-color-adjust:none`) with a `CanvasText` border, and links/histogram recolour to `CanvasText`. | +| **1.4.12** Text Spacing | Supports | Applying WCAG text-spacing overrides does not clip text in grid cells or on bars. | +| **1.4.13** Content on Hover or Focus | Supports | Tooltips are hoverable, persistent, and dismissible with `Esc` without moving the pointer. | +| **2.4.5** Multiple Ways | Not Applicable | Applies to locating pages within a set of web pages; out of scope for a single embedded component (host-application concern). | +| **2.4.6** Headings and Labels | Supports | Column headers have descriptive accessible names; lightbox sections are labelled and every control within them exposes an accessible name. | +| **2.4.7** Focus Visible | Supports | A clear 2px focus ring is shown on focusable grid elements and controls. Grid focus requires the `keyboard_navigation` plugin. | +| **2.4.11** Focus Not Obscured (Minimum) (2.2 only) | Supports | A focused element is not hidden behind sticky headers, toolbars or scrollbars. | +| **2.5.7** Dragging Movements (2.2 only) | Supports | Every drag operation has a non-drag alternative: dates/duration via the lightbox form; move/resize/progress via keyboard shortcuts (`addShortcut`); dependency links via the inline predecessors editor. Move/resize/progress shortcuts require the `keyboard_navigation` plugin plus a small documented customization. | +| **2.5.8** Target Size (Minimum) (2.2 only) | Supports | Interactive targets meet ≥24×24 CSS px: tree toggle icon 24×35, column resizer hit-area 24×36, task resize handles 24×24 (visual unchanged; hit-area enlarged). | +| **3.1.2** Language of Parts | Not Applicable | The widget does not mix languages within its content; language is host-owned. | +| **3.2.3** Consistent Navigation | Not Applicable | Applies across a set of web pages; host-application concern. | +| **3.2.4** Consistent Identification | Supports | Components with the same function are identified consistently throughout the widget. | +| **3.3.3** Error Suggestion | Not Applicable | The product has no built-in error indication (see 3.3.1), so there is no detected input error for which to suggest a correction. Any custom validation added by an integrator would own the error-suggestion text. | +| **3.3.4** Error Prevention (Legal, Financial, Data) | Supports | Task deletion is reversible/guarded - a confirmation dialog is shown before deletion, and actions are undoable. | +| **3.3.8** Accessible Authentication (Minimum) (2.2 only) | Not Applicable | The product performs no authentication. | +| **4.1.3** Status Messages | Supports | A visually-hidden `aria-live` region announces dynamic changes without moving focus: drag/resize/progress results and sort-direction changes ("Sorted by <column>, ascending"). Requires ARIA output (on by default). | + +## Revised Section 508 report + +WCAG-mapped provisions are answered in the WCAG 2.x report above and referenced here. Chapter 4 (Hardware) +is Not Applicable - DHTMLX Gantt is a software component with no hardware or physical controls. + +### Chapter 3: Functional Performance Criteria + +| Criteria | Conformance level | Remarks and explanations | +|---|---|---| +| 302.1 Without Vision | Supports | Operable with a screen reader (NVDA/JAWS) through the treegrid, text labels, live-region announcements and the keyboard model (requires the `keyboard_navigation` plugin). See WCAG 1.3.1, 4.1.2, 4.1.3. | +| 302.2 With Limited Vision | Supports | Zoom to 400%, text resize, text-spacing and forced-colors are supported. AA contrast is met by the built-in dark and contrast themes out of the box, and by the default skin with `accessibility.increase_contrast` enabled (see 1.4.3). | +| 302.3 Without Perception of Color | Supports | Non-colour cues are built in and enabled via `accessibility.colorblind_friendly`; verified under colour-blindness simulation (see 1.4.1). | +| 302.4 Without Hearing | Supports | No information is conveyed by sound. | +| 302.5 With Limited Hearing | Supports | No information is conveyed by sound. | +| 302.6 Without Speech | Supports | No speech input is required to operate the product. | +| 302.7 With Limited Manipulation | Supports | Fully keyboard-operable (requires the `keyboard_navigation` plugin); pointer targets meet ≥24×24 px; no path-based gestures. | +| 302.8 With Limited Reach and Strength | Supports | Operable by keyboard; no physical reach, force or timing requirements. | +| 302.9 With Limited Language, Cognitive, and Learning Abilities | Supports | Clear, consistent labels; reversible actions (undo, delete confirmation); customizable ARIA descriptions. | + +### Chapter 5: Software + +| Criteria | Conformance level | Remarks and explanations | +|---|---|---| +| 501.1 Scope - Incorporation of WCAG 2.0 AA | See WCAG 2.x section | See the WCAG 2.x report above. | +| 502 Interoperability with Assistive Technology | Not Applicable | Applies to non-web (platform) software. DHTMLX Gantt is web content that exposes standard DOM/ARIA to the browser accessibility tree; interoperability is covered by the WCAG results (Clause 9 / 501.1). | +| 503 Applications | Not Applicable | Applies to non-web platform software; the product is web content. User-preference respect (`prefers-reduced-motion`, `forced-colors`) is nonetheless implemented. | +| 504.2 Content Creation or Editing | Not Applicable | DHTMLX Gantt is not an authoring tool for web content (it edits project/scheduling data, not accessibility-relevant web content). | + +### Chapter 6: Support Documentation and Services + +| Criteria | Conformance level | Remarks and explanations | +|---|---|---| +| 602.2 Accessibility and Compatibility Features | Supports | The documentation describes the product's accessibility features: the [Accessibility](guides/accessibility.md) guide covers WAI-ARIA output, keyboard navigation and the high-contrast themes, together with the related API (`gantt.ext.accessibility`, `gantt.config.accessibility`). | +| 602.3 Electronic Support Documentation | Supports (see WCAG 2.x section) | The documentation site is delivered as web content and meets WCAG 2.2 AA (in-content links carry a non-colour underline, the active menu item a shape cue, and colour contrast meets AA). Verified with axe plus a manual screen-reader pass. | +| 602.4 Alternate Formats for Non-Electronic Support Documentation | Not Applicable | Documentation is delivered electronically only; there are no non-electronic (print) support documents. | +| 603.2 Information on Accessibility and Compatibility Features | Supports | The product's accessibility features are documented publicly (Accessibility guide) and can be provided by the support channel on request. | +| 603.3 Accommodation of Communication Needs | Supports | Support is provided over a text-based email channel; users interact through their own assistive technology. | + +## EN 301 549 report + +Clause 9 (Web) maps directly to the WCAG 2.x report above and is the substantive assessment for this web +product. Telephony, video, and hardware clauses (Clauses 6, 7, 8, 13) are Not Applicable. + +### Clause 4: Functional Performance Statements + +These mirror the Section 508 Chapter 3 results (same conclusions). + +| Criteria | Conformance level | Remarks and explanations | +|---|---|---| +| 4.2.1 Usage without vision | Supports | See 508 302.1 (screen-reader operable via treegrid, labels and live region; requires the `keyboard_navigation` plugin). | +| 4.2.2 Usage with limited vision | Supports | See 508 302.2 (AA contrast via the built-in dark/contrast themes or `accessibility.increase_contrast`; zoom/reflow supported). | +| 4.2.3 Usage without perception of colour | Supports | See 508 302.3 (built-in non-colour cues via `accessibility.colorblind_friendly`). | +| 4.2.4 Usage without hearing | Supports | No information conveyed by sound. | +| 4.2.5 Usage with limited hearing | Supports | No information conveyed by sound. | +| 4.2.6 Usage with no or limited vocal capability | Supports | No speech input required. | +| 4.2.7 Usage with limited manipulation or strength | Supports | Keyboard-operable; ≥24px targets; no gestures. | +| 4.2.8 Usage with limited reach | Supports | No physical reach requirements (software component). | +| 4.2.9 Minimize photosensitive seizure triggers | Supports | No flashing content (see 2.3.1). | +| 4.2.10 Usage with limited cognition, language or learning | Supports | Clear consistent labels; reversible actions. | +| 4.2.11 Privacy | Supports | Accessibility features use the same UI as everyone else; no separate, less-private mode. | + +### Clause 5: Generic Requirements + +**Mostly Not Applicable.** Clause 5 addresses closed functionality and hardware-style requirements. DHTMLX +Gantt is open web software that works with the platform/browser assistive technology, so the +closed-functionality sub-clauses, biometrics (5.3), operable parts (5.5), and locking/toggle-control status +(5.6) are Not Applicable. Where a generic requirement is met through normal AT support, it is covered by +Clause 9 (Web) / the WCAG results. + +### Clause 9: Web + +**See the WCAG 2.x section.** Clauses 9.1.1.1-9.4.1.3 map to the WCAG 2.2 Level A/AA results in Tables 1 +and 2 above. + +### Clause 11: Software + +**Not Applicable (assessed under Clause 9).** DHTMLX Gantt is web content evaluated under Clause 9 (Web); +it is not non-web software. The WCAG-mapped software provisions (11.1.1.1-11.4.1.3) are covered by the WCAG +2.x results. 11.8.2 (Accessible content creation) is Not Applicable - the product is not an authoring tool. + +### Clause 12: Documentation and Support Services + +| Criteria | Conformance level | Remarks and explanations | +|---|---|---| +| 12.1.1 Accessibility and compatibility features | Supports | The [Accessibility](guides/accessibility.md) guide documents the product's a11y features (WAI-ARIA output, keyboard navigation, high-contrast themes) and the `gantt.ext.accessibility` API. | +| 12.1.2 Accessible documentation | Supports (see WCAG 2.x section) | The documentation site meets WCAG 2.2 AA; verified with axe plus a manual screen-reader pass (see 508 602.3). | +| 12.2.2 Information on accessibility and compatibility features | Supports | Accessibility features are documented publicly and can be surfaced by support on request. | +| 12.2.3 Effective communication | Supports | Support is provided over a text-based email channel; users interact through their own assistive technology. | +| 12.2.4 Accessible documentation | Supports (see WCAG 2.x section) | Same basis as 12.1.2 - the documentation site meets WCAG 2.2 AA. | + +## Legal disclaimer + +This report is provided for informational purposes only and describes the accessibility of the named +product version as of the report date. It is provided "as is", without warranty of any kind, and does not +constitute a contractual commitment or guarantee. Accessibility support may change in subsequent releases, +and results apply to the evaluated configuration. "VPAT" and "Voluntary Product Accessibility Template" are +registered service marks of the Information Technology Industry Council (ITI). diff --git a/docs/guides/accessibility.md b/docs/guides/accessibility.md index 9ca1ad38e..65ea8185f 100644 --- a/docs/guides/accessibility.md +++ b/docs/guides/accessibility.md @@ -1,67 +1,347 @@ --- title: "Accessibility" sidebar_label: "Accessibility" +description: "How DHTMLX Gantt meets WCAG 2.2 AA, Section 508 and EN 301 549 - keyboard operation, screen-reader support, high-contrast themes, and how to configure them." --- # Accessibility -[Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) is an important and necessary standard for modern web applications. -There's a set of various techniques that allow making an application or a web site handier to use or work with. +DHTMLX Gantt is built to be usable by everyone, including people who rely on keyboards, screen readers, +screen magnification, or high-contrast display modes. -To make an easier access and interaction with DHTMLX Gantt for people with disabilities, the component contains a set of accessibility features: +:::info Target conformance +DHTMLX Gantt is designed to meet **WCAG 2.2 Level AA**, **Section 508** of the U.S. Rehabilitation Act, +and **EN 301 549** (the technical baseline of the European Accessibility Act). Because WCAG 2.2 AA also +satisfies ADA and Section 508 expectations, a single conformance target covers the major regulatory +requirements. -- WAI-ARIA Attributes -- Keyboard Navigation -- High-Contrast Theme +A detailed, criterion-by-criterion **Accessibility Conformance Report (VPAT® 2.5)** is available: +[Accessibility Conformance Report](guides/accessibility-conformance-report.md). +::: + +## At a glance + +| Area | Support | +|---|---| +| Keyboard operation | Full: every primary action has a keyboard equivalent | +| WAI-ARIA semantics | Built-in (`grid` / `treegrid` model), enabled by default | +| Screen readers | Tested with NVDA, JAWS and VoiceOver | +| Visual accessibility | Dedicated high-contrast themes, an increase-contrast option, and non-colour cues | +| Text resize / zoom | Layout remains operable up to 400% zoom / text spacing overrides | +| Customization | Public API to change every screen-reader description and announce dynamic changes | +| Standards | WCAG 2.2 AA, Section 508, EN 301 549 | + +Use this page to verify the component against your own accessibility checklist, and to learn how to +configure Gantt for an accessible deployment. To try it hands-on, see the live +[Accessibility sample](https://docs.dhtmlx.com/gantt/samples/01_initialization/22_accessibility.html). + +## Scope + +This guide covers the Gantt widget itself: the **data grid / tree**, the **timeline** with task bars and +dependency links, the **time-scale header**, the **resource panel**, and the +**lightbox** (task editor). Like any embeddable component, the accessibility of the final page also +depends on the host application (see [Host-page responsibilities](#hostpageresponsibilities)). + +## Setting up an accessible Gantt {#recommendedconfiguration} + +Gantt ships accessible by default (ARIA output is on), but a fully WCAG 2.2 AA-compliant deployment needs +two more things: keyboard navigation enabled, and an AA-contrast colour scheme selected. The recommended +configuration is: + +~~~js +// 1. ARIA output is enabled by default - no action needed. +// (You can be explicit: gantt.config.accessibility = { aria: true };) + +// 2. Enable keyboard navigation +gantt.plugins({ keyboard_navigation: true }); + +gantt.config.accessibility = { + aria: true, + increase_contrast: true, // AA contrast for the default light skin + colorblind_friendly: true // non-colour cues (patterns, outlines) +}; + +gantt.init("gantt_here"); +~~~ + +### Grid setup for keyboard link management {#gridsetup} + +For the fullest keyboard and screen-reader experience, set up the task grid so that dependency links can +be read and created without a mouse: + +- Enable **inline editing** so grid cells can be edited from the keyboard (see + [Inline editing](guides/inline-editing.md)). +- Add a **`predecessors`** column, and optionally a **`successors`** column. These columns get a default + template and inline editor automatically: a screen reader reads the dependencies as text (for example, + *"Predecessors: Office facing finish-to-start"*), and a user can create or change a link by typing the + related task's code into the cell - a keyboard, non-drag alternative to dragging link arrows + (WCAG 2.5.7 Dragging Movements). + +~~~js +gantt.config.columns = [ + { name: "text", label: "Task name", tree: true, width: 200, resize: true }, + { name: "start_date", label: "Start", align: "center", width: 100, resize: true }, + { name: "duration", label: "Duration", align: "center", width: 70, resize: true }, + { name: "predecessors", label: "Predecessors", width: 120, align: "left", resize: true }, + { name: "successors", label: "Successors", width: 120, align: "left", resize: true }, + { name: "add", width: 44 } +]; +~~~ + +The sections below describe each capability in detail. ## WAI-ARIA Attributes -DHTMLXGantt provides WAI-ARIA support that implies the use of special attributes in the component's markup. -These are additional attributes which make the component recognizable for screen readers. +DHTMLX Gantt provides WAI-ARIA support that implies the use of special attributes in the component's +markup. These additional attributes make the component recognizable to screen readers. You can find more +information in the [official specification](https://www.w3.org/WAI/standards-guidelines/aria/) of WAI-ARIA. + +The component exposes itself to assistive technology as an interactive tree of rows mirrored by a timeline +of task bars. Semantics are applied per structural part of the widget, so each part is announced with the +correct role and state. + +### Data grid / tree rows + +| Element | Role / attribute | Purpose | +|---|---|---| +| Task grid | `role="treegrid"` with `aria-rowcount` / `aria-colcount` | The grid as a whole | +| `.gantt_row` | `role="row"` + `aria-label` | A task row, with a spoken summary (type, name, dates, duration, progress) | +| `.gantt_row` | `aria-level` | Depth of the task in the hierarchy | +| `.gantt_row` | `aria-expanded` | Open/closed state of a branch with children | +| `.gantt_row` | `aria-selected` | Selection state of the row | +| `.gantt_row` | `aria-posinset` / `aria-setsize` | Position of the row within its level | +| `.gantt_grid_head_cell` | `role="columnheader"` + `aria-label` | A grid column header and its name | + +### Timeline and resource panel + +| Element | Role / attribute | Purpose | +|---|---|---| +| `.gantt_task_line` | `role="img"` + `aria-label` | A task bar, exposed with a descriptive label | +| `.gantt_scale_cell` | `role="columnheader"` | A time-scale header cell | +| Resource cells | `role="grid"` / `row` / `gridcell` | Resource load exposed as text (for example, "John: 5 of 8 hours on 21 Apr"), not by bar height or colour | + +### Lightbox (task editor) + +The lightbox opens as a modal dialog (`role="dialog"`, `aria-modal="true"`). Focus is moved into the dialog +when it opens, kept inside it while it is open (focus trapping), and returned to the originating task when +it closes, so keyboard and screen-reader users never lose their place. + +### Enabling / disabling ARIA output + +ARIA output is controlled by a single master switch and is **on by default**: + +~~~js +gantt.config.accessibility = { + aria: true, // master switch for all ARIA output + announcements: true, // enable the live region for dynamic messages + grid_semantics: true // verbose treegrid position info (row/column counts and indices) +}; +~~~ + +All three flags default to `true`, so Gantt is fully accessible out of the box. + +:::note +The legacy [wai_aria_attributes](api/config/wai_aria_attributes.md) config is still supported for backward +compatibility. If you set it explicitly, it wins over `accessibility.aria`; otherwise `accessibility.aria` +decides. You can check the resolved state at any time with `gantt.ext.accessibility.isEnabled()`. +::: + +## Screen reader support + +DHTMLX Gantt is tested against the most widely used assistive technologies: + +| Screen reader | Browser | Platform | +|---|---|---| +| NVDA | Firefox, Chrome | Windows | +| JAWS | Chrome, Edge | Windows | +| VoiceOver | Safari | macOS | + +By default, a screen reader reads a task as **type + name + dates + duration + progress**, for example +*"Task: Interior office, Start date: 3 Apr, End date: 11 Apr, Duration: 7, 60% complete"*. Milestones are +a single point in time, so they read short: *"Milestone: Release, Start date: 15 Apr"*. Hierarchy is +exposed through `aria-level` and `aria-expanded`, and selection through `aria-selected`, so the structure +and state of the project are conveyed without sighted use. + +### Customizing what screen readers announce + +The public `gantt.ext.accessibility` API lets you change every screen-reader description. Each label is a +function that receives an item and returns plain text (HTML is stripped and quotes are escaped +automatically); you override only what you want to change. + +| Label | Receives | Describes | +|---|---|---| +| `labels.taskBar(task)` | the task | the bar on the timeline | +| `labels.taskRow(task)` | the task | the row in the grid | +| `labels.link(link)` | the link | a dependency arrow | +| `labels.timelineCell(date, scale)` | date + scale | a header cell of the time scale | +| `labels.resourceCell(resource, date, value)` | resource + cell | a cell in the resource panel | +| `labels.resourceRow(resource)` | the resource | a row in the resource grid | +| `labels.gridCell(column, textValue, task)` | column, cell text, task | a cell in the task grid | -You can find more information in the [official specification](https://www.w3.org/WAI/standards-guidelines/aria/) of WAI-ARIA. +~~~js +// Describe a task row for a medical schedule +gantt.ext.accessibility.labels.taskRow = (task) => + `Appointment: ${task.text}, ${task.duration} days, ${Math.round(task.progress * 100)}% complete`; + +// A simpler bar description +gantt.ext.accessibility.labels.taskBar = (task) => task.text; +~~~ + +:::note +Label functions produce the text written into the HTML `aria-label` attribute during rendering. If you +replace a label **after** `gantt.init()`, call `gantt.render()` afterwards so the change reaches the screen +reader. If you set it **before** `gantt.init()`, no extra call is needed. +::: + +### Announcing dynamic changes + +For things that *happen* and have no permanent element to label - a drag result, a re-sort, a saved/failed +status - use `announce()`. It writes text into a visually-hidden ARIA live region that the screen reader +reads aloud: + +~~~js +gantt.ext.accessibility.announce("Task moved to 21 Jul - 25 Jul"); +gantt.ext.accessibility.announce("Saving failed", { assertive: true }); // interrupts current speech +~~~ + +By default the message is **polite** (the screen reader finishes its current sentence first); +`{ assertive: true }` interrupts and should be reserved for time-critical messages. Gantt already announces +two things for you out of the box: the **drag result** (move / resize / progress speaks the task's updated +row description) and the **sort direction** (clicking a grid column header speaks +*"<column>, sorted ascending/descending"*). + +### Translatable screen-reader names -WAI-ARIA attributes in Gantt are enabled by default, to disable them you can use the *wai_aria_attributes* property with the *false* value: +Static screen-reader names live in the locale, so they translate with the rest of the UI. Override them +like any other locale label: ~~~js -gantt.config.wai_aria_attributes = true; +gantt.locale.labels.aria_grid = "Project tasks"; ~~~ +Keys include `aria_task_duration`, `aria_task_progress`, `aria_grid`, `aria_sort_ascending` / +`aria_sort_descending`, `aria_resource_load`, `aria_toggle_row`, and the `aria_link_*` link-type names. +All of them ship translated in every bundled locale. + ## Keyboard Navigation -This technique implies providing access to all functionality of an application via the corresponding keys and key combinations -instead of navigating through an application with a mouse pointer. +All Gantt interactions can be performed from the keyboard. Keyboard navigation is provided by a plugin that +you enable once, using the [gantt.plugins](api/method/plugins.md) method: + +~~~js +gantt.plugins({ keyboard_navigation: true }); + +// optional: navigate individual grid cells instead of whole rows +gantt.config.keyboard_navigation_cells = true; +~~~ + +`Tab` places focus into the accessible views in turn (task grid → any custom layout cell → resource grid → +resource timeline → next element on the page); arrow keys, `Home` / `End` move within the focused view. A +selection of the built-in shortcuts: + +| Keys | Action | +|---|---| +| `↑` / `↓` | Move to the previous / next task | +| `Page Up` / `Page Down` | Jump to the first / last task | +| `Space` | Select / deselect the task | +| `Ctrl` + `←` / `→` | Collapse / expand the branch | +| `Enter` | Open the lightbox (edit the task) | +| `Ctrl` + `Enter` | Add a task | +| `Delete` | Delete the task | + +Editing task **dates and duration** without a mouse is done through the lightbox (open with `Enter`), which +provides fully keyboard-operable date and duration controls. Custom in-place shortcuts (for example, nudging +a selected bar along the timeline) can be added with `gantt.ext.keyboardNavigation.addShortcut(...)`. -You will find the detailed information in the [Keyboard Navigation](guides/keyboard-navigation.md) article. +The full shortcut reference, focus behaviour, scopes, and custom-shortcut API are described in the +[Keyboard Navigation](guides/keyboard-navigation.md) article. -## High-Contrast Themes {#highcontrastthemes} +## Low vision and colour -DHTMLXGantt supports a theme that uses contrasting colors which make the app's interface more distinct and easier to see. -The high-contrast theme will be helpful for people with special or particular visual needs. +### High-Contrast Themes {#highcontrastthemes} -There are two variants of contrast theme available: +DHTMLX Gantt supports themes that use contrasting colours to make the interface more distinct and easier to +see. They are helpful for users with particular visual needs. + +There are two dedicated high-contrast skins: - contrast black skin ![contrast_black_skin](/img/contrast_black_skin.png) ~~~html -<link rel="stylesheet" href="../../codebase/dhtmlxgantt_contrast_black.css" +<link rel="stylesheet" href="../../codebase/dhtmlxgantt_contrast_black.css" type="text/css" media="screen" title="no title" charset="utf-8"> ~~~ - [High contrast theme - Black](https://docs.dhtmlx.com/gantt/samples/06_skins/07_high_contrast_black.html) - - contrast white skin ![contrast_white_skin](/img/contrast_white_skin.png) ~~~html -<link rel="stylesheet" href="../../codebase/dhtmlxgantt_contrast_white.css" +<link rel="stylesheet" href="../../codebase/dhtmlxgantt_contrast_white.css" type="text/css" media="screen" title="no title" charset="utf-8"> ~~~ - [High contrast theme - White](https://docs.dhtmlx.com/gantt/samples/06_skins/08_high_contrast_white.html) + +The built-in **dark** theme also meets AA contrast out of the box. See the [Skins](guides/skins.md) guide +for how to switch themes. + +### Increase contrast and colour-blind cues + +If you keep the default light skin, two options make it accessible without changing the theme: + +~~~js +gantt.config.accessibility = { + increase_contrast: true, // raises the default light skin to AA contrast + colorblind_friendly: true // adds non-colour cues +}; +~~~ + +- **`increase_contrast`** (default off) raises the default (terrace) light skin to AA contrast. +- **`colorblind_friendly`** (default off) adds non-colour cues so meaning is never carried by colour alone: + a line at the progress boundary, a hatch on project bars, an outline/shadow on critical tasks, and a + hatch on over-allocated resource cells. + +Both take effect on the next `gantt.render()`. + +### Other low-vision support + +- **Colour is never the only signal.** Status and hierarchy are conveyed through text labels and ARIA + state, not colour alone (see `colorblind_friendly` above). +- **Zoom and reflow.** The grid/timeline layout remains operable when the page is zoomed up to 400%. +- **Text spacing.** Applying WCAG text-spacing overrides does not clip or overlap text in grid cells or on + bars. +- **Visible focus.** The focused row, cell or bar shows a persistent 2px focus indicator; it stays visible + under `forced-colors: active` (Windows High Contrast mode). + +## Host-page responsibilities {#hostpageresponsibilities} + +A few accessibility requirements live at the page level, not inside the component. To reach full WCAG 2.2 AA +on your page, make sure the host document: + +- sets a document language, e.g. `<html lang="en">`; +- provides a page `<h1>` and wraps the Gantt in an appropriate landmark (e.g. `<main>`); +- gives the Gantt container an accessible name where multiple widgets share a page. + +## Testing and methodology + +Accessibility is validated continuously: + +1. **Automated testing** with [axe-core](https://github.com/dequelabs/axe-core) across representative + samples: basic init, high-contrast skins, the lightbox, keyboard navigation, and the resource panel. +2. **Manual testing**: keyboard-only walkthroughs of every scope, and screen-reader passes with NVDA, + JAWS and VoiceOver. +3. **Conformance reporting**: results are published openly in the + [Accessibility Conformance Report](guides/accessibility-conformance-report.md). + +## Resources + +- [Accessibility Conformance Report (VPAT 2.5)](guides/accessibility-conformance-report.md) +- [Accessibility sample (live)](https://docs.dhtmlx.com/gantt/samples/01_initialization/22_accessibility.html) +- [Keyboard Navigation](guides/keyboard-navigation.md) +- [WCAG 2.2](https://www.w3.org/TR/WCAG22/) +- [WAI-ARIA Authoring Practices: Grid / Treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/) diff --git a/docs/guides/baselines.md b/docs/guides/baselines.md index 6af2c1133..fff2718e3 100644 --- a/docs/guides/baselines.md +++ b/docs/guides/baselines.md @@ -170,16 +170,16 @@ The full code of the considered example you can see in the related sample. The following samples show you different ways of applying the [`addTaskLayer()`](api/method/addtasklayer.md) method to enrich the timeline of the Gantt chart with different custom elements: -- <a href="https://snippet.dhtmlx.com/wv23be05" target="_blank">Custom baselines</a> -- <a href="https://snippet.dhtmlx.com/bk5m6his" target="_blank">Highlighting cells with overdue time</a> -- <a href="https://snippet.dhtmlx.com/p74m3du2" target="_blank">Highlighting overdue tasks</a> -- <a href="https://snippet.dhtmlx.com/cuc7d4vn" target="_blank">Showing the missed deadline for the whole project</a> -- <a href="https://snippet.dhtmlx.com/bpupkrce" target="_blank">Displaying task progress value</a> -- <a href="https://snippet.dhtmlx.com/quqe9s2o" target="_blank">Adding custom elements for tasks</a> -- <a href="https://snippet.dhtmlx.com/pmuy0lj8" target="_blank">Draggable baselines</a> -- <a href="https://snippet.dhtmlx.com/38h66bni" target="_blank">Baselines with a draggable progress knob</a> -- <a href="https://snippet.dhtmlx.com/3oy6052q" target="_blank">Custom milestones</a> -- <a href="" target="_blank">Recurring tasks</a> +- <a href="https://snippet.dhtmlx.com/wv23be05" target="_blank" rel="noopener noreferrer">Custom baselines</a> +- <a href="https://snippet.dhtmlx.com/bk5m6his" target="_blank" rel="noopener noreferrer">Highlighting cells with overdue time</a> +- <a href="https://snippet.dhtmlx.com/p74m3du2" target="_blank" rel="noopener noreferrer">Highlighting overdue tasks</a> +- <a href="https://snippet.dhtmlx.com/cuc7d4vn" target="_blank" rel="noopener noreferrer">Showing the missed deadline for the whole project</a> +- <a href="https://snippet.dhtmlx.com/bpupkrce" target="_blank" rel="noopener noreferrer">Displaying task progress value</a> +- <a href="https://snippet.dhtmlx.com/quqe9s2o" target="_blank" rel="noopener noreferrer">Adding custom elements for tasks</a> +- <a href="https://snippet.dhtmlx.com/pmuy0lj8" target="_blank" rel="noopener noreferrer">Draggable baselines</a> +- <a href="https://snippet.dhtmlx.com/38h66bni" target="_blank" rel="noopener noreferrer">Baselines with a draggable progress knob</a> +- <a href="https://snippet.dhtmlx.com/3oy6052q" target="_blank" rel="noopener noreferrer">Custom milestones</a> +- <a href="" target="_blank" rel="noopener noreferrer">Recurring tasks</a> ## Drag-and-drop for custom elements diff --git a/docs/guides/fullscreen-mode.md b/docs/guides/fullscreen-mode.md index 7664ca958..dd73325e9 100644 --- a/docs/guides/fullscreen-mode.md +++ b/docs/guides/fullscreen-mode.md @@ -178,7 +178,7 @@ the gantt won't be able to expand to the fullscreen mode (try it in our snippet ### Full screen mode in Salesforce -The Fullscreen extension doesn't work in Salesforce applications that use <a href="https://developer.salesforce.com/docs/atlas.en-us.238.0.lightning.meta/lightning/security_code.htm" target="_blank">Locker Service</a>, since Locker blocks the ability to switch the element to the full screen mode. +The Fullscreen extension doesn't work in Salesforce applications that use <a href="https://developer.salesforce.com/docs/atlas.en-us.238.0.lightning.meta/lightning/security_code.htm" target="_blank" rel="noopener noreferrer">Locker Service</a>, since Locker blocks the ability to switch the element to the full screen mode. More specifically, the Fullscreen extension won't work with **Lightning Aura** framework and with **Lightning Web Components** but may work with **Visualforce** framework. diff --git a/docs/guides/video-guides.md b/docs/guides/video-guides.md index 6076c9ac3..c27bac5ad 100644 --- a/docs/guides/video-guides.md +++ b/docs/guides/video-guides.md @@ -13,43 +13,43 @@ By following these video tutorials, you can master such issues as configuring gr <table cellspacing="0" cellpadding="5" border="0"> <tbody> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=-BoznxJmJIo&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=1" target="_blank">Specifying columns in Grid</a></span> The video tutorial demonstrates how to define the content of cells, how to set the data template and how to provide the ability to toggle between two Grid views. Related article: [Specifying Columns](guides/specifying-columns.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=-BoznxJmJIo&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=1" target="_blank" rel="noopener noreferrer">Specifying columns in Grid</a></span> The video tutorial demonstrates how to define the content of cells, how to set the data template and how to provide the ability to toggle between two Grid views. Related article: [Specifying Columns](guides/specifying-columns.md)</td> <td><a href="https://www.youtube.com/watch?v=-BoznxJmJIo&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=1">![specifying_columns](/img/specifying_columns.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=srtb3nYOb-E&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=5" target="_blank">Drag-n-drop reordering of Grid columns</a></span> The video guide shows how to enable reordering of tasks within the same Tree level, how to speed up the performance for large dataset, etc. Related article: [Reordering Tasks](guides/reordering-tasks.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=srtb3nYOb-E&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=5" target="_blank" rel="noopener noreferrer">Drag-n-drop reordering of Grid columns</a></span> The video guide shows how to enable reordering of tasks within the same Tree level, how to speed up the performance for large dataset, etc. Related article: [Reordering Tasks](guides/reordering-tasks.md)</td> <td><a href="https://www.youtube.com/watch?v=srtb3nYOb-E&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=5">![sorting_reordering](/img/sorting_reordering.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=LyJ3zKSrmH4&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=3" target="_blank">Filtering tasks in Grid</a></span> The video tutorial teaches how to implement filtering while searching a task in Gantt. Related article: [Filtering Tasks](guides/filtering.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=LyJ3zKSrmH4&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=3" target="_blank" rel="noopener noreferrer">Filtering tasks in Grid</a></span> The video tutorial teaches how to implement filtering while searching a task in Gantt. Related article: [Filtering Tasks](guides/filtering.md)</td> <td><a href="https://www.youtube.com/watch?v=LyJ3zKSrmH4&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=3">![filtering_task](/img/filtering_task.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IKFTQNOJExY&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=2" target="_blank">Custom buttons, icons and dropdown menus in Grid cells and headers</a></span> The video tutorial discusses how to add custom buttons for user actions in Grid cells and headers.</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IKFTQNOJExY&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=2" target="_blank" rel="noopener noreferrer">Custom buttons, icons and dropdown menus in Grid cells and headers</a></span> The video tutorial discusses how to add custom buttons for user actions in Grid cells and headers.</td> <td><a href="https://www.youtube.com/watch?v=IKFTQNOJExY&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=2">![buttons_icons](/img/buttons_icons.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=rqYrqqoaI_U&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=4" target="_blank">Visibility of Grid columns</a></span> The video guide shows how to add a horizontal scrollbar into Grid and how to allow a user to select which columns should be visible. Related article: [Specifying Columns](guides/specifying-columns.md#visibility)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=rqYrqqoaI_U&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=4" target="_blank" rel="noopener noreferrer">Visibility of Grid columns</a></span> The video guide shows how to add a horizontal scrollbar into Grid and how to allow a user to select which columns should be visible. Related article: [Specifying Columns](guides/specifying-columns.md#visibility)</td> <td><a href="https://www.youtube.com/watch?v=rqYrqqoaI_U&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=4">![visibility](/img/visibility.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=0rIPrC0GtME&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=6" target="_blank">Inline editing in Grid</a></span> The video tutorial demonstrates how to implement a capability to make any changes right through the grid. Related article: [Inline Editing in Grid](guides/inline-editing.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=0rIPrC0GtME&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=6" target="_blank" rel="noopener noreferrer">Inline editing in Grid</a></span> The video tutorial demonstrates how to implement a capability to make any changes right through the grid. Related article: [Inline Editing in Grid](guides/inline-editing.md)</td> <td><a href="https://www.youtube.com/watch?v=0rIPrC0GtME&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=6">![inline_editing](/img/inline_editing.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=eu5R86a-9jA&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w&index=2" target="_blank">dhtmlxGantt with PHP: Laravel</a></span> The video tutorial describes how to add Gantt into a Laravel app. Related article: [dhtmlxGantt with PHP: Laravel](integrations/php/howtostart-php-laravel.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=eu5R86a-9jA&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w&index=2" target="_blank" rel="noopener noreferrer">dhtmlxGantt with PHP: Laravel</a></span> The video tutorial describes how to add Gantt into a Laravel app. Related article: [dhtmlxGantt with PHP: Laravel](integrations/php/howtostart-php-laravel.md)</td> <td><a href="https://www.youtube.com/watch?v=eu5R86a-9jA&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w&index=2">![gantt_php](/img/gantt_php.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=D8YzyzBfyP8&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w" target="_blank">dhtmlxGantt with Node.js</a></span> The video guide walks you through the stages of implementing a Gantt chart on a Node.js platform. Related articles: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md), [Server-Side Integration](guides/server-side.md), [dhtmlxGantt with Node.js](integrations/node/howtostart-nodejs.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=D8YzyzBfyP8&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w" target="_blank" rel="noopener noreferrer">dhtmlxGantt with Node.js</a></span> The video guide walks you through the stages of implementing a Gantt chart on a Node.js platform. Related articles: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md), [Server-Side Integration](guides/server-side.md), [dhtmlxGantt with Node.js](integrations/node/howtostart-nodejs.md)</td> <td><a href="https://www.youtube.com/watch?v=D8YzyzBfyP8&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w">![gantt_node](/img/gantt_node.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=1nXl9jfMdto" target="_blank">dhtmlxGantt with Salesforce LWC</a></span> The video tutorial shows how to create a Gantt chart in Salesforce. Related article: [dhtmlxGantt with Salesforce LWC](integrations/salesforce/howtostart-salesforce.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=1nXl9jfMdto" target="_blank" rel="noopener noreferrer">dhtmlxGantt with Salesforce LWC</a></span> The video tutorial shows how to create a Gantt chart in Salesforce. Related article: [dhtmlxGantt with Salesforce LWC](integrations/salesforce/howtostart-salesforce.md)</td> <td><a href="https://www.youtube.com/watch?v=1nXl9jfMdto">![gantt_salesforce](/img/gantt_salesforce.png)</a></td> </tr> <tr> - <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IgoXvVSerkE&list=PLKS_XdyIGP4Of4S6QgaqMKbJK1Z3bWlf8" target="_blank">dhtmlxGantt with Vue.js</a></span> The video tutorial shows how to create a basic Vue.js Gantt chart application. Related article: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md)</td> + <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IgoXvVSerkE&list=PLKS_XdyIGP4Of4S6QgaqMKbJK1Z3bWlf8" target="_blank" rel="noopener noreferrer">dhtmlxGantt with Vue.js</a></span> The video tutorial shows how to create a basic Vue.js Gantt chart application. Related article: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md)</td> <td><a href="https://www.youtube.com/watch?v=IgoXvVSerkE&list=PLKS_XdyIGP4Of4S6QgaqMKbJK1Z3bWlf8">![gantt_vuejs](/img/gantt_vuejs.png)</a></td> </tr> </tbody> diff --git a/docs/integrations/php/howtostart-connector.md b/docs/integrations/php/howtostart-connector.md index 797c30dd8..61c2d6dbd 100644 --- a/docs/integrations/php/howtostart-connector.md +++ b/docs/integrations/php/howtostart-connector.md @@ -32,7 +32,7 @@ Let's start the tutorial with getting the library package on your computer. **Do the following:** <ul> - <li>Download the dhtmlxGantt package <a href='https://github.com/DHTMLX/connector-php' title='dhtmlxConnector for PHP repository' target='_blank'>here</a>, if you haven't done it yet. </li> + <li>Download the dhtmlxGantt package <a href='https://github.com/DHTMLX/connector-php' title='dhtmlxConnector for PHP repository' target='_blank' rel='noopener noreferrer'>here</a>, if you haven't done it yet. </li> <li>Extract the package to the root directory of your local web server. The extracted files will be stored in a folder with the same name as the package file - dhtmlxGantt.</li> </ul> diff --git a/docusaurus.config.js b/docusaurus.config.js index f9a9226c2..1eb39d038 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -177,7 +177,7 @@ const config = { locales: ['en', 'de', 'ru', 'ko', 'zh'], localeConfigs: { zh: { - htmlLang: 'zh-ZH', + htmlLang: 'zh-Hans', label: '中文' }, } diff --git a/sidebars.js b/sidebars.js index a838bbdee..f0dcc5d48 100644 --- a/sidebars.js +++ b/sidebars.js @@ -1639,7 +1639,6 @@ module.exports = { "guides/undo-redo", "guides/message-boxes", "guides/quick-info", - "guides/accessibility", "guides/keyboard-navigation", "guides/content-security-policy", "guides/jquery-integration", @@ -1665,6 +1664,26 @@ module.exports = { ] }, + // Accessibility + { + type: "category", + label: "Accessibility", + collapsible: true, + collapsed: true, + link: { + type: 'doc', + id: "guides/accessibility" + }, + items: [ + { + type: "link", + label: "Overview", + href: "/guides/accessibility/" + }, + "guides/accessibility-conformance-report" + ] + }, + // editions { diff --git a/src/css/custom.css b/src/css/custom.css index 48ea559dd..86b0cc53e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -11,7 +11,7 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #0288D1; + --ifm-color-primary: #0277BD; --ifm-color-primary-dark: rgb(33, 175, 144); --ifm-color-primary-darker: rgb(31, 165, 136); --ifm-color-primary-darkest: rgb(26, 136, 112); @@ -97,15 +97,28 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { /* Link icons */ -.iconExternalLink_lCJq, -.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-IconExternalLink-styles-module, -.iconExternalLink_nPIU, -.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module { - display: none; /* hides the link icon */ -} /* end Link icons */ +/* Accessibility: non-colour cues for links (WCAG 1.4.1) */ + +.markdown a:not(.hash-link):not(.card):not(.framework-card) { + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.menu__link--active { + box-shadow: 4px 0 0 0 currentColor inset; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +[class*="iconExternalLink"] { + display: none; +} + +/* end Accessibility */ + /* imgs */ .markdown img { @@ -272,7 +285,7 @@ p { margin-top: 7px; left: -18px; color: white; - background: #E74C3C; + background: #C0392B; padding: 0px 3px 1px 2px; border-radius: 3px; position: absolute; diff --git a/static/img/contrast_black_skin.png b/static/img/contrast_black_skin.png index cf64f2a85..d9be35953 100644 Binary files a/static/img/contrast_black_skin.png and b/static/img/contrast_black_skin.png differ diff --git a/static/img/contrast_white_skin.png b/static/img/contrast_white_skin.png index f590508de..155f8ec8c 100644 Binary files a/static/img/contrast_white_skin.png and b/static/img/contrast_white_skin.png differ