eBranch Accessibility Guidelines

Maintaining an accessible website ensures that all community members have equal access to your library’s programs and services. eBranch participants and the Idaho Commission for Libraries (ICfL) must work together to keep eBranch websites accessible. eBranch libraries are responsible for ensuring that any content added meets accessibility standards, while ICfL maintains accessibility within the website’s theme and framework.

As stated in the eBranch Agreement, participants must comply with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. Below is a guide to key accessibility requirements. Please note that this is not an exhaustive list of accessibility guidelines. It is intended to give you a solid foundation for maintaining an accessible website.

While this guide was developed to assist eBranch participants, the information is relevant to any library or public entity wanting to improve the accessibility of their online spaces.

Accessibility Requirements for Website Content

The following guidelines apply to all content on your website, including any PDFs you link to.

Guidelines are listed in chronological order according to their success criterion number in WCAG 2.1.

All images should include meaningful alt text, unless the image is purely decorative. Avoid text-heavy images (like PNGs of program flyers). All of the relevant information in the image MUST be included either in the alt text or nearby on the page as regular text.

Alt Text best practices:

  • Accurate: Alt text should convey the same information as the image itself.
  • Relevant: Rather than just describing what an image contains, provide context on how the image relates to the page content.
  • Succinct: Keep it short – ideally 1-2 sentences.
  • Not redundant: Avoid phrases like “image of” or “picture of” and don’t repeat text that appears near the image on the page.
  • Linked Images: For hyperlinked images or icons, alt text should describe the link’s purpose, not the icon’s appearance. Example: Use “Print Agenda” instead of “printer icon.”

Alt Text Resources

Charts, graphs, and infographics should include meaningful alt text that conveys the same information presented visually. If a chart, graph, or infographic is too complex for alt text alone, the data and details should be provided in text format, either nearby on the webpage or via a link to an accessible document containing the information.

Alt Text for Complex Graphics

Provide text alternatives for any audio or video content on your website. This helps ensure your content is accessible to people who cannot see or hear the original media.

Here are some ways to make different types of video and audio content more accessible on your website:

  • Audio-only content (like a podcast or meeting recording): provide a text transcript that includes all spoken information.
  • Video-only content (videos without any spoken words): provide a written transcript or an audio clip that explains the important visual details, such as text shown on screen
  • Videos with audio: add captions for all spoken parts, and provide a transcript that includes both the spoken and visual information.

Audio/Video Accessibility Resources

Information, structure, and relationships on a webpage should be set up in a way that both people and assistive technologies (like screen readers) can understand. For example, headings shouldn’t just look like headings because of their size, color, or style—they need to have the correct heading tags (like H1, H2, etc.) assigned to them.

To add these heading tags on your website, go to the text editor and use the dropdown menu at the top. By default, this dropdown is set to “Paragraph,” but you can select the appropriate heading level (H1, H2, etc.) to clearly mark each heading.

Headings Best Practices

  • Headings should provide a logical outline of the page’s content
  • Map out headings before creating a new page
  • Don’t skip heading levels
    • Don’t go from an H2 to an H4 without an H3 in between.

Heading Resources

If the order of information on your webpage is important, make sure that it appears in the correct sequence when read by both users and assistive technologies. Using proper heading tags (H1, H2, etc.) usually ensures that content follows the intended reading order.

Sometimes, adding buttons or images in the middle of text can disrupt this order. To check if everything flows correctly, try resizing your browser window or viewing your page on different devices, such as a mobile phone and a desktop. Make sure the content—headings, text, images, and buttons—still appears in the correct order.

Using color, size, shape, or placement as the ONLY way to differentiate objects on a webpage can make it hard for people using assistive technology to understand your content. Screen readers can’t interpret these visual cues, so it’s important to provide additional indicators.

Here are some common examples:

  • Hyperlinks: While hyperlinks are often shown in a different color from the surrounding text, this alone isn’t enough. People with visual impairments might not notice the color difference. To make hyperlinks clear, underline them in addition to using a different color.
  • Color Coding: If you use colors to categorize information (for example, using different colors to represent age groups on a program calendar), add text labels to identify each category. That way, people who can’t see the colors can still access the information.
  • Required Fields on Forms: Sometimes, required fields on a form are marked with red text. However, if people with visual impairments can’t see the color, they won’t be able to identify which fields are required. To ensure clarity, add a label such as an asterisk (*) or the word “Required” beside each necessary field.

By using these additional indicators, you make sure that everyone can understand and access your content, regardless of their ability to see colors or interpret other visual cues.

The text, buttons, links, and other visual elements (like charts and graphs) on your website must stand out clearly against their background colors. This is measured by comparing the color of the text or element with the background color using a contrast ratio. A higher ratio means better contrast. You can test your website’s contrast using free online tools, like the WebAIM Color Contrast Checker.

Minimum Required Color Contrast Ratios

  • Regular Text: 4.5:1
  • Large Text (at least 14pt bold or 18pt regular): 3:1
  • Graphical Elements (e.g., buttons, graphs): 3:1
  • Links: Links should have at least 3:1 contrast with the surrounding text, and 4.5:1 contrast with the background color.
  • Logos: Text that is part of a logo has no contrast requirements.

Color Contrast Resources

Each webpage should have a descriptive title. Page titles should be tagged as H1.

Use descriptive link text. People using screen readers can have a list of all the page’s links read to them. They should be able to determine what a link is for without having to rely on any surrounding text. Avoid using “click here” or “learn more” as your hyperlinked text.

For example, if you have a webpage listing all of your library’s online databases, you would link the name of the database rather than using “Click Here” for each database.

Hyperlink Best Practices

Hyperlink Resources

Headings should be descriptive. Screen reader users can “skim” a page by having their screen reader list only the headings on a page, and using descriptive headings helps them understand what information is available on the page.

For more guidance on headings, see section 1.3.1 Info and Relationships (Headings) above.

Accessibility Requirements for Website Theme and Framework

The following accessibility requirements apply to your website’s theme and framework. The E-Services team at the ICfL oversees these aspects of eBranch websites, but it’s important to be aware of them so you can notify us if something isn’t working properly.

Guidelines are listed in chronological order according to their success criterion number in WCAG 2.1.

Text can be resized up to 200% without losing content or functionality.

Content must remain clear and organized when viewed on different screen sizes or when zoomed in. To check this, try zooming in on your webpage to at least 200%. If any content disappears, the layout breaks, or you have to scroll both up-and-down and side-to-side to see everything, then the page doesn’t meet this requirement.

All content and interactive elements (like buttons and links) can be accessed with a keyboard. To test this, don’t use your mouse and use the following keys on your keyboard to navigate your page:

  • Tab: Move from one interactive element to the next
  • Shift + Tab: Move backwards from one interactive element to the element before it
  • Enter: Click on a link or open a drop-down element (like a menu or toggle)
  • Arrow Keys: Scroll the page or move through items in a list
  • Escape: Close a menu or pop-up menu

For elements that can receive keyboard focus, the user must be able to move away from the activated element using only the keyboard.

Moving content, such as image carousels, should allow the user to pause, stop, or hide the content.

Provide a mechanism to bypass blocks of content that are repeated on multiple pages. For example, a “Skip to Content” link allows users to bypass the menu on each page.

A visible outline appears around an active element (such as buttons and links). To test this, use the tab key on your keyboard to jump between buttons and links on your page. Does an outline appear around the button or link you are currently on? If not, this criteria has not been met.

POUR: Perceivable, Operable, Understandable, and Robust

In general, all web content must be:

Perceivable

Content can be seen and heard with features like alt text, video captions, color contrast, and keyboard focus indicators.

Operable

User interface elements function correctly, with all menus, buttons, and forms behaving as expected across different devices, screen sizes, and when using assistive technology.

Understandable

Content is written at a general reading level and definitions are provided for any acronyms used.

Robust

Content can be interpreted reliably by a wide variety of users and assistive technologies, like screen readers.

Americans with Disabilities Act (ADA) – Title II

Public entities shall ensure that their web content and mobile apps are readily accessible to and usable by individuals with disabilities.

Section 508 of the Rehabilitation Act of 1973

Federal agencies are required to make their electronic and information technology accessible to people with disabilities. This includes websites, apps, electronic documents (like PDFs), and more.

Assistive Technology

People with disabilities use a wide variety of assistive technologies designed to help them navigate the web. Web accessibility guidelines are in place to ensure that assistive technology can interpret a website’s content.

There are many types of disabilities that can impact a person’s ability to navigate a website. It can be useful to consider the different types of assistive technologies people may be using to navigate your website.

Types of disabilities

Visual disabilities

blindness, low vision, color blindness

Hearing disabilities

deafness or difficulty hearing

Physical disabilities

difficulty using a mouse or other physical limitation

Cognitive disabilities

learning disabilities, difficulty with memory/ comprehension

Examples of assistive technology

  • Screen magnifiers: Enlarge the text and graphics on a webpage
  • Screen readers: Read web content – like text, links, and image alt text – out loud
  • Speech recognition software: Converts user’s speech to text on screen and/or performs voice commands
  • Refreshable Braille displays: Translates web content into Braille
  • Joysticks, trackballs, head pointers, etc.: Allow users who are unable to use a mouse and/or keyboard to navigate web pages
  • Automatic transcription software: Converts audio to text

Assistive Technology Resources

Social Media Accessibility

Online accessibility guidelines extend to a library’s social media accounts as well as their website. In general, make sure to do the following for each post:

  • Add alt text to your images or include all of the text in an image in the post’s caption.
  • Use closed captioning for video content.
  • If a hashtag contains multiple words, capitalize the first letter of each word.
  • Ensure images and graphics meet minimum color contrast ratios.

The federal Section 508 website outlines platform-specific guidance.

Doug Baker

Doug Baker

Library Technology Consultant
Email / 208-639-4173
Read my Blogs

Haley Westbrook

Graphic/Web Designer

Email / 208-639-4180