Web Content Accessibility Guidelines
- 1. WCAG: Web Content Accessibility Guidelines BY: Purnima Agarwal MCA 2nd Sem Pondicherry University 20352042 What is it and what we have to do.
- 2. What is web accessibility? Before diving into WCAG, we will first know what is web accessibility.
- 3. Web accessibility is a way of making your website available to as many people as you can. Not everyone in the world is same and will be able to use your website as you do. So it is important for everyone to keep accessibility in mind while designing your websites.
- 4. We should think if as a way of treating everyone same and providing them the same opportunity no matter what their ability or situation is. Just as it is wrong that someone who is one a wheelchair can’t use a building because it doesn’t have a ramp or a lift, it is wrong to exclude someone from using a website because they have some kind of disability. We are all different, but we are all human, and therefore have the same human rights. Accessibility is the right thing to do. Providing accessibility is law in some countries and govern by the government and there are also some guidelines issued by organizations on how to make a website accessible and also judge the accessibility of a website.
- 5. Why we need to make our websites accessible? The power of the Web is in its Universality. According to the World Health Organization: • 15% of the world’s population (over a billion people) have some form of disability. • 285 million people are estimated to be visually impaired • 39 million of those are estimated to be blind • 246 million are estimated to have low-vision • 260 million people worldwide have disabled hearing loss
- 6. Accessibility Guidelines and Laws There are some laws which governs the accessibility of a websites and also provides principles and guidelines to make our website accessible. 1) The W3C has published a large and very detailed document that includes very precise, technology-agnostic criteria for accessibility conformance. These are called the Web Content Accessibility Guidelines (WCAG). The criteria are split up into four main categories, which specify how implementations can be made perceivable, operable, understandable, and robust. 2) Different country may have specific legislation governing the need for website to be accessible — for example EN 301 549 in the EU, Section 508 of the Rehabilitation Act in the US, Federal Ordinance on Barrier-Free Information Technology in Germany, the Accessibility Regulations 2018 in the UK, Accessibilità in Italy, the Disability Discrimination Act in Australia, etc. The W3C keeps a list of Web Accessibility Laws & Policies by country.
- 7. WCAG: Introduction Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. It ensures all users have equal access to information on the web.
- 8. WCAG provides a wide range of guidelines and recommendations for making websites accessible and it have different versions. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. These guidelines makes your website more visible to other and increases its reach on the web. These guidelines will also often make our Web content more usable to users in general. WCAG is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a shared standard for Web content accessibility that meets the needs of individuals, organizations, and governments internationally.
- 9. Versions: • WCAG 1.0, finalized in 1999 • WCAG 2.0 - published on 11 December 2008. WCAG 2.1 - published on 5 June 2018.(current standard) WCAG 2.2 - published in may 21, 2021. • All requirements (“success criteria”) from 2.0 are included in 2.1. The 2.0 success criteria are exactly the same (verbatim, word- for-word) in 2.1. All requirements in 2.0 and 2.1 are included in 2.2. The wording of the 2.0 and 2.1 success criteria are exactly the same in 2.2.
- 10. Who were the main focus for WCAG 2.1? It extends points from previous version and included more focus for-
- 11. How is WCAG 2.1 different from other pervious versions? What’s new about WCAG 2.1 is that it includes 17 new success criteria related to mobile accessibility, as well as provisions that will benefit more people. The success criteria found in WCAG 2.0 are included in WCAG 2.1 – the wording of those criteria has not changed. That means that WCAG 2.1 is “backwards compatible” or, as W3C puts it, “content that conforms to WCAG 2.1 also conforms to WCAG 2.0.”
- 12. The Four Principles: We will be discussing the 2.1 version in details. WCAG 2.1 is broadly broken down into four principles — major things that web content must be to be considered accessible. • Perceivable: Users must be able to perceive it in some way, using one or more of their senses. • Operable: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.). • Understandable: The content must be understandable to its users. • Robust: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.
- 13. GUIDELINES : Under the principles are the guidelines. The 12 guidelines provide the basic goals that developers should work toward in order to make content more accessible to users with different disabilities. We can’t test the guidelines, but provide the framework and overall objectives to help authors understand the success criteria and better implement the techniques. We will now discuss the guidelines:
- 14. Guidelines under Principle 1: Perceivable • Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. • Time-based Media: Provide alternatives for time-based media. • Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. • Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- 15. Guidelines under Principle 2: Operable • Keyboard Accessible: Make all functionality available from a keyboard. • Enough Time: Provide users enough time to read and use content. • Seizures: Do not design content in a way that is known to cause seizures. • Navigable: Provide ways to help users navigate, find content, and determine where they are.
- 16. Guidelines under Principle 3: Understandable • Readable: Make text content readable and understandable. • Predictable: Make Web pages appear and operate in predictable ways. • Input Assistance: Help users avoid and correct mistakes.
- 17. Guidelines under Principle 4: Robust Compatible: Maximize compatibility with current and future user agents, including assistive technologies. • Parsing: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. (Level A) • Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
- 18. Levels of Conformance To help development teams prioritize accessibility implementation and remediation efforts, WCAG success criteria are organized into three levels of conformance: •Level A is a basic requirement for some users with disabilities to be able to access and use web content. •Level AA indicates overall accessibility and removal of significant barriers to accessing content. •Level AAA provides improvements and enhancements to web accessibility for some users with disabilities. These levels are cumulative. To claim Level AA conformance, a website must meet all Level A and AA success criteria. Likewise, Level AAA conformance implies that all success criteria from all three levels have been met.
- 19. Making a website accessible according to WCAG 2.1 is not difficult! Many developers feel like following WCAG rules is very difficult and too much work . So, here is check list and some simples steps which has some simple steps you can follow to achieve accessibility .
- 20. WCAG Checklist. The W3C has extensive guidelines on how to attain basic (and recommended) web content accessibility. Here are some of the most actionable fundamentals below, so if you follow these steps in the checklist , you’re well on your way to delivering an accessible user experience. It’s extremely useful to have a WCAG checklist to hand when you are working on the website and going through the rules. A WCAG checklist keeps you organized and helps you check your progress while designing and how far you have came and a log for future use.
- 21. 1. Screen-reader Compatible Web Pages Web pages must be readable by electronic “screen readers” — which are devices commonly used by the visually impaired to surf the internet. 2. Alt-tagged Images Images must have “alt tags” (a type of metadata) which will help visually-impaired users to identify the image via text or via a screen reader. Search engine optimizers will know of alt-tags as a way to optimize images for ranking high in ‘Google Images’. 3. Alt-tagged Tables If you’re using tables on any web pages, they must also have alt-tags — similar to those used with images — to help explain each column via text. The user’s screen-reader will then read that text aloud, describing the contents of the table. 4. Automatic Scripting Any scripted display usage of image mapping should be accompanied by textual alternatives. 5. Style Sheet Independence Your web pages shouldn’t need a stylesheet to display in a way that is understandable. They should be readable to screen readers, most of which cannot load style sheets.
- 22. 6. Accessible Forms Web forms should be usable even without a mouse, and each field should be labeled. 7. Text Links to Plugins If your website requires a specific plugin to work correctly, you should present the link to that plugin in text form. 8. Inclusive Color Schemes Your website should not contain any colors or color combinations that are either integral to the correct usage of your website, or which may confuse those with color blindness in any way pertaining to your website, products or services. 9. Keyboard-friendly Browsing Your website shouldn’t be reliant on the usage of a mouse or touchpad. Users who wish to navigate using only keyboard keys should be able to do so. 10. Harmless Website Design Your website should not serve images or videos that can cause seizures.
- 23. Some more ways you make your website accessible. Step 1: Use Heading Tags Users who are visually impaired, have low literacy skills or have another form of disability may have difficulties scrolling through websites. These users typically employ screen readers or other tools to read the website content for them. Screen readers use heading tags (<h1>, <h2>, etc.) to navigate and prioritize the content. The strategic use of heading tags will not only make the site more easily manageable by screen readers but it will also make it more optimized for search engines. Step 2: Use ALT Text for Images Screen readers can also read the text in the <ALT> tags in embedded image files. These tags usually contain a description of any images, infographics, or other non-text information on the page. The more descriptive the image, the better for the user. For instance, if an online clothing store has an image of a dress, a descriptive ALT tag text should contain the dress size, color, pattern, design, the name of designer and fabric used.
- 24. Step 3: Use Proper HTML Structure While some features can add some visual variety to websites, they could potentially compromise any attempts to make the site more accessible. For instance, removing the underline from hyperlinks can confuse users with visual impairments as to whether the link text is intended to be a link, or just more content text. Another example is the use of HTML tables. For decades, developers have used tables as a layout tool, allowing them to place content in specific areas on the page. Step 4: Make Forms Accessible The typical objective of a business website is to convert visitors into customers. This conversion can be as simple as receiving a request for additional information, or as extensive as receiving and fulfilling an order, complete with payment information. In order for a business website to be effective at converting a visitor with special needs into a customer, the forms that enable those conversions should be designed for those visitors in mind.
- 25. Step 5: Choose a CMS That Supports Accessibility AChecker is a PHP open source Web accessibility evaluation tool used to review the accessibility of Web pages based on a variety of international accessibility guidelines. This implementation is available in the WYSIWYG and can be run as part of the content editing process. When editing or creating content, dotCMS users can click on the Accessibility Checkmark to run the checker. This will produce a report of all accessibility problems for your selected guidelines. The report identifies 3 types of problems 1)Known problems: These are problems that have been identified with certainty as accessibility barriers. You must modify your page to fix these problems; 2)Likely problems: These are problems that have been identified as probable barriers, but require a human to make a decision. You will likely need to modify your page to fix these problems; 3)Potential problems: These are problems that A Checker cannot identify, that require a human decision. You may have to modify your page for these problems, but in many cases, you will just need to confirm that the problem described is not present.
- 26. Example of a website which is according to WCAG 2.1 We will take the example of SCOPE website (https://www.scope.org.uk) Scope, is a very good example in how to do keyboard accessibility well. Try tabbing through the page, observe the big ‘skip to main content’ banner that appears for the first tab, the transition styles when tabbing between elements, and the thick border on the focus indicator. The site is also a great example of how beautiful website and be made accessible too. Large, high-res, and captivating imagery is easy on the eye, even for partially-sighted site users, and colors are distinct, with large font sizing, line spacing, and well-designed buttons. One of the things we like most about this site is what you’ll find on the ‘Accessibility’ page, which is given prominence in the top navigation bar next to ‘Contact’.
- 27. We can take this website as a example
- 28. Accessibility of websites around the world. The WCAG are not laws, they are just guidelines. The W3C won’t legally penalize you for not following their specific guidelines to the letters, so most of the time people don’t care. A accessibility report in 2019 - the WebAIM Million: An accessibility analysis of the top one million home pages - indicates that less than 1% of website home pages are likely to meet standard accessibility requirements. The results are very disappointing figures for those who care about making the web a more inclusive place. The results also mean that online companies will likely be missing out on billions of pound of sales because their sites are unusable to large numbers of people. As a developer, people often forget to include the guidelines in their websites cause they often think its double work but there are many aids available to help you with this process.
- 29. Conclusion The Web and Internet has become a important part of the whole world and in whole is an increasingly important resource in many aspects of our life which includes: education, employment, government, commerce, health care, recreation, and more. It is very important for websites to be accessible to provide equal opportunity for everyone around the world. An accessible Web can help people with disabilities participate more actively in society and WCAG are just some rules we need to follow to achieve that. There are many tools which can make this journey more easy , like: • Screen reader for Chrome: Chromevox • Chrome plug-in for visual impairment simulation: NoCoffee • Web Accessibility page analyzer: Wave • Google Lighthouse (Chrome Extension)
- 30. REFERENCES • https://inviqa.com/blog/web-accessibility-examples-5-sites-doing-it-right • https://dotcms.com/blog/post/website-accessibility-checklist-10-steps-towards- website-compliance • https://usersnap.com/blog/website-accessibility-2018/ • https://bthechange.com/make-your-website-more-accessible-to-people-with- disabilities-132f59d19292 • https://codeburst.io/seven-ways-to-make-your-web-app-more-accessible- 411a8c716fcb • https://www.w3.org/WAI/teach-advocate/accessibility-training/topics/#design • https://www.abilitynet.org.uk/news-blogs/less-1-website-home-pages-are-likely- meet-accessibility-standards • https://youtu.be/f5qv7AnTUHk • https://www.essentialaccessibility.com/