Web Accessibility Tips and Tricks
Web accessibility is an important criteria for any website or web app, and is one that should be considered by all people involved: designs, developers, site owners, site contributors, site testers, and end users. The United Nations estimates that one in ten of the world’s people lives with a disability, and that number is expected to grow as the world’s population continues to grow older and live longer.
Accessibility in the context of the web includes visual impairments (such as complete blindness, low vision, or color blindness), hearing impairments, physical impairments, and cognitive disabilities (such as dyslexia and ADD/ADHD).
Why should a designer, developer, or site owner care about the accessibility of their site? For one, not providing an accessible website could hurt your sites’ business. More visitors and a greater market can only help improve sales, complete conversions, or meet your goals. For some organizations, it can also be required by law.
Building a site or app with accessibility in mind from the start can also reduce development and maintenance costs. It costs less to build an accessible website from the start than it is to retrofit an existing one into compliance.
Lastly, developing a website with good accessibility standards in mind means your site will most likely work on most browsers and most devices. This is important as there are many smartphone, tablet, and desktop devices on the market, with only more devices appearing in the future.
Let’s jump into some tactics that a designer and developer can take to make their websites and web apps more accessible.
How to Properly Hide Content
To hide elements visually, but not hide from screen readers, use the following CSS snippet:
.screen-reader-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
To hide content both visually and from screen readers, use the following CSS:
.hidden {
display:none;
visibility:hidden;
}
Provide Skip to Content & Skip To Navigation Links
You could easily make somebody’s day by simply adding to link elements as the first elements inside of your body tag. This is a good accessibility practice to get into the habit of doing when starting any new web project, and can be easy to add into an existing site or app as well.
<body> <a href="#main" class=”screen-reader-only”>Skip to main content</a> <a href="#navigation" class=”screen-reader-only”>Skip to main navigation</a> … <nav id=”navigation” role='navigation'> … </nav> <main id="main" role="main"> … </main> … </body>
How to Write Great Alt Text for Images
Most people know alt text is important for web accessibility. The key to great alt text is to describe the function of the image first before what it is depicting. For example, a logo image in the header of your website that always links to your homepage might have alt text that reads as the following:
<img alt=”Back to the homepage” src=”…” />
If your image doesn’t have a specific function, then add a detailed description of the image. When adding a descriptive alt text, it’s also best not to start with “A photo of…” or “A picture of…”, as many screen readers do this automatically, which will result in redundancy for the user.
Many content management systems will add alt text automatically based on the name of the image file you upload (such as Sitefinity version 7 and newer). Although this will technically help validate your website for accessibility, take the time to edit the metadata properties of your images to add good alternate text for your users (especially since file names can be abbreviated or cryptic). Most CMSs provide an easy way to change alt text. The example below is the edit screen in Sitefinity for adding alt text.
Accessible Tables
The best way to ensure accessible tables is to add several elements and attributes:
- Add the scope attribute to define rows and columns. This attribute will let screen readers speak tables in the correct, human readable order
- Add a caption that provides a brief description of the table’s contents
An example is provided below.
<table> <caption>Mercury New Media Employees</caption> <tr> <th scope="col">Name</th> <th scope="col">Title</th> <th scope="col">Twitter Handle</th> </tr> <tr> <th scope="row">Donald Bickel</th> <td>Partner</td> <td>@donaldbickel</td> </tr> <tr> <th scope="row">Zachary Winnie</th> <td>Senior Interface Designer</td> <td>@zachwinnie</td> </tr> </table>
ARIA Landmark Role Attributes
ARIA landmark roles (also known as Accessible Rich Internet Applications) are used by screen readers to more quickly navigate your website or web app. These are simply attributes added to HTML elements that help define what they are. Important attributes to use on your website include:
- role=”banner” describes the header of your site, which normally includes a logo, site search and navigation
- role=”complementary” describes the supporting section of a page or document, such as a blog sidebar that contains related articles
- role=”form” describes a form
- role=”main” describes the main content of a page or document
- role=”navigation” describes links used for navigating to pages and documents
- role=”search” describes a specific form that provides search functionality
An example of using an ARIA landmark for a header might look like the following:
<header id=”header” role=”banner”> … </header>
Keyboard Accessibility
Access Keys
The access key attribute can be added to interactive HTML elements, such as links, to provide quick navigation actions for keyboard users.
An example access key to quickly go to the homepage would look like the following:
<a href="/home" accesskey="H">Home</a>
A user would then press Alt + [the accesskey] on most Windows browsers or Ctrl + Option + [the accesskey] on most Mac browsers to quickly browse to that page.
Although there is no singular standard for what keys should be assigned, there is a fairly common convention for the number keys:
- accesskey=”1” or accesskey=”H” for homepage link
- accesskey=”2” for skip to content
- accesskey=”3” for sitemap
- accesskey=”4” for search field focus
- accesskey=”5” for advanced search, if available
- accesskey=”6” for site nav tree
- accesskey=”9” for contact information
- accesskey=”0” for access key details
Tab Indexing
The tabindex attribute allows for designers and developers to customize the order of tabbing through web content and web app features. Tabbing on a site or app lets users skip to key inputs or key elements where an action might take place. An example of using tabindex on a form is as follows:
<form> <label for="FirstName">First Name</label> <input type="text" id="FirstName" tabindex="1"> <label for="LastName">Last Name</label> <input type="text" id="LastName" tabindex="2"> <input type="submit" tabindex="3" value="Submit"> </form>
It is worth noting that the values “0” and “-1” are reserved for default order and removing elements from the tab order, respectively.
Conclusion
Using the tips and tricks above, it’s easy for any designer and developer to improve their accessibility skills, and improve the accessibility of their websites and web apps.
Taking the time to incorporate the strategies above will help to craft sites that are accessible to wider audiences, provide better usability, save costs, make more money, and conform to the growing worldwide accessibility standards and laws.
For further reading and resources, including free website accessibility validators, free browser extensions, and free screen reader software, check out the links below.
Resources & More
Continued Learning
- http://www.webaim.org
- http://www.section508.gov
- http://wave.webaim.org
- http://www.w3.org/WAI/
- http://www.a77yproject.com
- http://accessibleculture.org/
Accessibility Checklist
Validators & Evaluators
Color Blindness Checkers
Screen Reader Software
- JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS
- NVDA Access: http://www.nvaccess.org/
- ChromeVox: http://www.chromevox.com/
- BrowseAloud: https://www.texthelp.com/en-us/products/browsealoud