web应用程序安全性测试_Web应用程序导航菜单的可访问性

web应用程序安全性测试

A few years ago when I started my journey in the field of frontend engineering at that time I was not aware of what does web application accessibility means. During those days the main focus was to develop the performance efficient and responsive frontend web application. As I started developing on a public-facing web application at that time I got the real importance of web accessibility. So let’s understand what does web accessibility means.

几年前，当时我开始从事前端工程领域的工作时，我并不了解Web应用程序可访问性的含义。 在那些日子里，主要重点是开发性能高效且响应Swift的前端Web应用程序。 那时，当我开始开发面向公众的Web应用程序时，我真正意识到了Web可访问性。 因此，让我们了解网络可访问性的含义。

Web accessibility is also important for people with disabilities and without disabilities. Let’s understand it by examples.

Web访问对残疾人和非残疾人也很重要。 让我们通过示例来了解它。

• people using mobile phones, smartwatches, smart TVs, and other devices with small screens, different input modes, etc.
  使用手机，智能手表，智能电视以及其他具有小屏幕，不同输入模式等的设备的人。
• older people with changing abilities due to aging.
  由于衰老而能力不断变化的老年人。
• people with “temporary disabilities” such as a broken arm or lost glasses.
  患有“暂时性残疾”的人，例如胳膊折断或眼镜丢失。
• people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to the audio.
  有“处境限制”的人，例如在明亮的阳光下或无法听音频的环境中。
• people using a slow Internet connection, or who have limited or expensive bandwidth.
  使用慢速Internet连接的人，或者带宽有限或昂贵的人。

In today’s world, most of the developers don’t understand the importance of Accessibility. Top-notch product based companies who develop public-facing applications always care about the accessibility of their web applications. as they need to deal with a large user base and which include people with various disabilities.

在当今世界，大多数开发人员都不了解辅助功能的重要性。 开发面向公众的应用程序的基于顶级产品的公司始终关心其Web应用程序的可访问性。 因为他们需要处理庞大的用户群，其中包括各种残障人士。

For example, If you develop an Online Food delivery application with good UI design but if a disabled hungry user can’t place an order from it then it’s not good for your business as well as for company reputation.

例如，如果您开发具有良好UI设计的Online Food Delivery应用程序，但如果饥饿的残障用户无法通过它下订单，那么这对您的业务和公司声誉都不利。

Now let’s learn how to improve or make navigation menu accessible to users.

现在让我们学习如何改善导航菜单或使用户可以访问导航菜单。

导航菜单可访问性的重要性： (Importance of Accessibility of Navigation Menu:)

The navigation menu is always one of the critical parts of the web application as it defines the overall structure of web applications with essential functionality. The confusing and unaccessible menu leads to the early exit of the user.

导航菜单始终是Web应用程序的关键部分之一，因为它定义了具有基本功能的Web应用程序的整体结构。 令人困惑且无法访问的菜单导致用户提前退出。

• Screen reader and keyboard users benefit from a keyboard.

  屏幕阅读器和键盘用户可以从键盘中受益。

• Users with fine motor difficulties and touch screen users require larger targets to click or tap on.

  行动不便的用户和触摸屏用户需要较大的目标才能单击或点击。

People with limited attention or short-term memory benefit from clear and distinct menus with easily identifiable states, such as the current page.

注意力有限或短期记忆的人会从清晰易懂的菜单中受益，这些菜单具有易于识别的状态，例如当前页面。

To make a menu accessible to users we have to concentrate on a few important factors about navigation menus like Structure, Stylings, Fly-out menus, and Application. Let’s see how they play an important role to make the menu accessible.

为了使用户可以访问菜单，我们必须专注于一些有关导航菜单的重要因素，例如“ 结构”，“样式”，“弹出菜单”和“应用程序” 。 让我们看看它们如何在使菜单可访问性方面发挥重要作用。

菜单结构： (Structure of Menu:)

1. Write the menu code always inside the navigation <nav> tag.

   始终在导航<nav>标记内编写菜单代码。

2. Wrap Menu Items in the ordered list <ol>when you need in a specific order, otherwise use Unordered list <ul>.

   当您按特定顺序需要时，将菜单项包装在有序列表 <ol>中，否则使用无序列表<ul> 。

3. Use ARIA Labels as per the use cases.

   根据用例使用ARIA标签 。

   Use

   用

   aria-labelledby to refer to an existing element by its selector id. Usearia-label approach if the label should not appear visually on the page. To make things clear please refer to the following 2 code snippets. See the following examples of both attributes:

   aria-labelledby通过其选择器id引用现有元素。 如果标签不应在页面上直观显示，请使用aria-label方法。 为了清楚起见，请参考以下2个代码段。 请参阅以下两个属性的示例：

4. To Indicate the current item there are 2 ways to deal with these issues:

4.要指出当前项目，有两种方法可以解决这些问题：

Use Invisible Text: Use an invisible label that is read aloud to screen reader users to mark the current item, and Remove the anchor (<a>), so users cannot interact with the current item.

