[A11Y] [Medium] Missing skip link and background image accessibility #38

New issue

Open

opened 2026-02-19 20:08:29 +00:00 by continue[bot] · 0 comments

continue[bot] commented

2026-02-19 20:08:29 +00:00

(Migrated from github.com)

WCAG Level: A
Severity: Medium
Category: Skip Links & Navigation, Missing Alt Text

Issue Description

The site is missing a "Skip to main content" link, which is a critical accessibility feature for keyboard users. Additionally, the cover block background image lacks descriptive alternative text.

User Impact

Affected Users: Keyboard users, Screen reader users
Severity: Keyboard users must tab through all navigation elements to reach main content. Screen reader users may not understand the context of the background image.

Violations Found

File: `content/en/_index.md`

Lines: 4-12

{{< blocks/cover title="DeployView Limited" image_anchor="top" height="full" >}}
<a class="btn btn-lg btn-primary me-3 mb-4" href="https://property.deployview.com">
  Real Estate
</a>
...
{{< /blocks/cover >}}

Issue:

No skip link present at the beginning of the page
The blocks/cover uses featured-background.jpg but no alt text description is provided for the background image context

Recommended Fixes

1. Add Skip Link
The Docsy theme should include a skip link. Verify the theme configuration or add a custom skip link partial.

2. Add Background Image Context
Consider adding an aria-label or descriptive text to the cover block to provide context for the background image.

{{< blocks/cover title="DeployView Limited" image_anchor="top" height="full" >}}
<!-- Add descriptive context for the background if meaningful -->
<span class="visually-hidden">Corporate office building background</span>
...
{{< /blocks/cover >}}

Additional Issues Found

Empty Content Sections in content/en/_index.md:

Lines 15-17: Empty blocks/lead section
Lines 20-22: Empty blocks/section section
Lines 25-28: Empty blocks/section section
Lines 31-34: Empty blocks/section section

Empty sections may create confusing navigation landmarks for screen reader users.

Testing Instructions

Use keyboard (Tab key) to navigate from page load - verify skip link appears and works
Test with NVDA/VoiceOver to verify background image context is communicated
Run Lighthouse accessibility audit
Verify focus indicators are visible on all interactive elements

Resources

Acceptance Criteria

Skip link is present and functional
Background image has appropriate context/alt text
Empty sections are either populated or removed
Tested with screen reader (NVDA/VoiceOver)
Keyboard navigation works as expected
Lighthouse accessibility score reviewed

## Accessibility Issue: Missing Skip Link and Background Image Accessibility **WCAG Level:** A **Severity:** Medium **Category:** Skip Links & Navigation, Missing Alt Text ### Issue Description The site is missing a "Skip to main content" link, which is a critical accessibility feature for keyboard users. Additionally, the cover block background image lacks descriptive alternative text. ### User Impact - **Affected Users:** Keyboard users, Screen reader users - **Severity:** Keyboard users must tab through all navigation elements to reach main content. Screen reader users may not understand the context of the background image. ### Violations Found #### File: `content/en/_index.md` **Lines:** 4-12 ```markdown {{< blocks/cover title="DeployView Limited" image_anchor="top" height="full" >}} <a class="btn btn-lg btn-primary me-3 mb-4" href="https://property.deployview.com"> Real Estate </a> ... {{< /blocks/cover >}} ``` **Issue:** 1. No skip link present at the beginning of the page 2. The `blocks/cover` uses `featured-background.jpg` but no alt text description is provided for the background image context --- ### Recommended Fixes **1. Add Skip Link** The Docsy theme should include a skip link. Verify the theme configuration or add a custom skip link partial. **2. Add Background Image Context** Consider adding an `aria-label` or descriptive text to the cover block to provide context for the background image. ```markdown {{< blocks/cover title="DeployView Limited" image_anchor="top" height="full" >}}  <span class="visually-hidden">Corporate office building background</span> ... {{< /blocks/cover >}} ``` --- ### Additional Issues Found **Empty Content Sections in `content/en/_index.md`:** - Lines 15-17: Empty `blocks/lead` section - Lines 20-22: Empty `blocks/section` section - Lines 25-28: Empty `blocks/section` section - Lines 31-34: Empty `blocks/section` section Empty sections may create confusing navigation landmarks for screen reader users. ### Testing Instructions 1. Use keyboard (Tab key) to navigate from page load - verify skip link appears and works 2. Test with NVDA/VoiceOver to verify background image context is communicated 3. Run Lighthouse accessibility audit 4. Verify focus indicators are visible on all interactive elements ### Resources - [WCAG 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html) - [WebAIM Skip Navigation Links](https://webaim.org/techniques/skipnav/) - [MDN ARIA for Images](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role) ### Acceptance Criteria - [ ] Skip link is present and functional - [ ] Background image has appropriate context/alt text - [ ] Empty sections are either populated or removed - [ ] Tested with screen reader (NVDA/VoiceOver) - [ ] Keyboard navigation works as expected - [ ] Lighthouse accessibility score reviewed ---