Cover slide of presentation with title Website Accessibility: The Basics

Website Accessibility: The Basics

ByCarol

Quick Links

View a PDF handout with slides and speaker notes

Priority Accessibility Features

Low-Hanging Fruit – The Changes with the Most Impact

Content Organization

HTML and Hierarchy

Sample of different Heading styles including H1, H2, H3, and H4.

This is a sample of the different styled headings for this website. Each website will have a stylesheet that will style these headings differently using CSS (Cascading Style Sheets). 

This is normal paragraph text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum nisi non neque hendrerit, vitae vulputate tortor vestibulum. Suspendisse potenti. Morbi cursus est vitae dui blandit pharetra. Praesent consequat quis urna a ultrices. Pellentesque malesuada est at tempor pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec augue massa. Cras in ultricies purus. Quisque vitae luctus diam. Quisque risus orci, lobortis vitae magna a, mattis molestie urna. Maecenas posuere ac eros sit amet consectetur.

This is a sample of the standard paragraph font style for this website. The stylesheet for the website will also style these headings differently using CSS.

It is important to keep the hierarchy in order

Sample screenshot of headings used incorrectly and out of order H2, H4, H1

Important

Use the headings in the correct order going both up and down the hierarchy. If style is a factor in choosing the heading, a heading style can be changed.

 

Use Block Quotes When Appropriate

Sample Block Quote

Sample screenshot of a block quote using a random meaningless quote for the purpose of showing style

Block Quotes

The website’s stylesheet will have a specific style, sometimes with color accents. that show quotes. These are known as blockquotes and are helpful to use when quoting someone.

Additional Writing Tips

  • Accents on letters
    Accents on letters are important to help the screen reader pronounce words correctly.
  • Acronyms/Abbreviations
    Any abbreviation should only be used after it is first spelled out in its entirety and then the abbreviation is put in parenthesis immediately behind the full spelling. 
  • Language Changes
    It is important to note any language changes in your writing. 
  • Avoid describing shape or color
    Avoid phrases like “Click the green button below”. This is detrimental to non-sighted or color-blind users. 
  • Avoid line breaks and justification
    Unnecessary line breaks and justification can make text hard to read. 
  • Avoid “Click here” or “Learn More” for links
    A page can have numerous “Click here” words or “Learn More”. Instead say something like, “View All Upcoming Events” or “Learn About Our Course”. 

Alt Text on Images

Sample Image

Person typing on a computer wearing a black shirt with the WordPress logo

Alt Text field of the Sample Image

Screenshot of the alt text field in the back end of WordPress showing how to add Alt Text

Tips for Writing Alt Text

  • Relevant to Content
    In this situation, the T-shirt that the person is wearing is notable and worth mentioning because it is a WordPress logo and we talk about WordPress websites. So it is worth noting the shirt. In other instances, the clothing may not be worth mentioning. 
  • Repeating Text
    If the image has text on the image that is repeated in text nearby on the site, DO NOT put that text in the alt text because the screen reader will read it twice. 
  • Decorative Images
    Each image except decorative only images needs alternate text (alt text) to describe what the image is about.
  • An image of
    Don’t say “an image of”. It gets repetitive. It is assumed that this is an image. However, it is acceptable to say, “a screenshot, or illustration, or professional headshot” because those describe the type of image and give the user an idea of what the image is. 


In Summary

Be descriptive, yet as concise as possible. Also, think about what it would sound like if a screen reader was reading this to you.

Color Contrast

A tale of two buttons

screenshot of a small click here button that is not accessible

This button above is a screenshot of a button. It is not a clickable button. 

Doesn’t Meet WCAG-AA

screenshot showing the color contrast level not acceptable for website accessibility
screenshot of a larger click here button where the font is larger and the contrast is higher.

This button above is a screenshot of a button. It is not a clickable button. 

Meets WCAG-AA

Screenshot showing a color contrast score with good website accessibility

Tab Navigation

