{"id":151,"date":"2026-01-28T13:02:15","date_gmt":"2026-01-28T18:02:15","guid":{"rendered":"https:\/\/www.ramapo.edu\/digital-accessibility\/?page_id=151"},"modified":"2026-03-20T09:13:03","modified_gmt":"2026-03-20T13:13:03","slug":"web","status":"publish","type":"page","link":"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/","title":{"rendered":"Creating Accessible Webpages"},"content":{"rendered":"<p>Listed below are best practices on creating web content that meets WCAG 2.1 AA standards.<\/p>\n<div class=\"divider\"><img decoding=\"async\" src=\"\/wp-content\/themes\/rcnjrd\/images\/icons\/ramapo-arch-icom_rule.png\" alt=\"Ramapo\" \/><\/div>\n<div id=\"CopyPaste\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Properly Copy &amp; Paste Content<\/div><div class=\"c_content\">\n<p>To ensure your content is accessible and performs well, <strong>avoid pasting directly from Word or Google Docs<\/strong> into your webpage editor. These sources include hidden formatting code that can interfere with screen readers, break mobile layouts, and hurt SEO.<\/p>\n<p>To keep your site clean:<\/p>\n<ul>\n<li>Use &#8220;Paste as plain text&#8221; within your CMS.<\/li>\n<li>Strip formatting by first pasting into Notepad or TextEdit.<\/li>\n<li>Use the HTML\/Text view in your editor to ensure code-free entry.<\/li>\n<\/ul>\n<\/div><\/div>\n<div id=\"Headings\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Headings<\/div><div class=\"c_content\">\n<h2>Use Headings in Order<\/h2>\n<p>Screen reader users often navigate by headings. A clear, consistent heading structure:<\/p>\n<ul>\n<li>Improves usability<\/li>\n<li>Supports assistive technology<\/li>\n<li>Helps all users scan content more easily<\/li>\n<\/ul>\n<h3>Follow a clear hierarchy<\/h3>\n<p>Headings should reflect the logical structure of the content \u2014 like an outline.<\/p>\n<ul>\n<li>Start with H1 for the main page title (only one per page)<\/li>\n<li>Use H2 for major sections<\/li>\n<li>Use H3 for subsections under H2<\/li>\n<li>Use H4 for subsections under H3<\/li>\n<\/ul>\n<h3>Don\u2019t skip levels<\/h3>\n<p>Skipping levels can confuse screen reader users who rely on heading navigation.<\/p>\n<ul>\n<li>Do not jump from H2 to H4<\/li>\n<li>Do not go from H1 directly to H3<\/li>\n<li>Correct: H1 \u2192 H2 \u2192 H3<\/li>\n<li>Incorrect: H1 \u2192 H3 \u2192 H2<\/li>\n<\/ul>\n<h3>Don\u2019t use headings just to make text larger<\/h3>\n<ul>\n<li>Headings are for structure, not styling.<\/li>\n<li>If you want bigger or bold text, use CSS styles \u2014 not heading tags.<\/li>\n<li>Misusing headings can disrupt accessibility navigation.<\/li>\n<\/ul>\n<\/div><\/div>\n<div id=\"Writing\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Writing<\/div><div class=\"c_content\">\n<h2>Write clearly and keep content simple<\/h2>\n<p>Clear writing benefits users with cognitive disabilities, users reading in a non-native language, and anyone scanning content quickly.<\/p>\n<ul>\n<li>Use plain language.<\/li>\n<li>Keep paragraphs short.<\/li>\n<li>Use bulleted or numbered lists for scannable content.\n<ul>\n<li>Use built-in list formatting tools \u2014 do not manually type dashes or numbers.<\/li>\n<\/ul>\n<\/li>\n<li>Avoid jargon and overly complex sentence structures.<\/li>\n<\/ul>\n<\/div><\/div>\n<div id=\"Hyperlinks\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Hyperlinks<\/div><div class=\"c_content\">\n<h2>Use Clear Link Text<\/h2>\n<p>Using plain language improves navigation, usability, and accessibility for screen reader users.<\/p>\n<ul>\n<li>Avoid vague phrases such as \u201cclick here,\u201d \u201cread more\u201d or \u201clearn more\u201d or the URL itself.<\/li>\n<li>Link text must clearly describe the destination or action (e.g., \u201cApply for Scholarships\u201d).<\/li>\n<li>Links should make sense when read out of context, as screen reader users often navigate by links alone.<\/li>\n<li>Users must understand what will happen before activating the link.<\/li>\n<li>Be Concise: Links should be long enough to convey their purpose but as short as possible to prevent frustration for screen reader users who have to listen to the entire text.<\/li>\n<\/ul>\n<h3>Don&#8217;t rely solely on color (for Designers &amp; Developers)<\/h3>\n<p>Information should be clear to users who are colorblind or have low vision.<\/p>\n<ul>\n<li>Non-Color Indicators\/Visual Distinction: Links should look like links. While browsers underline them by default, if you remove the underline in body text, you must provide alternative visual cues (like a 3:1 contrast ratio against body text) and provide a non-color change on hover or focus (e.g., an underline appearing).<\/li>\n<li>Contrast Ratios: Text must have a 4.5:1 contrast ratio against the background. If using color alone to distinguish links, the link must have a 3:1 contrast ratio against the surrounding text.<\/li>\n<li>Keyboard Accessibility: Users must be able to navigate to and select every link using only the keyboard (Tab and Enter keys).<\/li>\n<li>Focus Visibility: A clear visual outline or indicator must appear when a link is focused via keyboard.<\/li>\n<li>Image Links: If an image is used as a link, its alternative text should describe the link&#8217;s function and content (e.g., alt=&#8221;Courses&#8221;).<\/li>\n<li>Note: Links are styled using <a href=\"https:\/\/www.ramapo.edu\/brand\/web-digital\/\">our approved high-contrast text and background colors<\/a>.<\/li>\n<\/ul>\n<\/div><\/div>\n<div id=\"alttext\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Alt Text<\/div><div class=\"c_content\">\n<h2>Add Meaningful Alt Text for Images<\/h2>\n<p>Alt text ensures users who cannot see images still receive the same information using a screen reader.<\/p>\n<ul>\n<li>Provide concise alt text that communicates the purpose or message of the image. (125-150 characters)<\/li>\n<li>Do not use file names or generic descriptions.<\/li>\n<li>If an image is purely decorative and conveys no information, leave the alt attribute empty (alt=&#8221;&#8221;) so assistive technology can skip it.<\/li>\n<\/ul>\n<\/div><\/div>\n<div id=\"pdfs\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>PDFs on the Web<\/div><div class=\"c_content\">\n<h2>Make PDFs and Documents Accessible<\/h2>\n<p>Tagged PDFs allow screen readers to interpret and navigate content correctly.<\/p>\n<ul>\n<li>Do not publish scanned, image-only PDFs.<\/li>\n<li>Export documents as tagged PDFs from tools like Word or InDesign.<\/li>\n<li>Ensure documents preserve:\n<ul>\n<li>Logical reading order<\/li>\n<li>Proper heading structure<\/li>\n<li>Selectable text<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>View more information on <a href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/files\/?pdf=open\">creating accessible PDFs &gt;<\/a><\/p>\n<\/div><\/div>\n<div id=\"flyers\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Flyers<\/div><div class=\"c_content\">\n<h2>Flyers on Webpages<\/h2>\n<p>We don&#8217;t recommend placing flyers on webpages. But if the need arises, flyers and promotional graphics posted on webpages must NOT be image-only. Any information conveyed in a flyer\u2014such as event title, date, time, location, description, and registration details\u2014must also be provided as accessible, real text on the page or through a fully accessible alternative.<\/p>\n<p>Images may be used for visual design, but they cannot be the sole way users access information. This ensures compliance with WCAG 2.1 Level AA and allows all users, including those using screen readers or text-resizing tools, to access the content.<\/p>\n<h3>Quick checklist for posting flyers on webpages<\/h3>\n<p>Before publishing, confirm:<\/p>\n<ul>\n<li>The event details are written as real text on the webpage (not just in an image)<\/li>\n<li>The flyer image is optional or supplemental, not the only source of information<\/li>\n<li>Headings and lists are used where appropriate (for readability and screen readers)<\/li>\n<li>The image has brief, meaningful alt text (e.g., \u201cEvent flyer for\u2026\u201d)<\/li>\n<li>Any linked PDF is fully accessible (tagged, searchable text, correct reading order)<\/li>\n<li>The page makes sense if the image does not load or cannot be seen<\/li>\n<\/ul>\n<\/div><\/div>\n<div id=\"video\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Videos<\/div><div class=\"c_content\">\n<h2>Provide Accurate Captions and Transcripts for Video<\/h2>\n<p>Captions and transcripts support users who are deaf or hard of hearing and improve overall usability.<\/p>\n<ul>\n<li>All videos with spoken content must include synchronized captions.<\/li>\n<li>Captions must be accurate and properly timed.<\/li>\n<li>For longer media, provide a full transcript to support navigation and flexible consumption.<\/li>\n<li>Live events must include real-time captioning when speech is present.<\/li>\n<\/ul>\n<p>View more information on <a href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/videos\/\">creating accessible videos &gt;<\/a><\/p>\n<\/div><\/div>\n\n<div id=\"forms\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Forms<\/div><div class=\"c_content\">\n<h2>Web vs. PDF Form<\/h2>\n<p>Web forms are more accessible, easier to maintain, and work better across devices and assistive technologies. The best practice is to, when p<span style=\"color: #333333;\">ossible, provide an accessible web form and offer an accessible PDF only as a secondary option if necessary.<\/span><\/p>\n<h3>When to use a Web Form (Preferred)<\/h3>\n<ul>\n<li>Users need to complete and submit the form online<\/li>\n<li>The form collects structured data (applications, registrations, requests)<\/li>\n<li>Accessibility, mobile usability, and ease of updates are priorities<\/li>\n<li>The form will be used frequently<\/li>\n<\/ul>\n<h3>When to use a PDF Form<\/h3>\n<ul>\n<li>A downloadable\/printable version is legally or operationally required<\/li>\n<li>A signed copy must be submitted offline<\/li>\n<li>The form must match an official printed document<\/li>\n<\/ul>\n<p>If using a PDF form, it must be:<\/p>\n<ul>\n<li>Tagged for accessibility<\/li>\n<li>Fully fillable<\/li>\n<li>Keyboard navigable<\/li>\n<li>Not scanned or image-only<\/li>\n<\/ul>\n<h2>Ensure Forms Are Fully Keyboard Accessible<\/h2>\n<p>Keyboard accessibility is essential for users with motor disabilities and screen reader users.<\/p>\n<ul>\n<li>All form elements must be operable using only the keyboard (Tab, Shift+Tab, Enter, and Space).<\/li>\n<li>Every input field must have a clear, programmatically associated label.<\/li>\n<li>Interactive elements must have visible focus indicators.<\/li>\n<\/ul>\n<p>View more information on <a href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/forms\/\">creating accessible forms &gt;<\/a><\/p>\n<\/div><\/div>\n<div id=\"contrast\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Color Contrast<\/div><div class=\"c_content\">\n<h2>Maintain High Color Contrast<\/h2>\n<p>Adequate contrast supports users with low vision, color blindness, and users viewing screens in bright environments.<\/p>\n<ul>\n<li>Ensure strong contrast between text and background colors<\/li>\n<li><a href=\"https:\/\/www.ramapo.edu\/brand\/web-digital\/\">Use approved, accessible brand color combinations<\/a>.<\/li>\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">Test color contrast<\/a> to confirm readability.<\/li>\n<\/ul>\n<p>Our website theme and CSS already use accessible, high-contrast brand colors. If you use the default WordPress styles, buttons, and text options, you don\u2019t need to worry about contrast compliance.<\/p>\n<p>That said, it\u2019s still helpful to understand color accessibility\u2014particularly if you\u2019re adding custom graphics, colored text, or special design elements.<\/p>\n<\/div><\/div>\n<div id=\"tables\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Tables<\/div><div class=\"c_content\">\n<h2>Use tables only for data, not layout<\/h2>\n<p>Screen readers rely on header associations to interpret data correctly.<\/p>\n<ul>\n<li>Use tables only for data, not layout.<\/li>\n<li>Include header rows (and header columns where appropriate).<\/li>\n<li>Avoid merged\/split cells when possible.<\/li>\n<li>Provide captions if the table needs explanation<\/li>\n<\/ul>\n<p>View a <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/tables\/\" target=\"_blank\" rel=\"noopener\">Tables Tutorial (W3C.org) &gt;<\/a><\/p>\n<p><strong>Example. Table with data<\/strong><\/p>\n<div class=\"infoBox col-sm-12 col-lg-12 \"><div class=\"boxContent\">\n<p>&lt;table width=&#8221;100%&#8221;&gt;&lt;caption&gt;Projects Report 2024&lt;\/caption&gt;<br \/>\n&lt;thead&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;th scope=&#8221;col&#8221;&gt;PROJECT&lt;\/th&gt;<br \/>\n&lt;th scope=&#8221;col&#8221;&gt;CORE&lt;\/th&gt;<br \/>\n&lt;th scope=&#8221;col&#8221;&gt;STATUS&lt;\/th&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/thead&gt;<br \/>\n&lt;tbody&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;th style=&#8221;text-align: center;&#8221; scope=&#8221;row&#8221;&gt;Digital Accessibility&lt;\/th&gt;<br \/>\n&lt;td style=&#8221;text-align: center;&#8221;&gt;All&lt;\/td&gt;<br \/>\n&lt;td style=&#8221;text-align: center;&#8221;&gt;Ongoing&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/tbody&gt;<br \/>\n&lt;\/table&gt;<\/p>\n<p>&nbsp;<\/p>\n<table width=\"100%\">\n<caption>Projects Report 2024<\/caption>\n<thead>\n<tr>\n<th scope=\"col\">PROJECT<\/th>\n<th scope=\"col\">CORE<\/th>\n<th scope=\"col\">STATUS<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th style=\"text-align: center;\" scope=\"row\">Digital Accessibility<\/th>\n<td style=\"text-align: center;\">All<\/td>\n<td style=\"text-align: center;\">Ongoing<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><\/div>\n<\/div><\/div>\n<div id=\"Navigation\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Navigation<\/div><div class=\"c_content\">\n<h2>Clear and Consistent Navigation<\/h2>\n<p>Predictability supports users with cognitive disabilities and screen reader users.<\/p>\n<ul>\n<li>Navigation menus should be consistent across pages.<\/li>\n<li>Provide clear page titles that describe the page topic.<\/li>\n<li>Avoid unexpected changes in context (e.g., links opening new windows without warning).<\/li>\n<\/ul>\n<\/div><\/div>\n<div id=\"autoplay\" class=\"collapsableContent\" tabindex=\"0\"><div class=\"collapsableTitle\"><span class=\"fa-stack\"><i class=\"fa fa-circle fa-stack-2x\"><\/i><i class=\"fa fa-chevron-down fa-stack-1x fa-inverse\"><\/i><i class=\"fa fa-chevron-up fa-stack-1x fa-inverse\"><\/i><\/span>Avoid Auto-Play<\/div><div class=\"c_content\">\n<h2>Avoid Auto-Playing Media<\/h2>\n<p>Unexpected audio interferes with screen readers and can be disorienting.<\/p>\n<ul>\n<li>Do not autoplay audio or video.<\/li>\n<li>Provide controls to pause, stop, or adjust volume.<\/li>\n<\/ul>\n<\/div><\/div>\n<div class=\"divider\"><img decoding=\"async\" src=\"\/wp-content\/themes\/rcnjrd\/images\/icons\/ramapo-arch-icom_rule.png\" alt=\"Ramapo\" \/><\/div>\n<h2>Digital Accessibility Skill-Building<\/h2>\n<div class=\"row colSet\">\n<div class=\"sColumn col-sm-12 col-md-12 col-lg-3\">\n\n<div class=\"infoBox col-sm-12 col-lg-12  whiteBox\"><div class=\"boxTitle\" style=\"padding: 5%;\">By File Type<\/div><div class=\"boxContent\" style=\"padding: 5%;\">\n<p><a href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/content-by-type\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-371\" src=\"http:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icons-filetype-300x237.png\" alt=\"icons filetype - webpage, document, video, email\" width=\"99\" height=\"78\" srcset=\"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icons-filetype-300x237.png 300w, https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icons-filetype.png 747w\" sizes=\"auto, (max-width: 99px) 100vw, 99px\" \/><\/a><\/p>\n<\/div><\/div>\n\n<\/div>\n\n<div class=\"sColumn col-sm-12 col-md-12 col-lg-3\">\n\n<div class=\"infoBox col-sm-12 col-lg-12  whiteBox\"><div class=\"boxTitle\" style=\"padding: 5%;\">By Role<\/div><div class=\"boxContent\" style=\"padding: 5%;\">\n<p><a href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/content-by-role\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-367\" src=\"http:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icons-role-1-300x241.png\" alt=\"icons role - writer, instructor, designer, developer, manager\" width=\"100\" height=\"80\" srcset=\"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icons-role-1-300x241.png 300w, https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icons-role-1-768x617.png 768w, https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icons-role-1.png 803w\" sizes=\"auto, (max-width: 100px) 100vw, 100px\" \/><\/a><\/p>\n<\/div><\/div>\n\n<\/div>\n\n<div class=\"sColumn col-sm-12 col-md-12 col-lg-3\">\n\n<div class=\"infoBox col-sm-12 col-lg-12  whiteBox\"><div class=\"boxTitle\" style=\"padding: 5%;\">Self-Paced Training<\/div><div class=\"boxContent\" style=\"padding: 5%;\">\n<p><a href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/self-paced-training\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-385\" src=\"http:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icon-self-paced-training-300x287.png\" alt=\"icon self paced training\" width=\"83\" height=\"80\" srcset=\"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icon-self-paced-training-300x287.png 300w, https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icon-self-paced-training.png 622w\" sizes=\"auto, (max-width: 83px) 100vw, 83px\" \/><\/a><\/p>\n<\/div><\/div>\n\n<\/div>\n\n<div class=\"sColumn col-sm-12 col-md-12 col-lg-3\">\n\n<div class=\"infoBox col-sm-12 col-lg-12  whiteBox\"><div class=\"boxTitle\" style=\"padding: 5%;\">Live Training<\/div><div class=\"boxContent\" style=\"padding: 5%;\">\n<p><a href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/live-training\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-384\" src=\"http:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icon-live-training-300x240.png\" alt=\"icon live training\" width=\"100\" height=\"80\" srcset=\"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icon-live-training-300x240.png 300w, https:\/\/www.ramapo.edu\/digital-accessibility\/wp-content\/uploads\/sites\/404\/2026\/02\/icon-live-training.png 751w\" sizes=\"auto, (max-width: 100px) 100vw, 100px\" \/><\/a><\/p>\n<\/div><\/div>\n\n<\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Listed below are best practices on creating web content that meets WCAG 2.1 AA standards. Digital Accessibility Skill-Building<\/p>\n","protected":false},"author":1011,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-151","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating Accessible Webpages - Digital Accessibility at Ramapo College<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Accessible Webpages\" \/>\n<meta property=\"og:description\" content=\"Listed below are best practices on creating web content that meets WCAG 2.1 AA standards. Digital Accessibility Skill-Building\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Accessibility at Ramapo College\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-20T13:13:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/\",\"url\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/\",\"name\":\"Creating Accessible Webpages - Digital Accessibility at Ramapo College\",\"isPartOf\":{\"@id\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/#website\"},\"datePublished\":\"2026-01-28T18:02:15+00:00\",\"dateModified\":\"2026-03-20T13:13:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ramapo College of New Jersey Home Page \u00bb Digital Accessibility\",\"item\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Accessible Webpages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/#website\",\"url\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/\",\"name\":\"Digital Accessibility at Ramapo College\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ramapo.edu\/digital-accessibility\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Accessible Webpages - Digital Accessibility at Ramapo College","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/","og_locale":"en_US","og_type":"article","og_title":"Creating Accessible Webpages","og_description":"Listed below are best practices on creating web content that meets WCAG 2.1 AA standards. Digital Accessibility Skill-Building","og_url":"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/","og_site_name":"Digital Accessibility at Ramapo College","article_modified_time":"2026-03-20T13:13:03+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/","url":"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/","name":"Creating Accessible Webpages - Digital Accessibility at Ramapo College","isPartOf":{"@id":"https:\/\/www.ramapo.edu\/digital-accessibility\/#website"},"datePublished":"2026-01-28T18:02:15+00:00","dateModified":"2026-03-20T13:13:03+00:00","breadcrumb":{"@id":"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ramapo.edu\/digital-accessibility\/web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ramapo.edu\/digital-accessibility\/web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Ramapo College of New Jersey Home Page \u00bb Digital Accessibility","item":"https:\/\/www.ramapo.edu\/digital-accessibility\/"},{"@type":"ListItem","position":2,"name":"Creating Accessible Webpages"}]},{"@type":"WebSite","@id":"https:\/\/www.ramapo.edu\/digital-accessibility\/#website","url":"https:\/\/www.ramapo.edu\/digital-accessibility\/","name":"Digital Accessibility at Ramapo College","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ramapo.edu\/digital-accessibility\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/users\/1011"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":39,"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/151\/revisions"}],"predecessor-version":[{"id":983,"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/151\/revisions\/983"}],"wp:attachment":[{"href":"https:\/\/www.ramapo.edu\/digital-accessibility\/wp-json\/wp\/v2\/media?parent=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}