What is this?
This is a free resource to help others make their websites more accessible. The knowledge on
this page is based off of the Web Content Accessibility Guidelines (WCAG) 2.2, a resource which
ironically I have find difficult to read. For each guideline, I will provide a
little description, as well as any resources which I personally use for that specific topic. At the bottom,
I include my personal recommendations which are based on research by the Nielsen Norman Group. Note that
this does not contain every detail in WCAG 2.2 - this resource is for people who want accessibility
but are
not able to employ an accessibility specialist. I hope you
enjoy! If you have any suggestions, you can contact me through akidderwolff@gmail.com.
Commonly used terms:
Chapter 1: Is everything perceivable?
Are there text alternatives for any non-text content?
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.
Are time-based content given alternatives?
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:
Can the website be understood in multiple ways?
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.
Are the text, colors, and sounds distinguishable?
Here are the various guidelines for assessing text, color, and sound.
Text accessibility guidelines:
Color accessibility guidelines:
Sound accessibility guidelines:
Chapter 2: Is everything operable?
Can someone use the website with only a keyboard?
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.
Is there enough time to understand the website?
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:
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:
Is the website safe against seizures?
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).
Are there enough ways to navigate the website?
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:
Ideally, we would also include the following:
Can you use the website without a mouse and keyboard?
Using a pointer instead of a mouse or keyboard is an increasingly common way to browse websites. As such, we want to make sure that the whole website can be used with a pointer. Ask yourself the following questions:
Chapter 3: Is everything readable?
Is the content understandable?
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:
Is the website predictable enough?
There are some guidelines we should follow to avoid confusing anyone.
Does the website help avoid and correct mistakes?
Websites should aim to detect errors immediately, as well as provide adequate instructions whenever someone needs to input anything. For example, if someone writes their email instead of a phone number, we want to let them know before they hit submit. We should include at least one of the following:
Outside the context of legal, financial, and data sensitive transfers, the above points are not absolutely essential, but they are preferred (AAA). Another way to help avoid mistakes is by providing context-specific help (AAA).
Chapter 4: Is the website robust enough for assistive technologies?
Is the website compatible with current and future people?
If you use a website building service like SquareSpace, you do not need to worry about this
section.
In the website code, we want to make sure that there are no typos in the start and end tags.
We also want elements nested appropriately, without duplicate attributes, and with unique
IDs where appropriate.
For buttons, forms, links, and any other interface component, we want the name and role to
be accessible to a program. We also want these components to be usable by a program.
My personal recommendations
Is the text easy to scan?
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:
Is the design responsive?
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:
Does the website have enough information?
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".
Do the icons have labels?
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.
Can you find the website through the internet?
Search Engine Optimization is how we help users find the website in the first place. A basic strategy for this it do pick a keyword or phrase that relates to your topic. Then, use the keyword phrase in each of the following locations: