Bug 39434 - The pages are missing semantic tags that identify the regions of the pages.
Summary: The pages are missing semantic tags that identify the regions of the pages.
Status: Pushed to stable
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement
Assignee: Nina Martinez
QA Contact: Owen Leonard
URL:
Keywords: release-notes-needed
Depends on:
Blocks:
 
Reported: 2025-03-24 09:52 UTC by Nina Martinez
Modified: 2025-06-24 09:31 UTC (History)
10 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
25.11.00,25.05.01
Circulation function:


Attachments
Bug 39434: Change the div tags that represent the header and main regions to semantic tags. (59.50 KB, patch)
2025-03-28 08:28 UTC, Nina Martinez
Details | Diff | Splinter Review
Bug 39434: Change the div tags that represent the header and main regions to semantic tags. (59.56 KB, patch)
2025-04-01 11:32 UTC, claire.hernandez@biblibre.com
Details | Diff | Splinter Review
Bug 39434: Change the div tags that represent the header and main regions to semantic tags. (59.74 KB, patch)
2025-06-05 16:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 39434: (follow-up) Fix a few more instance (7.89 KB, patch)
2025-06-05 16:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 39434: Tidy (1.23 KB, patch)
2025-06-19 07:20 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Nina Martinez 2025-03-24 09:52:21 UTC
"Landmarks provide an easy way for users of assistive technology understand the programmatic structure of a page and skip over content they're not interested in. For instance, if a site's header, global navigation, main content area, and footer are marked up as landmarks, a screen reader user can easily skip to the landmark they're interested in without having to work their way through all the preceding content." 

https://www.w3.org/WAI/WCAG21/Techniques/html/H101

Indeed, the pages do not have all the semantic tags. For example, they are missing the main and header tags. 

To improve accessibility, we should add more structure to the OPAC pages.
Comment 1 Nina Martinez 2025-03-28 08:28:38 UTC
Created attachment 179817 [details] [review]
Bug 39434: Change the div tags that represent the header and main regions to semantic tags.

This patch updates the OPAC page structures to add <main> and <header> tags to them.

    Test plan :

    1- On the opac of koha, check if the pages contain the basic semantic elements (header, nav, main, and footer )
    2- If they do, the test succeeds.
Comment 2 Emmanuel Bétemps 2025-03-31 08:55:31 UTC
Hi,

as I fear forgetting one or more pages of the OPAC, is there any way to list :
- the pages we have to test ?
- the syspref and other settings to get on the staff interface ?
Comment 3 Caroline Cyr La Rose 2025-03-31 10:23:40 UTC
I agree this is hard to test without a proper test plan. I tried making one but haven't managed to finish all of it (even after several hours).

Here's what I have so far (I left out the numbers for each step bc it is easier to reorder if there are no numbers)

To test:
. Apply patch and restart_all
. Enable the following system preferences
  - OpacBrowser
  - useDischarge
  - OPACHoldsHistory
  - ILLModule
  - OPACPrivacy
  - UseRecalls
  - ArticleRequests
  - OPACReportProblem
  - OPACVirtualCard
  
* For each page, make sure the page looks OK and there is a main tag in the page inspector (unless noted otherwise)
. Go to the OPAC (opac-main/masthead.inc - header tag in addition to main tag)
. Click on 'Advanced search' (opac-advsearch)
. Make a search that will return several results (e.g. shakespeare) (opac-results)
. Click on a title to access the detailed record (opac-detail)
. Click MARC view (opac-MARCdetail)
. Click ISBD view (opac-ISBDdetail)
. Click 'Place hold' (opac-reserve)
. Go back to the record
. Click 'Place recall' (opac-recall)
. Go back to the record
. Click 'Request article' (opac-request-article)
. Click 'Add to your lists' (opac-addbybiblionumber)
. Enter a list name
. Click 'Save'
. Click 'Add to your cart'
. Click 'Cart' at the top of the page (opac-basket)
. Click 'Send' (opac-sendbasketform)
. Close the window
. Close the cart window
. Click the 'Comments' tab
. Click 'Post your comments on this title' (opac-review)

. Click on 'Course reserves' (opac-course-reserves)
. Click on 'first course' (opac-course-details)

. Click on 'Browse by hierarchy' (opac-browser)

. Log in (if you're not already logged in, if you already are, go to Your account) (opac-user)
. Click on the 'Charges' tab (opac-account)
. Click on the 'Personal details' tab (opac-memberentry)
. Change some information in the form
. Click 'Submit update request' (opac-memberentry-update-submitted???)
. Click on the 'Tags' tab (opac-tags)
. Click on the 'Change password' tab (opac-passwd)
. Click on the 'Search history' tab (opac-search-history)
. Click on the 'Checkout history' tab (opac-readingrecord)
. Click on the 'Privacy' tab (opac-privacy)
. Click on the 'Holds history' tab (opac-holdshistory)
. Click on the 'Recalls history' tab (opac-recalls)
. Click on the 'Purchase suggestions' tab (opac-suggestions)
. Click on the 'Messaging' tab (opac-messaging)
. Click on the 'Lists' tab (opac-shelves)
. Click on the list name
. Click 'Send list' (opac-sendshelfform)
. Close the window
. Click on the 'Ask for discharge' tab (opac-discharge)
. Click on the 'Interlibrary loan requests' tab (opac-illrequests)
. Click on the 'My virtual card' tab (opac-virtual-card)

. Click on 'Authority search' (opac-authorities-home)
. Click on 'Submit' (opac-authoritiessearchresultlist???)
. Click on 'Details' next to a result (opac-auth-detail)
. Click on 'MARC view' (opac-auth-MARCdetail)

. Click on 'Libraries' (opac-library)

. Click on 'Report a problem' (opac-reportproblem)

. Go to cgi-bin/koha/ilsdi.pl (ilsdi)

. Enable OpacMaintenance
  . In the staff interface, go to Administration > System preferences
  . Search for OpacMaintenance
  . Set to 'Show'
  . Click 'Save all OPAC preferences'
. Go to the OPAC (it should redirect to the maintenance page) (maintenance)


This test plan is still missing all of these pages
opac-account-pay-error
opac-alert-subscribe
opac-alert-subscriptions
opac-auth
opac-blocked
opac-browse
opac-curbside-pickups
opac-downloadcart
opac-downloadshelf
opac-full-serial-issues
opac-idref
opac-imageviewer
opac-issue-note
opac-overdrive-search
opac-page
opac-password-recovery
opac-patron-consent
opac-registration-confirmation
opac-registration-email-sent
opac-registration-invalid
opac-reset-password
opac-restrictedpage
opac-routing-lists
opac-serial-issues
opac-shareshelf
opac-showreviews
opac-tags_subject
opac-topissues

Fell free to rework the test plan. I don't think I will have time to finish it.

As an aside, I feel like this could be easier to test if it was divided in several different bugs, but maybe I'm just too lazy...
Comment 4 claire.hernandez@biblibre.com 2025-04-01 11:32:52 UTC
Created attachment 180132 [details] [review]
Bug 39434: Change the div tags that represent the header and main regions to semantic tags.

This patch updates the OPAC page structures to add <main> and <header> tags to them.

    Test plan :

    1- On the opac of koha, check if the pages contain the basic semantic elements (header, nav, main, and footer )
    2- If they do, the test succeeds.

Signed-off-by: Claire Hernandez <claire.hernandez@biblibre.com>
Comment 5 Owen Leonard 2025-06-05 16:13:42 UTC
Created attachment 183004 [details] [review]
Bug 39434: Change the div tags that represent the header and main regions to semantic tags.

This patch updates the OPAC page structures to add <main> and <header>
tags to them.

Test plan :

1- On the opac of koha, check if the pages contain the basic semantic
   elements (header, nav, main, and footer )
2- If they do, the test succeeds.

Signed-off-by: Claire Hernandez <claire.hernandez@biblibre.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 6 Owen Leonard 2025-06-05 16:13:45 UTC
Created attachment 183005 [details] [review]
Bug 39434: (follow-up) Fix a few more instance

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 7 Lucas Gass (lukeg) 2025-06-13 19:31:42 UTC
Nice work everyone!

Pushed to main for 25.11
Comment 8 Jonathan Druart 2025-06-19 07:19:11 UTC
Author, QA and RM: please use the git hook AND the QA script!
Comment 9 Jonathan Druart 2025-06-19 07:20:36 UTC
Created attachment 183363 [details] [review]
Bug 39434: Tidy
Comment 10 Jonathan Druart 2025-06-19 07:21:42 UTC
(In reply to Jonathan Druart from comment #9)
> Created attachment 183363 [details] [review] [review]
> Bug 39434: Tidy

Patch pushed.
Comment 11 Paul Derscheid 2025-06-24 09:31:06 UTC
Nice work everyone!

Pushed to 25.05.x for 25.05.03