(Approximate Time: ~ 1 hours)
Accessibility isn’t just yet another item on our to-do list to cross off before we launch our website. Accessibility is the foundation of what we do as web designers and web developers and it’s our obligation to treat it as such.
Watch this following video to understand why Accessibility is important and the steps we should take to make our website accessible:
Telling the browser which language you are using in your document has many benefits. It’s good for Search Engine Optimization (SEO) and it helps third-party translation tools and browsers to identify the right language and dictionary. You can use
lang as follows to do this:
If you want to hide content visually and from screen readers, use the hidden attribute.
According to this article, browser support for the
hidden attribute is very good, except for Internet Explore 10 (IE10) and lower, as detailed by this site. You can provide support for older browsers if you add this fallback to your CSS.
altattribute to an
If an image is used as content, apply the
alt attribute to describe the image’s content and function succinctly. If the image is purely decorative or doesn’t add valuable information, consider embedding it with CSS as a background image.
It’s important that you don’t omit the
alt attribute. Omitting this attribute altogether indicates that the image is a key part of the content, and no textual equivalent is available. Setting this attribute to an empty string (
alt=””) indicates that this image is not a key part of the content and that non-visual browsers may omit it from rendering.
In general, you should always favor native HTML elements, if there is one, over faking your own. For example, if you need a button, use the
<button> element and not a
<div> that is styled like a button.
Buttons have many benefits/crucial features, they include focusable, clickable (with mouse and keys), and they allow screen readers to identify them as buttons.
By creating a sound outline using headings
<h6>, you are helping users to better understand the structure of your page and relationships between individual sections. On top of that, it helps users who use assistive technology to navigate your webpage. Screen readers provide different ways of moving from one piece of content to another.
tota11y is an Accessibility visualization toolkit that let’s you check if your outline is persistent with Accessibility best practices.