7 Ways to Make Your Blog More Accessible

As pet bloggers, our goal is to get important and entertaining information out to pet lovers, and no matter what our content is about, we want to reach as many readers as possible. Our audience covers a wide range of people, including pet parents, industry professionals, rescue workers, new adopters, and potential adopters, but there’s a large percentage of pet lovers out there who are getting missed, all because content is inaccessible in one form or another.

We focus on the design and functionality of our blogs, but there’s a hidden aspect to website design and blogging that is often overlooked: the accessibility of our blog content for the disabled.

Inaccessible content creates a wall between the blog content we work so hard to perfect, and potential fans who are disabled, either permanently or due to a part-time injury or illness.

In 2015, the CDC reported that one in five people reported having a disability in the U.S. And according to the Americans with Disabilities National Network, 12.1 percent of the population of the U.S. alone reported a severe disability. Many people with disabilities have service animals, including the blind/visually impaired, individuals with missing limbs or limited physical mobility, and those with “invisible disabilities” such as brain injuries, cognitive or learning disabilities.

Even if they don’t have service animals, they still have pets, and they want to find informative pet blogs they can access using special assistive technologies such as screen readers (that announce accessible content so the user can hear it read to them), screen magnifiers (that zoom in and enlarge a web page for some low vision issues), and keyboards, including braille keyboards, instead of a mouse.  If they can’t access the information you provide, they become frustrated and leave your page. But that is unnecessary.

There are several groups, including the international World Wide Web Consortium, W3C, who strive to provide information to all website owners on how to make pages accessible to the disabled. It’s becoming increasing critical that we all takes a more proactive view on this important topic.

To start making your blog an accessibility success story, start with these seven concepts:

1. Add Robust Image Alt Text: Screen reader users need to know what your images look like, so describe them using detailed text. Include text such as date/time info, or messages printed on the image. Be sure to add alt text to your logos and buttons, too! For decorative images, add null alt text, e.g. alt=””. This tells screen readers that the image can be ignored and is not important. Don’t skip this important step.
2. Use Page Headings for Clearly Defined Content Outline: This makes your content more readable for screen readers and visual readers, and it is good for SEO when used wisely. Don’t use styling alone, such as bold or increased font size to create false ‘headings.’ Use the H1, H2, H3, – H6 headings designed for websites. Example: entry title, an H1, and use sub-headings for sections of content. Don’t skip numbers either, such as going from H1 to H3. Think of your page as an outline. You can move up and down between heading numbers as you move deeper into content paragraphs, just don’t skip the numeric order!
3. Text/Font Size: Font size should be at least 9-10 pt, or 13 pixels, in size, to ensure it is easy to read. You also want to make sure that your text can be enlarged if a user needs to magnify their screen due to vision issues.
4. Font Style: One of the biggest issues I see on websites and blogs are fonts that are too stylized or fancy, thus making the actual content difficult to read. The fancier the font, the tougher it is for a disabled person to access the information on your blog. Try to stick to basic true-type fonts, such as Arial, Times New Roman, Courier, Tahoma, and Calibri, to name a few. A super fancy cursive script font might look really pretty, but if your visitors can’t read the content, there is no point in having it. If you must use fancy fonts, save it for image text, and then make sure your alt text includes the textual information printed on the image.
5. Links must be unique, descriptive and make sense when standing alone: Avoid links in sentences such as “Click here for my latest post comparing dog treats,” with the words “Click here” as the link itself. Screen reader users often tab from link to link through a web page, and if all they hear is “click here link”, it will make no sense to them. Instead, have a unique link such as “Read my latest blog post comparing dog treats” with the words “blog post comparing dog treats” as the entire individual link. That way, the screen reader will announce “blog post comparing dog treats link” to a blind user, and they will instantly know what it’s about.
   Also, make sure your links/URLs are a different color and, if possible, change color/are highlighted when they receive focus, both by mouse and keyboard (tabbed to). Use a high-contrasting color, but not something like that is an eye strain, such as red against blue, or dark blue against brown.
6. Use Tables only for data, not for layout: When you do have a data table on your page, make sure your table headers are marked as <th> headers, not as <td> data cells. This will ensure the screen reader will announce the column and/or row headers correctly when the user is navigating through the table. Additionally, add scope to any column or row headers, e.g. <th scope=”col”>Column Name</th> (Only attempt this if you are familiar with HTML and can access the table code.)
7. Color Contrast between content and background must be easily: High contrast between the text/links and background makes content much easier to read, especially to those with color deficiencies and vision impairments. The best contrast must be a ratio of at least 4.5:1 between the two. Avoid pale font colors on light backgrounds, as well dark colors against darker background. Always read through your content in the colors you choose and verify that it is very easy to distinguish between your content and background, and use free online color contrast tools to help ensure you are making your site accessible.

To learn more about accessibility and try some free accessibility tools, visit the links below. And you can always reach out to this post’s author, Jenny Lewis, with any questions you may have.

1. ADA Anniversary Disability Statistics, https://www.disabled-world.com/disability/statistics/ada-anniversary.php
2. WebAIM (Web Accessibility in Mind), http://webaim.org/
3. Color Contrast Analyzer, https://www.paciellogroup.com/resources/contrastanalyser/
4. Color Contrast Checker by Snook, https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333
5. We Are ColorBlind, http://wearecolorblind.com/
6. W3C (World Wide Web Consortium), https://www.w3.org/
7. NVDA Free Screen Reader, https://www.nvaccess.org/

Jenny Lewis is a web accessibility consultant by day and pet blogger/photographer by night. Visit Pixel Blue Eyes, Her Tails of Adventure, which she writes with her blog partner, Pixel.