The WCAG checklist is a list of criteria that ensure web content and websites are accessible for all users.<\/p>\n
This article will cover several WCAG guidelines with useful code snippets for each guideline.<\/p>\n
Information and user interface components must be presentable to users in ways they can perceive.<\/p>\n
1.1. Text Alternatives<\/a> No alt attribute has been added to this image.<\/p>\n An ait attribute has been added.<\/p>\n 1.3.1 Info and Relationships<\/a> A good example is adding proper semantic meaning and emphasis to text content.<\/p>\n Styling the text to appear bold may work for sighted users. However, screen readers will be unable to emphasize the text for visually impaired users.<\/p>\n Using the appropriate elements gives semantic meaning to the text and fixes this issue.<\/p>\n User interface components and navigation must be operable.<\/p>\n 2.1.1 Keyboard<\/a> This div can be styled to appear like a button. However, it will not have semantic meaning or keyboard focus.<\/p>\n A simple solution is to use a button element.<\/p>\n If for some reason a div has to be used, adding a role and tabindex will make it keyboard operable.<\/p>\n 2.4.2 Page titled<\/a> The title of the page is not clear from this heading.<\/p>\n The title of the page is clear from this heading.<\/p>\n 2.4.4 Link Purpose (in context)<\/a> The text does not properly describe the purpose of the link.<\/p>\n The text clearly describes the purpose of the link.<\/p>\n 2.5.3 Label in Name<\/a> A speech input user would say \u2018buy\u2019, but the speech software won\u2019t know what item to add.<\/p>\n To solve this issue, make the label and the accessible name the same.<\/p>\n Information and the operation of the user interface must be understandable.<\/p>\n 3.1.1 Language of Page<\/a> The lang attribute sets the language for a page.<\/p>\n 3.3.2 Labels or Instructions<\/a> Form fields without labels associated with them are inaccessible.<\/p>\n Associating form fields with labels gives users a larger clickable area. Labels also help users to fill in the correct information in the form field.<\/p>\n Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.<\/p>\n 4.1.1 Parsing<\/a> – Elements should have unique IDs.<\/p>\n The IDs are similar; this is wrong.<\/p>\n The IDs are distinct; this is correct.<\/p>\n – Elements have proper opening and closing tags.<\/p>\n There is no closing tag.<\/p>\n There is a closing tag.<\/p>\n – Elements are properly nested.<\/p>\n Block-level elements should not be nested in inline elements.<\/p>\n Inline elements can be nested in block-level elements.<\/p>\n 4.1.2 Name, Role, Value<\/a> An image of a button was used instead of a button element.<\/p>\n A button element was used.<\/p>\n 1.3.4 Orientation<\/a> By setting the width of the card to 500px, it will overflow on mobile phones and small screens.<\/p>\n Changing the height to 500px with media queries ensures that the content adapts.<\/p>\n 1.3.5 Identify Input Purpose<\/a> The type attribute was not added to the input element.<\/p>\n Setting the type attribute to `email` helps assistive technologies know what type of data is required. This enables them to automatically fill out the form for users.<\/p>\n 1.4.4 Resize text<\/a> With these static styles, when a user zooms in, the static sizing will affect the readability of the text.<\/p>\n Using scalable sizing units fixes this issue.<\/p>\n 1.4.5 Images of text<\/a> Screen readers will be unable to read text on images.<\/p>\n Therefore, text content must be presented in a proper and accessible format.<\/p>\n 1.4.10. Reflow<\/a> This style will cause horizontal scroll on small screens.<\/p>\n Using responsive CSS fixes the issue.<\/p>\n
\nAll non-text content such as images, icons, charts, etc must have alternative text that describes the content.<\/p>\n\/\/bad code\r\n\r\n<img src=\"logo.png\" \/><\/pre>\n
\/\/good code\r\n\r\n<img src=\"logo.png\" alt=\"company's logo\" \/>\r\n<\/pre>\n
\nInformation, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.<\/p>\n\/\/bad code\r\n\r\n<p>Get out of bed <span>now<\/span>!<\/p>\r\n\r\nspan {\r\n font-weight: bold;\r\n}\r\n<\/pre>\n\/\/good code\r\n\r\nGet out of bed <em>now<\/em>!\r\n<\/pre>\n
Principle 2: Operable<\/h3>\n
\nAll functionality should be operable with a keyboard.<\/p>\n \r\n\/\/bad code\r\n\r\n<div class=\"button\">submit<\/div>\r\n<\/pre>\n
\/\/good code\r\n\r\n<button>submit<\/button>\r\n<\/pre>\n
<div role=\"button\" tabindex=\"0\">Close<\/div>\r\n<\/pre>\n
\nTitles of the page should describe the topic or purpose.<\/p>\n \r\n\/\/bad code\r\n\r\n<h1>a website's page<\/h1>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<h1>About Us<\/h1>\r\n<\/pre>\n
\nThe target or purpose of the link must be clear by the link text alone, its associated content, or its surrounding content.<\/p>\n \r\n\/\/bad code\r\n\r\n<a href=\"google.com\">this is a link to a webpage<\/a>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<a href=\"google.com\">Go to Google<\/a>\r\n<\/pre>\n
\nFor user interface components with labels that include text or images of text, the name contains the text that is presented visually.<\/p>\n \r\n\/\/bad code\r\n\r\n<button>buy<\/button>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<button aria-label=\"buy shoes\">buy shoes<\/button>\r\n<\/pre>\n
Principle 3: Understandable<\/h3>\n
\nProgrammatically define the primary language of each page.<\/p>\n<html lang=\"en\"><\/html>\r\n<\/pre>\n
\nForm inputs should have labels associated with them.<\/p>\n \r\n\/\/bad code\r\n\r\n<input name=\"userEmail\" type=\"email\" \/>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<label for=\"email\">Enter your email address<\/label>\r\n<input id=\"email\" name=\"userEmail\" type=\"email\" \/>\r\n<\/pre>\n
Principle 4: Robust<\/h3>\n
\nMake sure that the following are taken care of in the markup<\/p>\n \r\n\/\/bad code\r\n\r\n<button id=\"button\">submit<\/button>\r\n<button id=\"button\">login<\/button>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<button id=\"submit\">submit<\/button>\r\n<button id=\"login\">login<\/button>\r\n<\/pre>\n
\r\n\/\/bad code\r\n\r\n<button>submit\r\n<\/button>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<button>submit<\/button> \r\n<\/pre>\n
\/\/bad code\r\n\r\n<p>\r\n<div>i am a block level element nested in an inline element. This is wrong<\/div>\r\n<\/p>\r\n<\/pre>\n
\/\/good code\r\n\r\n<div>\r\n<p>i am an inline element nested in a block level element. This is right.<\/p>\r\n<\/div>\r\n<\/pre>\n
\nAll interactive elements on a page should have a name and role, state. and value where applicable.<\/p>\n \r\n\/\/bad code\r\n\r\n<img src=\"button.png\" alt=\"click the button\" \/>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<input name=\"form submission button\" type=\"submit\" value=\"submit the form\" \/>\r\n<\/pre>\n
WCAG 2.1 LEVEL AA CHECKPOINTS<\/h2>\n
Principle 1: Perceivable<\/h3>\n
\nContent adapts to different screen sizes and display orientation.<\/p>\n \r\n\/\/bad code \r\n\r\n .card {\r\n width: 500px;\r\n }\r\n<\/pre>\n \r\n\/\/good code\r\n\r\n .card {\r\n width: 100%;\r\n }\r\n @media screen and (min-width: 768px) {\r\n .card {\r\n width: 500px;\r\n }\r\n }\r\n<\/pre>\n
\nThe purpose of input fields should be programmatically determinable.<\/p>\n \r\n\/\/bad code \r\n\r\n<input name=\"userEmail\" type=\"text\" placeholder=\"enter your email address\" \/>\r\n<\/pre>\n
\r\n\/\/good code\r\n\r\n<input name=\"userEmail\" type=\"email\" placeholder=\"enter your email address\" \/>\r\n<\/pre>\n
\nText content should remain readable even when users zoom up to 200%.<\/p>\n \r\n\/\/bad code \r\n\r\n .card-static-units {\r\n height: 200px;\r\n width: 400px;\r\n }\r\n<\/pre>\n \r\n\/\/good code \r\n\r\n .card-dynamic-units {\r\n height: 12.5rem;\r\n width: 25rem;\r\n }\r\n<\/pre>\n
\nUse real text as much as possible instead of images of text.<\/p>\n \r\n\/\/bad code\r\n\r\n <img src=\"page heading\" \/>\r\n<\/pre>\n
\r\n\/\/good code<\/pre>\r\n<h1>Page Heading<\/h1>\r\n<\/pre>\n
\nContent can be presented without loss of information or functionality, and without requiring
\nscrolling in two dimensions.<\/p>\n \r\n\/\/bad code \r\n\r\n .card {\r\n width: 500px;\r\n }\r\n<\/pre>\n \r\n\/\/good code \r\n \r\n .card {\r\n width: 100%;\r\n }\r\n @media screen and (min-width: 768px) {\r\n .card {\r\n width: 500px;\r\n }\r\n }\r\n<\/pre>\nPrinciple 2: Operable<\/h3>\n