All websites should allow a user to fully navigate the site on a keyboard without using a mouse. This means that all dropdowns are accessible by “tabbing” through the site.

WARNING – A common issue is pop-ups where the pop-up is unable to be closed with a keystroke and requires. mouse click.

A screenshot of a computer screen with arrows demonstrating tab navigation

Video Captions

Live captioning services by a professional company is always the gold standard, especially with events. There are other options. as well, including some that you may already have. in your toolkit.

  • Zoom has expanded the automated live captioning services to all free accounts. This article explains how to enable this feature.
  • YouTube also supports auto-captioning. View this article for more help.
  • Otter.ai
    Otter.ai is an artificial intelligence technology that converts speech to text. There are various plans available starting at around $9.00 a month if you pay annually. 
  • Rev.com
    Offers video captioning service for $1.50 per minute. 
  • webcaptioner.com
    Webcaptioner.com is a free service that offers live captioning through a browser window on your computer using the microphone. Simply play the video and it will caption what it hears. This service is built and supported by a community of individuals committed to accessibility.

Tools and Accessibility Resources

Accessibility Resources

  • UsableNet
    The mission of UsableNet is to make the digital world more accessible and usable. We aim to make websites, apps, and other digital platforms more accessible, inclusive, and user-friendly for everyone. 
  • WCAG Guidelines
    The Web Content Accessibility Guidelines (WCAG) has three levels of compliance. Learn more about what is involved with A, AA, and AAA levels of compliance.
  • Able Player
    A cross-browser video player that can be installed on your website and offers many accessible features. 

Accessibility Tools

Color Tools

  • Accessible Color Matrix
    This tool lets you enter the hex code of your color palette and see how many accessible color combinations you have using your color palette. This is a great tool for designers and brand creators. 
  • Image Color Picker
    Image Color picker is an online tool that allows you to upload images and pull together color palettes. 
  • Color Lovers
    Color lovers is a website that allows you to browse many different color palettes and to create, save and share color palettes you create. This is a free resource that requires you to log in. 
  • Hex Color Tools
    Hex Color Tools is a site that lets you enter a hex color code and then show darkened or lightened shades of the same color as well as show complementary colors.
  • Color Picker Extension
    Color Picker is an extension that can be added to Firefox and Chrome that will open a small window under your mouse and allow you to see the hex color code of the color on your website.
  • Accessible Colors
    A website that allows you to add your current color foreground and background and it will suggest colors that match closely that will give meet the AA or AAA WCAG guidelines.
  • A11y Rocks
    A very similar color palette accessibility tool that lets you visualize your color combinations and gives you the actual color contrast of each combination. 
  • HTML Color
    HTML Color is another site that helps with identifying the hex color codes.

US Department of Justice Web Accessibility Guidelines

screenshot of the department of justice memo on web accessibility

The US Department of Justice released new guidelines on March 18, 2022.  These guidelines reiterated the following quote.

“…the Department has consistently taken the position that the ADA’s requirements apply to all the goods, services, privileges, or activities offered by public accommodations, including those offered on the web.”

Barriers

The complete guidelines under the ADA website call out the following barriers to website accessibility.

  • Poor Color Contrast
  • Use of color alone to give information
  • Lack of “alt text”
  • No captions on videos
  • Inaccessible online forms
  • Mouse-only navigation (no tab-through/keyboard navigation)

Requirements

The guidelines use the American Disabilities Act (ADA) definitions of who is required to follow. Title II includes State and local governments and Title III applies to Businesses that are open to the public.

Resources

Bibliography

US Dept of Justice

Web Accessibility Guidelines

RELEASED MARCH 18, 2022

Miscellaneous resources

  • Meetups
    You can find many meetups available on Meetup.com. The AZ WordPress Meetup has a membership of over 2,750 members across the state, and nationally. We are currently meeting through Zoom and offer monthly meetups on the topic of WordPress covering a wide range of topics. Not only is this a great networking opportunity, but a good way to collaborate and learn new things with one another.