docs(core/application): Skip link for the ix-application component

docs/components/application/code.mdx

@@ -18,29 +18,63 @@ The code snippet below shows an example of a combination of different components
 
 <ApplicationPlayground height="30rem" />
 
+## Skip links
+
+`ix-application` includes a skip-link list with no configuration required. The list is the first focusable content owned by `ix-application`; focusable document content rendered before the component remains before it in the tab order. The links remain visually hidden until they receive focus. Moving focus between them replaces the visible link at the same top-start position, and the list does not create an additional navigation landmark.
+
+The main link focuses the application's internal main region by default. Use `skip-link-main-target-id` to focus a specific content boundary instead:
+
+```html
+<ix-application skip-link-main-target-id="main-content">
+  <ix-application-header name="My Application"></ix-application-header>
+  <ix-menu>...</ix-menu>
+  <ix-content id="main-content">...</ix-content>
+  <button slot="bottom">Footer action</button>
+</ix-application>
+```
+
+Pass the target as a bare ID, not as `#main-content` or another CSS selector. The target must be a unique, usable light DOM descendant of the same `ix-application`. The component makes a non-interactive destination programmatically focusable when necessary and preserves an existing `tabindex`. If the target cannot be used, the component logs a warning and falls back to the internal main region.
+
+Activating the main link moves focus to its destination and scrolls it to the beginning. When the `bottom` slot contains meaningful content, a second “Skip to footer” link appears after the main link and updates automatically when the slot content changes. Activating it focuses the internal footer landmark without changing the main region's scroll position. Neither link changes the URL fragment or browser history.
+
+Use `i18n-skip-to-main` and `i18n-skip-to-footer` to translate the skip-link text. This example translates it into German:
+
+```html
+<ix-application
+  i18n-skip-to-main="Zum Hauptinhalt springen"
+  i18n-skip-to-footer="Zur Fußzeile springen"
+>
+  ...
+</ix-application>
+```
+
+Empty localization values produce a warning and fall back to “Skip to main content” and “Skip to footer” so both links retain accessible names.
+
+Set `disable-skip-links` only when an equivalent document-level bypass mechanism is already available.
+
 ## Breakpoints
 
 <ApplicationBreakpointsPlayground height="30rem" />
 
-## Application Switch
+## Application switch
 
 The navigation to another application is implemented via `window.open` (https://developer.mozilla.org/en-US/docs/Web/API/Window/open). Therefore you can control if the navigation should happen inside the current browser context `target: '_self'` or inside a new tab `target: '_blank'` (more information about target can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target))
 
 ```javascript
-  {
+{
   id: 'demo-app-2',
-    name: 'Calculator App',
-    description: 'Example description for Calculator App',
-    iconSrc: '...url to some icon',
+  name: 'Calculator App',
+  description: 'Example description for Calculator App',
+  iconSrc: '...url to some icon',
 
-    url: '...target url',
-    target: '_self', // Define the navigation context (e.g current browser context or new tab)
+  url: '...target url',
+  target: '_self', // Define the navigation context, e.g current browser context or new tab
 }
 ```
 
 <ApplicationAppSwitchPlayground height="30rem" />
 
-## Application Advanced
+## Application advanced
 
 <ApplicationAdvancedPlayground height="30rem" />
 

docs/components/application/guide.md

@@ -9,7 +9,7 @@ Application is a technical and infrastructural component without a direct visual
 
 The component itself is designed with modularity in mind. It can be seamlessly integrated with other components such as [application header](/docs/components/application-header/guide.md), [application menu](/docs/components/application-menu/guide.md), [content](/docs/components/content/guide.md) and more. This modular approach allows you to mix and match components based on your specific application requirements, providing flexibility and customization options.
 
-It's important to note that the application component focuses solely on layouting and does not dictate visual design.
+The application component primarily manages layout and application-wide behavior.
 
 ## Application example
 
@@ -39,12 +39,20 @@ We typically avoid opening the same application in multiple browser tabs. Instea
 
 ## Options
 
-- **forceBreakpoint:** Forces a specific breakpoint "lg", "md" or "sm". This can be used to force a specific application behavior that ignores the current browser viewport width.
+- **Breakpoint:** Use “lg”, “md” or “sm” to override responsive behavior regardless of the browser viewport width.
+- **Skip link target:** Set a custom destination when users should bypass the application shell and land at a more specific content boundary.
+- **Disable skip links:** Disable skip links only when you already provide an equivalent document-level bypass.
 
-## Behavior
+## Behavior in context
 
-The application component automatically adapts, by default, to three breakpoints and changes the application layout accordingly:
+- **Interaction:** The application component provides a skip-link list by default. “Skip to main content” is always the first focusable element within the application shell. “Skip to footer” follows when the application footer contains meaningful content. Skip links remain hidden until they receive keyboard focus and help users bypass repeated application content. We recommend keeping them enabled unless the page provides an equivalent bypass mechanism.
+- **Responsiveness:** The application component automatically adapts to three breakpoints and changes the application layout accordingly:
+  - `lg` for large screens (min-width 62em)
+  - `md` for medium screens (min-width 48em)
+  - `sm` for small screens (min-width 36em)
 
-- "lg" for large screens (min-width 62em)
-- "md" for medium screens (min-width 48em)
-- "sm" for small screens (min-width 36em)
+## Related
+
+- [Accessibility](../../guidelines/accessibility)
+- [WCAG 2.2: Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html)
+- [W3C Technique G1: Adding a link to main content](https://www.w3.org/WAI/WCAG22/Techniques/general/G1)

docs/guidelines/accessibility/code.md

@@ -245,6 +245,8 @@ The `navigation` role can also be used instead of the `<nav>` element:
 </div>
 ```
 
+When using the [application](../../components/application/) component, a built-in skip-link list lets keyboard and screen reader users bypass repeated application-shell content. It is enabled by default. The main link always appears first and targets the internal main region unless `skipLinkMainTargetId` identifies a usable light-DOM descendant. A footer link appears only when meaningful content is assigned to the `bottom` slot. Set `disableSkipLinks` only when the document provides an equivalent bypass mechanism.
+
 ### Lists
 
 Lists must be correctly structured to be recognized by screen readers. This means that parent (`<ul>` or `<ol>`) must be directly followed by `<li>` and no other content element is allowed to be in-between.

docs/guidelines/accessibility/overview.md

@@ -143,7 +143,7 @@ Navigation aids help users find content and understand their location within you
 - Use headings properly (`<h1>` ... `<h6>`)
 - Provide descriptive page titles
 - Provide clear link text
-- Provide links to skip blocks
+- Provide links to skip repeated blocks. [Application](../../components/application/guide.md) includes a default-on skip-link list with a main link and a conditional footer link.
 - Provide a search function
 - Reduce the use of text styles and decorations