使用不可见文本：使用大声朗读给屏幕阅读器用户的不可见标签来标记当前项目，然后移除锚点( <a> )，以使用户无法与当前项目进行交互。

Use the aria-current="page": attribute to indicate the current page in the menu. This technique is useful in the scenario when removal if an anchor tag is needed.

使用 aria-current="page":属性指示菜单中的当前页面。 如果需要锚标记，则在删除时该技术很有用。

样式： (Stylings:)

While styling the menu we need to take care of the following points:

在设置菜单样式时，我们需要注意以下几点：

1. Location: Display the menu as per user expected location for example Generally In the desktop application we display the menu horizontally and on Mobile application display it in Sidebar because of screen restrictions.

   位置 ：例如，根据用户期望的位置显示菜单。通常，由于屏幕限制，在桌面应用程序中，我们水平显示菜单，而在移动应用程序中，则在侧边栏中显示菜单。

2. Identification: Due to poorly design menu can lead to the early exit of the user from your navigation. First Decide menu item for your application which you need to display on top. and then their hierarchies to design sub-menu items.

   识别 ：由于设计不佳，菜单可能会导致用户提前退出导航。 您的应用程序的“第一个决定”菜单项，需要在顶部显示。 然后按其层次结构设计子菜单项。

3. Readability: Ensure appropriate sizing of menus and menu items to fit all text. The menu size should also be adaptive to varying text sizes. Try to avoid Upper case letters, Linebreaks, hypertension as these things make the text difficult to read.

   可读性 ：确保菜单和菜单项的大小适当以适合所有文本。 菜单大小还应该适应于各种文本大小。 尽量避免使用大写字母，换行符，高血压，因为这些因素会使文本难以阅读。

4. Size: Provide sufficient white space, like padding, to support people with reduced dexterity and small touch screens on mobile devices. Also, make sure that menu items don’t overlap when screen size changes.

   尺寸 ：提供足够的白色空间(例如填充)，以支持行动不便的人和移动设备上的小触摸屏。 另外，请确保屏幕尺寸更改时菜单项不会重叠。

5. States of Menu: Display the menu items state as per the user actions. Typically menu always comes in any of the following three states.

   菜单的状态 ：显示菜单项状态按照用户的操作。 通常，菜单始终处于以下三种状态中的任何一种。

A) Hover & Focus state: Changing the color schemes of menu items on user actions like hover or on focus increases the interactivity of the menu items.

A)悬停和焦点状态：在用户动作(如悬停或焦点对准)上更改菜单项的配色方案会增加菜单项的交互性。

B) Active state: When you click on a menu item that time for a moment the color of that item changes that is nothing but the active state. A menu item can be activated by clicking on it or by when the user focuses on it & hit the enter key.

B)活动状态：当您单击菜单项时，该项目的颜色会暂时改变，除了活动状态外什么都没有。 可以通过单击菜单项或当用户将其聚焦并按Enter键来激活菜单项。

C) Current State: You can use 2 ways that are posted in this article for the HTML structure of the current item. In addition to this, you can invert the color scheme or use different color schemes from the already existing schemes.

C)当前状态：对于当前项目HTML结构，可以使用本文中发布的两种方法。 除此之外，您还可以反转颜色方案或使用与现有方案不同的颜色方案。

飞出菜单(下拉菜单)： (Fly-out Menu (Dropdown Menus):)

A)指示子菜单： (A) Indicate submenus:)

Use fly out menus to give an overview of a web site’s page hierarchy. It allows the website to show the main category of the menus on the web site’s header and under the main category display the subcategory of the menu.

使用弹出菜单可以概述网站的页面层次结构。 它允许网站在网站标题上显示菜单的主要类别，并在主要类别下显示菜单的子类别。

WAI-ARIA Markup to identify submenu to screenreaders:

WAI-ARIA标记以标识屏幕阅读器的子菜单：

• aria-haspopup="true" - to declare that a menu item has a submenu.

  aria-haspopup="true" -声明菜单项具有子菜单。

• aria-expanded="false" - to declare that the submenu is hidden currently.

  aria-expanded="false" -声明当前子菜单处于隐藏状态。

WAI-ARIA Markup to identify submenu to screenreaders

WAI-ARIA标记以标识屏幕阅读器的子菜单

WAI-ARIA Markup WAI-ARIA标记

B)飞出功能： (B) Fly-out functionality:)

the behavior of Fly out functionality will be a little different fro Mouse user and Keyboard users. CSS and JS are more than enough to implement this functionality. Fly out functionality is not use case for touch screen device

飞出功能的行为与鼠标用户和键盘用户有所不同。 CSS和JS足以实现此功能。 飞出功能不是触摸屏设备的用例

Mouse users:

鼠标用户：

In the case of a Mouse user, we have delayed the closing of the submenu. people having reduced dexterity it is difficult to open the menu on the mouse pointer movement and close it suddenly.

