The world is a diverse and unique place. People are different in many ways, including their physical abilities. Therefore, it's crucial to have internet standards that provide guidance to web developers so that can create websites that people with disabilities can access. This blog post will explain what accessibility means and why you should care about it when building your next website.
What are the web content accessibility guidelines?
The Web Content Accessibility Guidelines (WCAG) are organized by four main principles, which state that web content must be "POUR": Perceivable, Operable, Understandable, and Robust.
Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
Example: Websites should always add "alt text" to their images. Imagine you're scrolling past an image of a sunset, someone with vision impairment might not be able to view this content. "alt text" helps describe the content to their screen reader. In this case, the alt text would be "Sunset" or "Sun Setting over Horizon," etc.
Operable: User interface components and navigation must be operable.
Example: You have an e-commerce store where users have to click a button in order to add an item to their cart. Some users might not be able to click this button with a mouse, since they only use a keyboard. In these cases, webmasters should account for developing a "keyboard-friendly" website where users can navigate all elements and click buttons with the "ENTER" key.
Understandable: Operable means that the information and the operation of the website/user interface (UI) must be legible - this basically means that information is delivered through an alternative representation, such as closed captions on a video or text
Example: You have video content on your websites with people talking. Users with hearing impairments won't be able to understand what's being said. You can address this problem by including closed captioning (CC) within your videos!
Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies used by people with disabilities.
To learn more about the Web Content Accessibility Guidelines (WCAG), visit this page. Currently, the web is utilizing WCAG v2.1 Guidelines. This is an excellent resource to reference when building your website content. If you would like to speak with someone in person or over the phone, feel free to contact us. We'd love to talk with you!
How can I make my website accessible to all users?
Use headings to help users with screen readers
Use headings (H1, H2, H3, etc. tags) across pages so screen readers can easily navigate through them. You'll notice that we structure our website with these headings. Here at Full Rush Creative, we also make sure to include headings on our blog posts. This makes it easier for screen readers and search engines to crawl the site and index our content.
Make your links descriptive and unique
When you link to a page on the same website, make sure that it's clear what users will find when they click. Don't just say "Our Work" or "Contact Us". Make a hyperlink with a phrase like "Visit Our Services Page". By doing this, screen readers will read the link in context. You also want to avoid using links that look like this: "Click here" or a phrase with just a word, such as "Read More".
Use images and video along with your text content
Using descriptive alt-text for images is important so screen readers can understand what's going on the page. In the case where you use an image of text (like when demonstrating how to type), make sure that there's another way to access it from within your site besides having users copy/paste it into another browser window! Also be careful not to include too many videos, which will prevent some people from being able to access them at all because they require sound.
Include transcripts / closed captions for any audio or video files
Including transcripts and captions for audio and video files is very important, especially when you're talking about an event or a product. It's not enough to have them available on your site—people should be able to access these transcriptions on the same page as they listen/watch.
Captions help individuals who find themselves having difficulties hearing or understanding audio or video content. Captions are generally provided in text format, displayed either at the bottom of the screen (usually during television programs) or at the top of the screen (usually during movies or YouTube videos).
Implement alt text for all images
Alt text is the text that describes an image. Screen readers read this text to users when they are on a page where the image is being displayed, so it's important for all images you display to have alt-text. Including descriptive alt-text also helps with SEO; search engines are able to better understand what your content is about.
Make sure your web pages have enough contrast between background and foreground colors
This means making sure there isn't too much light gray type on a white background or dark black type on a red background (for example). This also goes for any color combinations in which one of the colors has poor visibility: yellow and white; orange and brown; purple and pink; etc. If you want more information about color choice, check out The Web Content Accessibility Guidelines (WCAG).
Google Chrome developer tools also have a feature that will allow you to test your website color combinations and contrast. You can access these tools by pressing F12 in Google Chrome, and selecting text on the page and Google will give you a contract score.
Avoid using pure black (#000000), white (#FFFFFF), and blue (#0000FF) colors because those are difficult for people with low vision disabilities to read; instead, select colors that are easier on the eyes. (#333333), on white (#FFFFFF).
Avoid using color as a method for communicating information.
Color should be used to emphasize or embellish content, not as an indicator of meaning by itself. If you have the choice between using images and words, always go with words because they can be resized by users so that it's easier for them to read on their browser or device. Also, if you think your site might be viewed on a mobile device, you can use emojis in your text so they don't look blurry when displayed.
It's important to know how users with disabilities interact with websites and what challenges they may face when browsing sites online.
By following the guidelines mentioned above, your site will be more accessible to people who need it!
Including a "Skip Navigation" link is a great way to help users who only want the main content of your site and don't need all of the navigation options.
Make sure that text can be resized, increased/decreased in size, or made bold.
This includes buttons as well! When colors contrast with backgrounds (like dark blue on white) it's important
Build a website that works with screen readers
Making sure your site is keyboard accessible will make all the difference for people who can't use a mouse. These folks rely on keys like tab, enter, and space to be able to navigate through web pages.
Make sure they've focused appropriately when switching between elements of your UI (elements that receive input)
By doing this, screen readers will be able to read your links in context because they'll know which elements are currently receiving input. Users with motor disabilities might have trouble reaching the top of their monitor to use a mouse accurately. It's important that you don't place navigation tabs at the very top of your site—make sure it's within reach for people who need them!
When designing a website, it's an industry standard to make sure that everyone can use it easily whether they are using a computer with no sight, limited vision, or motor disabilities.
If you want people of all kinds to visit your site and stay there, then building one that works well across different devices (and browsers!) will take some time but in the end, is definitely worth it!
The world is diverse - and so are websites; which is why accessibility matters when building them.