By now, you understand what accessibility for your website means, and that it is important for your business to ensure that your website is easily navigable by all users, including those using assistive technologies. Assistive technologies include screen readers, magnification software, text readers, speech input software, pointers, motion trackers, and more.

Once we have committed to accessibility and fixing the problems with our website, where do we begin? There are things that many casual website owners can do themselves, and things that may require the assistance of a web design firm which specializes in bringing websites up to WCAG 2.1 Level AA compliance. 

We will start simply with things which can be easily fixed, and progress to more difficult compliance tasks.

Several basic accessibility techniques also support SEO (Search Engine Optimization), which helps your search engine rankings. These include alt text, heading tags, element labeling, and consistent architecture. By designing your website to support SEO strategies, you’ll be improving your SERP (Search Engine Results Pages) rankings as well as your accessibility score. Google’s Core Web Vitals accounts for three aspects of page experience – loading, interactivity, and visual stability.

So, what happens when Google has to rank two web pages which have equally valuable content about the same topic? Your website is then being judged by what else it brings to the table. These considerations include inclusive design, accessibility, and usability. Inclusive design can mean many things. Is your mobile experience superior to your competitors? Did you consider individuals with disabilities when you designed your website, and is it easily usable by them?

The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines are the recommended guidelines for meeting those considerations.

Who’s it for?

Accessible computerInclusive design, accessibility, and usability guidelines cater to millions of individuals around the globe.

  • Blind or Deaf/Blind People. Globally, 2.2 billion people are sight-impaired. That’s 29 percent of us! Magnification, brightness settings, transcriptions, and captions help.
  • People with Cognition & Learning Difficulties. Age, education level, or learning disabilities can be a factor in having difficulty processing large amounts of information. Uncomplicated layouts, removal of animation, removal of flashing content, removing videos or music which auto-play, etc. are helpful for individuals with these types of disabilities, which include dyslexia and Attention Deficit Hyperactive Disorder (ADHD.)
  • People with Emotional and Behavioral Disabilities, including Anxiety. Consistent page layouts, proper sentence structure and grammar, appropriate amounts of white space, removal of animation or flashing content, removal of autoplaying media, and keeping your website inoffensive from a sensory perspective helps users perceive information properly and stay focused.
  • Travelers. Many users are constantly on the go, even if they’re not literally traveling. Being able to quickly and easily use a website is priceless and convenient when you’re busy and possibly distracted, or not in front of your home computer. When you design your site for easy access, you’re removing a layer of stress from your user’s day.
  • People with Permanent or Temporary Injuries or Diseases. It may seem like common sense that everyone uses a mouse, pointer, or their finger on a touch screen to navigate through websites. Not everyone! Designing your website to work with assistive technology, including tab navigation, skiplinks, and consistent structure makes things easier for these users. Skiplinks are invisible-to-the-user links that are accessible to assistive technology which enable users to skip large and redundant blocks of information when they visit a page of your website, such as navigation menus.

What parts of my website are especially important to scrutinize with regard to accessibility?

This list will give you a general idea of the things you need to consider when you’re designing your website or fixing your existing one. We will discuss a few of them in further detail later in this article.