对于鼠标用户，我们已经延迟了子菜单的关闭。 灵活性降低的人很难打开并移动鼠标指针上的菜单。

Menu fly out functionality for application menu using CSS

使用CSS的应用程序菜单的菜单弹出功能

Delay for the closing of Dropdown Menu for Mouse users Checks the following example for this functionality. For this refer the same HTML code given for Point (A) Indicate submenus. and for JS and CSS refer below two code snippets.

鼠标用户关闭下拉菜单的延迟请检查以下示例以了解此功能。 为此，请参考为点( A)指示子菜单提供的相同HTML代码。 对于JS和CSS，请参考下面的两个代码段。

CSS for Delayed Flyout Functionality

延迟弹出功能CSS

JS for Delayed Flyout Functionality

JS具有延迟弹出功能

键盘用户： (Keyboard Users:)

Ideally, submenu should not be open automatically when the user is navigating through the main menu items, instead of that, it can open when the user perform particular action like click on the dropdown main menu item.

理想情况下，子菜单不应在用户浏览主菜单项时自动打开，而是在用户执行特定操作(例如单击下拉主菜单项)时可以打开。

There are 2 approaches to deal with these situations:

有两种方法可以处理这些情况：

A) Use the main menu item as a toggle on click action:

A)使用主菜单项作为点击动作的切换：

In this approach when the user is navigation through the keyboard on a menu item that time if he focuses on a menu item(parent menu item) which contains dropdown and after that, he hit enter key or down arrow key that time open the dropdown menu. This approach is not useful when your main menu item contains a link for any content or any other page.

在这种方法中，当用户通过菜单项上的键盘导航时，如果他专注于包含下拉菜单的菜单项(父菜单项)，然后单击回车键或向下箭头键，则打开下拉菜单。 当您的主菜单项包含任何内容或任何其他页面的链接时，此方法没有用。

B) Use button to toggle:

B)使用按钮切换：

The drawback of Approach A is that if we need to perform a specific function on the main menu item like opening the new page when a user clicks on it (By Mouse click or pressing enter after focusing on it by tab key) then we can’t open a submenu.

方法A的缺点是，如果我们需要在主菜单项上执行特定功能，例如在用户单击新页时打开新页(通过单击鼠标或单击Tab键将其聚焦后按Enter)，那么我们可以打开一个子菜单。

So to solve the above problem we can use the button as a visual indicator which indicates the user that particular main menu item has a submenu. another advantage of using this approach is that on touch screen devices it helps the user to know that submenu is present.

因此，为了解决上述问题，我们可以将按钮用作可视指示器，以向用户指示特定的主菜单项具有子菜单。 使用此方法的另一个优点是，在触摸屏设备上，它可以帮助用户了解子菜单的存在。

应用程序菜单： (Application Menu:)

Following WAI-ARIA attributes and roles are needed to assign a menu for the semantics of the menu.

需要以下WAI-ARIA属性和角色来为菜单的语义分配菜单。

WAI-ARIA roles:

WAI-ARIA角色：

• menubar: Denotes a menu bar.

  menubar ：表示菜单栏。

• menu: Denotes a set of links. it is used for the fly-out menus.

  menu ：表示一组链接。 它用于弹出菜单。

• menuitem: Denotes an individual menu item.

  menuitem ：表示单个菜单项。

• separator: Denotes a separator between two groups of menu items in a menu.

  separator ：表示菜单中两组菜单项之间的分隔符。

WAI-ARIA roles WAI-ARIA角色

功能： (Functionality:)

Adding the WAI-ARIA roles does not automatically enable the menu’s functionality or keyboard behavior.

添加WAI-ARIA的角色并不会自动使菜单的功能或键盘行为。

In many cases, to provide the keyboard support we need to write additional JS. For example, as mentioned above to implement flyout functionality we need to write JS for both approaches of Keyboard users.

在许多情况下，要提供键盘支持，我们需要编写其他JS。 例如，如上所述，要实现弹出功能，我们需要为两种键盘用户方法编写JS。

Following is the classical keyboard behavior which we need while navigating through the menu items and of-course to achieve this we need JavaScript too :)

以下是我们在导航菜单项和过程时所需的经典键盘行为，为了实现这一点，我们也需要JavaScript :)

Keyboard Behaviour

键盘行为

1. Left and right keys are used to iterate through the top-level items.
   左右键用于迭代顶层项目。

2. Up and down arrows are used to navigate submenus.

2.向上和向下箭头用于浏览子菜单。

3. Pressing the tab key focuses on the next item after the menu instead of the next menu item.

3.按Tab键将焦点放在菜单后的下一个项目上，而不是下一个菜单项上。

For a working example of Navigation menu with source code, Please Refer to this link https://www.w3.org/WAI/tutorials/menus/application-menus-code/

有关带有源代码的导航菜单的工作示例，请参考此链接https://www.w3.org/WAI/tutorials/menus/application-menus-code/

翻译自: https://uxdesign.cc/accessibility-of-the-navigation-menu-8a915e4d3e51

web应用程序安全性测试