St. Cloud, MN
619 W St. Germain St., Suite 214
St Cloud, MN 56301
(320) 203-4840
Green Bay, WI
520 N Broadway, Suite 270
Green Bay WI, 54303
(920) 884-1496
What is Accessibility and Why is it Important?
Broadly speaking, when we say a site is accessible, we mean that the site's content is available, and its functionality can be operated, by literally anyone. As developers, it's easy to assume that all users can see and use a keyboard, mouse, or touch screen, and can interact with your page content the same way you do. This can lead to an experience that works well for some people, but creates issues that range from simple annoyances to show-stoppers for others.
Forms
Forms should always have labels.
Placeholders only are insufficient.
Example:
Images
Images should always have alt tags
Alt text allows you to specify a simple string to be used any time the image isn't available, such as when the image fails to load, or is accessed by web crawling bot, or is encountered by a screen reader.
Video Provide transcripts/captions for videos
Captions are text versions of the spoken word presented within multimedia. Captions allow the content of web audio and video to be accessible to those who do not have access to audio. Transcripts also provide an important part of making web multimedia content accessible. Transcripts allow anyone that cannot access content from web audio or video to read a text transcript instead.
Aria Labels
The Aria Label is an attribute designed to help assistive technology (e.g. screen readers) attach a label to an otherwise anonymous HTML element.
Roles
role=banner
A banner landmark identifies site-oriented content at the beginning of each page within a website. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
role=navigation
Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation.
role=contentinfo
A contentinfo landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements.
role=main
A main landmark identifies the primary content of the page.
role=form
A form landmark identifies a region that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g. main or search).
role=search
A search landmark contains a collection of items and objects that, as a whole, combine to create search functionality to content on the website.
Icons
Use aria-label & aria-hidden for icons
<a href="#" aria-label="Visit Us On Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
Links
Make sense out of the context
Phrases like ‘click here’ or ‘more’ should be avoided.
Keyboard Navigation
Enable keyboard navigation for elements
Elements like navs, sliders, etc. should be controllable by keyboard only.
Semantics
Semantic provides:
- Consistency
- Easier to read
- Easier for search bots to understand your content
- SEO Value, albeit minimal
Headings
A page should have a single H1. This is typically the page title. Below the H1, a page will have h3’s, h4’s and so on. An h3 should be a subheading associated with the H1. Any h4’s should be subheadings that are related to its parent h3.
Example:
Guitars (h1)
Acoustic (h2)
Martin X-Series Custom (h3)
The Martin X Series Custom X-000CE Auditorium Acoustic-Electric Guitar combines that world-famous Martin sound with the contemporary playability of an electric guitar. (p)
Taylor 200 Series Deluxe (h3)
Taylor's 200 Deluxe Series delivers all the essentials of a great guitar - exquisite playability, a full and articulate voice, impeccable intonation up the neck, and Taylor's top-of-the-line, professional- grade pickup - at a price that's within reach of many. (p)
Electric (h2)
Fender Jimi Hendrix Monterey Stratocaster (h3)
It’s been 50 years since Jimi Hendrix took the world by storm with his incredible Monterey Pop Festival performance, which he concluded with the sacrificial burning of his now-iconic hand-painted Stratocaster. (p)
Layout
New semantic tags were added with the rollout of HTML5. They provide richer information for search engines that allow them to more easily understand a site when it’s crawled.
<article>
The <article> tag makes it easy to mark new blog posts or article entries in an online publication. Search engines can put more weight on any content wrapped with this tag. It also helps to clean up the HTML code by reducing the use of <div> tags.
<section>
Blog posts are typically broken into different sections to make it easier for users to find what they are looking for. The <section> tag can be used to specify these subsections of your content, each with their own separate HTML heading.
<header>
The <header> tag is similar to the <h1> tag in that it can be used to specify the header of a page. But it can also be used to indicate the header section of a page and can even contain navigation links and other relevant text.
<footer>
While not as useful as the <header> tag, the <footer> tag still offers SEO benefits as it can be used to specify content in the footer section of a website such as company information and other useful links. Each page can even have its own footer section.
<nav>
Navigation is undoubtedly one of the most important aspects of a site. The <nav> tag can be used to specify links on a page such in the main site navigation or for pagination.
<video>
The <video> tag is easily one of the most useful tags as it allows for cross-browser compatibility to display videos without having to use Flash. HTML5 also makes it possible to include additional information about the video such as captions and subtitles.
<aside>
An <aside> tag can be like a section tag, but one that focuses on secondary content such as a sidebar, or a post-article call to action might be a good place to use <aside> tags.
