Adding ARIA landmark roles to page's sections

[ecureuill]

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

---

Landmarks help users understand a web page's structure and organization. Adding ARIA landmark roles to a page's sections takes structural information that is conveyed visually and represents it programmatically. Screen readers and other assistive technologies, like browser extensions, can use this information to enable or enhance navigation.

Landmarks are not required, but if you use them, you must use them correctly. Also, if you add Landmarks, you must have a main Landmark.

---

• [ ] A landmark region must have the role that best describes its content.
• [ ] The main landmark must contain all of the page's primary content.
• [ ] The main landmark must not contain any blocks of content that repeat across pages.
• [ ] #87

  Test Procedure

  Landmark roles

1. Examine each element with a landmark role.
2. Examine whether the landmark role attribute is applied to the section of the page that corresponds with that role. (i.e., the "navigation" role is applied to a navigation section, the "main" role is applied to where the main content begins.)
   • banner: A region that contains the prime heading or internal title of a page.
   • complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
   • contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
   • form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
   • main: Main content in a document. In almost all cases a page will have only one role="main".
   • navigation: A collection of links suitable for use when navigating the document or related documents.
   • search: The search tool of a Web document.
   • application: A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)

Expected Results: 2 is true.

Example :x: This div functions as a banner, but it has the navigation role.

<div role="navigation">
A logo image and site name
</div>

:heavy_check_mark: The div now has the banner role.

<div role="banner"> A logo image and site name </div>

Primary content

In the target page, examine the main landmark to verify that it contains all of the page's primary content.

Example :x: Some of the page's primary content is not contained within the main landmark.

<header>…</header>
<nav>…</nav>
<main>Some of the page's primary content is here</main>
<div>Some of the page's primary content is here</div>
<footer>…</footer>

:heavy_check_mark: All of the page's primary content is within the main landmark.

<header>…</header>
<nav>…</nav>
<main>Some of the page's primary content is here
<div>Some of the page's primary content is here</div>
</main>
<footer>…</footer>

Repetitive content

1. In the target page, examine the main landmark to verify that it does not contain any blocks of content that repeat across pages (e.g., site-wide navigation links).

Example :x: Site navigation links, which appear on every page, are contained within the main landmark.

<header>…</header>
<main>
<nav>Site navigation links are
here</nav>
<div>Primary content starts
here</div>
</main>
<footer>…</footer>

:heavy_check_mark: The site navigation links precede the main landmark.

<header>…</header>
<nav>Site navigation links are here
</nav>
<main>
<div>Primary content starts here</div>
</main>
<footer>…</footer>

Resources

• Semantic html5 guide
• For more information about how to use ARIA landmarks, see WAI-ARIA Authoring Practices 1.1: Landmark Regions, A11Y-101 Landmarks

[github-actions[bot]]

This Feature Request was accepted, but are not going to be implemented in next release.

[ecureuill]

Failures

• [ ] due to include repetitive content in main landmark