How to add and test skip links

Many users navigate websites using the keyboard only or with screen readers. These users need a way to skip directly to the main content of the page.

If your theme has a navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site., a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. / banner area with content, or secondary sidebars before users reach the main content, your theme is required to include a skip link.

Even if you have never used a skip link in your theme before, you may have seen this behavior in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. or on other websites.

For example, if you navigate to the top of this page, and press the Tab key, you will see a skip link:

A button element with the text "Skip to toolbar" in high contrast.

Clicking the link or using the Enter key will bring you to the target area.

This is the first focusable element on this page, and this is what you need to recreate.

And as a reviewer, you have already tested everything you need to see if a theme passes this requirement.

Lets look at one more example. Below is an animation of the skip link used in Twenty Nineteen. First, I place the cursor in the adress field and press Tab. When the skip link is focused, I press Enter, and focus is moved to the element with the content ID:

An animation of the skip link used in the Twenty Nineteen theme. When the skip link is used, the focus moves to the container that holds the main content.

A minimally conforming skip link must:

  • Be the first focusable element perceived by a user via screen reader or keyboard navigation.
  • Be visible when keyboard focus moves to the link.
  • Move focus to the main content area of the page when activated.

We recommend that you use the same styling for the link that is used by WordPress core.
Using a small font-size for the link, or a color contrast that is too low, may render the skip link useless to the users that it is intended to help (Note that despite it’s style, this is not a button).

Code examples:

Place the link at the top of your page, for example below wp_body_open in header.php:

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content">
<?php _e( 'Skip to content', 'twentynineteen' ); ?></a>

Remember to adjust the link target to make it work for your theme.

CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.:

/* Accessibility */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.

There are known bugs with skip links, so if you want to add workarounds, this is how the problem is solved in the default theme:

/**
 * Fix skip link focus in IE11.
 *
 * This does not enqueue the script because it is tiny and because it is only for IE11,
 * thus it does not warrant having an entire dedicated blocking script being loaded.
 *
 * @link https://git.io/vWdr2
 */
function twentynineteen_skip_link_focus_fix() {
	// The following is minified via `terser --compress --mangle -- js/skip-link-focus-fix.js`.
	?>
	<script>
	/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
	</script>
	<?php
}
add_action( 'wp_print_footer_scripts', 'twentynineteen_skip_link_focus_fix' );

Read more about skip links:

Please read the following documentation from the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team: WordPress Accessibility – Development best practices -Skip Links https://make.wordpress.org/accessibility/handbook/markup/skip-links/

https://make.wordpress.org/themes/handbook/review/accessibility/required/#skip-links

Techniques for WCAG 2.0 -G1: Adding a link at the top of each page that goes directly to the main content area

Meeting notes from the 9th of July 2019

The meeting started with a quick round of updates. There is still no resolution about the trusted authors (TA) issues.
After that we started discussing the proposed meeting agendas.

The following is the recap of the meeting, you can read the meeting transcript in the slack archives (a Slack account is required).

Docs team discussion about the theme developer handbook

There was a discussion on the #docs slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel about handover of the theme developer handbook to the TRT.
The idea is to have a single responsible person from the TRT team that will take care of the developer handbook for the themes. This means updating it with new requirements and keeping it up to date in general.

It was agreed that the person in charge of the theme developer handbook will be @acalfieri, who is an experienced reviewer and has been an active member of TRT for a long time.
Of course, if there will be interested volunteers to help you can always ask in the slack channel.

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) (a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)) requirements

In the accessibility team meeting it was proposed to add some of the requirements from the themes which use accessibility-ready tag to standard themes in the repository.

The emphasis is on making the themes easier to use, especially for the people with certain types of disabilities.
The proposal included incorporating the keyboard navigation, control, skip link, and form labelling requirements from the existing accessibility-ready requirements.

This is the first step in making all themes in wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ repository accessible.

The changed requirement wouldn’t encompass all the accessibility-ready requirements to be present on the standard themes, nor would it automatically make them accessibility-ready, but by incorporating one by one requirements, through longer time period, the idea is to encourage theme authors to write accessible themes out of the box.

It was agreed that the skip links requirement from the accessibility part will be moved to the required section of the review handbook, and that the team will implement new a11y requirement every two months. This will give theme authors enough time to make their themes more accessible.

Removing Demo Content from the theme

It was already agreed with removing demo content files (xml, json or some other format) from the themes. But there needs to be alternative to that.

It was agreed that the requirement should be updated with following to make it more clear:

Importing or Downloading:


Themes are not allowed to import content to a user’s site.
Themes are not allowed to link directly to an XML, JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., ZIP, or other file for direct download or import.
Themes are not allowed to bundle demo content via an XML, JSON, ZIP, or other file.

