下巴可滚动内容问题

发布于 2025-02-08 04:29:56 字数 1913 浏览 4 评论 0原文

我正在构建一个可访问的网站，在该网站上我们有一个网页，该网页由图像拍摄网页的上半部分，而网站的下半部分是一个可滚动的区域，我们可以在其中浏览网站并使用它。当我使用下巴和箭头浏览网站时，它在导航时完美地滚动内容，但是当我尝试在页面顶部导航时，它无法正确滚动，JAWS专注于静态图像背后的元素在顶部。如何确保在屏幕上而不是在图像后面看到聚焦内容？示例图像供参考。

编辑1：我尝试添加tabindex ='0'属性，并通过在 https://www.w.org/wai/standards-guidelines/act/rules/0ssw9k/proposed ，但对我没有起作用。

以下是示例代码和页面的链接，我们可以在其中测试下颚并通过箭头键导航

https://www.ww.w.ww.ww.3.org/wai/wai/wai/content--content-lyllf，930.709. 142418751A45E6DD025D5D294591.HTML

<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0">
    <h1>WCAG 2.1 Abstract</h1>
    <p>
        Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more
        accessible. Following these guidelines will make content more accessible to a wider range of people with
        disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
        speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
        and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
        address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
        will also often make Web content more usable to users in general.
    </p>
</section>

原文

I'm working on building a accessible website in which we have a web page where upper half part of web page is taken by an image and lower half part of website is a scrollable region where we can navigate through website and use it.
When I navigate through website using JAWS and arrowkeys it scrolls the content perfectly while navigating down, but when I try to navigate back at the top of the page, it doesn't scrolls properly and JAWS focuses on the elements which are behind the static image at the top.
How to make sure that the focused content is visible on the screen and not behind the image?
Sample Image for reference.

Edit 1: I tried adding tabindex='0' attribute and also by adding anchor tags inside the scrollable content as suggested in https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed but it didn't worked for me.

Below is the sample code and the link for the page where we can test the issue with JAWS and navigating through arrow keys

https://www.w3.org/WAI/content-assets/wcag-act-rules/testcases/0ssw9k/89302c4f9eaf142418751a45e6dd025d5d294591.html

<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0">
    <h1>WCAG 2.1 Abstract</h1>
    <p>
        Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more
        accessible. Following these guidelines will make content more accessible to a wider range of people with
        disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
        speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
        and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
        address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
        will also often make Web content more usable to users in general.
    </p>
</section>

分享到QQ

分享到微博