# Introduction to LibA11y A guide for making our library content accessible In the library world, we create a lot of content. This guide is designed to help you make this content accessible to everyone. In addition to explaining *how* to make our content accessible, this guide aims to explain *why* these methods are needed. We hope this knowledge makes it easier to implement. ## How to use this guide You can read this guide multiple ways. You can read it beginning to end. You can jump directly to the section you immediately need. You can read details about how library patrons use screen readers to better understand how these content solutions work— or jump right to the solutions section. Videos created by the U.S. Dept. of Education show a lot of the recommendations in action. Grab what you need and return for additional information as you find time. Definitely [install the WAVE testing tool](/howto/how-to-build-better) to help you check your work. > ## 5 quick tips to immediately improve your content accessibility > > 1. Use[ headings for your content headlines](/howto/better-page-structure) (h1, h2, h3). Keep your headings in logical order to provide an outline for your document. > 2. [Include alternative text](/howto/better-images) to convey the content of your images. > 3. Ensure all your [videos include closed captions](/howto/better-video) and/or transcripts. > 4. [Don't rely on color to convey information](/howto/better-color) and make sure your text has good color contrast. > 5. The [text of your links should be meaningful](/howto/better-links) even taken out of context. ![We can't sit on our laurels and assume that our content can be used by everyone.](/files/-LbcfHQw3P7bw6AVIZjX) ## **What does "LibA11y" mean?** **Lib** is for the wonderful world of libraries. **A11y** is a common numeronym for accessibility — 11 being the number of characters between the A and Y. Phonetically, a11y makes us allies for universal access. ## Use-Share-Remix Version 1.2 updated in 2024 by Jerry Yarnetsky, web services librarian at Miami University, Oxford, Ohio. This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). # 1.1 Why should we care about digital accessibility? ## Universal access provides greater than expected benefits > "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." —Tim Berners-Lee, inventor of the World Wide Web Consider closed captioned video. A viewer with hearing loss certainly can benefit from closed captioned video. A person who has difficulties understanding speech in noisy environments can also benefit. Now consider the video content itself. What if the presenter has a strong accent or is speaking in technical terms? Captions can help provide clarity. Captions can also support poorly recorded video, such as when content is recorded in a noisy environment or if the sound becomes muffled. This wide range of benefits is very typical when you use universal access best practices. Universal design provides benefits for the site creator as well! As you will read, accessible websites are well structured and clear to read. These same properties can also improve your site's search engine optimization and improve your results with artificial intelligence tools. For instance, AI tools are frequently being used to summarize web pages. Using HTML headings for headlines in your content provides AI with an outline of your site in advance. Similarly, alternative text on images not only make the images accessible to someone using a screen reader, it also identifies the content of images for a search engine or AI as well. ## **Doing it right the first time saves time (and money)** Having accessible content from the point of creation can save extensive time and effort spent on accessibility remediation after the fact. It can also potentially save legal costs. For example, [dozens of colleges and universities across the United States are facing legal action](https://www.d.umn.edu/~lcarlson/atteam/lawsuits.html) over inaccessible technology and online resources. ## We're librarians! > "We provide the highest level of service to **all library users** through appropriate and usefully organized resources; equitable service policies; **equitable access**; and accurate, unbiased, and courteous responses to all requests." — from [ALA Code of Ethics](http://www.ala.org/tools/ethics) (emphasis for illustration) Providing universal access certainly makes sense from these perspectives, yet more importantly it helps us fulfill our ethical mission. As such, we should be at the front lines fighting for our patrons and students access to everything. **We're librarians! Access is our middle name.** ## **Fear not, the basics are easy** While implementing advanced web accessibility can require development experience, making the basic content we all create accessible can be accomplished by us all. ## Read more... * [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) # 1.2 How is content perceived? ### Try this experiment Go to the [*New York Times* website](https://www.nytimes.com) and ask yourself the following questions. What are you reading to understand the page? Are you reading every word or just the headlines? Looking at the photos? Going to the page navigation? Which methods help you understand the page the easiest and the fastest?
Sample homepage of the New York Times
Accordingly to [eye-tracking studies](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/), we initially skim pages for content by scanning page elements such as headlines and key text such as phone numbers. Then we zoom into the sections of text to read the details that interest us. An aspect taken for granted in this process is that we can do all this because **we can see the site**. Our senses — such as sight and hearing — are input devices to our brain. We rely heavily on our senses for everything we do online. However, if we cannot rely on one of those senses, everything changes. ### Assistive technology helps shift senses This is where assistive technology comes into play— it can shift input to a sense you can rely on. For instance, closed captions allow a person to read the dialog and environmental sounds from a video they might not be able to hear. In turn, a person using a screen reader can listen to articles online they cannot see. Indeed, a screen reader can provide in-depth information about page structure, content, and navigation— providing the same information we visually scan. ## Making the web visible to a screen reader However, screen readers themselves cannot see. They can only communicate page content and structure based on how our pages are encoded and organized. Not encoded properly, content can go missing or its intent lost. For example, a screen reader relies on headings coded into the page to communicate article headlines or section titles within an article. For example, `

