Technique F110 - Added examples for sticky header and sticky footer that covers completely elements receiving focus

[giacomo-petri]

Closes: #3764

Description:

• Added examples showcasing the failure of Technique F110.
• Updated F110 by incorporating links to the failing examples.

Note: The examples contain extensive content (utilizing "Lorem Ipsum" text) to ensure that regardless of the viewport, zoom level, or user preferences, at least one element receiving focus is consistently obscured by the sticky element.

Edit:
Demos available here:

• Sticky header: https://codepen.io/Giacomo-Petri/full/OJGQOBy
• Sticky footer: https://codepen.io/Giacomo-Petri/full/KKYQyrq

[ljoakley]

The working examples look good, were you going to add some text to inform the viewer what is going on?

[giacomo-petri]

Hi @ljoakley,

The examples within the Failing Technique are thoroughly documented. In my own examples, I've included explanatory notes on how to recognize the issue. For instance:

This demo page is crafted to illustrate Example 1: Sticky header of the failing technique F110: Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements.

All links and buttons on this page are non-functional; links merely serve as focusable elements and anchor directing to the top of the page; buttons are simply not functional.

To identify the problem, please navigate through the page using the TAB key until you reach the bottom, then return to the top using SHIFT + TAB.

I'm more than happy to provide further details if necessary. Could you please advise on any additional information you believe should be included?

[bruce-usab]

@giacomo-petri might you provide rawgit preview ?

[giacomo-petri]

• Text updated from "Lorem ipsum" to readable text.
• files attached:html_files.zip