Accessible web content is well written content. If the writing is too complicated, they won't be able to use it. Plain language improves accessibility.
A few tips on writing a good content for the web site:
- Keep sentences short. They should be around 20-25 words at most.
- Use simple words. Use words (or combinations of words ) with 1-2 syllables when possible. Good sites to find simple words to use:
- Use tools like Hemmingway Editor to measure the readability of your text. To meet WCAG standards, aim for a readability level of grade 8 and lower.
- Simplify your writing for better readability.
Heading structure in HTML
Headings are very important for accessible web content. They provide screen reader users with the ability to jump directly to specific content, which can save them time.
Work with the system you are writing in. Use the styles and formatting options provided in your content editor tool.
Example: Heading 1 (<h1>)
The numbers in the heading style create structural context for the screen reader and help non-visual users understand the content even when they cannot see the visual breaks in the document.
Example:
<h1>Belmont Public Schools Curriculum</h1>
<h2>High School Program of Studies</h2>
Emphasizing content in HTML
Screen readers do not identify font styles including the following:
- Color
- Bold
- Italics
- Underline
- Strikethrough
Do not use them as the only way to indicate importance or convey information. Do not use empty paragraphs to add extra spaces between sections of text. All published content uses specifically designed styles to add appropriate space values. Empty paragraphs are not appropriate space indicators for screen readers.
When you need to give a strong visual cue, make sure that you use an accessible alternative. Use an exclamation mark at the end of your sentence if it is important. Screen readers intonate exclamation and question marks. This means the tool will not read "question mark"-instead, it will lend a questioning tone as it reads a question aloud.
Adding Images
Ask yourself what the purpose of an image is. Is it to give a page visual appeal? Or to give a sighted user a visual reference of what to expect? Is the image something all users need to consume to understand your content?
If you don't know the meaning or purpose of the image, don't use it! It is clutter and will be overwhelming to those with learning disabilities.
Adding Alt Text
If you are using a website to convey information, you will come across a field for alternative text, or alt text, when uploading an image. For decorative images, leave the alt text field blank. The screen reader will ignore the image in this case. An image is decorative when it doesn't add to the information on the page.
More on decorative images on the web accessibility initiative website
If you don't want the screen reader to skip the image, include alt text in your images. You don't need to say "Image of" as the assistive tools already know it is an image. Be concise, clear, and descriptive.
Do not use the same alt text for every image, such as "Image illustrating content." It is meaningless and adds clutter.
For complex images, keep the alt text short - 6 or 7 characters - and include a caption under the image that is visible to everyone and provides a clear description.
Infographics
Infographics require a text alternative. This is a narrative telling the same story users get from the visual. The text alternative should be on the page immediately following the infographic or before it. Good practice to include an anchor link at the top of the page to view the text alternative.
Text in images
As per the WCAG guidelines, text should not be included as part of an image. Explain the image in text on the page instead.
Adding Links
It is critical to make your links descriptive. Every link should describe what the user can expect to find when they click it. This is key for the Links List tool that screen readers provide. This tool only list the links on a page, nothing else. There is no additional context for the link.
Example: On this page the Links List tool would read the following: "See an example of describing an image on the page," "example of an infographic with a text alternative," and so on. Each describe what you can expect to find when you select them.
- Don't use generic phrases such as "click here" or "see more." When the same link is repeated it creates chaos and confusion for users.
- Web addresses or URLs are not considered informative and should not be used. The screen reader reads each letter individually. Instead make the text descriptive. Example: Belmont Public Schools web site
- Provide content so the user understands where the link goes and how it operates. Example: email our webmaster
Using Lists and tables
Use the bulleted, numbered lists, and table tools in the content editor when creating readable content. Or view the source and use the correct HTML tags.
Lists
Properly created bulleted lists (<ul>) inform screen reader users how many items are in the bulleted list.
Properly created numbered lists (<ol>) inform the screen reader user how many items are in the numbered list and read the number for each item.
Using Tables
Use lists over tables when you can! Tables can be made accessible, but screen reader users need to know advanced keystroke commands to navigate and understand them.
Use column headers (<th>). This causes the screen reader to re-announce the column heading for each cell as the user navigates through. This gives the user context for each cell content. Consider how each cell will read when naming the columns and adding information to the cell.
Never use tables to create visual layout of content.
Keystroke commands
There are global standards for keystroke commands in web content. For example, you can press Tab to put your computer's focus on the next button. You don't need to describe those. For a list of global commands, see this JAWS Keyboard Commands Quick Reference Guide.
At times, developers need to create original keystroke commands for their product. For example, Blackboard Collaborate created original keystroke commands to turn the microphone on and off. Document those original keystroke commands in your topics.
Click and keystroke command instructions are two separate thoughts and should not be in the same paragraph. If Mac commands are different than PC commands, use two sentences in the keystroke topic paragraph.
Example 1
By default, you are hidden and muted after you complete the setup. Click the microphone and camera icons to begin full meeting participation.
With your keyboard, press Alt + M to turn your microphone on and off. Press Alt + C to turn your camera on and off.
Example 2
Browse buttons appear when you share a presentation so you can navigate from slide to slide.
With your keyboard, press Alt + Page Up to move to the next slide. Press Alt + Page Down to move back. On a Mac, press Alt + Fn + Up Arrow and Alt + Fn + Down Arrow.
Video
Videos should be captioned.