If you are reading this article on a free codecamp post, you should see some visual indicators in different parts of the page. The header is in the upper part of the page. If you scroll down to the bottom of the page, you can see the footer section in the brown background, which is clearly separated from the body with a white background.
Freeck Kodkamp, like other websites, separated the page parts to indicate the user so that they can easily navigate the parts.
Although there are visual indicators about the sections of viewing users, people who use auxiliary technology like screen reader rely on signs to navigate through the page.
In straight terms, the marks are the spiritual regions in a web page that describe the purpose of its parts. The signs have allowed auxiliary technologies to jump among large parts of the page, just as viewing users scan scanned or menos visually scanned.
Common HTML marks include:
– Representatives of introductory content or page header.
– Navigation identifies links.– marks the main content area of the page.
– Contains complementary or relevant information.
– Represents a page or section footer.
The table of content
How to navate signs in any browser
Gen. Browser support
Most screen readers support historical navigation with shortcut keys. Here is a basic review:
| Screen reader | Os | Shortcut |
| Voice Over | Macos | Control + Option + U (To open the rotor), then the arrow keys to navigate |
| Nvda | Windows | D To go to the next historical sign |
| Jaw | Windows | R Dizziness through the letters |
| Narrator | Windows | Caps Lock + Right Arrow To move through a landmark |
| Chromoxes | Chrome OS | Search + Left/Right Arrow To move between signs |
These shortcuts allow consumers to jump among the regions. Straight material
How to navigate through signs on Mac Vice
On the Voice Over: You can easily turn to the voice over by opening the Finder and typing the voice over. Toggle the voice over.
Open router: Once you turn on the voice over, press your keyboard control+option+U. This will open the voice over rotor. You press the right and left arrows to switch through different router items that include navigate with all titles, links and signs. Below is the historical item option of the leakage router on the screenshot -free codemap article. The article is divided into navigation, search, important, article and footer elements.
- Press the bottom and top to navigate through the signs: Once you arrive at the historical items of the accessible router, you press down and up to navigate to different parts of the page. If you want to go to the footer, press the arrow below until you reach the footer and then press the inter.
Why is the importance of signs
1. Screen reader users easy navigation
Screen readers provide shortcuts to navigate through signs. Without a sign, users have to tab through each link or element, which is disappointing and time. In the example of the Free Codecamp Article, the user wants to go to the footer to find and click the link to the donation. Without a sign, the user will need to tab through the whole article to reach the footer. It takes time and is tired. The sign marks provide users with easy navigation that rely on screen readers.
2. Permanent structure in pages
When each page uses the same historical structure, users can predict where navigation menos, important content and sidebers are located. This prediction reduces the academic burden. With organizing the page in parts, you can easily guess where to go next.
3. Clear context and acquaintance
The signs are integrated Character Examples of content:
This helps consumers decide which sectors have to leave or focus on it.
How to use signs
✅ ✅ The basic historical structure
An example of a page using HTML5 marks is:
Accessible Landmark Example
Main Content Area
This is the primary content of the page.
HTML is divided into 5 historical sections, which are headers, navigation, man, one side and footer. If the screen wants to leave the reader header and go directly to the main content, they can do this by turning the leaving router and clicking on the central historical mark. The screen reader allows users to easily navigate through the page.
What is every historical mark here and how it is commonly used is an error.
The menu, site is used for wide links, or bread crumbs.
The use of real world: Go straight to the navigation to find the “Contact” page without browsing all the content.
The most important material is used once per page to wrap.
This article explains how to use landmarks...
The use of real world: Leave the header and sidebar in the past to dive into a lesson or article.
Used to enter the price of sidewalks, ads, related links, or bridge.
The use of real world: If users do not want additional content, or with helpful resources IT can jump on it.
Used to turn off content such as copyright.
The use of real world: Take quickly to support links, licensing information, or newsletter signup.
Used for introductory material, such as logo or search bar.
The use of real world: Access the search input quickly or go back to the homepage.
The final views
The marks are not just a capable bonus – they are the main part of the good UX. By properly implementing the signs, you make your site easier to visit, comply with the WCAG, and create more forecast structure for each one.