` is for a top level heading, `

` for second level, etc. With our headline labeled as a heading, our screen reader can indeed see it as a headline. ```markup

Article headline

This is the first paragraph of content.

``` On the other hand, what if we only make the words bold? The words will stand out visually, but a screen reader has no means of knowing if we intend for this text to be a headline or simply emphasized. ```markup

These words are bold, but is it a headline?

This is the first paragraph of the article.

``` When used correctly, our content management system, such as LibGuides or Wordpress, can handle most of these simple coding needs. However, as we write our content, we can still introduce many errors that can make reading the pages with a screen reader difficult at best. Avoiding these errors is where this guide hopes to help! ## Read more... * [How People with Disabilities Use the Web](https://www.w3.org/WAI/people-use-web/) * [I Used The Web For A Day Using A Screen Reader](https://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/) # 2.0 How to build better content? Test your work. In the following pages, we will go into detail on how you can improve your web content for accessibility. Each page will focus on a specific aspect of web content, such headings, images, and hyperlinks. The page will start with a description of how the screen reader, or other assistive technology, interprets and allows the user to interact with that element of the page. It will be followed by examples and tips for how you can make powerful contributions to making your content universally accessible. ## Install a testing tool Before we jump into the details of making your content better, let's install a simple accessibility testing tool for your content that can double check your work as it is created. **Testing Tip**: Test a preview version of your page and not the editing version of your page. ### **WAVE Accessibility Evaluation Tool** The WAVE accessibility toolkit was created specifically with web content creators in mind. It can help you test each of the issues in our guide. Install a browser extension or enter your site URL in the website version. * [Website version](http://wave.webaim.org/) and information * Extensions: [Chrome,](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) [Firefox,](https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/) and [Edge](https://microsoftedge.microsoft.com/addons/detail/wave-evaluation-tool/khapceneeednkiopkkbgkibbdoajpkoj) versions. ### **Additional testing tools** * [Axe Dev Tools](https://www.deque.com/axe/browser-extensions/): advanced tools for accessibility testing. * [Color Contrast Checker](https://webaim.org/resources/contrastchecker/): Test web colors for contrast * [Color-reliant Link Contrast Checker](https://webaim.org/resources/linkcontrastchecker/): See if your link colors pass contrast tests. * [A11y color blindness empathy tool](https://chromewebstore.google.com/detail/a11y-color-blindness-empa/idphhflanmeibmjgaciaadkmjebljhcc) (Chrome extension) # 2.1 Page Structure Good page structure is the crucial first step. The key here is to use your content management system's built-in content structure tools in a logical manner. ## Screen reader interaction {% hint style="info" %} * When first landing on a web page, the screen reader announces the page title. * Users can quickly skim the contents of a webpage by listening to the page headings. This helps a user understand a page's content structure and hierarchy. * Headings also act as page navigation. A person using a screen reader, having listened to the page's headings, can then jump to any heading on a page. * The screen reader announces the presence of an ordered and unordered lists and the number of items in the lists before reading the individual items. * Content is described in a linear fashion by the screen reader. As such, even three-column pages are described as a single column starting with the first column. {% endhint %} ## Solutions ### Create page titles that are brief, but meaningfully describe of your page content Titles are critical. Not only are they announced by screen readers, they also appear in browser tabs and search results. It's best to include the page information before section or site information. For instance, the title of this page is: "Page Structure - LibA11y: Making our library content accessible." ### Use headings to give your content a logical hierarchy. Use page headings to outline content— not unlike a bulleted page outline or table of contents. Use the headings in order and don't skip headings. In LibGuides, for instance, Heading 1 `

