Gerçekten Çalışan Bir Atla Bağlantısı Oluşturma

Çalışan bir atlama bağlantısının iki bölümü vardır: bir yere bağlanan bir çapa ve gerçekten üzerine ulaşabileceği bir hedef. İkisinin de bulunması gerekir.

Çapa, href değeri bir parçaya işaret eden normal bir bağlantıdır; örneğin bir kare işaretinin ardından bir id gelir. Üzerine tıklamak tarayıcıya nereye gideceğini söyler.

Hedef, ulaşmak istediğiniz öğedir. href içindeki parçanın işaret edebileceği bir yer olması için ona eşleşen bir id verin.

Atlama bağlantınızı main bölgesine yönlendirin. Bu bölge, sayfanın benzersiz içeriğini barındıran tek bölgedir ve kullanıcıların ulaşmak istediği yer tam olarak burasıdır.

Eski bir sorun şudur: bağlantı sayfayı kaydırır, ancak odak bağlantıda kalır. Sonraki Tab, kullanıcıyı doğrudan yeniden gezintiye gönderir.

Çözüm, odağın gerçekten oraya taşınmasını sağlamaktır. Hedefin atlama bağlantısından odak alabilmesi için tabindex eksi bir ekleyin.

Eksi bir, betiklerle kullanılabilir ve bağlantı hedefi olabilir, ancak Tab sıralamasında yer almaz anlamına gelir. Böylece öğe, herkes için araya girmiş bir sekme durağına dönüşmez.

Günümüzde çoğu tarayıcı odağı parça hedefine otomatik olarak taşır. Ancak tabindex eksi bir eklemek bunun her yerde çalışmasını garanti eder; bu nedenle eklemeyi koruyun.

Sayfayı yenileyin, bir kez Tab tuşuna, ardından Enter'a basın. Odak göstergeniz içeriğe geçmeli ve sonraki Tab içeride ilerlemeye devam etmelidir. ✅

Açıkça adlandırın. Ana içeriğe geç ifadesi, ne olacağını kullanıcıya tam olarak anlatır; belirsiz bir Atla ifadesinden veya bir simgeden çok daha iyidir.

Çapayı, üst bilgiden önce olmak üzere body öğesinin ilk çocuğu olarak yerleştirin; böylece Tab sayfadaki diğer her şeyden önce ona ulaşır.

Bir çapayı main üzerindeki eşleşen bir id değerine bağlayın, tabindex eksi bir ekleyin ve sekmeyle test edin. Gerçekten çalışan bir atlama bağlantısı böyle oluşturulur. 🎯