Summary

Improve accessibility for the page base components.

Review Request #10938 — Created March 4, 2020 and submitted March 13, 2020, 9:31 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-4.0.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This updates the base template and page-level UI components (top header
bar, search, navigation, and sidebar) to better meet accessibility
standards.

We're now using more specific tags for many of thes elements:

The top bar now uses <header>
The navigation areas in the top bar use <nav>
The page sidebar uses a standard <div>, but is split into a
<header>, <div>, and <footer> for use with the mobile menu
Individual sidebars should now use <nav> or <section>, depending
on what's appropriate for that sidebar
The main content area uses <main>

Some ARIA roles and labels have been added to parts of these components
in order to provide context to screen readers.

This is not comprehensive, but does improve what we've had quite a bit.
The page now has distinct landmark areas, which can be more easily
accessed when using assistive technologies.

Testing Done

Checked that the page continues to render correctly in all major
browsers.

Inspected the landmark areas using a browser extension, verifying the
landmark trees and labels.

Also inspected using Firefox's Accessibility tree.

Commits

Summary	ID
Improve accessibility for the page base components. This updates the base template and page-level UI components (top header bar, search, navigation, and sidebar) to better meet accessibility standards. We're now using more specific tags for many of thes elements: * The top bar now uses `<header>` * The navigation areas in the top bar use `<nav>` * The page sidebar uses a standard `<div>`, but is split into a `<header>`, `<div>`, and `<footer>` for use with the mobile menu * Individual sidebars should now use `<nav>` or `<section>`, depending on what's appropriate for that sidebar * The main content area uses `<main>` Some ARIA roles and labels have been added to parts of these components in order to provide context to screen readers. This is not comprehensive, but does improve what we've had quite a bit. The page now has distinct landmark areas, which can be more easily accessed when using assistive technologies.	c835f6427775c3e340bf31ef4db7861a925eda9e

Summary

Improve accessibility for the page base components.

This updates the base template and page-level UI components (top header bar, search, navigation, and sidebar) to better meet accessibility standards. We're now using more specific tags for many of thes elements: * The top bar now uses `<header>` * The navigation areas in the top bar use `<nav>` * The page sidebar uses a standard `<div>`, but is split into a `<header>`, `<div>`, and `<footer>` for use with the mobile menu * Individual sidebars should now use `<nav>` or `<section>`, depending on what's appropriate for that sidebar * The main content area uses `<main>` Some ARIA roles and labels have been added to parts of these components in order to provide context to screen readers. This is not comprehensive, but does improve what we've had quite a bit. The page now has distinct landmark areas, which can be more easily accessed when using assistive technologies.

c835f6427775c3e340bf31ef4db7861a925eda9e

Issues

Description	From	Last Updated
I know some people are interpreting <aside> occurring on its own (i.e. outside of <article>) as suitable for something like …	david	March 13, 2020, 12:36 a.m.

flake8 passed.

JSHint passed.

reviewboard/static/rb/css/ui/page-sidebar.less (Diff revision 1)

The issue has been resolved. Show all issues

I know some people are interpreting <aside> occurring on its own (i.e. outside of <article>) as suitable for something like a page sidebar but it's not explicit in the standard and I think it's highly confusing. I think we should keep this as <div>.

chipx86 March 5, 2020, 1:52 p.m.

That used to be the case, but that's changed. Both the W3C and WHATWG specs now explicitly document and provide examples of <aside> being used to page sidebar purposes.

Did a lot of research when trying to figure out whether there was an appropriate component. Most information on <aside> is now considered legacy, in light of that change.

chipx86 March 5, 2020, 2:05 p.m.

https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-aside-element

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

Example #3: "The following extract shows how aside can be used for blogrolls and other side content on a blog:"

From what I read, <aside> used to be named <sidebar>, and was going to be used for both page sidebars and for call-out content that's tangentially related to the content around it, and they decided to prioritize the latter. There was enough usage of the former and enough use cases presented that they decided to once again have it be used for both, with the rationale being "it's related to the page as a whole" rather than "to the specific content it's next to."

This post from html5doctor briefly goes into it. There are similar articles about not using <aside> that have also since been updated.

Change Summary:


Removed usage of <aside> for page-sidebar, and in fact any landmarks.
Added landmark information to the actual rb-c-sidebar components, recommending <nav> or <section>. We'll now make these the landmarks instead, as these are going to have more context as to their purpose, helping screen readers.
Tested the landmarks and navigation with a screen reader. (There's still a lot to do here.)

Description:

		This updates the base template and page-level UI components (top header
		bar, search, navigation, and sidebar) to better meet accessibility
		standards.

		We're now using more specific tags for many of thes elements:

		The top bar now uses `<header>`
		The navigation areas in the top bar use `<nav>`
~		The page sidebar uses `<aside>`, and it's split into a `<header>`, `<nav>`, and `<footer>` for use with the mobile menu
~		The main content area uses `<main>`
	~	The page sidebar uses a standard `<div>`, but is split into a `<header>`, `<div>`, and `<footer>` for use with the mobile menu
	~	Individual sidebars should now use `<nav>` or `<section>`, depending on what's appropriate for that sidebar
	+	The main content area uses `<main>`

		Some ARIA roles and labels have been added to parts of these components
		in order to provide context to screen readers.

		This is not comprehensive, but does improve what we've had quite a bit.
		The page now has distinct landmark areas, which can be more easily
		accessed when using assistive technologies.

Commits:

	Summary	ID
	Improve accessibility for the page base components. This updates the base template and page-level UI components (top header bar, search, navigation, and sidebar) to better meet accessibility standards. We're now using more specific tags for many of thes elements: * The top bar now uses `<header>` * The navigation areas in the top bar use `<nav>` * The page sidebar uses `<aside>`, and it's split into a `<header>`, `<nav>`, and `<footer>` for use with the mobile menu * The main content area uses `<main>` Some ARIA roles and labels have been added to parts of these components in order to provide context to screen readers. This is not comprehensive, but does improve what we've had quite a bit. The page now has distinct landmark areas, which can be more easily accessed when using assistive technologies.	2b26274a6a799cebc7f9e74671e5c7fc97f6ff77
	Improve accessibility for the page base components. This updates the base template and page-level UI components (top header bar, search, navigation, and sidebar) to better meet accessibility standards. We're now using more specific tags for many of thes elements: * The top bar now uses `<header>` * The navigation areas in the top bar use `<nav>` * The page sidebar uses a standard `<div>`, but is split into a `<header>`, `<div>`, and `<footer>` for use with the mobile menu * Individual sidebars should now use `<nav>` or `<section>`, depending on what's appropriate for that sidebar * The main content area uses `<main>` Some ARIA roles and labels have been added to parts of these components in order to provide context to screen readers. This is not comprehensive, but does improve what we've had quite a bit. The page now has distinct landmark areas, which can be more easily accessed when using assistive technologies.	c835f6427775c3e340bf31ef4db7861a925eda9e

Diff:

Revision 2 (+146 -76)

Show changes

	reviewboard/search/tests.py
	reviewboard/static/rb/css/ui/page-sidebar.less
	reviewboard/static/rb/css/ui/sidebars.less
	reviewboard/templates/base.html
	reviewboard/templates/base/branding.html
	reviewboard/templates/base/headerbar.html
	reviewboard/templates/base/page_sidebar.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-4.0.x (8fbd56c)