This article is to serve as an introduction to web accessibility in HTML.
When a website is compared to the human body, HTML is said to the skeleton, it might seem like the easiest part of creating a application but just like a skeleton structuring HTML is just as important in the creation of an application else it affects how the application is interpreted.
Being a self-taught Frontend Developer, when I first begun with creating simple web pages I had no idea what accessibility was - I knew about the <img alt> and that was about it.
Things are a lot different now and developers and designers are ensuring every website and application created is accessible by everyone.
In making website accessible when writing HTML these are things that have to be considered:
Making use of Semantic HTML
Semantics means the study of meaning, Semantic HTML? It simply means using semantic HTML elements in creating web pages for the purposes they're meant for this helps browsers, devices such as screen readers know which content to display and more importantly to identify parts of a webpage. Using semantic HTML elements such as:
- header
- nav
- main
- article
- aside
- section
- footer
other examples such as:
- button
- form
aids in proper structuring and navigation of a website. It is also very important to use heading tags accordingly and where needed.
Use of ALT text
The use of the alt attribute was the first attribute of which I learnt its importance in accessibility, before I had even learnt about the importance of web accessibility.
alt short for alternative is an attribute used along with the img tag to provide more description of an image and is used by the screen reader to interpret an image.
In the image above the image link shows that the image is that of a dog and the alt text describes what dog that is, and what exactly the dog is doing.
The alt text should be as descriptive as the image itself in the best way possible.
When creating applications, websites it is advised to put yourself in the shoes of every audience possible that could use that application to make sure that the finished outcome any web project can be accessed by all.
This is my first technical post ever and surely with every article posted I get better.