Designers working on accessibility designTop 10 website elements to consider when designing for accessibility:

  1. Navigation. This includes links, focus state, order of elements on the page, ability to tab through and select menus and page items using a keyboard rather than a mouse, ability to skip through redundant information (such as bypassing menu or information blocks), and more.
  2. Page structure and organization. Your website must be consistent in layout, look and feel; contain informational menus if necessary, possibly utilize navigational tools such as sitemaps or breadcrumbs, and be organized in a logical, clear, and concise manner. Menus should be displayed and structured identically everywhere they appear.
  3. Scalability. Your entire website should be scalable to at least 200% without breaking or changing the layout or the visual structure.
  4. Text, fonts, contrasts. Your text should be readable, appropriately spaced, and in a standard font. Distractions should be minimized. Contrast for informational text should be very high.
    For example, black font on a white background? High-contrast and appropriate.
    Light yellow font on a white background? Very difficult to see and not accessible.
    Contrasts in general for site elements should meet particular criteria. Tools like this contrast checker can help you ensure that your contrast ratios meet standards.
  5. Forms. Forms of all kinds, including those digitally signed, must have clear and consistent navigation, error handling with clear verification to the user, must not be “accidentally” submissible, and several other considerations.
  6. Images, galleries, sliders. All images need appropriate alt text and labels. All sliders and carousels should allow the user to pause or stop any movement. This minimizes distractions and accommodates users who need an extra moment to read or process the information. All functionality must be operable by keyboard. Slide changes should be communicated to all users, including those who read screen readers. Generally speaking, images should not be of text. When it’s unavoidable, this is why alt text and proper labeling is important. For infographics, extreme color contrast, information clustering, transcripts, tags, and more can be utilized during their creation to provide the user with the correct experience.
  7. Video, audio, podcasts, media. All media items need to be pausable, playable, and stoppable, and should not auto-play. As a general rule, all items need to be perceivable by more than one sense, so that if one sense is impaired, another can process the information. This means that visual and audible information should have text transcriptions, closed captioning, sign language interpretation, and/or other considerations provided.
  8. Tables, iframes, and lists. Each of these, if being used, must be built in correct and specific html markup, properly labeled and implemented, and properly navigable.
  9. Maps, graphs, visualized data. If a map or graph is crucial to the content of your web page, you must provide a text description of the image, or an html table replicating the graph or chart data could also be useful. High visual contrast should be used. Information should be conveyed in more than one fashion. For example, not just color, for a bar graph, but color and numerical scale and/or appropriate labeling.
  10. PDFs, Word documents, Powerpoint presentations, Excel spreadsheets. If your site has downloadable versions of any of these, especially those that the user is expected to fill out and return, they must be designed using accessibility considerations. There are tools that can help you with this, such as PAVE. You simply upload your PDF, and it will be automatically corrected as much as possible. Anything else, you may need to fix using your Adobe tools.

The first questions you need to ask yourself about your website when you’re reviewing it for accessibility considerations are the broad questions: Is my website arranged logically? Does it contain consistent navigation? Is the information easy to read? Is it visually and structurally consistent in the way that it’s put together? If the answer is “yes” to your major building blocks, then all other items can be fixed – they’re secondary to the foundation of your website.

I’ve seen “aria-label” on certain html elements when I look at my code. What is aria?

WAI-ARIA is a technical specification published by the W3C that specifies how to increase the accessibility of web pages. It is intended for use by not only web and application developers, but developers of assistive technologies and accessibility evaluation tools. Assigning elements of your website an ARIA role helps the assistive technology understand how to use your website. Mozilla provides a full list of ARIA roles and their usages.

What are some simple things I can do to get started in making my website more accessible?

If your website meets broad requirements, start with a few simple adjustments that many people are able to do themselves. Here are ten things you can check yourself!

1. Add alt text and possibly additional labels to your images.

If you’re using a CMS (Content Management System) such as WordPress, there is often a text field in your media library for each image which you can use to add the alt text easily.

Green frog on tree barkAt the very least, all images need alt text. Here’s what that looks like in the code:

Incorrect: <img src=”frog.png” />
  Correct: <img src=”frog.png” alt=”Frog” />

If the image is purely decorative and irrelevant to a user who may not be able to perceive it, it’s appropriate to add a role stating such, or to include it as a CSS background image to exclude it from assistive technologies. Here’s what that looks like:

Repeating frog backgroundIncorrect: <img src=”frog_background.png” />
  Correct: <img src=”frog_background.png” alt=”Frog Background” role=”presentation” />

Alternatively, leaving the alt text empty/null is also considered acceptable when an image should be ignored. Don’t leave it out – include it – but leave it empty. This will tell the assistive technology that the image is not important.

Example: <img src=”frog_background.png” alt=”” />

Let’s say your image is functional. What then? An example of a functional image is one being used as a link. In this case, you would use your alt text to convey the link destination. Images which are functional should be treated as their functions, not as images. Here’s what that looks like:

<a href=https://thrivewebdesigns.com>
  <img src="thrive-accessibility.png" alt="Thrive Web Designs - Accessibility" />
</a>

Another example of a functional image is one which is being used to trigger a function, such as an icon of a printer being used to print the page. In this case, you would use your alt text to convey the function, rather than convey what the image is.

<a href="javascript:print();">
  <img src="printer-icon.png" alt="Print This Page">
</a>

W3’s tutorials on image accessibility can help guide you in the right direction.

2. Review all of your links.

Link text should be unique and convey the function and purpose of the link. Links should also have a non-color indicator, such as an underline, that helps identify them. Links in menus are clear enough because of where they appear in the layout, but links included within blocks of text need additional identifiers to meet accessibility standards.

When reviewing the link text, avoid ambiguous text which might be confusing when read aloud by a screen reader, especially out of context.

  • Incorrect: <a href=”http://flyfishingblog.com”>Click here!</a>
  • Incorrect: <a href=”http://flyfishingblog.com”>More</a>
  • Incorrect: <a href=”http://flyfishingblog.com”>Read More</a>
  • Correct: <a href=”http://flyfishingblog.com”>Fly Fishing Blog</a>

When reviewing link design, use a non-color indicator to help users differentiate between regular text and text which is a link. One common way of doing this is to use an underline in conjunction with a color. Here’s what that looks like using CSS:

a {
  text-decoration: underline;
  color: #FF0000;
}

This example would style every link on your page as red and underlined.

Inline example, including the styles directly in the HTML:

<a href="http://flyfishingblog.com" style="text-decoration:underline; color:#FF0000;">Fly Fishing Blog</a>

This example would only style this this particular link as red and underlined. Let it be noted, however, that it is not best practices to use inline styles. If you only wanted one link to be red and underlined, and the others to look differently, you would correctly accomplish this by creating a CSS class in your stylesheet such as in the above CSS example and assigning the class to the link.

Some designers prefer not to have any non-color indicators present unless the user is focused on or hovering over the link. This is acceptable, but the guidelines for doing this are extremely stringent. In practice, very few color contrast combinations meet such requirements, and doing this tends to create a worse experience for colorblind or cognitively impaired users. Hover styles such as background glow, outline, or brief animation are common practice and can provide a good user experience. Hover styles should be activated on keyboard focus as well as mouse hover.

Other design considerations for links include sizing – links should be large or generously sized when not contained within blocks or paragraphs of text. You may also consider adding a role or an ARIA label to your link. This tutorial describes these techniques in further detail.

3. Review all of your page titles.

Are they appropriately descriptive? Good page titles make many means of finding web pages more relevant. For example, search results make more sense if page titles are appropriately descriptive. It’s a good idea in general for usability and search engine visibility, not just for accessibility.

4. Review all of your headings.

For each of your web pages, if your content is organized under visual headings, these need to be coded properly in the HTML. The visual hierarchy helps guide the eye, and users with cognitive or low vision impairments particularly benefit. Assistive technologies are also more easily able to parse your content when it’s organized appropriately.

In HTML, headings come in six ranks: H1 through H6. These get progressively smaller in visual appearance; H1 being the largest. Best practices dictate that each page begin with a single H1, then progress. Sub-ideas begin with H2, sub-sub ideas with H3, and so forth. The headings should be descriptive and helpful.

Other best practices for headings include not choosing them by size or visual appearance, choose them based on their appropriate place in the hierarchy. They can be visually restyled in your CSS stylesheets to alter their appearance. Do not skip to a more specific (smaller) heading level, e.g. from H2 to H4. Skipping backwards, e.g. from H4 to H2 is okay. Always go in order when going smaller. Don’t create headings by bolding your text; use the correct markup.

5. Review your text formatting.

Some best practices for text formatting include:

  • never change the font, font size, or color of your text
  • use bold and italics for emphasis only, never for visual headings
  • never underline or strike through plain text
  • keep text left-aligned
  • organize your text into bulleted or numbered lists as necessary

6. Review your reading level.

