Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use the Landmark of HTML5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What is Landmark?

Landmark is a way to represent the organizational structure of a web page. Usually a web page can be cut into several large blocks

Take a video website as an example, at the top of the page is a banner, on the left is a navigation bar, and on the right is a video. Web pages can be segmented into different functional areas in this way. Of course, it can also be divided recursively in a functional area, so let's not expand it here.

For a visually impaired person, he cannot understand the structural information of the web page from the visual point of view like ordinary people, so it is necessary for the web developer to plan the structure of the web page in advance, write the structural information in the HTML code, and finally express the structural information of the web page through screen reading software.

And landmark is the bridge between web page structure information and screen reading software. Web developers mark the area of the page through landmark, and screen-reading software reads landmark information and conveys it to people with visual impairment.

How to use Landmark

In fact, the concept of HTML5 landmark existed before landmark.

There are several kinds of main,navigation,complementary,banner,contentinfo,form,region,search for landmark. A main landmark is defined by using it.

Some brand new tags are defined in HTML5, and they are given implicit landmark semantics.

There are the following main types of HTML5 Landmark

HTML ElementLandmark Rolemainnavigationcomplementarybannercontentinfoformregion

These tags themselves imply the meaning of landmark, that is to say, they are completely equivalent.

There is no dedicated HTML tag defined for search landmark, which is usually implemented.

That is, in the web page referenced in the previous section

For area 1, you should put all the content in one, identifying that part as banner

For area 2, you should put all the content into one, identifying that part as the navigation bar

For area 3, you should put all the content into one, identifying that part is the main content of the page

The screen reader software generates a series of jump links to help visually impaired people determine the structure of the web page and quickly jump to the parts they need.

Prior to HTML5, new tags introduced by landmark,HTML5 could only be defined through the role attribute to simplify markup while maintaining accessibility. However, not every user's assistive tools support the latest standards, so many tutorials recommend writing methods that are compatible with both standards. The W3C standard discourages the use of role attributes when they already contain implicit semantics, because semantic conflicts between the two can lead to unpredictable performance.

Distinguish the same type of Landmark

Sometimes there may be multiple navigation bars on the page, each with different functions. For example, an e-commerce site has a leading navigation to jump to different pages such as shopping carts, favorites, and a product navigation to jump to electronics and baby products. To tell the difference between the two, you need to use the aria-label or aria-labelledby attribute here.

Home shopping cart favorites, baby products, electronic products, sports products

In this way, the screen reading software will generate the following two links respectively.

Navigation, leading navigation

Product navigation

This distinguishes the different landmark.

Use screen reading software to read Landmark

In order to better understand landmark, I tried to use screen reading software to test landmark on web pages. Here I use the narrator that comes with the Windows system.

Press Caps Lock + F5 to display all the landmark on the page.

Press Caps Lock + N and you can see that the narrator's cursor moves to the main content section of the page.

Use D or Shift + D to switch between landmark and read out the information of each landmark at the same time.

Here you can see that there is a search landmark, which is inside the banner landmark, which is the case of landmark nesting. There are a series of rules for landmark nesting that interested readers can learn for themselves.

This is the end of the content of "how to use the Landmark of HTML5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.