logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 2.5 - Bypass Blocks

The following website is very hard to use with assistive technologies because there is no easy way to bypass the header and jump to the content.

Additionally, accessing the contact form through the heading with a screen reader will make blind users miss some information because it's above the heading.

It is important for headings to be at the beginning of each section. If there is additional information before the heading, the use of (ARIA landmarks)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles] should be preferred.

Requirements

Pending requirement:

Make it easy to skip the header of the website. Either provide a skip navigation link or an even simpler way is to use semantic markup for the document. You can change the <div> into a <main>.

Pending requirement:

Mark the contact form section appropriately. Provide either a hidden level 1 heading or a region landmark for the contact form.
Do not change the appearance of the form!
Make sure that the text Have questions? Fill the contact form below is included in the region!

Need help?

Show me the solution

Learning Material

logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 2.5 - Bypass Blocks

The following website is very hard to use with assistive technologies because there is no easy way to bypass the header and jump to the content.

Additionally, accessing the contact form through the heading with a screen reader will make blind users miss some information because it's above the heading.

It is important for headings to be at the beginning of each section. If there is additional information before the heading, the use of (ARIA landmarks)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles] should be preferred.

Requirements

Pending requirement:

Make it easy to skip the header of the website. Either provide a skip navigation link or an even simpler way is to use semantic markup for the document. You can change the <div> into a <main>.

Pending requirement:

Mark the contact form section appropriately. Provide either a hidden level 1 heading or a region landmark for the contact form.
Do not change the appearance of the form!
Make sure that the text Have questions? Fill the contact form below is included in the region!

Need help?

Show me the solution

Learning Material

Editor

Preview Page