As a front-end developer, I find great joy in giving advice to beginners. We have all been beginners, where there are a lot of things we don’t yet know. Getting a solid foundation is essential, and one of the best ways to do so is to get feedback from others. I have given feedback on Frontend Mentor for a while, especially on the beginner challenges. While they might seem “easy”, there are many things that need to be right. It needs to look right. It needs to be responsive. And it needs to be accessible.

When I started out several years ago there wasn’t too much info about accessibility in the courses I took. I learned that it’s important to add alt text to images – that was about it. Unfortunately, I’m not sure things have got that much better since then. So it’s not surprising that a lot of beginners make the same mistakes.

During my observations, here are 3 issues I see time and time again:

Not having a <main> landmark

All “main” content of a webpage needs to be wrapped in a <main> element. It’s not enough to just wrap everything in a <div class="container">. This element is a semantic landmark that assistive technology users can navigate to. For example, in NVDA, typing D takes the user directly to the <main>. A user can also use the Elements List (NVDA + F7) to navigate to the <main>( as well as other landmarks like <header> and <footer>).

WCAG Success Criterion: 1.3.1 – Info and Relationships

Incorrect alt text

ALL images need an alt attribute. Without it, a screen reader will read the image file name, which is not very helpful. For meaningful images, the alt text should be short and precise. Decorative images should have empty alt text: alt="". Setting the alt text to an empty string make screen readers ignore the image.

Another thing to take note of is that you should not include words like “image” or “photo“, as screen readers announce images as either “graphic” or “image”.

NB: If you have a decorative icon as an inline SVG, it needs to have aria-hidden="true".

For guidance on what to write as alt text, check out the “Alt decision tree” from the Web Accessibility Initiative.

WCAG Success Criterion: 1.1.1 – Non-text content

Headings

Headings are crucial for everyone, and especially for screen reader users. Headings shows what’s on a page, giving it structure. As with landmarks, screen reader users can navigate directly to headings using keyboard shortcuts: In NVDA, you can type H to go to the next heading, Shift + H for the previous heading, and H + 1-6 / Shift + H + 1-6 to go to the next/previous heading of that level. You can also use the Elements List (NVDA + F7).

The first heading on a page should be an <h1> element describings the page’s main topic. There should only be one <h1>. Heading levels should not be skipped: do not put a <h4> directly after a <h2>.

Use proper headings – don’t use CSS to style a <p> like a heading. Early on, I used to think heading levels were about how it looks visually. But it’s about structure.

Here is an example of a heading structure, explaining the different facets of the Web Accessibility Guidelines, or WCAG.
<h1>: WCAG<h1>
<h2>: Principles: Perceivable, Operable, Understandable, Robust</h2>
<h3>: Guidelines<h3> (Example: 1.3 – Adaptable)
<h4>: Success Criteria<h4> (Example: 1.3.1 – Info and Relationships)

WCAG Success Criterion: 1.1.1 – Info and Relationships

Conclusion

These are 3 of the most common HTML mistakes that beginners (and others!) make. Understanding why they must be fixed is a first step in developing your “accessibility awareness”, but there is still much to learn. Be curious, have an open mindset, and learn from others.