Semantic HTML and Accessibility
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 <div>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 <label> tag with our forms. This might not seem useful at first, but it comes handy when using screen readers.
<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.
Here's a little example
<img src="./js.png" alt="Alphabets J and S written in black on a yellow background" />
- Page Layouts
In the bad old days, people used to create page layouts using HTML tables — using different table cells to contain the header, footer, sidebar, main content column, etc. This is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.
In recent times, semantic HTML solves this problem, making our web apps accessible .
<header>
<h1>Header</h1>
</header>
<nav>
<!-- main navigation in here -->
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<h2>Article heading</h2>
<!-- article content in here -->
</article>
<aside>
<h2>Related</h2>
<!-- aside content in here -->
</aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
<!-- footer content in here -->
</footer>
Web accessibility tools
aXe aXe is a free, open-source accessibility testing tool by Deque Systems for Chrome and Firefox. You can add the aXe extension for Chrome or aXe extension for Firefox to analyze web contents. aXe shows the exact piece of code that caused the issue along with the solution to fix it. It shows the severity for each of the issue found and analyzed the accessibility violations for WCAG 2.0 and Section 508 compliance.
Colour Contrast Analyser Like a Designer, [Colour Contrast Analyser] (webaim.org/resources/contrastchecker) is also designed by Paciello Group for Windows Mac OS and OS X. It is used to determine text legibility and color contrast for graphical and visual elements in the web page. The Visual Simulation functionality is supported only for Windows. This tool performs assessments for contrast elements according to WCAG 2.0 Color Contrast Success criteria. The tool is dedicated for users with low vision and color blindness
- Chrome lighthouse Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. Read my previous article: Introduction to chrome lighthouse to get started.
Resources
Introduction to Web Accessibility
Web content Accessibility Guidelines (WCAG) 2.0