Also, a meeting will be held in the #design slack channel about updating the wordpress.org previewer content which can then be used as a starting content for the developers to develop their themes.

Theme generated notices

All the notifications generated by a theme should use the admin_notices APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. and follow the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. design pattern. They must be dismissible. Everything wrapped in the admin notice needs to follow Core UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. design for the notices.

This will be a requirement on all the themes.

Open floor discussions

There was a mention of the tool that can help reviewers review a theme – WPTRT-Cloud-Launcher. It’s a Chrome extension that launches a cloud instance that comes pre-configured with the theme and theme snifferTheme Sniffer Theme Sniffer is a plugin utilizing custom sniffs for PHP_CodeSniffer that statically analyzes your theme and ensures that it adheres to WordPress coding conventions, as well as checking your code against PHP version compatibility. The plugin is available from the plugin directory and Github. Themes are not required to pass the Theme Sniffer scan without warnings or errors to be included in the theme directory./check plugins installed.

#meeting, #meeting-notes, #trt

Theme Review Team Meeting Agenda for July 09, 2019

Theme review team conducts a meeting on the second and fourth Tuesday of the month. We usually have fixed agendas for the fourth Tuesday meeting. Because of numbers of agendas to discuss, we are going to discuss some agendas on second Tuesday as well.

We have several topic to discuss. Hence, we encourage all members and anyone interested to attend.

Channel: #themereview | Time: Tuesday, 09th July 2019, 17:00 UTC

Agenda for Discussion

  1. Weekly Updates
  2. Discussion with the #docs team about managing and taking over the theme handbook.
  3. Accessibility requirements – https://make.wordpress.org/accessibility/2019/06/30/accessibility-team-meeting-notes-for-28-june-2019/
  4. Removing Demo Content from the theme – We already agreed with this on removing from the theme. What are the alternative solutions that we can give to the authors instead of it?
  5. All the notifications generated by a theme should use the admin_notices APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. and follow the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. design pattern.
  6. Open floor.

Meetings usually last around 60 minutes. If anyone wants anything else to add on the existing agenda comment below and we will try to fit it in.

Discussion can be held in the comments below.

#agenda

Feature Projects: Customize Section Button and Autoload

Today, I’m happy to announce the official 1.0 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. of our first two feature projects.

If you haven’t been following along, the team decided to build out some features that many themes build in very different ways. The idea is to bring some standardization for these features for authors, reviewers, and end users in the case of packages with a UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.. It also means that all theme authors will have access to these tools and not have to worry about building them in-house.

Note: PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. 5.6+ is a requirement for the current packages. This means your theme must be built for WordPress 5.2+ or that you’ll need to gracefully fail if supporting older versions.

Customize Section Button

Screenshot of the customize section button in the WordPress theme customizer.
Screenshot of the Customize Section Button

This project provides a method of adding a link/button in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. The primary use case for it will likely be to add an upsell link, but I could see it being used for something like pointing a user to documentation. It’s pretty straightforward to use and works like any other customizer section.

Autoload

The Autoload project is a package for autoloading any classes that we create, such as the above-mentioned Customize Section Button project. It allows you to define namespaces and the directory path(s) of where to find classes.

We view this project as a stepping stone toward getting theme authors to use a proper dependency manager such as Composer and its autoloading feature. We also strongly recommend following the Composer Autoloading Optimization Guide. Seriously, use Composer if you’re ready for it or already using it.

I think we should also view this project as call for the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. developers to implement a proper autoloading feature into WordPress itself. Such a feature would be far more efficient and provide a standard for both theme and pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors to follow.

Are these packages required?

This question has come up a few times, so I wanted to go ahead and address it now. The short answer is that, no, they are not currently required.

The long answer is that I don’t know what the team may decide in the future. There may be projects where the team will say, “If you want to implement this feature, use this particular package.” It’d certainly help streamline some of the review process, but there are things to consider other than the review process.

My goal is to get the TRT and theme authors working together to build solutions. If we build good solutions, I’d hope that theme authors would naturally move toward using them because it ultimately saves them time and resources. I still think the question of whether a particular package should be required is premature. Let’s build the solutions together first.

Next projects

The next projects are likely going to be a set of standard theme template hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. and something to tackle admin notices. These are a little bigger than the first two projects and will likely need more community involvement. We’ll try to get repos up for them soon so that we can begin discussions.

#open-source, #projects, #trt

X-post: Updates to the WordPress User & Developer Survey

X-comment from +make.wordpress.org/updates: Comment on Updates to the WordPress User & Developer Survey