When using a screen reader, users benefit from having text at a lower reading level. It’s not a requirement for accessibility, but it is best to write at as low a reading level as is appropriate for your content. Doing so benefits people with cognitive impairments, people who don’t speak English as a first language, people who distracted easily when reading, etc. In other words, don’t use a grandiloquent word when a simple one will do!

Best practices for readability include sticking to a high school level where possible and appropriate, limiting paragraphs to around 80 words, avoiding jargon, acronyms (unless explained), and avoiding difficult language. Tools like the Hemingway Editor can help you improve your readability.

7. Note the language of your page.

Assistive technology needs to know what language the web page is written in, in order to translate it correctly. This is as simple as adding a language attribute to the html tag of your code in every page of your website.
Example: <html lang=”en”>

The “en” indicates that the web page is written in English. For other languages, refer to the ISO abbreviations.

8. Review your typography.

List of best accessible fonts: Times New Roman, Verdana, Arial, Tahoma, Helvetica, CalibriIs the font you selected clear and easy to read? Your typeface should be legible and readable. This helps people with low vision read your content more easily, and reduces additional strain for those with learning disabilities. This article by the BOIA (Bureau of Internet Accessibility) discusses your best font options for accessibility.

9. Linearize your code.

What this means is, lay out the code of your page so that all of the elements are in order. This not only helps if a user turns CSS off (the content will display in the correct reading order), but screen readers don’t process CSS. This means that they read things in the order it is coded. If your code isn’t laid out in a logical order, this can be very confusing.

10. Review your color choices.

Use of color shouldn’t interfere with a user’s ability to view content on the page. The lack of ability to see or process colors can lead to missed content and navigation. When choosing colors, you must account for contrast and color deficiency. Tools such as TopTal can help you understand how your website is seen by people who are colorblind, for example. You should also use more than one type of sensory characteristic to show meaning.

Whew, that was a lot! So, now that I’ve checked my website for the things I’m able to do easily, how do I figure out what else is wrong?

Now it’s time to employ the use of a few tools!

Accessibility check on pageIf your site is built using WordPress, a useful plugin to install is WP ADA Compliance Check Basic, by AlumniOnline Web Services LLC. This free plugin allows you to scan up to 25 posts or pages to test for accessibility compliance and you can even have it look for issues when you publish content. With a quick install and scan, you’ll quickly have a list of items to fix that you can check off as you fix. Each issue identified has plenty of information so you can fix. The paid version is worth the money as it will scan you whole site.

If you’re a Google Chrome user, there are helpful extensions and browser features which can also help you identify errors on your website. One such extension is the Siteimprove Accessibility Checker. This extension allows you to evaluate any accessibility issues in real time, provides an overview of how it affects your users, and provides specific recommendations on how to fix each item.

Showing lighthouse report in Chrome browserAnother helpful tool which is already built into Chrome is Lighthouse. It can also be run as an extension. Simply visit the web page you’re trying to audit for issues, open Developer Tools (on a PC, this can be accomplished by hitting the F12 key; on a Mac, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools.) In the top menu, select “Lighthouse.”

Lighthouse will audit your website for a number of considerations, but you’ll definitely at least want to check the “accessibility” option, and click “generate report.” The resulting report will  highlight opportunities to improve your website’s accessibility, and assign your website a score. Your score improves in real time as you address the issues. A score of 96 or above would be considered to be compliant with accessibility standards.

If you’re not comfortable enough with coding that you’re able to fix your website’s accessibility issues, you may wish to consider hiring a web design firm like Thrive Web Designs who specializes in accessibility compliance concerns.

I’ve fixed everything! Now what?

Now, you may wish to include an accessibility statement on your website! An accessibility statement, which is normally a page added to the footer menu of a typical website, says to your customers that you are committed to being a business inclusive of all individuals, what steps you’ve made to make your site accessibility and your ongoing commitment. W3 has an accessibility statement generator which is useful for this purpose. You simply plug in the pertinent information, and an HTML coded statement you can paste into your webpage will be produced for you.

To learn more about web accessibility, tools, and options, please visit our information hub on ADA Compliance for Websites.

If you need a professional ADA compliance audit or other professional accessibility services, contact us today!


X-Wing