Hide presentational content from a11y technology

[lukasbestle]

Description

Summary of changes

Implement aria-hidden as suggested and discussed in https://github.com/getkirby/getkirby.com/issues/1289.

Reasoning

• Avoid announcing purely presentational content to a11y technology (there's already a much more useful aria-label)
• If we are lucky, this should also make the PageSpeed test happy

Additional context

As Lighthouse in Chrome didn't complain about the font sizes (only the PageSpeed test), I couldn't verify this yet. But even if PageSpeed still complains, this is an improvement for users of a11y tech.

[distantnative]

I just tried it with VoiceOver on Mac and there are some observations:

• Review: Moving through the elements with Control + Option + Arrow seems to work well. It does announce "empty figure" and "empty group" but that seems ok to me.
• Todo: Jumping around focus with tab prdocues some inconsistent results:
  • The filesystem items get focussed. I don't think that makes a lot of sense for screenreader users when in the normal flow this just gets read out as one group item.
  • The example API response receives focus. In this context weird as it is the only example part.
• Todo: The PHP and Vue logos have no text read out.
• Suggestion: The descriptions read out seem to me a bit disconnected. E.g. A browser window with an example website on its own without the visual leaves me a bit lost what this is supposed to tell me. Maybe we need to think making this description a bit mroe illustrative and matching the purpose the figure has, e.g. A browser window showing a website created with Kirby

[lukasbestle]

Implemented most of your observations and suggestions. For the focus issues I don't have a good impromptu solution. Maybe we could cover that in a separate PR.