Achieving Library Website Accessibility

There are many steps to redesigning or building a website, but luckily the Build A Better Library Website Bootcamp breaks down each step of the process into free lessons for all New Jersey Library employees.

The Build a Better Library Website Boot Camp is available through WebJunction’s course catalog for free to enrollees, including librarians and library workers, as well as museum and archive staff.

The course can be taken in full or a la carte depending on which topics you need assistance with most. As we go through the course ourselves and outline each lesson, we hope that you’ll learn quick facts and then turn to the bootcamp as a more in-depth resource. So far we’ve covered everything from Getting to Know Your Website Users to Setting Up Website Navigation. And now we’re going to cover accessibility. In the past we’ve given tips for making social media more accessible, but we’re going to focus on accessibility for websites now.

One in four Americans have a disability of some type and web accessibility is when website tools and technologies are developed and designed so that people with disabilities can use them. Specifically for libraries, this could also apply to your patrons that are elderly or in rural areas and struggle with digital literacy. Making your library website as accessible as possible to everyone in your community will better serve your patrons.

Content for All

Having a website that is accessible is not just best practice, it’s mandated by US Section 508. All websites must be compliant with the criteria specified in the Web Content Accessibility Guidelines. When creating the content for your website, it’s important to keep in mind that many individuals will be consuming your website via a screen reader. Screen readers read websites from top to bottom. If your website has a large navigation at the top with many links before getting to the main content, the screen reader will have to read all of that first. Try to avoid having too many links and if that’s not something that can be avoided, add in a “Skip Navigation” link at the top to give users an option to get right to the main content. In the body of your website, try to hyperlink with text that describes exactly what the user will be clicking on. Raw links will be read aloud and can be long and complicated. Try hyperlinking “Click to see Bestsellers List” so it’s specific and direct.

For visual elements, all images must have ALT text so screen reading software can describe what the image depicts. You don’t need to use the phrase “image of” in the description, the screen reader will already announce that it’s an image. Be as detailed as possible in descriptions. For example, the ALT text for the below photo could be “hand touching book spines on shelves full of library books.” Never use images in place of text.

All videos included on your website should have closed captioning and transcripts available. Disable all auto-play features so the video does not automatically begin playing while scrolling. As long as all visual elements of your page have a description or verbal element to complement them, you should be meeting accessibility guidelines.

Inclusive Formatting and Design

Many people who cannot operate a mouse use the tab key to move from element to element on a webpage. Make sure the format of your webpage makes sense to tab through. The structure of your website and hierarchy of information should also be made clear through formatting. You must indicate page or section headers by coding their importance. Screen readers do not read different sized text or bold headers differently, they need to be coded in HTML as a headline. For example: “<h1>Achieving Web Accessibility<h1>”. It’s also important to make unique page titles so there are no duplicate page titles throughout, which can get confusing. Always use numbers instead of bullets when listing items.

When designing your website, it’s good to stick to 2-3 fonts and keep them consistent across your website. Body text should be 16 px and headings/subheadings should be 18px. Font or element colors on the website should always be checked for readability in the color contrast checker, but it’s best to avoid using a lot of varying colors on your website. Additionally, color cannot be the only indicator of information or change. For example, if a hyperlink is colored, it should also be underlined. There should be a clear indication to anyone who cannot see color that an element of the website is different.

Website Accessibility Check

It can be overwhelming to remember all accessibility criteria when creating your website, which is why there are many tools available to check and see how your website is meeting the mandate. Automated checking tools will provide an overview of issues that may violate various guidelines and will direct you to that guideline to fix it. However, automated tools are not guaranteed to catch everything. Human testing can provide valuable insight and complement automated testing. The job of the website content editor is to ensure maximum accessibility where possible, but this is an ongoing journey and always evolving!