Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. First and foremost is for you as the owner, CEO, or manager of a website where any customer interaction is desired, to realize that the Americans with Disabilities Act (ADA) is to assure that those with disabilities have an equal opportunity to navigate and enjoy your website.
The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. Here is a quick reference to Web Content Accessibility Guidelines.
To help promote web accessibility, here are a few simple accessibility tips that most anyone can implement today into their website’s HTML and CSS to make it more accessible. These web accessibility tips can be used by web designers, developers, or content authors to guide them in creating or deploying web-based resources that are fully accessible to all users.
The Guidelines and Success Criteria are organized around the following 4 principles, which lay the foundation necessary for anyone to access and use Web content.
Principle 1: Perceivable
Principle 2: Operable
Principle 3: Understandable
Principle 4: Robust
Principle 1: Perceivable. Information and user interface components must be presentable to users in a way they can perceive. 1.1 Text Alternatives, 1.2 Time based Media, 1.3 Adaptable, and 1.4 Distinguishable
Simple accessibility tip #1: Add Alternative Text to Your Logo
Alternative text (guideline 1.1) is presented to blind screen reader users in place of images they cannot see. Every image that conveys content or has a function on your website should be given alternative text. But to get started, adding alternative text to your site logo presents your company or organization name to help users know which site they are on.
Principle 2: Operable. User interface components and navigation must be operable. 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures and Physical Reactions, 2.4 Navigable, and 2.5 Input Modalities.
Simple accessibility tip #2: Enhance Focus Indicators
Focus Visible (guideline 2.4) Sighted keyboard users generally navigate through the links and form fields on a web page using the Tab and Shift+Tab keys on the keyboard. The colors may need to be customized to fit your site design, but they should be distinctive.
Principle 3: Understandable. Information and the operation of the user interface must be understandable. 3.1 Readable, 3.2 Predictable, and 3.3 Input Assistance,
Simple accessibility tip #3: Identify the language of text
Language of page (guideline 3.1) Many screen reader applications support multiple languages and can switch on the fly between supported languages, using the appropriate voice and rule set for the current language. However, currently, screen readers are unable to determine what language a document is written in, or if the language changes within that document. Therefore, it is important for authors to define the language of the document or web page, and to identify the language of any blocks of text that deviate from that default language.
Principle 4: Robust. Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. WCAG seeks to ensure that your website can accommodate all of these options and more.
Simple accessibility tip #4: Parsing
Parsing (guideline 4.1) The content and code of your website should be well-formed. For example, content written in a markup language such as HTML or XML should have complete start and end tags and should nest elements correctly. This will help prevent display errors and problems with assistive technologies.
Here are a few additional tips for making your website accessible.
1. Use headings properly.
Use headings and subheadings to form an outline of the page. Do not skip heading levels. They help non-visual users (including search engines) to understand how the page is organized, and make it easy for screen reader users to navigate
2. Use ARIA landmarks.
The W3C Accessible Rich Internet Applications (ARIA) specification makes it possible to produce accessible interactive web applications. One easy entry into ARIA is landmark roles. Simply add an HTML attribute for one of the eight landmark roles (e.g., role=”navigation”, role=”main”) and users will be able to jump directly to that section of the page with a single keystroke. Alternatively, use HTML semantic elements that map to ARIA roles.
3. Provide sufficient color contrast.
Be sure the foreground and background have adequate contrast. There are many free tools that can help with this.
4. Avoid using tiny fonts.
Since users may be unaware, they can increase the font size using browser hotkeys, use a reasonably large font size by default; then, users can make it smaller if desired. Note that a font size of 1em uses the default browser font size, therefore is an ideal choice for most text, thereby honoring users’ preferences and expectations.
5. Identify Required Form Fields
If your form has a mix of required and non-required form fields, add the aria-required=”true” attribute to each input that is required. This will identify them as required to screen reader users.
6. Make Your Page Title an <h1>
Your page title is generally the big, bold text typically at the beginning of the main content that describes the content or functionality of that page. While a good heading structure for your entire document is great for accessibility, simply making your main page title a <h1> will facilitate page navigation and comprehension.
7. Avoid “click here”
Search your site for the words “click here”. This link text is ambiguous for all users but is particularly difficult for screen reader users. It always adds additional, unnecessary text. Change the link text to be more descriptive of the content or function of the link.
Making your website accessible in accordance with the WCAG standards ensures that it will be navigable and usable by as many people as possible. To learn more about how you can improve your WCAG compliance, follow me at ADA WebGuard blog posts for the latest news and updates, or call us at 833-232-9321 for a free consultation.
