search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Incorrectly nested landmarks in GOV.UK Frontend review application #1399

Closed NickColley closed 5 years ago

NickColley commented 5 years ago

This issue is from a May 2019 external accessibility audit report.

WCAG Reference: 4.1.1 Parsing (Level A) Issue ID: DAC_Issue15 URL: http://govuk-frontend-v3.herokuapp.com/full-page-examples/bank-holidays

Summary

The ‘aside’ landmark had been incorrectly placed within the <main> element

Screen Shot

The ‘aside’ landmark has been placed inside the ‘main’ element which is not semantic. This did not affect users, however.

Current Code Ref(s)

<aside class="app-related-items" role="complementary"> <h2 class="govuk-heading-m" id="subsection-title"> Related content </h2> <nav role="navigation" aria-labelledby="subsection-title"> <ul class="govuk-list govuk-!-font-size-16"> <li class="gem-c-related-navigation__link"> <a class="govuk-link" href="#/holiday-entitlement-rights">Holiday entitlement</a> </li>
<li class="gem-c-related-navigation__link"> <a class="govuk-link" href="#/school-term-holiday-dates">School term and holiday dates</a> </li> </ul> </nav> </aside> </div> </main>

Solution

Ensure that all landmarks are nested correctly and that the ‘aside’ is placed outside of the ‘main’ element.

NickColley commented 5 years ago

I've put awaiting-triage on this since I think we should discuss if this issue is a mistake with how we implemented this review page, or something that we encourage by the design of the page template.

I have assigned this a low priority since this is not an issue with GOV.UK Frontend but our review application implementation.

36degrees commented 5 years ago

We have decided to ignore this recommendation for now, as this doesn't appear to impact users and there doesn't appear to be anything in the spec that prevents <aside> elements from appearing within <main> elements.

The HTML 5.1 spec does say:

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or application’s main function is that of a search form).

– https://www.w3.org/TR/html51/grouping-content.html#elementdef-main

However we are using <aside> elements for related links, which do have a semantic relationship to the content within <main> and theoretically could be unique to each page.

(See also Example 40 in the spec, which shows an <aside> within a <main>, albeit for contextual prose)

We should revisit this decision if we find that this has a tangible impact on users.

(Note also that the pages on GOV.UK from which these examples are drawn do have the <main> wrapped only around the two-thirds column. They also do not use an <aside>, just a <nav>)