Accessibility testing of the Twenty Fifteen theme

This week the new theme Twenty Fifteen was placed into trunk, so we could take a look at it.

We discussed the issues found in the replies with @davidakennedy‘s post: Time to Test Twenty Fifteen! and in our testing session last Monday.

Here’s a summary of what we found and the follow up on that (we assigned people to post tickets on this).

The order is in order of priority.

1. Heading structure

To our opinion multiply H1’s are not a good way to set up the heading structure.
Our suggestion:
One H1 per page. This is the site title for the home page, the page of post title for a single page or the archive title for an archive. The rest of the content should be meaningful devided into h2/h3/h4 etc headings.
An improvement that can be easily made is change the H1’s for the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. titles into a H2 in functions.php.
Ticket: @davidakennedy #30065

2. Menus

The main menu works good with keyboard only, also with a submenu.
But with a screen reader it gives problems and the structure isn’t read well.
This may need some study to do it properly
Ticket: @davidakennedy #30083

3. Search form

In the current HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. of the search widget form there is no proper relation between the label and the input field. The input should have an ID and the label a for= to the ID.
Also the submit button has class with display: none; That should be a class screen reader only.
Ticket: @rianrietveld #30110

4. Thumbnail link

The thumbnail of a post in archives are placed inside a link to the post itself.
The alt text is the alt of the image, this can result in a link text that makes no sense.
Screen reader users want to know what’s on the image, but don’t want to lose context on where the link is going.
There are different ways to solve this, as we can see in ticket #15926 and #28861
Maybe finding a solution here could also be a solution for #15926
Ticket: @rianrietveld #30076

5. SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. is placed above the content

We decided that that’s ok.
There is a skip to content link for keyboard and screen reader users, that should be sufficient.
The toggle on the sidebar should have a slightly different screen reader support.
Ticket: @bramd

6. Background images next-prev links should be darker

Ticket: @davidakennedy #30069

7. Underline links on hover

Underline menu links and post links in archive on hover to make it more clear they are a link
Ticket: @katherinemancuso #30108

8. Site description

The site description should not be defined as an H2 heading. It is not a section or content title.
We suggest placing it inside a p element.
Ticket: @rianrietveld #30057

9. 404 template Text: “Maybe try one of the links below”.

This may be old text that needs to be updated
Ticket: @davidakennedy #30061

Further commenting and work we will do in the tickets on the trac as they are posted.

This list of issues is not complete. If you find other 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). ( issues? Please reply to this or @davidakennedy‘s post: Time to Test Twenty Fifteen!

A big thanks to @davidakennedy, @nsousa, @bramd, @katherinemancuso, @arush, @sharonaustin for testing.