It is easy for many developer (myself inclusive) to conclude that our apps can be used by everyone. Most times, that is usually not the case.
According to WHO, Globally, at least 2.2 billion people have a vision impairment that could have been prevented or has yet to be addressed.
As Developers, we are meant to provide solutions and not increase problems. In this article, i’ll talk about semantic html, web accessibility, web accessibility tips and web accessibility tools.
What is semantic HTML?
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look.
semantic element clearly describes its meaning to both the browser and the developer. In other words, they are HTML elements that have human readable names.
Some examples of semantic HTML elements are:
- header
- nav
- footer
- Some examples of non-semantic HTML elements are:
- div
- a
- span
- Semantic HTML doesn’t take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. Even better, semantic markup has other benefits beyond accessibility:
- Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
- Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
- Good for SEO — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic s, etc., so your documents will be more findable by customers.
What is Web Accessibility?
In computer-human interaction, accessibility means making the web accessible and having functionalities that can be operated by literally everyone including those with all forms of disabilities, limitations and conditions.
Web Accessibility Guidelines
Web content Accessibility Guidelines (WCAG) 2.0 is a set of guidelines and best practices put together by web accessibility experts to address what “accessibility” means in a methodical way.
See the Web content Accessibility Guidelines (WCAG) 2.0 website.
Web Accessibility Tips
- UI Controls
By UI controls, we mean every part of our app that the user interacts with. A good practice is using the
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name"/>
</form>
- Text Alternatives
It is important to remember that image/video contents cannot be seen by visually impaired people. To make things a little bit better, don’t forget your alt attribute when using images. The content of the alt attribute should be as descriptive as possible.
#blacklivesmatter #web-accessibility #optimization #html
