{"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":"
Listed below are best practices on creating web content that meets WCAG 2.1 AA standards.<\/p>\n
To ensure your content is accessible and performs well, 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 To keep your site clean:<\/p>\n Screen reader users often navigate by headings. A clear, consistent heading structure:<\/p>\n Headings should reflect the logical structure of the content \u2014 like an outline.<\/p>\n Skipping levels can confuse screen reader users who rely on heading navigation.<\/p>\n Clear writing benefits users with cognitive disabilities, users reading in a non-native language, and anyone scanning content quickly.<\/p>\n Using plain language improves navigation, usability, and accessibility for screen reader users.<\/p>\n Information should be clear to users who are colorblind or have low vision.<\/p>\n Alt text ensures users who cannot see images still receive the same information using a screen reader.<\/p>\n Tagged PDFs allow screen readers to interpret and navigate content correctly.<\/p>\n View more information on creating accessible PDFs ><\/a><\/p>\n<\/div><\/div>\n We don’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 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 Before publishing, confirm:<\/p>\n Captions and transcripts support users who are deaf or hard of hearing and improve overall usability.<\/p>\n View more information on creating accessible videos ><\/a><\/p>\n<\/div><\/div>\n\n Web forms are more accessible, easier to maintain, and work better across devices and assistive technologies. The best practice is to, when possible, provide an accessible web form and offer an accessible PDF only as a secondary option if necessary.<\/span><\/p>\n If using a PDF form, it must be:<\/p>\n Keyboard accessibility is essential for users with motor disabilities and screen reader users.<\/p>\n View more information on creating accessible forms ><\/a><\/p>\n<\/div><\/div>\n Adequate contrast supports users with low vision, color blindness, and users viewing screens in bright environments.<\/p>\n 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 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 Screen readers rely on header associations to interpret data correctly.<\/p>\n\n
Use Headings in Order<\/h2>\n
\n
Follow a clear hierarchy<\/h3>\n
\n
Don\u2019t skip levels<\/h3>\n
\n
Don\u2019t use headings just to make text larger<\/h3>\n
\n
Write clearly and keep content simple<\/h2>\n
\n
\n
Use Clear Link Text<\/h2>\n
\n
Don’t rely solely on color (for Designers & Developers)<\/h3>\n
\n
Add Meaningful Alt Text for Images<\/h2>\n
\n
Make PDFs and Documents Accessible<\/h2>\n
\n
\n
Flyers on Webpages<\/h2>\n
Quick checklist for posting flyers on webpages<\/h3>\n
\n
Provide Accurate Captions and Transcripts for Video<\/h2>\n
\n
Web vs. PDF Form<\/h2>\n
When to use a Web Form (Preferred)<\/h3>\n
\n
When to use a PDF Form<\/h3>\n
\n
\n
Ensure Forms Are Fully Keyboard Accessible<\/h2>\n
\n
Maintain High Color Contrast<\/h2>\n
\n
Use tables only for data, not layout<\/h2>\n
\n