"If your website is not ADA accessible you run the risk of missing customers, opening yourself up to legal action, and most importantly, not sharing your message broadly with all your intended recipients."
Website accessibility is an increasingly important topic for businesses of all kinds and consequently, developers. Wikipedia defines web accessibility as "the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites on the World Wide Web, by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality."
- The business has the potential of reaching a whole new section of customers, who may well have been totally overlooked by the competition.
- By making a website accessible, the chances of facing legal action or being prosecuted are minimized.
- A business can enhance its brand by ensuring that its site is truly accessible to all, especially when the changes are announced and promoted on Social Media.
In prior articles, we talked about Lighthouse from Google as a tool to improve site performance and improved SEO. But Lighthouse also helps you meet your accessibility design goals. In this article, we share technical tips on improving your Lighthouse accessibility score with an eye toward serving everyone and making your information fully accessible.
Google Lighthouse Accessibility
The goal of the Google Lighthouse Accessibility Score is to help make more websites ADA compliant. In 2019 a study was conducted that found that over 97% of websites did not pass the Web Accessibility Content Guidelines. These guidelines cover a wide range of recommendations for making Web content more accessible. As more websites face lawsuits for ADA non-compliance, it is more important than ever to make sure that your website follows basic guidelines. Achieving a score of > 90 on the accessibility portion of your lighthouse score will help you achieve this!
The top three contributors to a high accessibility score in Lighthouse are ARIA attributes, alt attributes, and meta-refresh, meta-viewport tags.
1. Accessible Rich Internet Applications (ARIA) attributes
ARIA attributes were established to help provide semantic information about web content in order to help convey information to persons with disabilities. They define ways to make Web content and web applications (especially those developed with Ajax, JavaScript and newer technologies like Bootstrap) more accessible to people with disabilities. ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.
The most common ARIA attributes are:
- aria-label
- aria-labelledby
- aria-describedby
“Aria-label” is used to help define a label for fields that might not normally have a field, or the label is hidden. An example is with input fields. Multiple input fields might be labeled by a single label, but each field has a different function. An example of this is a phone number. The label could be home phone, but you could have 3 different fields for area code, phone number, and extension. Each of those could be labeled by aria-labels to describe their specific functionality. This would help with a machine that is reading the screen to explain what the different fields do.
<div role="group" aria-labelledby="groupLabel">
<span id="groupLabel>Phone</span>
<input type="number" aria-label="area code">
<input type="number" aria-label="number">
x<input type="number" aria-label="extension">
</div>
aria-labelledby and aria-describedby are other ways to associate a label with input fields, or other objects. With aria-labelledby you are able to associate objects with multiple labels, or associate headings with regions. For example, you could have a section called billing and then have fields for name and address. Instead of displaying the label in the html as Billing Name and Billing Address, you could create a composite label describing the input field.
<div id=”billingId”>Billing</div>
<div>
<div id=”nameId”>Name</div>
<input type=”text” aria-labelledby=”billingId nameId” />
</div>
<div>
<div id=”addressId”>Address</div>
<input type=”text” aria-labelledby=”billingId addressId” />
</div>
Your Lighthouse accessibility score will likely be lower if you don’t use these attributes or use them improperly. Frameworks will frequently use these attributes to handle functionality such as navigation or tabbing within a page. Other frameworks use them to communicate between the framework and the page. Usually these are fine and help encourage the use of proper labeling. But they can also be used incorrectly and detract from the experience of a disabled user. If Google Lighthouse displays any warnings related to your aria attributes, it is best to look and make sure that you are using them and using them properly.
2. ALT Attributes
The alt-tag or alternative (alt) html attribute is basically used to describe an image. It is commonly used along with the img tag to provide alternative text that is displayed if the image itself cannot be rendered. In the case where an image is not available then the alt text would be displayed instead. For accessibility, the alt text is what is used by screen reader software to define the image to those who are listening to the content of a webpage. For blind users, they are not able to see the image that you are displaying, so the alt text helps to describe it for them. This is especially helpful for image buttons. You could have a button that says “next” but if you don’t define the alt text, someone who is blind would be unable to know that is the button they should click on.
Your lighthouse score will decrease if you do not define alt tags for your images. It doesn't need to be a lengthy description, but you do need to have something defined.
3. Meta-Refresh and Meta-Viewport
Meta-viewport is used to define the area of the window in which web content can be seen. It is commonly used for responsive design techniques in order to define media queries that might kick in at specific size breakpoints. There is also the ability to specify the maximum-scale. By setting the maximum-scale you can disable the functionality to pinch and zoom on certain mobile devices. Be careful; by doing this you also disable the ability for users with low vision to be able to zoom in order to view your site better!
Meta-refresh is used to force the page to refresh at a set time interval by way of using the http-equiv=”refresh” tag. Instead of using meta-refresh you should handle refreshing your page through javascript and allow the user to set a refresh interval, or to pause the refresh. This is commonly used for sites that have content that changes frequently and needs to be updated for the user. For disabled, and even non-disabled users, it might take longer to view your page. If you force a refresh, it can become disorienting and difficult for users to view your site.
Color Usage and Visibility
Improper usage of color and fonts will also potentially decrease your accessibility score, although not as much as the other areas we have discussed. Using a light text color on a light background, a dark text color on a dark background or a font that might be difficult to read will cause you to get warnings in lighthouse. Those who have trouble with vision will have difficulty reading the text on the screen. This can be easily corrected by using a more contrasting text color or increasing the font size to make the text easier to read.
There are many considerations when making your site more accessible and user-friendly. The Google Lighthouse accessibility score helps you to improve but even scoring a 100 in this test doesn't necessarily mean that you are WCAG and 508 compliant. Many sites are required to meet a higher standard due to government regulations. If your company happens to fall into this category, then lighthouse is a great place to start, but you will need to use a different tool in order to meet those stricter requirements.
Our experts can work with you to optimize your accessibility and make your information available to everyone. If you’d like to learn more, CyberLancers can perform a free performance check to help you understand how you are really performing. To learn more go here: https://www.cyberlancers.com/free-performance-check