search

NHSLeadership / nightingale-2-0

A WordPress theme for the NHS using the NHS.UK frontend library
Other
28 stars 15 forks source link

Issue with care cards (gov.uk raised this as an accessibility issue when auditing us) #585

Closed ShanayaKR closed 1 year ago

ShanayaKR commented 1 year ago

*See below comment, as this solution is wrong

Describe the bug Apologies I wasn't sure if this should go in the nhs-blocks github, or this one.

Our Trust uses the Nightingale theme for our website, and we were recently audited for accessibility by the government. They raised one issue with the care card headings. Within the h3 (see code below) the span with the role="heading" was flagged as needing an aria-level attribute in order to meet accessibility standards.

To Reproduce This is the current HTML for a yellow/warning care card:

<h3 class="nhsuk-care-card__heading">
  <span role="heading">
    <span class="nhsuk-u-visually-hidden">Warning advice: </span>
    <span class="nhsuk-care-card__heading-text">This is the heading text for a card<br></span>
  </span>
</h3>

Expected behavior This is what I believe to be the correct HTML:

<h3 class="nhsuk-care-card__heading">
  <span role="heading" aria-level="3">
    <span class="nhsuk-u-visually-hidden">Warning advice: </span>
    <span class="nhsuk-care-card__heading-text">This is the heading text for a card<br></span>
  </span>
</h3>

(aria-level="3" was added to line 2)

Additional context We have fixed this within our child theme using JavaScript to insert the attributes. Let me know if you want this code, but I imagine you won't need it as you can just add it directly into the block itself.

Though we have fixed several accessibility issues within our child theme, you may find it interesting to note that our website only received 2 issues when audited for accessibility, and only one of these was in the theme (the other was from the Care Opinion widget on our homepage).

maheshmuralip commented 1 year ago

Dear @ShanayaKR Many thanks for your comments.

ShanayaKR commented 1 year ago

Apologies @maheshmuralip , I have just had confirmation that the fix is actually to remove the "role='header'" attribute, rather than add in the aria-level attribute. This is because my fix above would essentially create nested h3s which is not accessible either. So the actual fix would be:

<h3 class="nhsuk-care-card__heading">
  <span>
    <span class="nhsuk-u-visually-hidden">Warning advice: </span>
    <span class="nhsuk-care-card__heading-text">This is the heading text for a card<br></span>
  </span>
</h3>
maheshmuralip commented 1 year ago

Thanks @ShanayaKR

maheshmuralip commented 1 year ago

@ShanayaKR A fix is added in the new version of NHS Blocks plugin 1.3.9. Thanks