` is reserved for guide titles and Heading 2 `

` is held for box titles. For content within the boxes, use headings 3 to 6. Here's an example of how to use headings to keep content in order. {% hint style="info" %} * **H1 Guide Title** * **H2 Box Title** * H3 Section inside a box * H4 Sub-section * H4 Sub-section * H3 Section inside a box * **H2 Box Title** * H3 Section * H3 Section * H4 sub-section * H4 sub-section {% endhint %} ### Additional best practices for headings * Don't use a font-size change alone to signify headings. This heading would be missed by a screen reader. * Similarly, don't change the headings to simply make text larger or smaller. This can alter your page outline and make it difficult to understand. * If you need to change the heading's font size, do so after making it a heading. * Better than using the font size menu, customizing your CSS can resize headings across your entire website. ### How to use headings in LibGuides 1. Click in the paragraph you want to be a header 2. Select the level of heading from the paragraph format menu (pictured below). ![In LibGuides, you can create headings from the rich text editor's format drop-down menu](/files/-LaGIPNw5YwGw8pORvo5) ### Additional page structure tips * **Use the built-in tools for ordered (numbered) and unordered (bulleted) lists.** When creating lists, think about the type of list needed. For instance, if the list is a series of steps, use the ordered list tool. If order is not critical then using the bulleted list tool works perfectly. * **With multi-column pages, watch your content order closely.** Because the entire first column will be read before the second column, don't place related materials side-by-side in different columns if there is unrelated material below in the first column. ### Video Tutorial {% embed url="" %} Learn how to use heading structure on a web page so everyone can navigate your content with ease. From the ADA National Network. {% endembed %} ## Testing ### Using WAVE tool * Clicking your WAVE tool extension icon for the testing side panel to appear. Click on the Structure tab to see the headings report. * Scroll through the list to see if any error or warning icons appear noting that either heading levels are out of order are that levels are being skipped. You will also see these warning icons appear on your web page. * For instance, in the screenshot below, the headings of this page are skipping from h1 to h3. The order should be h1 to h2. * Read through your order to ensure your headings and nesting order make sense as an outline of the page. * Also, click the Order tab to view the order your content will be read by a screen reader. This is the same the order that people who use keyboards for navigation will scroll through your page.

This structure report shows this page is skipping a heading level.

### Fix a mistagged heading Just as you click in a paragraph and change it to a heading from the format menu, you can also repair headings in the same manner. Simply click the heading and select the proper level from the menu. In rare instances, you'll find a heading accidentally tagged a subsequent paragraph. You can reset the non-heading to "normal" with the same menu. ### **Test your page on a mobile device!** Another way to visualize the organization of your page is to view it with a phone browser. Your content will become linear in much the same way it does on a screen reader. If the page does not make sense on a phone, a re-ordering of content will be needed. # 2.2 Images ## Screen Reader Interaction {% hint style="info" %} Patrons using a screen reader will hear the alternative text (also known as "alt text") read aloud when encountering an image on a webpage. Without alt-text, the images become invisible to the reader. {% endhint %} ## The Solution: Use Alternative Text to describe your images Screen readers will read alt text in the place of the image to convey its intended meaning. ### What should be included in the alt text? * Information related to the image’s content, function, and intent. * Keep it brief. If brief is not possible, consider including more explanation in your text. * Skip introductory phrases such as "image of...." as the screen reader will announce it is an image by default. * Some content management systems allow for image captions. If the image caption and alt text would be exactly the same, a caption alone would suffice. However, ideally you describe the image itself in the alternative text and use the captions for adding additional context or meaning for the image. ### Alt text is not needed when... * Graphics are purely decorative. * Alt text would be repetitive information. * For example, the alt text for a book cover might be its title. If the image is next to a catalog link that also features the title, the alt text become redundant. * In these cases we still need an alt tag, but it would be empty: * `` ### Video tutorial {% embed url="" %} Learn about alternative text and why it is important for people who cannot see photographs and graphic images. From the ADA National Network. {% endembed %} ### How to add alt-text in LibGuides The image properties tool in LibGuides (below) provides a space where users can easily insert the description of an image when it is inserted or edited. Drupal, WordPress, and other CMS have similar dialog boxes where alt text can be entered.
In LibGuides, entering alternative text is a field within the image entry and editing screen
## Testing * Activate the WAVE tool and click on the "Details" tab. * Look through the Error, Alert, and Feature categories and review all alternative text comments. Click on the icons with each message to bring up the relevant image on your website. * Use the messages to double check that all your images have appropriate alt text. The alternative text will listed with each image. * In the series of screenshots below, the Details tab mentions an image with a "Null or empty alternative text" (left). However, looking at the actual image (center), we can see it is not a decorative image and thus should have alternative text. We should enter that information and test again to see the new alt text highlighted (right).
three images showing progression of null alt text feature in the WAVE accessibility tool, an image that's not decorative that needs alt text, finally an image with the alt text listed with the image.
## Read more... For best practices on creating alternative text, please consult the links below. * [WebAIM Alternative Text Guide](http://webaim.org/techniques/alttext/) * [Image ALT Tag Tips from Penn State](http://accessibility.psu.edu/images): Gives helpful examples of Alt Text descriptions for different situations. * [The Diagram Center Image Description Guide](https://diagramcenter.org/making-images-accessible.html): Fabulous website for learning to describe advanced graphics such as comics or data visualizations. # 2.3 Color and Text Color and text often interact, so we'll cover both here... ## Screen Reader Interactions {% hint style="info" %} * **Color and content**: Screen readers cannot verbalize information offered only by color. * **Color blindness**: Students with color blindness may not be able to differentiate colors from poorly chosen combinations. For example, green and red symbolizing open and closed. * **Low contrast**: Low contrast combinations, such as white on gray or white on yellow, can be very difficult for students with low sight and dyslexia. * **Small Text**: Similarly, some people need to enlarge text, alter the font, or line spacing in order to read our content. * **Lists**: The number of items in a list are communicated as well as the items in the list. {% endhint %} ## Solutions * **Do not rely on color to convey meaning**: Insure web content is understood as easily without color as it is with color. A common approach is to use words as well as colors to convey meaning. For example, a warning message in red should also include wording to make it obvious that it is a warning. * **Test color and contrast combinations**: Resources below can help you see how your color combinations will be perceived by someone with color blindness. * **Avoid using absolute text sizes**: Older browsers are unable to resize absolute sized text, such as 16px (pixels). If you alter your default text sizes, use relative sizes where possible — for instance small and x-large, or 1.5em and 90%. * **Test your color combinations**: The WAVE tools allows you to not only scan for errors, but also test specific low-contrast color combinations. Specialized tools are available to help you visualize your page with color blindness. ### Video tutorials {% embed url="" %} How to check for sufficient color contrast, and why it’s important. \[Open Captioned video 3:40 min] From the ADA National Network. {% endembed %} * [Use of Color Alone to Convey Information](https://www.youtube.com/watch?v=8_eVF0LPs0s) \[Open captioned video 5:14min]: What to think about when using color to convey information. ## Testing * **Contrast testing**: On the WAVE tool, select the "Contrast" tab to view any errors. Click each error icon to see where on your page the errors reside. The Contrast tab also offers a color mixer that lets you find the proper color to fix the errors. * **Color combinations**: The [A11y color-blindness visualization tool](https://chromewebstore.google.com/detail/a11y-color-blindness-empa/idphhflanmeibmjgaciaadkmjebljhcc) (Chrome browser extension) will change your screen colors to emulate how your webpage would be perceived by people with varying types of color blindness. Insure your page elements are differentiated for all sight types. * **Zoom your fonts**: Use `Command +` or `Control +` to enlarge your type to at least 200%. Is your page still functional? If not, examine how your fonts are sized and/or talk with you website manager about the overall site. (Control-0 returns you to normal size). Here's a [video that describes this zoom testing](https://www.youtube.com/watch?v=Fu2SIL7oVCU). ## Read more... * [**Designing for Color Blindness**](http://webaim.org/articles/visual/colorblind): This WebAIM tutorial provides examples of how color blindness impacts one's sight as well as possible solutions. * [**Color Safe**](http://colorsafe.co/): Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios. # 2.4 Hyperlinks ## Screen Reader Interaction {% hint style="info" %} Another method for skimming a webpage with a screen reader is to listen to all of the hyperlinks on the page. {% endhint %} ## Solutions ### Better Links * Link wording should clearly explain its destination and/or intent. Ambiguous phrasing can obscure a link's purpose. * Read your links out of context to insure they will stand alone as a screen reader presents them in order. * Avoid introductory phrases such as "click here" for a link. * Definitely do not use "click here" as a link on its own. * Do not use raw web addresses in links as the screen reader will read it aloud the entire URL. ### Better Link Examples * ***Poorly written link***: [Click here](https://miamioh.edu/about-miami/visiting-miami/directions/index.html) for directions. * ***Better***: [Directions to Miami University](https://miamioh.edu/about-miami/visiting-miami/directions/index.html) are available online. * ***Poorly written***: Learn more about accessibility [here](http://webaim.org/standards/wcag/). * ***Better***: Learn more about [accessibility standards from WebAIM](https://www.w3.org/WAI/intro/wcag). ## Video tutorial {% embed url="" %} All about links: how they are used in navigation, labelling concerns, and distinguishing them from surrounding text. From the ADA National Network. {% endembed %} ## Testing When reviewing WAVE's "Details" tab, look for alerts of "Suspicious Link Text" then click on the link alert icons to find the questionable links on your page. On this page WAVE identified the poorly written link examples above. The tool also identified redundant links from the examples above as well! ## Read More... * [Tips for Getting Started Writing for Web Accessibility](https://www.w3.org/WAI/tips/writing/) # 2.5 Readability ## Screen Reader Interactions {% hint style="info" %} * Carefully watch the language you use for the writing on your page. Perfect technical accessibility cannot help you if your reader cannot understand your writing. * Poorly formatted page text can detract from your page's readability. * Long paragraphs are difficult to read on digital screens. * Poor text spacing, such as word spacing created by justified text, makes pages hard to read for people with dyslexia. * Literacy research has concluded that half of American adults can’t read a book written at an eighth-grade level. {% endhint %} ## Solutions ### Language * Write in shorter, clear sentences and paragraphs. * Use headings to break your articles into readable sections of text. * Always keep your audience in mind. * Use the most appropriate language for your audience. * Avoid jargon and figures of speech. * Avoid using unnecessarily complex words and phrases. * If this is unavoidable, consider providing a glossary for terms readers may not know. * Expand acronyms on first use. For example, Web Content Accessibility Guidelines (WCAG) is the source for these writing tips. * Consider illustrations (images, video, audio) to help clarify meaning. * Don't forget to include alternative methods for understanding them such as alternative text for images and closed captioning/transcripts for video. ### Formatting * Use list formatting as appropriate. * Don't use underlined text — this is reserved for links. Use bold text for emphasis instead. * Avoid using all caps for text. * Avoid justified text. * Left align text to keep word spacing consistent. * Do not mix fonts within article paragraphs. * On a given page ideally use only one heading font and one paragraph font. * You can use multiple weights of each font for emphasis — bold versus regular font thickness. ## Testing Classic editing is fabulous. Having someone else critique and/or edit your work before publishing is the perfect way to catch readability issues. ## Read More... * [Tips for Getting Started Writing for Web Accessibility](https://www.w3.org/WAI/tips/writing/) from the World Wide Web Consortium. # 2.6 Video and Audio ## Screen Reader Interaction {% hint style="info" %} Sight and sound each provide a wide range of crucial information from dialog to environmental sights and sounds. Without alternative access to this content, audio and visual media can leave users who have visual or auditory impairments without access to this content. {% endhint %} ## Solutions ### Transcripts and closed captioning Content creators must proactively create multimedia in an accessible manner by including both transcripts and closed captioning. Having both may seem redundant, but each fulfills different needs. For example, a video with flashing content can cause serious issues for people who suffer from epilepsy or migraines. The transcript becomes the tool that provides the content for this video. ### Audio Description Some video projects will also need audio description. This is a supplemental audio track that describes the visual elements of the video if the primary soundtrack does **not** convey the content through spoken word. ### Externally-created multimedia These requirements also apply to video not created by the library— this is especially important at academic/K12 libraries. If a professor wants to use a library video for their students that lack these descriptive tools, such as an old VCR tape, we have a choice— we can either create the descriptive tools or suggest alternative resources. This is a common occurrence. As such, many colleges/universities have offices which create captioning and transcripts. The bottom line is that all students enrolled in a course must be able to access course material and should be able to do so at the same time. ## Additional tips * The link to the transcript should be easily identifiable and adjacent to the video. * Keep locally created video tutorials short and to the point. * Closed captions should reflect all sound that conveys content. This includes all relevant background noises and sound effects. * Ideally, users should be able to control the close captioning during playback such as captioning color and size. * Do not use video that automatically plays when the webpage loads. ### **Sample video transcript button** If a transcript overloads your page with information, you can use the following code to create a show/hide transcript button. This button taps into the Bootstrap framework packaged with LibGuides so additional javascript is not required. ```markup

