Note: This article was originally posted on my LinkedIn on March 5, 2025 (link).
Introduction
Imagine you’re traveling to a city where you don’t know any routes. You’ve been following the directions on your phone when, suddenly, it runs out of battery and shuts off completely.
No problem — let’s check the highway traffic signs for guidance, right?
But what if many of these signs are blank or unreadable? That would be a disaster, right?
Sadly, it happens to countless users when they are accessing pages without accessibility. 😢
To avoid this situation, we can make simple adjustments on our side to reduce this issue.
Main content
As you are reading this article, I truly believe you already know users could have visually and motor issues. There are many types of visual issues, including blurred vision, color blindness and vision loss (total or partial). When we talk about accessibility on the web, at first, it's common to think it helps only people with a visual issue, but the truth is that it improves the user experience for everyone. Additionally, a good HTML structure enhances screen reader compatibility, and can help improve your SEO score.
// Note: all codes below were written as JSX (React).
01 — Ensure the navigation by Keyboard is accessible
Keyboard navigation helps motor-impaired users to navigate all links on the site using the Tab key.
Note: In React and many other libraries, elements with onClick may not be focusable, but you can add a tabIndex to solve it.
<button
onClick={openSignUpModal}
tabIndex="0"
{/*other properties*/} >
Sign Up
</button>
Additional reference:
02 — Use descriptive text for links
Using vague phrases like "click here," "see more," or "read more" can create confusion, especially when multiple "read more" links appear on the same page, making it unclear what each one refers to. Screen reader users may hear several identical links without any context, making navigation difficult. To improve accessibility, links should include descriptive text that clearly conveys their purpose, example:
<a href="https://www.w3.org/TR/WCAG20-TECHS/H30.html"
{/*other properties*/}>
Read more about providing link text
that describes the purpose of a link
for anchor elements
</a>
Additional reference:
03 — Use aria-label or aria-labelledby (when necessary)
Occasionally, every developer will code social media links on the page's footer with icons as its content — No text, only an icon. In cases like this, or cases where there is a necessity to add more details or contexts for these links, which are not too clear, the ARIA attribute enters in action.
Using arial-label, the screen readers can complement the info on this kind of issue, example:
<button onClick={openModalSendMessage} aria-label="Open the moda form to send a message" {/*other properties*/}>
<i class="icon-envelope" aria-hidden="true"></i>
</a>
Note: Screen readers might not interpret the <i> element. Considering this, it's a good practice to add the property aria-hidden="true" to the icon. So, it'll be ignored by screen readers and the focus stays on the aria-label.
In some cases, like for forms, it's possible to add the property aria-labelledby to connect a label tag to an input tag that already has a text label, example:
<label id="login-label" for="username">username or email</label>
<input type="text" id="login" aria-labelledby="login-label">
In this case, the screen reader will read the label for login-label "username or email".
**Additional references:*
04 — Ensure links open in the same tab unless necessary
This action is a key accessibility best practice, particularly for cognitive accessibility. When a user opens a link in a new tab in an unexpected way, this action might create confusion or disorientation for users with cognitive disabilities or neurodiverse (as ADHD). Even for users without cognitive disabilities, this action may disrupt the navigation flow.
In cases where the users need to open a link in a new tab, adding an aria-label attribute to inform users that they will leave the current page after clicking the link will improve accessibility.
<a href="https://linkedin.com/in/totabraz"
aria-label="Open Antonio Braz's LinkedIn profile in a new tab"
target="_blank"
rel="noopener noreferrer"
{/*other properties*/}>
<i class="icon-linkedin" aria-hidden="true"/>
</a>
Note: For security reasons and to prevent the new tab from accessing the original page’s window object, for external links, add the property rel="noopener noreferrer".
05 — Ensure proper color contrast
To be honest, I believe that color contrast is something too important to be neglected. Designers and developers should always check it, and this topic applies for all text in a project. A text color that is too similar to the background (a solid color or gradient, image, or video) reduces readability, especially for users with visual impairments such as color blindness or low vision. Poor contrast can make it harder to understand the content correctly.
One of my favorites sites to check it is the Color Contrast Checker. This site provides a great tool to check the accessibility level for small and large texts. The reference used here comes from the levels AA (strong accessibility) and AAA (excellent accessibility).
Note: In WCAG (Web Content Accessibility Guidelines), there are three levels of accessibility: Level A (the lowest level), Level AA, and Level AAA (the highest level). These are usually pronounced as "single A", "double A", and "triple A".
Additional Tools:
[Web Tool] Color Contrast Checker (mentioned earlier)
06 — Differentiate links visually (not just by color)
Use underlines, background colors, or other styles to distinguish links from normal text, including their hover and focus states.
In some cases, users with color blindness* may see red and green as the same color. If the page uses red for active links and green for focused or hover links, the user may not notice any difference when a link is selected or when hovered.
*Color blindness includes several types, such as red-green blindness, blue-yellow blindness, or even total color blindness
a:hover, a:focus {
text-decoration: underline;
}
Note: For buttons, designers typically provide a layout where the background changes opacity or color. However, for links without a background or border, it's a good practice to add a border or underline when hovered and focused.
Additional reference:
07 — Provide skip links for quick navigation
This small action helps keyboard users skip repetitive links for each page loaded. Instead of listening or need to navigate exhaustively link by link until reach the main content.
How it works
Basically, when a page is loaded, users can navigate using the "Tab" key, following the default sequence for focus elements. This sequence is determined by the HTML structure: links (<a>),form controls (<input>, <textarea>, <select>, <button>, etc.) and focusable elements with the tabindex attribute.
A great example is the site dev.to, which has an aside navigation on the left side with categories, tags, and links, while the main content is in the center of the page. When the page loads, pressing the "Tab" key will bring up a "Skip to content" button that jumps to the #main-content anchor if pressed.
If the user presses "Tab" again, the focus will move to the "What's on your mind" input field".
In case of the user had clicked on the "Tab" key again, the focus will follow the default page sequence.
Additional references:
08 — Use semantic HTML for navigation
The use of the <nav> element enhances accessibility by providing context and structure for screen readers and assistive technologies. Some screen readers might say — "Navigation, Home link, Blog link, About Us link, Contact link…". This small change helps the screen reader to tell the users they are navigating on a menu, not just in random links.
Note: Semantic elements like <nav> help search engines understand the page structure, improving SEO. Browsers and screen readers can render navigation menus more accurately, ensuring users don't miss critical information.
Additional reference:
- You can start here: [w3] images
Important note
The focus of this article is on link accessibility. I won't go into too much detail about other semantic topics, but I’d like to emphasize the importance of the correct semantic for header elements (<h1> to <h6>).
All pages should only have one <h1> per page and should use progressively lower-level headings (<h2>, <h3>, etc.) for each sub-context.
Why? Because screen readers use navigation by header levels, reading all headers in the same title, or following its lower-level context.
Additional reference:
And now?
Well, these small changes will significantly improve the site's usability. As a personal suggestion, why not explore the world of accessibility? A good next step would be checking accessibility for images.
Additionally, to learn and create better websites, some browsers like Brave and Google Chrome offer a tool on the Chrome DevTools called "Lighthouse". With it, you can analyze accessibility (among other categories) and identify areas for improvement. After the analysis, you'll see missing points and a link to learn more about each missing point.
Thanks for being here up to this point! If you have any questions or need anything else, feel free to send me a DM on LinkedIn (in/totabraz).
Top comments (0)