When we include images, videos, and more, we want to make sure people using screen-readers can still enjoy the content. We can do this by giving content alternative text or text descriptions.

If you're not sure if your images have alt text, try this website: wave.webaim.org. Just paste your website URL into the search box, and hit [Enter]. Then press "View details", and look for errors or alerts about alternative text.

For audio and videos present on your website, we want to make sure that there's always another way to access this information. This usually takes the form of captions or descriptions for video and audio recordings. Here are some additional ways to be accessible:

• Provide an audio track that narrates what's happening in a video.
• Provide a sign language interpretation for all audio (AAA).
• Add more than dialogue to your audio description, also known as an Extended Audio Description (AAA).
• For live content (not pre-recorded), provide an alternative such as voice-to-text captions (AAA).

Be sure that someone who cannot see, someone who cannot hear, and someone who cannot rotate their screen can still understand your website. This is especially important when understanding the website involves viewing content in a particular order. This concept also applies when the website relies on shape, size, visual location, orientation, or sound to communicate meaning.

We also want the website code to be structured so that people not looking or hearing the website can still understand it. If you use a website building service like SquareSpace, you don't have to worry about the code.

We want the website to be usable from just a keyboard in case a user lacks coordination to use a mouse. The only exception is when the cursor's movement is important, such as a signature. Though it is a good idea to include an alternative whenever possible. Ideally, we want to remove any specific timings for key presses (AAA).

To see a great example of what this looks like, go to microsoft.com and use [Tab], [Shift]+[Tab], and [Enter] to navigate the site. Microsoft's website even detects keyboard navigation and offers shortcuts to the main content.

For content that is moving, blinking, scrolling, or auto-updating, we want to make sure that users can pause or stop the movement. For content that has a time limit, we want one of the following to be true:

• You can turn off the time limit.
• You can change the time limit to be at least 10x longer than the default.
• Give the option to extend the time limit at least 20 seconds before the timer ends. Do this at least 10 times.

If extending the time would invalidate the activity, or if a real-time event is involved, then this guide may be ignored. An example of this is an auction. These rules also don't apply if the time limit is longer than 20 hours.

To go above and beyond, consider including these options:

• Do not have any elements which require timing (AAA).
• Allow interuptions to be postponed or removed, except in an emergency (AAA). For instance, if you finished buying something online, you do not want to be redirected to the homepage before writing down the shipping information.
• When an authenticated session expires, allow users to resume exactly where they were after they log in again (AAA).

Avoid content that flashes more than 3 times in 1 second, or if the flash is below the flash and red flash thresholds. You can go to trace.umd.edu/peat/ to download the Photosensitive Epilepsy Analysis Tool to test your video.

As an alternative, simply remove any content that flashses more than 3 times in 1 second (AAA). Another alternative is to provide the option to disable your website moving when someone makes an action (AAA).

By navigating the website, this means more than navigation menus and search bars. We want to give people the best chance at finding what they are looking for. Here are some ways to help this:

• Give pages a title, heading, and labels that describe their purpose.
• Include multiple ways to locate a web page.
• Add a focus indicator for keyboard users, and make sure the focus indicator follows a logical path. See "Can someone use the website with only a keyboard" at the beginning of this chapter for an example.
• Allow users to skip content that is repeated on multiple web pages. For example, do not make someone navigate through the same promotional banner on every page.

Ideally, we would also include the following:

• Provide information about where they are in the website. An example of this could be "Home > Store > Shelves" (AAA).
• Make sure that your links to other pages describe exactly what the link will direct to. For example, "Go to google" is better than "Change your life" (AAA).
• Within a page, use a heading for each section to organize the content (AAA).

For people using screen readers, we want the website to say in the code what language the website is using. If you use a website building service like Squarespace, you do not need to worry about the code. Otherwise, you can use this website to test your code: wave.webaim.org. Just paste your website URL into the search box, and hit [Enter]. Then press "View details", and look for errors or alerts about Language.

We also want the words in the website to be real so the screen reader does not guess when pronouncing anything.

Here are some more ways to make your content more understandable:

• Add a feature explaning unusual words or phrases, including slang, idioms, and jargon (AAA).
• Add a way to view the expanded form of any abbreviations (AAA).
• Keep the content below a lower secondary education level if possible, or provide an alternate version of the content that is below a lower secondary education level (AAA). For this I recommend hemingwayapp.com as a free resource for measuring text readability. As an alternative if you have it, Microsoft Word also has excellent readability features.

There are some guidelines we should follow to avoid confusing anyone.

• Do not initiate any substantial website changes just because someone hovered their mouse over something. This does not include changing the color for a hovered button or something similar.
• When someone presses a button for fills out a form, only make changes that you have already explained to the person. For example, hitting "Submit" on a form should only submit the form, and not also redirect to the home page.
• Use the same nagivation system on each page.
• Make similar pages have similar appearances and behaviors.
• Only make major website changes when a user explicitly requests it, or provide ways to turn off automatic major changes (AAA).

Most people spent a very short amount of time reading text, so we want to make sure that they find what they are looking for immediately. For each text section on your page, I recommend putting the most important information in the first sentence. If your webpage is lengthy, I also suggest putting a summary at the top.

Here are some other tips for improving scannability:

• Include many headers, bullets, bolding, and white space to break up the wall of text.
• Use short, recognizable words instead of abbreviations. This includes words like "can't" which should be written as "can not".
• Avoid repetitive statements like "You will x, you will y, you will z".
• Type numbers instead of spelling them out. Reading "3" is quicker than reading "three".
• Aim for a line width that is 35-75 characters long.

A majority of internet browsers use a mobile phone instead of a computer when browsing the internet. Therefore, it is worth it to make the website able to fit smaller screens.

Here are 3 questions to ask yourself when converting a design to a smaller screen:

• What content do you need?
• What is the priority of content?
• Does the new interface reflect the content priority?

It can be a challenge to answer every question that someone might have. So, I highly recommend using this website: answerthepublic.com. Simply enter your topic, and see what people are asking about the topic.

For example, I searched "bread" and found that an extremely common question is "can bread be composted".

Being overly creative with icons causes confusion. Therefore, it is a good idea to include labels for your icons which describe what the icon represents.