Here are some general web accessibility principals that blog post authors can keep in mind to make their posts more accessible. These principles also apply to working with webpages in general. Blogging software and content management systems use similar WYSIWYG editors for updating the HTML content of a webpage.
Accessibility testing
Check your page with an accessibility checker like WAVE:
The WAVE tool is available as a browser extension for Chrome, Edge, and Firefox and will allow you to check your webpage for accessibility issues in one-click. The checker will show you exactly where the issues are in the code and provide advice on how to correct them.
Alt text
Add alternative text descriptions to your images:
Alternative text will describe the image to screen reader users and be seen by sighted users if the image can’t load. Focus on the meaning or purpose of the image rather than trying to describe every detail. See the Adding alternative text to images in a WordPress post for details of how to add alt text to an image in your Blog.
Headings
Use headings properly:
Be sure to separate your content into sections, especially in longer articles, and use headings correctly. In the editor, it may appear that headings are like font sizes, but they are more for structural usage. You shouldn’t pick a lower heading size because you like the font size of it. Headings need to be properly nested in a heading structure where you shouldn’t skip heading levels. For example, you shouldn’t go from an H1 to an H3. That H3 should be an H2 to be properly nested in the heading structure.
See WebAIM’s article about Semantic structure and headings for more information.
Use of color
Make sure all text has sufficient color contrast:
Small or regular-sized text should have a contrast ratio of 4.5:1 and large text (bold and 18px or higher or normal and 24px or higher) should have a contrast ratio of a least 3:1. You can use the WebAIM Contrast Checker tool or the Colour Contrast Analyzer tool to find the color contrast ratio. Also, make sure no content or visuals rely on color alone to communicate meaning. Use other ways to differentiate visuals to aid color-blind users.
Links
Make sure your hyperlinks are descriptive and not just ‘click here’ links:
Making link text more descriptive helps give context about where the link goes to. You could instead say, click here to learn more about (the subject…). Links should make sense out of context so if screen reader users land on them they will know where they go. Short phrases such as “click here,” “more,” “click for details,” are ambiguous when read out of context. Screen readers have key shortcuts that can jump between links in a page and using the tab key jumps between focusable objects like links & buttons. So, a screen reader user may not have read nearby text that would give a short ‘click here’ more context. You should include the context withing the link text itself.
See the Introduction to Links and Hypertext guidance from WebAIM for more information about writing descriptive hyperlinks.
Tables
Make sure you only use tables for tabular data:
Tables should only be used to show numerical data. They shouldn’t be used for layout like organizing out parts of the page into columns. In the late 1990s some designers used table-based layout which wasn’t an accessible practice and not responsive to smaller screens.
Make should your data tables have a header row specified:
Each label on a column should be a true header cell TH instead of a regular cell TD. In WordPress you can tell that something is a header cell clicking in the cell while editing the post. Below the table if it says ‘TH’ in the tage tree it’s a header cell. For example, the tag tree at the bottom of the editor might say: ‘TABLE > THEAD > TR > TH’. This is just above where it says: “Word count”.
Avoid using complex tables:
You should avoid using complex table because they can be challenging to make accessible and confusing to navigate for screen reader users. It may be better to convert a large complex table into two or more simple tables.
See WebAIM’s article about Creating Accessible Tables for more information.