Learning Journey - first entry.

Yaroslav Kuzyo — Wed, 09 Jun 2021 09:21:58 +0000

I'm front-end dev from Ukraine.
Working in web development more than 5 years. Don't have CS degree and everything I learned was from dev community that's why decided to start simple kind of journal(blog) where going to share my learning experience for my future self and anyone who might find it useful.

Currently decided to improve my knowledge in web accessibility, because thinking that this is important topic and very often ignored or moved to the background in process of development.

Skip links

Great technique that is used to improve navigation around the page with assistive technology.

Very often first thing that our DOM contains is navigation or sidebar with a lot of links - thats why users with impairment often frustrated and click through whole navigation before actually get to content. The easiest way to fix that issue is to place as the first thing in the DOM hidden link and bring it back into view when it get focused. After user hit enter on that link focus jumps right to the main content section.

Implementation example

<header>
  <a class="skip-link" href='#main'>Skip to content</a>
  <!-- Navigation-->
</header>
 
<!-- Maybe some other stuff... -->
 
<main id="main">
  <!-- Content -->
</main>

.skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}

Useful links

https://a11y-101.com/development/skip-link
http://web-accessibility.carnegiemuseums.org/code/skip-link/
https://css-tricks.com/how-to-create-a-skip-to-content-link/

DEV Community: Yaroslav Kuzyo

Learning Journey - first entry.

Skip links

Implementation example

Useful links