--- title: A guide to publishing accessible content date: 2020-11-30T00:00:00-05:00 author: Seth Giammanco canonical_url: "https://mod-lab.com/resources/a-guide-to-publishing-accessible-content" section: Articles --- ![Person working on keyboard](https://mod-lab.transforms.svdcdn.com/production/article/keyboard.jpg?w=1200&h=1200&q=85&auto=format&fit=crop&crop=focalpoint&fp-x=0.3979&fp-y=0.4654&dm=1680999511&s=f74f3d029480bf6aff81ee54ccfa5aa2) - Improve your website # A guide to publishing accessible content --- Website accessibility is a commitment. Every new post or page made to a website needs to consider it. This article is a guide to help content publishers. Website accessibility is a value and a commitment. This rings particularly true for your website content. Every new post/page made to a website needs to consider accessibility. The following details best practices to help content publishers create more accessible content. ## **Text should have markers to help readers know where they are, to convey a hierarchy, and express an action** ### **Page titles should be unique** Make sure page titles are unique from each other. These help visitors reinforce where they are on your website. ### **Use headers to create a meaningful hierarchy to your page content** Use headers to separate text into meaningful sections. Headers mark a change of topic and set context for the reader. Headers have numbers to define hierarchical levels. - Header 1 - *Note: there should only be one of these per page and it is often the page title* - Header 2 - Header 3 Use levels to convey meaning. A Header 3 under a Header 2 communicates a relationship. It is part of the Header 2 section that precedes in. This hierarchy is important for readers as it serves as a table of contents in code. It is common for publishers to choose headers based on how they look rather than by the hierarchical meaning they represent. Content publishers may opt for a header 3 because it looks smaller for example. This can lead to accessibility challenges. It is important to use headers for meaning. Style needs to be handled uniquely with the help of site designers. ### **Create links with meaningful context** We've all seen, used, and likely created links in content that say "click here". While a sentence helps to explain what you are "clicking here" for, these links are not accessible. An accessible link includes text that describes what to expected upon a click. So instead of using "***Click here*** *to download our latest guide!"* you should use something like *"****Download our latest guide about creating accessible web content!****"*. ### Avoid links opening in a new tab or window It is common to want to create links that open in a new tab/window to websites that are not your own. The thinking is that you want to try and keep visitors on your site as much as possible. Opening a link in a new tab can create a disconnected or disorienting experience for users. It can impede navigation to the previous page for example. It is recommended to not open links in a new tab/window. It should only be used when absolutely necessary. One example might be if you are navigating to a long survey where navigating away from it might lead to data loss. If you must use this technique, communicating that the link will open in a new tab is helpful — "Please complete our 10min survey (opens in a new tab)". ### **Keep writing and language clear** To reach the widest audience possible, keep your writing concise and clear. - Consider using lists. - Make sure to expand acronyms on first expression of them. - Avoid complexity of word choice and phrases when not needed. ## **Images that convey meaning need alt text** All images that convey meaning need to have text-based alternatives. Images have an alt parameter in their code that includes text to describe the image. It looks something like this. *`<img src="image.jpg" alt="Text describing the image">`* The alt text appears on screen when an image can’t load or when read by a screen reader or other assistive device. It is very common that when adding an image to your CMS you can provide an alt tag along with it. Avoid creating images that contain text. If you have no choice, say for example you are including a logo with text, include the exact text in the alt. ### **What is good alt text for accessibility?** Images help convey meaning on your webpages. They enhance the written text with a visual. Good alt text is human and describes the image in sufficient detail to convey its meaning. Using the image below as an example. - Bad alt text: “Books” - Better alt text: “Charming book store with wood railing, stained glass window, and shelves full of books” ![Charming book store with wood railing, stained glass window, and shelves full of books](https://mod-lab.transforms.svdcdn.com/production/article/photo_research_nocopy_705.png?w=2600&q=80&auto=format&fit=crop&dm=1680999513&s=95a85bf9ab8400eb717f066eee0a0d05) Remember that “good” alt text is about expressing the meaning the image intends to convey. ## **Making video and audio content accessible** There are a variety of ways to make video content accessible to a wider audience. The following are are a few options. - Use **captioning** to provide in time text alternatives to spoken language - Offer a **transcript** alternative to a posted video or podcast - **Audio descriptions** offers an enhanced experience for a person with a visual impairment. It describes the visual action on screen along with the spoken audio. You can [add captions and subtitles to your videos on YouTube](https://support.google.com/youtube/answer/2734796?hl=en). Unfortunately, Audio descriptions are not yet supported on YouTube. This said, there seem to be third-party solutions that can help upon a search. Review your video creation and publication tools for their accessibility options. ## **Be careful when using colors to convey information** Color is often used to convey information. A classic example is using red to express something "not good" while green for "good". For people with color blindness or other visual impairments, the desired meaning is lost. It is best to use icons and/or text alongside or in place of color to express meaning. ## **Making a commitment to accessibility** A commitment to accessibility starts with learning. You need to learn about the standards and practices to make accessible content. Employing your learning takes care and time until it becomes more automatic. The tips in this article should help. If you have any questions about this article please don't hesitate to [reach out to us on Twitter](https://twitter.com/mindsondesign) or [contact us via our website](https://mod-lab.com/contact). --- ## More Articles ![ER Visual Audit 1080x1350 2x](https://mod-lab.transforms.svdcdn.com/production/visual-brand-audit/ER-Visual-Audit_1080x1350@2x.png?w=1200&h=1200&q=85&auto=format&fit=crop&dm=1775838715&s=11974c151011564bdf2ce2f4d46831a8) - Build your brand ## [ The Visual Brand Audit: Does your look match the quality of your work? ](https://mod-lab.com/resources/visual-brand-audit) Your work is excellent. But do your materials show it? The Visual Brand Audit is a free self-assessment to help you see exactly where you stand. ![A spiral-bound notebook open to a hand-drawn website wireframe sketch, resting on a wooden desk alongside a blue marker, its cap, and a smartphone, with a keyboard visible in the background.](https://mod-lab.transforms.svdcdn.com/production/article/pexels-picjumbo-com-55570-196646.jpg?w=1200&h=1200&q=85&auto=format&fit=crop&dm=1773613228&s=f9562a83e163ecdef40aeca7205e4955) - Improve your website ## [ Are your nonprofit homepage headers saying nothing? ](https://mod-lab.com/resources/nonprofit-website-homepage-headers) Most nonprofit homepage headers label what follows instead of saying something informative. Here's why that's a problem with inspiration of how to fix it. ![](https://mod-lab.transforms.svdcdn.com/production/article/gala-emails/rwgala24_newsletter-2@2x.png?w=1200&h=1200&q=85&auto=format&fit=crop&crop=focalpoint&fp-x=0.4844&fp-y=0.3771&dm=1764769789&s=43cbc55a184b7ab358d90bacaf7541c0) - Strengthen your communications & fundraising ## [ How to promote your nonprofit event with a focused email series ](https://mod-lab.com/resources/nonprofit-event-email-series-promotion) One crowded announcement rarely gets results. See how strategic sequencing builds anticipation, with a real gala campaign example. ## Ideas for small teams doing big things in the social sector Subscribe to get ideas that blend design, strategy, and technology to help you build your brand, improve your website, and strengthen your communications and fundraising. [Subscribe](https://mod-lab.kit.com/subscribe?utm_source=website&utm_medium=referral&utm_campaign=subscribe) ## Brought to you by MOD-Lab At MOD-Lab, we're the thoughtful design partner for small teams like yours doing big things in the social sector. We create memorable branding, design materials, and websites that showcase the quality of your work and reflect your true impact.