Quick Guide To Web Accessibility

Alternative Text

 WCAG Guideline 1.1 You must provide Alternative text for all non-text content. This means if you add a picture to your website, it must contain an accurate description of that picture and include any text or information portrayed in that picture, as Alternative Text. If you have an image that is strictly decorative you can mark it as “decorative in Gutenberg” or make sure to add a “null tag” to that image.

Make link text descriptive

WCAG Guideline 2.4.4 You need to make sure all of your links are descriptive enough so that the user knows where they are going if they click that link. A bad example of a descriptive link text is “Click Here” or “Read More…”. For an example of a good descriptive link follow this link to an article about descriptive links on the W3C website.

Color Contrast Minimum – 4.5 to 1

WCAG Guideline 1.4.3 Your color contrast on your website needs to be at least 4.5 to 1 with the acceptions of links and some text, they need to be at least 3 to 1. This should be implemented very early in the design stages. Because it is one of the easiest to comply with but good prove difficult if you have to come back and change the colors of your website.

Keyboard Navigation

WCAG Guideline 2.1 The user must be able to navigate your entire website with only a keyboard. I have heard this called “Tab Navigation” by many users. I recommend to place your mouse in the drawer for 1 hour and spend that hour navigating your website to make sure you can reach everything and everything you can reach, works.

Tab Focus State

WCAG Guideline 2.4.7 Make sure when you are Tab Navigating through your website that whatever the tab button is “focused on” an item that you have a way to convey that to the user. I recommend adding a high contrast box or ring around whatever your focus state is on. This way, a user knows exactly where they are when they are Tab Navigating.

Label Form Elements

WCAG Guideline 1.3.5 Make sure all of your form elements are labeled properly for input fields. This way a screen reader is able to recognize that the user is on an input form and it explains what info is needed for that input value. For example, make sure your contact forms announce to a screen reader that it’s a “contact form” and make sure it announces what info it needs for each input value (Your Name*), etc…

Add Closed Captions To Videos

WCAG Guideline 1.2.2 All videos that have audio have to have closed caption or subtitles. We recommend using YouTube, they will automatically add closed captions to your video if you chose that option. This makes having closed captions for all of your videos very easy to do. YouTube also allows you to add closed captions yourself. You can play the video and type as it plays. You can also upload a pdf if you want. The point is that YouTube makes it so easy for you to include CC.

Audio Description for Videos & Animations

WCAG Guideline 1.2.5 All of your videos or animations must have an audio description that is accessible to the user. This is so a person who is not able to see the video or animation, they are at least able to hear an audio description of it. This is a little harder to do than closed captions because YouTube does not offer a way for you to do this. But there are services that do. I have seen Amazon offer a service that will transcribe your text into audio for a very good price.

Color Not The Only Indication Of Meaning

WCAG Guideline 1.4.1 You cannot use color as the only indication of meaning. This is more for color blindness. For example, if you have a contact form a common mistake is to have “Required fields are in red” this is bad. The proper way to handle that is “Required fields are in red and marked with an *” and then make sure that you mark the required fields like name and email like this “Name*” and “Email*” Now the user is not relying on color alone to tell them which input fields are required.

Minimum Font Size 16px

WCAG Guideline (none) This is not actually an official guideline, this is just generally accepted as the minimum text size for the body of content. Your font should be at least 16px to be accessible. It is more important to measure your text in percentage so it is responsive because modern browsers adequately resize text regardless of how the size has been defined, it is not vital that text sizes be defined in relative sizes.

Input Error Handling

WCAG Guideline 3.3.1 If there is an error by the user when inputting information in some sort of form. You must explain to the user where they made a mistake and how to fix it. For example, if a user did not add the required “name” in the name field. You must display a message that says something to the effect “Please review the error below” then highlight the input value that is missing and add text explaining how to fix it “Last name is required”

Flexible Time Limits

WCAG Guideline 2.2 You should use flexible time limits if you have to use one at all. Sometimes you need to use a time limit, especially for sites like banks and credit card companies. So, if you have to use a time limit make sure to give the user the ability to request more time. For example, if your website is about to time out, make an option pops up and tells the user time is about to expire and offer the option to gain more time if needed.

Add Skip Links For Repetitive Content

