Accessibility: Add skip to content button

[yannicka]

Don't push it as it is: firstly, I don't know if the naming is right or if I'm placing the elements in the right place (in terms of both HTML and CSS). Secondly, on some pages, like the category page for example, clicking on the link redirects to /[object History]. I haven't yet been able to find out why, so if anyone has any ideas, I'd be grateful for any help.

Questions	Answers
Description?	Add a "Skip to content" button for accessibility.
Type?	new feature
BC breaks?	no
Deprecations?	no
Fixed ticket?	No, but help #251
Sponsor company	N/A
How to test?	Load a page and press "tab"

Screenshot:

[Hlavtox]

I don't know what to think of this, I have never seen a button like this in my life. 🤷‍♂️

[yannicka]

I don't know what to think of this, I have never seen a button like this in my life. 🤷‍♂️

If you press "tab" on websites, this link will be displayed.

Example on GitHub:

On gov.uk:

On wordpress.org:

Etc.

https://css-tricks.com/how-to-create-a-skip-to-content-link/

Of course, my PR is useless as long as these bugs exist.

[Hlavtox]

@yannicka Cool!!! I learned something new. :-)

Well, I think the bug with the Object-history thing is the same issue as with the profiler right? PrestaShop/PrestaShop#33260

[yannicka]

@yannicka Cool!!! I learned something new. :-)

Well, I think the bug with the Object-history thing is the same issue as with the profiler right? PrestaShop/PrestaShop#33260

Great :)

Yes, the issue seems very similar if not identical.

[dennispw]

Where does the "content" start in this case? On catalog pages (categories, search, etc.) I guess the content would be the products? What if a category don't have any products but sub categories with products in them? Where is the "content" on the start page?

This will become very theme and module dependent. Even with hummingbird and standard PS modules on the start page (as an example) they can freely change positions and/or activate/deactivate modules.

I'm not opposed to the idea as such, but I think it's a quirky one to implement correctly since the very nature of PrestaShop is customizability the "content" in this case can (and will) different for different shops.

[yannicka]

The link depends on the theme, as it leads to the tag with the id wrapper. But since we're in the theme itself, I don't see any problem with that.

The content may indeed be different between pages, but it's often considered to be what comes after the header. Which is the case here, the tag is just after the header:

hummingbird/templates/layouts/layout-both-columns.tpl

Lines 25 to 36 in 733a70c

	<header id="header" class="header">
	{block name='header'}
	{include file='_partials/header.tpl'}
	{/block}
	</header>
	<main id="wrapper" class="wrapper">
	{hook h="displayWrapperTop"}
	{block name='breadcrumb'}
	{include file='_partials/breadcrumb.tpl'}
	{/block}

On some sites, the skip link is more complex and may contain several links to take you to different places, but this would require more work.

As it stands, considering that the content is always in the wrapper tag seems fine to me, since we're not trying to avoid the page title or anything else. So it works just as well on the home page as on a category page, a product page or any other page.