TRANSCRIPT HERE
``` * From: [Bootstrap Collapse functionality](http://getbootstrap.com/javascript/#collapse) ## Video tutorial {% embed url="" %} What counts as “success” when captioning your videos – and how to avoid epic (and embarrassing) gaffes. From the ADA National Network. {% endembed %} ## Testing Accessibility testing tools are not as helpful for multimedia as the captions or transcripts are often embedded from off-site. Thus, manually check each of your videos or audio clips for these content aid features. ## Read more... * [Multimedia accessibility FAQ](https://www.w3.org/2008/06/video-notes) * [Audio Description Examples](https://www.3playmedia.com/learn/how-to-guides/audio-description-how-to-guides/audio-description-examples/) # 2.7 Tables ## Screen Reader Interaction {% hint style="info" %} Screen readers read column and row headers to provide the listener with information on the tables' content and structure. {% endhint %} ## Solutions * Use tables for data that fits well into rows and columns. * Do not use tables for formatting pages, links, or other information. * Always use table headers to describe the contents of the table columns. * The table headers should clearly communicate the data below them. * Avoid spanned rows as screen readers may not properly parse them. ### Example Here is an example default 3x2 table with a header created within LibGuide's rich text editor. It's key you identify which row or column is the table header. | **State** | **State Capital** | | --------- | ----------------- | | Ohio | Columbus | | Indiana | Indianapolis | | Kentucky | Frankfort |
Screenshot of table properties menu in LibGuides.

Identify which row or column acts as the headers with the table properties tool

Source: [Boston College LibGuides Accessibility Guide](http://libguides.bc.edu/guidestandards/accessibility) ## Video tutorial {% embed url="" %} Do you need to use a data table on your web page? If so, learn how to appropriately format table content to ensure everyone can understand your data. {% endembed %} ## Read more... * [Table Best Practices](http://webaim.org/techniques/tables/): A WebAIM tutorial # A. Four principles of a well-coded page You've now read multiple ways you can make your content more accessible to all readers, but what is the overall intent of accessibility encoding? According to the official [Web Content Accessibility Guidelines (WCAG 2.2)](https://www.w3.org/TR/WCAG22/) all web content must be perceivable, operable, understandable, and robust — an acronym known as POUR in the digital accessibility community. Let's review these principals... ## Perceivable Perceivable states that all information is presented so it can be understood with multiple senses — sight, hearing, and/or touch. For example, if a person cannot clearly hear the audio of a video, closed captions allows them to see and read the text of what is being spoken.
Closed captions make voices and sounds visible

You don’t need to be hard of hearing to benefit. Ever watch a British TV show with thick accents? Closed captions are amazing!

### Operable All user interface components and navigation need to be operable with multiple input devices— be it mouse, touch, keyboard, voice, or specialized accessibility technology such as a tongue-controlled mouse. This ensures that all users, no matter a person’s motor abilities or dexterity, can readily interact with your content. The interface has to communicate with the user about the status of interactive elements. For example, if a page has tabbed content, the site needs to describe to the screen reader which of the tabs are visible and which are hidden. Without this description, the screen reader simply cannot navigate these interactive features. This principle also relates to user interface aspects of your site such as the size of on-screen buttons being large enough that you can easily to touch them on your phone, or that a menu system can work with a keyboard as readily as with a mouse. ### Understandable This states that the language of your content is readily understandable. This includes using language that is appropriate for your website’s readership, avoiding jargon, and providing instructions for online interactions that are easy to follow. Knowing your patrons is key. The language being used on a corporate library website would be quite different than a school library website. Understandable also relates to your user interface having a predictable behavior. For instance, if you’re filling out an online form. The form should be able to clearly explain how to fill out the form, including when you’re making mistakes and how to correct them. ### Robust Your content and site infrastructure must be compatible with a variety of browsers, device types, and assistive technologies now and into the future. This is especially important as we move quickly into the internet of things — for instance just over 20% of the world now use smart watches. ### In conclusion There is certainly a Venn diagram with these principals. For instance, a well-designed study room reservation form that is easy to fill out on laptop or phone covers nearly the entire acronym. Think how hard it would be if the form didn’t tell you about your errors or how to correct them— that’s operable and understandable in combo. # B. Better copy-pasting ## The hidden problem with copy/paste When copying and pasting from another source, such as Word and LibGuides, hidden style code can be copied along with the content. These hidden styles can break an otherwise accessible document. ## Solution: How to avoid these hidden styles #### Many rich text editors have these useful tools: ![Rich text editor toolbar screenshot of buttons used for removing hidden text formatting](http://s3.amazonaws.com/libapps/accounts/3908/images/lg-richtexteditor-toolbar.png) * ![Button to use for removing hidden styles from copied text.](http://s3.amazonaws.com/libapps/accounts/3908/images/lg-pasteplainbutton.png) The "clipboard-T" (Paste as Plain Text) button will show a paste box that strips out all text formatting and leave behind plain text. Best for simple text. * ![Button to use for leaving the original formatting as in the Word document.](http://s3.amazonaws.com/libapps/accounts/3908/images/lg-pastewordbutton.png) The "clipboard-W" (Paste from Word) button will show a paste box that keeps the formatting structure from the source, but strips out extra styling. * ![Button to use for removing all formatting from selected text in the rich text editor.](http://s3.amazonaws.com/libapps/accounts/3908/images/lg-clearformattingbutton.png) This button will remove all formatting from selected text inside the rich text editor. This will generally solve strange formatting issues you may find from copied text. This button will also remove hard-coded widths from tables that may overflow your guide. **Extra tip**: You can also use the "Paste from Word" button with data from Excel.\ When you paste in a series of cells, the resulting paste will be a simple and clean HTML table in your guide! **Source**: [Boston College LibGuides Accessibility Guide](http://libguides.bc.edu/guidestandards/accessibility) # C. Non-HTML documents The concepts from web documents can also apply to other documents. However, the implementation may differ. Here are links for tips on making additional file types accessible * [PDF files](http://webaim.org/techniques/acrobat/) * [Microsoft Word](http://webaim.org/techniques/word/) documents * [PowerPoint](http://webaim.org/techniques/powerpoint/) presentations Recommendations for most of these formats echo those for webpages such as using headings to convey logical flow for a Word document and PDFs. # D. Useful Links ## Official WCAG accessibility sites * [Video introduction to Digital Accessibility](https://adata.org/ocr-videos): A great series of introductory videos created by the U.S. Department of Education Office for Civil Rights. * [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) * [Tips for Getting Started Writing for Web Accessibility](https://www.w3.org/WAI/tips/writing/) * [Quick reference for Web Content Accessibility Guidelines](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2): customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques. Check out the filter tab to filter the guidelines to your needs. * Official [W3C Accessibility Standards Overview](https://www.w3.org/WAI/standards-guidelines/): includes accessibility guidelines for web content, audio and video, and rich internet applications guidelines, and other advanced internet topics. * [Techniques and Failures for Web Content Accessibility Guidelines 2.0](https://www.w3.org/TR/WCAG20-TECHS/)Guide from the W3C working group on accessibility that created the WCAG 2.0 guidelines * [Video Introduction to Web Accessibility and W3C Standards](https://www.w3.org/WAI/videos/standards-and-benefits) * [Understanding and implementing Web Content Accessibility Guidelines 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/): Directly from the WCAG working group * [Techniques and guidelines for rich internet applications](https://www.w3.org/TR/wai-aria-practices/): WAI-ARIA Authoring Practices 1.1 (Feb 2019). ## Accessibility Resource Sites * [A11y Project](https://www.a11yproject.com/) * [Project Enable— Resources](https://projectenable.syr.edu/Disability-Type-Resources): A massive database of disability-support resources from this site oriented towards creating accessible and inclusive libraries. ## Accessibility Testing * [Easy Checks - A First Review of Web Accessibility](https://www.w3.org/WAI/test-evaluate/preliminary/): An in-depth accessibility review checklist. As you learn the basics, circle back to this checklist. * [Evaluation tools overview](https://www.w3.org/WAI/test-evaluate/tools/) ## **Articles and e-books** * [Web Accessibility for Developers](https://pressbooks.library.ryerson.ca/wafd/): A more advanced resource for developers used to working with HTML, CSS, and Javascript. (ebook) * [Professional Web Accessibility Auditing Made Easy](https://pressbooks.library.ryerson.ca/pwaa/) (ebook) * [Eighteen Blind Library Users’ Experiences with Library Websites and Search Tools in U.S. Academic Libraries: A Qualitative Study](https://crl.acrl.org/index.php/crl/article/view/16947/19428) ## Screen readers * [Introduction to Screen Readers](https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers): Information from the American Foundation for the Blind. * [Learn to Use Voiceover on your Mac](https://dequeuniversity.com/tips/learn-voiceover): Built-in screen reader for Macs. * [Getting Started Testing with NVDA](https://accessibility.huit.harvard.edu/nvda): Free, open-source screen reader for Windows. # Conclusion This guide covered the common accessibility issues and solutions, yet web content often goes beyond simple or common. This is where your institution's accessibility experts and web developers can help! Never be afraid to ask for help as we all benefit. Go forth and create good! ## Contributors welcome! This guide is written in Gitbooks with files in Github to allow for easy collaboration. Additional contributors are welcome, either as writers or editors. It would be wonderful to create a series of easy to understand guides on accessibility. Topics could include deeper-dives into topics such as audio-visual accessibility and physical facilities accessibility. Anything that can make our library world more accessible would be welcome. ## Coming soon * A content accessibility checklist/cheatsheet ## Contact Us Version one of this guide was created by **Jerry Yarnetsky,** a Web Services Librarian at Miami University of Ohio. He can be reached at . Was this guide used at your college? Was this guide useful? Run into issues? Do you have suggestions for the next version? Have questions? [**Drop us a line**](mailto:jerry.yarnetsky@miamioh.edu)**!** ## Creative Commons BY-NC-SA 4.0 Version 1.2 was created in 2024 by Jerry Yarnetsky of Miami University, Oxford, Ohio. This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).