WCAG Guideline 2.4.1 Make sure that the user has the ability to skip repetitive content like that big beautiful navigation menus. Remember navigation menus and widgets are usually on every single page. So, the user has to navigate through those navigation menus every time they go to a new page. So do them a favor and give them a skip link. I like to add a skip link as the 2nd thing they go to if they are tab navigating. And for goodness sake, please make sure that that amazing skip link you add actually works.

ARIA Tags

WCAG Guideline 1.1.1 ARIA tags can be used to label elements that can not be properly labeled with HTML. There are 2 main rules for ARIA Tags. Rule #1 don’t use ARIA tags, because most elements if properly labeled with HTML do not require ARIA tags. Rule #2 If you have to use ARIA tags remember that “No ARIA tags are better than bad ARIA tags”. ARIA tags are usually labeled with the “role” attribute (for instance, role=”navigation”). HTML5 elements like “nav” and “main” are directly mapped to ARIA landmarks, so they can be used instead. Accessible Rich Internet Applications (WAI-ARIA)

Accessibility Statement

WCAG Guideline 5.3 You must add an accessibility statement that provides information like, what is your compliance level and what are you doing to fix these issue. But it also contains very useful information like who is the person in charge of your accessibility and how does the user contact them in case they are having an issue navigating your website. This is an often overlooked but very important part of the accessibility compliance process. Here is a link to the W3C Accessibility Statement Generator. After you fill it out, place the link in your footer.

Underline Your Links

WCAG Guideline 2.4.4 All of the links on your website have to have a secondary method of announcing they are links besides color. So this means that links need to be more than just blue. I suggest adding an underline when your mouse hovers over it or that link becomes the focus. This way the user has 2 different ways to tell that the text is actually a link. This has more to do with color blindness for users.

Text Spacing

WCAG Guideline 1.4.12 Your text must maintain its logical order and it must not overlap when the user enlarges the text by at least 200%. Also, your text must maintain its logical order and not overlap when your screen size becomes smaller as if the user was using a phone or tablet. Spacing relative to text should be 2% between paragraphs, 1.5% between lines, .12% between letters and .16% between words is considered best pratice.

Focus Order

WCAG Guideline 2.4.3 Screen-readers follow the DOM not CSS order for navigation. This means to make sure not to change the position of an element on the front end with CSS alone. Remeber HTML is a structural language while CSS is presentational. Assisitive technology usually uses the underlying HTML document to present the content to the user, so make sure that the content as viewed in only HTML is arranged in a logical manner. W3C Focus Order Solutions

Headers Follow Proper Hierarchy

WCAG Guideline 1.3 Header levels (H1-H6) must be laid out like a document outline. For example, a H1 header should only be used as the main idea of the page usually the largest title text at the top describing the overall idea of the whole page. A H3 and H4 should be used as subsections within a H2. You can however use a H2 tag after you have used a H3-H6 tag  if the new H2 tag is opening a new section or new content. W3C Header Solution

Correct Header Designations For Data Tables

Data tables can be horizontal or vertical, with header cells describing either the column that comes below it or the rows that come after it. That means, table cells must be properly marked with a “scope” attribute so that the screen reader knows how to match the heading to the data.

Understanding CAPTCHA

WCAG Guideline 1.1.1 If the purpose of non-text content is to confirm that content is being accessed by a real person rather than a bot, then make sure text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities. W3C CAPTCHA Solutions

Using Heading and Spacing to Group Related Content

Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter, and make it easier to scan and understand. Remember, Spacing highlights relationship between content so use this power wisely.

Provide Controls For Content That Start Automatically

WCAG Guidline 2.2.2 & Guidline 1.4.2  Provide visible controls to allow users to stop any animations or auto-playing sound. This applies to carousels, image sliders, background sound, and videos. I would suggest not to use any of these types of content if possible but if you have to then at least give the user control over them.

Consistently Identify Interactive Elements

WCAG Guideline 3.2.4  Make sure components that have the same functionality within a set of Web pages are identified consistently. So use your labels, names and text alternatives consistently for content that has the same functionality. Remember, a system for identifying interactive elements can be “consistent” without being “identical”.
For Disability Assistance Call
727-342-0735