Accessibility

Websites

Ray of light icon

QUICK LINKS

Writing and Formatting

Images and Graphics

Audio and Video

Presentations

Social Media

Email Campaigns and Surveys

Websites

Courses

Getting Started

If you are responsible for regularly creating or updating websites, you may also consider joining the regular web accessibility meetings by emailing shilpau@ucr.edu. Siteimprove is a primary tool for website diagnostics and remediation. Quick tips for creating accessible websites.
    • The website layout is clean, simple, and easy to navigate with clear sections.
    • There are no complex tables or multi-column designs that may confuse screen readers.
    • Ensure assistive technologies, like screen readers, encounter content in the order that best facilitates understanding
    • The content flows logically from top to bottom and left to right. The reading order of the content should match the visual layout.
    • There are not “tabindex” attribute values other than 0 or -1.
    • Keyboard focus is visible when tabbing through the website.
    • Each page has a unique title.
    • “Title” attribute tooltips are not used.
    • Only 1 H1 heading is used per page.
    • Text can be increased to 200% size without loss of readability or functionality.
    • The website can be rotated to portrait or landscape orientation without loss of readability or functionality.
    • There is no horizontal scrolling.
    • More than one way is available to navigate to a page except where the page is a step in a process.
    • Repeating navigation items on multiple pages are always presented in the same order.
    • Tab order should be consistent and predictable for those using keyboard navigation. 
    • Ensure all website elements are reachable by keyboard and that nothing is mouse-dependent.
    • Web pages should have unique page titles that convey the intent of the page. 
    • Provide consistent and logical headings to help assistive technology users navigate
    • Semantic HTML elements are used (e.g., <header>, <nav>, <main>, <article>, <footer>) to help screen readers interpret content correctly.
    • Appropriate HTML tags are used (like <table> for tabular data and <p> for paragraphs) instead of generic <div> or <span> tags.
    • ARIA attributes (Accessible Rich Internet Applications) are used to enhance accessibility, such as role="banner", role="navigation", or role="button" where necessary.
    • A skip link is used to provide quick access to the main content of each page. This allows a person to easily bypass globally repeated content such as a website's primary navigation or persistent search widget. The skip link is visible when focused.
    • Viewport zoom is not disabled.
    • Enlarge your content to test if all the text remains readable.
    • The autofocus attribute is not used.
    • Extending timeout sessions is allowed.
    • Links do not open in a new tab or window. If they must, indicate that in the link text. E.g. “See pricing in a new tab”.
    • Path-based gestures with a pointer or finger are not used unless absolutely necessary.
    • All pointer executions use the up-event, not the down-event.
    • Focusing or changing the settings on user interface components doesn’t change context or meaning of the paged unless the user has been advised of the behavior before using the component.
    • Multiple components with the same functionality are identified consistently.
    • Labels or instructions are provided when content requires user input.
    • For pages that cause legal, financial, or user-data changes, the data is validated and the user has an opportunity to check the submissions and modify or reverse them.
    • Status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
    • The correct language is set for the website/pages.
    • Content in a language that differs from the majority of the website has the correct language in its tag properties.
    • 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.
    • Colors or sensory characteristics are not used alone to convey meaning.
    • Use an appropriate color contrast ratio according to WCAG Guidelines between text and background
    • User interface components have a contrast ratio of at least 3:1 against adjacent color(s).
    • User interface components do not contain anything that flashes or blinks more than three times in any one-second period — strobe effects should never be used.
    • User interface components with labels that include text or images of text have a name that contains the text that is presented visually.
    • Add alt text on all meaningful images so that vision-impaired users get the same information as sighted user
      • Provide meaningful descriptions of images
    • A link to an accessibility statement and/or contact information for recipients who need assistance or further accommodations is provided.
    • When uploading any image or document, follow the relevant guidelines for that image or document type.
    • Videos and audio should have captions. Disable autoplay, and allow controls to stop moving content
    • Only use tables to share "data" — do not use tables for layout purposes — and ensure tables have the proper programming to assist in screen reader interpretation
    • Links and buttons are keyboard-navigable and easily clickable on mobile.
    • Buttons are at least 44x44 pixels for easy tapping
    • Clearly identify the language to be used for links
    • Use language that describes where the link goes.
    • Avoid using the same text for links that go to different locations
    • Keep link text short and precise.
    • Link text should be descriptive so that a user will understand where the link goes and what to expect when they click it (e.g., “Email our marketing department” rather than “click here”).
    • All form inputs have a corresponding label.
    • Long or complicated forms are broken into sections.
    • Autocomplete is available for common elements like name, address, and phone number.
    • Form errors are clearly presented with specific details above the form upon a failed submission. 
    • Make sure the error messages clearly correspond to the related fields. 
    • Dynamic error messages from data-validated fields are even better.
    • Make forms easy to complete and offer clear suggestions and error prevention methods. 
    • Form field labels work best when they are directly above the form field. 
    • Do not rely on placeholder text that may disappear in a field when it is clicked.
    • The website is tested with screen readers like NVDA, JAWS, or VoiceOver to ensure it is navigable and all elements are read correctly.
    • The website has been tested on different web browsers (Chrome, Firefox, Internet Explorer, Safari) and devices (desktop, tablet, mobile) to ensure proper rendering and accessibility.
    • All content is accessible without a mouse. Navigate through your website using only the keyboard (Tab, Shift+Tab, Enter, Space) to ensure this.
    • SiteImprove has been used to confirm an accessibility score of at least 95% for level A and 90% for AA.
    • Ensure appropriate proximity of elements using The Straw Test.
    • Functional Accessibility Evaluator (free): This tool allows the user to enter a URL and get a quick accessibility evaluation of that one page.
    • SortSite (commercial): Generates site-wide reports for accessibility, broken links, device compatibility, SEO, privacy, usability, and validation
    • WAVE (free): This toolbar provides a mechanism for running WAVE reports directly within Chrome and Firefox. WAVE is a free online tool from WebAIM

  Recommended Siteimprove courses

Please sign in to Siteimprove before accessing the courses, as UC members will need to access via UCOP's entrance.