• Znacznik <button> nie potrzebuje niczego specjalnego do pracy. Użyj <button>, kiedy możesz, ale możliwe jest użycie innych elementów pod warunkiem, że dodasz im atrybut role="button"oraz JavaScript, aby odtworzyć funkcjonalność przycisku.
• Tak jak w przypadku łączy, możesz dodać class="visuallyhidden" z tekstem opisowym, aby nadać przyciskowi więcej kontekstu o jego przeznaczeniu.
• Jeśli przycisk zawiera element <img>, upewnij się, że ustawiłeś jego atrybut alt. Jeśli zawiera ikonę, użyj aria-label, aby ją opisać.
• Możesz użyć <input type="image"> aby utworzyć przycisk graficzny. Przyjmuje on atrybut src i alt, tak jak tradycyjne obrazki.
• Ważne są także stany, nie tylko stylizacja przycisków! Jeśli przełączasz klasy tylko do wizualnego zarządzania stanem swoich komponentów, prawdopodobnie nie przekazujesz tego stanu odpowiednio użytkownikom technologii wspomagających.

• Unikaj używania koloru tylko do przekazywania informacji. W przypadku łączy użyj innego identyfikatora, takiego jak pogrubienie lub podkreślenie, aby wskazać tekst łącza za pomocą samego koloru.
• Niektórzy użytkownicy mają trudności z odczytaniem tekstu, jeśli kontrast między pierwszym planem a tłem jest zbyt mały. Aby zachować zgodność z poziomem AA, tekst musi mieć współczynnik kontrastu co najmniej 4,5:1 (lub 3:1 w przypadku dużego tekstu). Aby spełnić wytyczne na bardziej rygorystycznym poziomie AAA, współczynnik kontrastu musi wynosić co najmniej 7:1 (lub 4,5:1 w przypadku dużego tekstu).

• Nie ustawiaj dla łączy stylu outline: none. Nigdy. Nigdzie.
• Jeśli masz wiele pól formularza na swojej stronie lub widzisz okropny outline: none w kodzie podstawowym, możesz zresetować domyślne ustawienia przeglądarki poprzez dodanie kodu:

 a:focus {
   outline: auto 2px Highlight; // dla przeglądarek non-webkit
   outline: auto 5px -webkit-focus-ring-color; // dla przeglądarek webkit
 }

• Oczywiście możesz tworzyć własne style fokusu, aby dopasować je do swojego motywu lub sprawić, że domyślne style przeglądarki będą bardziej widoczne, po prostu upewnij się, tabulując, że są one widoczne i oczywiste dla użytkowników.

• Dodaj selektory id do tytułów lub akapitów i użyj aria-labelledby="", aby połączyć się z tekstem tytułu (Przykład #1).
• Dodaj tekst opisowy z aria-label="" bezpośrednio do łącza (Przykład #2).
• Użyj klasy visuallyhidden, aby wizualnie ukryć więcej informacji o odnośniku (Przykład #3). Zauważ, że VoiceOver może powodować niezamierzoną kolejność czytania wizualnie ukrytych treści w elementach interaktywnych.
• Zamień przeczytane więcej linków na przyciski, gdy tylko będzie to możliwe, ponieważ pozwalają one na więcej opcji etykietowania.

• Zapewnij użytkownikom możliwość przejścia do ważnych sekcji Twojej strony. Pomoże to użytkownikom korzystającym z czytników ekranu i osobom, które nie mogą posłużyć się myszą łatwiej i efektywniej poruszać się po Twojej stronie.
• Nie ma prawdziwej reguły tematycznej, jeśli chodzi o stylizację linków do stron, ponieważ wiele stron internetowych ma tendencję do ukrywania ich za pomocą class="visuallyhidden" (lub podobnej) ze specjalnym atrybutem focus, tak aby widzieli je tylko użytkownicy widzący.
• Ważne jest, aby zobaczyć, że łącze wskazuje na poprawne ID elementu HTML, ponieważ często jest to pomijane w implementacji.
• Na tej stronie zastosowaliśmy 'Przejdź do treści głównej', ale inne ważne przykłady "łączy pomijania" obejmują:

Przejdź do treści
Przejdź do głównej treści
Przejdź do wyszukiwania
Przejdź do dolnej nawigacji
Przejdź do głównej nawigacji

• Unikaj małych rozmiarów fontów.
• Użyj jednostek względnych dla rozmiaru czcionki, takich jak em lub rem. Chociaż nowoczesne przeglądarki internetowe mogą płynnie powiększać układy oparte na pikselach, stosowanie jednostek względnych zapewnia skalowanie całego układu w górę lub w dół poprzez prostą aktualizację rozmiaru czcionki elementu body.
• Projekt powinien umożliwiać powiększenie typografii nawet do 200% przez użytkownika bez przycinania lub zniekształcania treści.
• Wybieraj podstawowe, proste, łatwe do odczytania czcionki i używaj ograniczonej liczby czcionek.
• Unikaj małych rozmiarów czcionek i używaj względnych jednostek rozmiarów czcionek (ems lub rems).
• Ograniczaj stosowanie odmian czcionek, takich jak pogrubiona czcionka, kursywa i WSZYSTKIE WIELKIE LITERY (stosowanie CAPS jest podobne do krzyków czytników ekranu).
• Nie polegaj tylko na wyglądzie czcionki (kolor, kształt, odmiana czcionki, lokalizacja, itp.), aby przekazać znaczenie.
• Unikaj mrugania i przesuwania tekstu.
• W grafice używaj prawdziwego tekstu, a nie tekstu.