Text
✓ DO: Use special type styles (bold, italics, ALL CAPS) sparingly
Don’t make every other word on your site bold, italics, or ALL CAPS. Only use them sparingly when you want to emphasize something important.
✗ DO NOT: Use centered blocks of text — justify text to the left
Avoid text that is centered for paragraphs or other large blocks of text. The jagged edges of centered text take longer to read and tend to interrupt the flow of the text.
✓ DO: Use only one space
The Chicago Manual of Style and the AP Stylebook advise leaving a single space, not two spaces, between sentences and after colons used within a sentence.
Section Headers
“A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read. Write for online, not print.” — Jakob Nielsen
Rather than just styling header text by making it bold or larger than the surrounding text, use header tags. For screen reader users, header tags are vital in giving a sense of the main topics of the page and enabling easier navigation through your content. Additionally, effective header tags help search engines understand your content, which improves search engine rankings.
Organize your page with an outline structure in mind. Section headings should be arranged to show the hierarchical ordering of information from the broadest and most important (Heading 2) to secondary information that supports the information in your Heading 2 (Heading 3) to the most specific information that supports the information in your Heading 3 (Heading 4).
Always start with Header 2 in each section, with your Header 3 information below that and your Header 4 information below your Header 3 information. Do not skip levels — don't start with a Header 3, or go straight from a Header 2 to a Header 4. You can go from a Header 3 or a Header 4 back to a Header 2 when you switch broad topics.
More on Adding Headers in Drupal Basics
Links
✗ DO NOT: Use "Click Here" or "Read More" or "Learn More" style language to label your links
Use concise, descriptive, and unique link text that tells the user what happens when they click that link.
Meaningful link text should not be overly general and should clearly describe the content to be found or action to be performed by the link (ask yourself if you could predict what you’d find if you clicked on the link by only reading the link text). Each piece of link text on a page should also be unique to the target of the link and be approximately two to five words long.
Using “Click Here” style language hurts accessibility
The UO is required to make all sites accessible. Users who are visually impaired will commonly move through content by tabbing through various different links within a page. If the title of the link is “Click Here” it provides no context for where the link goes. Links should be labeled with the most important keyword or phrase people are looking for to guide them to the information they want.
Using “Click Here” style language hurts your page ranking in search engines like Google
Descriptive link text helps your search engine ranking. “Click here” style language texts or the URL does not tell Google any additional information about your link so it ignores it, but meaningful text tells Google what you are linking to and that adds value to your site and the linked site.
Using "Click Here" style language makes it harder for users to find information
When users are scanning your website, they want to see links that tell them where the information they are looking for is located. If they just see a link with “click here,” they are forced to read the surrounding text to find out if that is the link they are looking for. Help your audience have a more positive experience on your site by using descriptive link text.
✗ DO NOT: Bury important links within the text
You should try to structure your sentences so that the links fall at the beginning or end of your paragraph or sentence, especially when you want your readers to complete a task – sign up, email comments, purchase tickets, etc. This will make links easier to spot because users will see each one as soon as they start or finish reading the sentence.
Web users also have short attention spans and don’t read articles thoroughly or in their entirety. They skim webpages, especially when they want to complete a task or find specific information. Burying a link makes it harder for someone to scan the page and find the information they are looking for.
Documents
✓ DO: Make sure your PDF is accessible
Whenever possible, link to pages rather than PDFs. When you do post a PDF, ensure that it was created from an electronic file and not a scanned image. Screen readers can usually interpret text from an original document but cannot from text in images.
Adobe Acrobat and Adobe Reader can do an accessibility “Quick Check” or “Full Check” on your document. Check Adobe help for your particular version of Adobe for accessibility tools.
For more information on converting documents to PDFs, refer to Adaptive Technology’s Accessible PDF Resources.
Images
✓ DO: Always include descriptive alt text
All images and graphics need to have Alt Text. Alt text strengthens the message for search engines and improves the accessibility of your website. It shouldn’t surpass a single sentence and it is best to keep it under 16 words (Google seems to only count the first 16 words of alt text). Whenever possible, do not use a poster or a text-heavy graphic or image as a photo because someone who is blind or visually impaired can’t read the text on the image and the description of the text on the image is too long to include as alt text.
Alt text should be a natural description of the image in context. It should be clear and concise and describe the image to someone who is blind or visually impaired and use proper grammar and sentence structures. Consider what the page looks like when images are not shown. Then, write alt text that best works as a replacement.
Google also places a high value on alt text to determine what is in an image but also to determine the topic of surrounding text.
Don’t use redundant language like “An image of” or “This picture shows” as it is unnecessary.
✓ DO: Name your files with appropriate titles
The filename can give Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image. This is also helpful for searching for images in the library when you want to reuse a photo that is already in the library.
DO
- president-michael-schill.jpg
- Johnson-Hall.jpg
- emu_construction.jpg
- oregon-hall-2022.jpg
DO NOT
- photo.jpg
- img_9605_rs.jpg
- picture-1568.jpg
- 11949488_10153270_n.jpg
Image Dos and Don’ts
The images people look at most have the following characteristics:
- Are high contrast and high quality (crisp and colorful)
- Are cropped, rather than overly reduced, when necessary to fit a small space
- Are not excessively detailed – easy to interpret, almost iconic
- Are highly related to the content on the page
- Possess magnetic features (something that draws your eye)
Features that make images magnetic include the following:
- Smiling and approachable faces – they make us feel like we are actually connecting with other humans, not only with some coded website
- People looking at (or at least facing) the camera
- Clear instructions or information
People ignore images that have the following characteristics:
- Are low contrast and low quality
- Are too busy for the space
- Look like advertisements - people don’t like ads and over the years they have successfully learned to ignore them
- Are not related to content on the page or only slightly related to it – people look for the content and ignore unrelated visual noise
- Are boring, cold, fake, or too polished
- Include people or objects that are generic or obvious stock art
Audio and Video
✓ DO: Always caption all video
YouTube has very useful built-in captioning tools. For videos not hosted on YouTube, you can caption your videos using web applications like Universal Subtitles.