Question

我创建了一个隐藏/显示的分步组件，如果您单击步骤编号，它会显示内容。

它可以按预期工作，但是我在确保其可访问性方面遇到困难。

即使它们是<a>标签，我似乎也无法使用键盘在1-4个链接上进行切换。

<div class="progress-steps">
<a class="showSingle" target="1"></a>
<a class="showSingle" target="2"></a>
<a class="showSingle" target="3"></a>
<a class="showSingle" target="4"></a>
</div>

我还想确保用户也可以通过键盘激活隐藏的内容。

<section id="progress-content" class="hide">
<div id="div1" class="targetDiv"><h3>Initiation</h3>
  <p><strong>Fill out the </strong><a class="bold-link" href="https://app.smartsheet.com/b/form?EQBCT=b6923f4b9dc347f384936e342e5d2b58" target="_blank" rel="noopener">Project Request Form</a>: Each request goes through a review process to determine if the project is ready to be worked on.</p>
  </div>
<div id="div2" class="targetDiv"><h3>Planning</h3>
  <p><strong>Kickoff</strong>: After approval, we will schedule a meeting between all involved parties to discuss the scope and direction of the project.</p>
  </div>
<div id="div3" class="targetDiv"><h3>Execution</h3>
  <p><strong>We get to work!</strong> The plan will be carried out — involving all key stakeholders. The final product will be tested and implemented.</p>
  </div>
<div id="div4" class="targetDiv"><h3>Assessment</h3>
  <p><strong>Metrics for Success</strong>: After completion of the project, we will obtain sign-off of deliverables and revisit in 6-12 months to ensure stakeholders needs are met.</p>
  </div>
</section>

我尝试使用:focus并将role="tab" aria-selected="true"插入<a>标签中。

这是我的密码笔：https://codepen.io/ckatz/pen/gJmgbq

我想确保使用键盘的任何人都可以有效地使用此组件。

Answer 1

我可以通过向每个链接添加tabindex="0"来进行制表。这包括在浏览网站时正常流程中的标签链接。

我还了解到，您实际上不应该对所有导航链接使用aria-selected="true"，仅对当前选择的导航链接使用<div class="progress-steps"> <a class="showSingle" target="1" role="tab" tabindex="0" aria-controls="nils-tab"></a> <a class="showSingle" target="2" role="tab" tabindex="0" aria-controls="nils-tab"></a> <a class="showSingle" target="3" role="tab" tabindex="0" aria-controls="nils-tab"></a> <a class="showSingle" target="4" role="tab" tabindex="0" aria-controls="nils-tab"></a> </div>。在此处了解更多信息：stefanjudis.com/blog/aria-selected-and-when-to-use-it

因此，步骤选择器将改为：

def list
pipeline {
    agent none
    options {buildDiscarder(logRotator(daysToKeepStr: '7', numToKeepStr: '1'))}
    stages {
        stage('Create List') {
            agent {node 'nodename'}
            steps {
                script {
                    // you may create your list here, lets say reading from a file after checkout
                    list = ["Test-1", "Test-2", "Test-3", "Test-4", "Test-5"]
                }
            }
            post {
                cleanup {
                    cleanWs()
                }
            }
        }
        stage('Dynamic Stages') {
            agent {node 'nodename'}
            steps {
                script {
                    for(int i=0; i < list.size(); i++) {
                        stage(list[i]){
                            echo "Element: $i"
                        }
                    }
                }
            }
            post {
                cleanup {
                    cleanWs()
                }
            }
        }
    }
}

尽管我无法选择带有空格或输入的焦点元素。我将需要做更多的研究才能弄清楚这是怎么回事！

辅助功能问题-链接将不会显示或隐藏隐藏的内容

1 个答案: