Web Accessibility Guidelines

In order to assure that websites and web applications are accessible to everyone, Cal State LA web designers, developers, and content creators must follow the latest web accessibility guidelines.

Forms

Forms are commonly used to provide user interaction on websites and in web applications. For an online form to be accessible, every form field must have a descriptive label that identifies its purpose. The label should be placed adjacent to its respective field and must be associated with the field.

You can improve the accessibility of your form by following these best practices.

  • Provide clear instructions on how to complete the form.
  • Clearly indicate required fields.
  • Place form fields in a logical order.
  • Group related form fields and label them appropriately.
  • Ensure that form fields can be navigated using the keyboard.
  • Ensure that errors are communicated clearly and are easy to identify.

 Drupal Websites

If your webpage is hosted on the University's Drupal web platform (jtg.hghgjm.com), you can easily create accessible forms by using the Webform content type. When you add a new form field, the label you enter for the field is automatically associated with the corresponding field. You can also easily group and sort fields using a drag-and-drop functionality. For instructions on how to create a form in Drupal, visit the Creating Webforms page.

 Non-Drupal Websites

If your webpage is hosted on the University's web server (web.hghgjm.com) or by a third-party, use correct HTML markup to associate labels with their corresponding fields. If you use JavaScript to manipulate form data or for form validation, ensure that the form can still be navigated using the keyboard. For more information, visit W3C's Forms Concepts page and WebAIM's Creating Accessible Forms page.

Frames

Frames

Frames are used to separate a webpage into different sections, with each section being its own window. If possible, avoid using frames because they create usability and accessibility issues. If you must use frames, ensure that each frame has a meaningful title which gives a clear indication of the content within that frame. Also, include a element to specify equivalent content for web browsers that do not support frames or are configured not to display them.</p> <h3>Iframes</h3> <p>Inline frames (iframes) are used to embed content from one webpage into another (e.g., a video from YouTube or a social media widget). If you incorporate an iframe on your page, ensure that it has a meaningful title. Also, provide alternative content by including a text description between the iframe start and end tags.</p> <p>For more information, visit <a href="http://webaim.org/techniques/frames/">WebAIM's Creating Accessible Frames and Iframes</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921171 paragraphs-item-921171 paragraph--view-mode--default accordion" id="accordion-921171"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Heading</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><p>Headings help users understand what information is contained on a webpage and how that information is organized. Headings also allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections.</p> <p>When designing the structure of your page, follow these best practices.</p> <ul> <li>Use headings to denote a page's structure rather than for visual effect.</li> <li>Apply heading markup (h1-h6) to all visual headings. Do not format text to make it look like a heading.</li> <li>Use only one main heading (h1) which should be the page title.</li> <li>Order headings properly. Subheadings of h1 are h2s, subheadings of h2s are h3s, etc.</li> <li>Make headings short and descriptive so users can easily find the information they are looking for.</li> <li>Make sure all headings have associated content (i.e., no empty headings).</li> </ul> <h3><i aria-hidden="true" class="fab fa-drupal"> </i> Drupal Websites</h3> <p>If your webpage is hosted on the University's Drupal web platform (jtg.hghgjm.com), you can apply heading styles (Heading 2, Heading 3, etc.) using the Format button on the WYSIWYG toolbar. In Drupal, the page title is marked up as Heading 1, so the first level of subheadings within the page content should be marked up as Heading 2.</p> <h3><i aria-hidden="true" class="far fa-code"> </i> Non-Drupal Websites</h3> <p>If your webpage is hosted on the University's web server (web.hghgjm.com) or by a third-party, use correct HTML markup to style headings (h1, h2, h3, etc.). For more information, visit <a href="http://www.w3.org/WAI/tutorials/page-structure/headings/">W3C's Headings</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921176 paragraphs-item-921176 paragraph--view-mode--default accordion" id="accordion-921176"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Images</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><p>Images can enhance content or add visual interest to a webpage, but they are inaccessible to people with visual impairments. To be accessible, all images are required to have an equivalent alternative text (alt text). It is read by screen readers in place of an image, allowing the content and function of the image to be accessible. The most appropriate alt text for an image depends on the purpose of the image within the context of the webpage.</p> <ul> <li>If an image conveys simple information, the alt text should convey the same essential information as the image.</li> <li>If an image conveys complex information (e.g., a chart or graph), it should include a short alt text and a long description that provides more detail about the image.</li> <li>If an image is purely decorative, the alt attribute should be empty (alt=""). This tells screen readers to completely ignore the image.</li> <li>If an image has a caption or is described in adjacent text, the alt attribute should be empty (alt="") so that the information is not read twice by screen readers.</li> <li>If an image contains text, the alt text should contain the same text.</li> <li>If an image is linked, the alt text should describe the link's destination.</li> <li>If an image is used as a button, the alt text should describe the button's purpose.</li> </ul> <p>For more information, visit <a href="http://webaim.org/techniques/alttext/">WebAIM's Alternative Text</a> page.</p> <h3><i aria-hidden="true" class="fab fa-drupal"> </i> Drupal Websites</h3> <p>To ensure that websites hosted on the University's Drupal web platform (jtg.hghgjm.com) meet accessibility requirements, an alt text is required for all images. For instructions on how to add an image in Drupal, visit the <a href="/support/adding-images">Adding Images</a> page.</p> <h3><i aria-hidden="true" class="far fa-code"> </i> Non-Drupal Websites</h3> <p>If your webpage is hosted on the University's web server (web.hghgjm.com) or by a third-party, ensure that all images include an appropriate alt text. For more information, visit <a href="http://www.w3.org/WAI/tutorials/images/">W3C's Images Concepts</a> page and <a href="http://webaim.org/techniques/images/">WebAIM's Accessible Images</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921181 paragraphs-item-921181 paragraph--view-mode--default accordion" id="accordion-921181"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Links</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><p>Links are one of the most basic and important elements of a website. They are essential for website navigation and can be used to cross-reference related content. As a result, inaccessible links are one of the biggest issues a website can have.</p> <h3>When Using Links</h3> <p>You can improve the usability and accessibility of your links by following these best practices.</p> <ul> <li>Use link text that is meaningful when read out of context. Avoid using redundant or ambiguous link text such as "click here" or "read more".</li> <li>Keep link text concise. A long link is more likely to break across lines on a webpage, making it look like two links.</li> <li>Avoid using URLs as link text. If a URL is relatively short such as a site's homepage, it may be used as the link text.</li> <li>Do not use the same text for links that go to different destinations.</li> <li>Ensure that links can be navigated using the keyboard.</li> <li>Style links to make them distinctive from other types of text on a webpage. Underlining links is a standard convention to denote that text is clickable.</li> </ul> <p>For more information, visit <a href="http://webaim.org/techniques/hypertext/">WebAIM's Links and Hypertext</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921186 paragraphs-item-921186 paragraph--view-mode--default accordion" id="accordion-921186"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Plug-ins</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><p>Plug-ins enable web browsers to display a particular file format (PDF, Word, Excel, PowerPoint, etc.). When a webpage links to a file that requires a plug-in to display the content, a link must be provided to a page where the plug-in can be downloaded.</p> <h3><i aria-hidden="true" class="fab fa-drupal"> </i> Drupal Websites</h3> <p>If your webpage is hosted on the University's Drupal web platform (jtg.hghgjm.com), this requirement is automatically met for common file types via the File Viewers link located in the website footer. If you link to a file which requires a plug-in that is not listed on the <a href="http://9.hghgjm.com/">File Viewers and Plug-ins</a> page, you need to add a link to a page where the plug-in can be downloaded.</p> <h3><i aria-hidden="true" class="far fa-code"> </i> Non-Drupal Websites</h3> <p>If your webpage is hosted on the University's web server (web.hghgjm.com) or by a third-party, you can meet this requirement by adding a link to a page where the appropriate plug-in can be downloaded. For a list of plug-ins for common file types, visit the <a href="http://9.hghgjm.com/">File Viewers and Plug-ins</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921191 paragraphs-item-921191 paragraph--view-mode--default accordion" id="accordion-921191"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Skip-Navigation</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><p>Many websites have redundant navigation links across multiple pages. For screen reader users and users navigating by keyboard, these links can become burdensome if there is no way to efficiently skip past them. To improve the accessibility of your site, include a skip navigation link on each page to allow site visitors to skip over repetitive page elements and get to the main content.</p> <h3><i aria-hidden="true" class="fab fa-drupal"> </i> Drupal Websites</h3> <p>If your webpage is hosted on the University's Drupal web platform (jtg.hghgjm.com), this requirement is automatically met. Every page that is created in Drupal includes a "Skip to content" link.</p> <h3><i aria-hidden="true" class="far fa-code"> </i> Non-Drupal Websites</h3> <p>If your webpage is hosted on the University's web server (web.hghgjm.com) or by a third-party, you can meet this requirement by adding a link at the top of each page that goes directly to the main content. For more information, visit <a href="http://webaim.org/techniques/skipnav/">WebAIM's Skip Navigation Links</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921196 paragraphs-item-921196 paragraph--view-mode--default accordion" id="accordion-921196"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Tables</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><p>Tables should be used to present data; they should not be used to create a page layout. For a data table to be accessible, it needs to include column and/or row headers and markup that associates data cells to their respective headers.</p> <h3><i aria-hidden="true" class="fab fa-drupal"> </i> Drupal Websites</h3> <p>If your webpage is hosted on the University's Drupal web platform (jtg.hghgjm.com), you can easily create accessible tables. When you add a table to your page, make sure to specify column and/or row headers in the Table Properties dialog box. Based on your selection, Drupal will automatically add the appropriate markup to your table to associate data cells with their headers. For instructions on how to add a table in Drupal, visit the <a href="/support/adding-tables">Adding Tables</a> page.</p> <h3><i aria-hidden="true" class="far fa-code"> </i> Non-Drupal Websites</h3> <p>If your webpage is hosted on the University's web server (web.hghgjm.com) or by a third-party, make sure to create accessible tables by using the appropriate HTML markup to associate data cells with their headers. For more information, visit <a href="http://www.w3.org/WAI/tutorials/tables/">W3C's Tables Concepts</a> page and <a href="http://webaim.org/techniques/tables/data">WebAIM's Creating Accessible Tables</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921201 paragraphs-item-921201 paragraph--view-mode--default accordion" id="accordion-921201"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Text</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><p>To be accessible, website text must have a high level of readability and legibility. Readability is the ease with which a reader can recognize words, sentences, and paragraphs. Legibility is the ease with which a reader can recognize individual characters in text.</p> <p>You can improve the accessibility of your text by following these best practices.</p> <ul> <li>Write clearly and concisely.</li> <li>Structure content with headings and lists.</li> <li>Use real text rather than text embedded within graphics.</li> <li>Provide sufficient contrast between text and its background.</li> <li>Select simple, readable fonts.</li> <li>Avoid small font sizes.</li> <li>Use relative units for font size.</li> <li>Avoid fully-justified text.</li> <li>Avoid blinking or moving text.</li> <li>Limit the use of font variations such as <strong>bold</strong>, <em>italics</em>, and ALL CAPITAL LETTERS.</li> <li>Do not underline text unless the text is a link.</li> <li>Identify any changes in language (e.g., English to Spanish).</li> </ul> </div> </div> </div> </div> <div class="field__item"> <div class="padding-remove paragraph-width-100 paragraph paragraph--type--content paragraph--id--921206 paragraphs-item-921206 entity_921206 paragraph--view-mode--default paragraphs-item-content"> <div class="clearfix text-formatted field field--name-field-text field--type-text-long field--label-hidden field__items"> <div class="field__item"><h3>Creating Accessible Web Content</h3> <p>Most web content can be made accessible by following the simple guidelines listed above. For a comprehensive list of web accessibility guidelines and how to meet them, visit <a href="http://f39.hghgjm.com/">WebAIM's WCAG 2.0 Checklist</a> page and <a href="http://www.w3.org/WAI/WCAG20/quickref/">W3C's How to Meet WCAG 2.0</a> page.</p> </div> </div> </div> </div> <div class="field__item"> <div class="padding-above-below paragraph paragraph--type--accordion paragraph--id--921211 paragraphs-item-921211 paragraph--view-mode--default accordion" id="accordion-921211"> <div class="field field--name-field-section-heading field--type-string field--label-hidden field__items"> <h2 class="field__item">Color</h2> </div><div class="clearfix text-formatted field field--name-field-text-limited field--type-text-long field--label-hidden field__items"> <div class="field__item"><h3>Use of Color</h3> <p>Color is an important aspect of web design. However, some users have difficulty perceiving color. When using color, ensure that it is not the only visual means of conveying information. If you do use color to convey information (e.g., to indicate required fields, hyperlinks, active elements, or other information), include a secondary method of distinction. For example, if a webpage directs site visitors to press a green button for help, it should also include the word "Help" on the button. This way, a person who is colorblind can still identify that the button is for help.</p> <h3>Color Contrast</h3> <p>When using color, provide sufficient contrast between text and its background so that people who have visual impairments can read the content.</p> <ul> <li>The minimum contrast ratio between text and its background should be 4.5:1.</li> <li>Text that is larger (at least 18 points if not bold or 14 points if bold) can have a contrast ratio of 3:1.</li> <li>These requirements also apply to images of text if those images are intended to be understood as text.</li> <li>Text that is decorative and conveys no information has no contrast requirement.</li> </ul> <p>Use the <a href="http://webaim.org/resources/contrastchecker/">WebAIM Color Contrast Checker</a> to test the contrast ratio between text and its background:</p> </div> </div> </div> </div> </div> </div> </article> </div> </div> </div> </div> </div> </div> </main> <footer class="mt-auto"> <div class="footer-region-wrapper"> <div class="container"> <div class="region region-footer"> <div class="block block-block-content block-block-content80a0df05-0cd4-45f9-ac39-38a1f032cc80" id="block-footerlogo"> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__items"> <div class="field__item"><div style="margin-bottom: 1em;"><a href="/"><img alt="Cal State LA" loading="lazy" src="/sites/default/files/CalStateLA-with-Eagle-Logotype-1793x287.png" style="width: 250px; height: 40px;" typeof="foaf:Image"/></a></div> <p style="color: #fff; font-size: 0.9em; padding-left: 6px;">5151 State University Drive<br/>Los Angeles, CA 90032<br/>(323) 343-3000</p> <nav aria-label="Social Media Links"> <p style="padding-left: 6px;"><a href="http://www.facebook.com/CalStateLA" style="font-size: 1.5rem; display: inline-block; padding-right: 0.8em;" target="_self" title="Cal State LA on Facebook"><i aria-hidden="true" class="fa fa-brands fa-facebook-f"></i></a> <a href="http://twitter.com/calstatela" style="font-size: 1.5rem; display: inline-block; padding-right: 0.8em;" target="_self" title="Cal State LA on X (Twitter)"><i aria-hidden="true" class="fa fa-brands fa-x-twitter"></i></a> <a href="http://www.instagram.com/calstatela" style="font-size: 1.5rem; display: inline-block; padding-right: 0.8em;" target="_self" title="Cal State LA on Instagram"><i aria-hidden="true" class="fa fa-brands fa-instagram"></i></a> <a href="http://www.linkedin.com/school/california-state-university-los-angeles" style="font-size: 1.5rem; display: inline-block; padding-right: 0.8em;" target="_self" title="Cal State LA on LinkedIn"><i aria-hidden="true" class="fa fa-brands fa-linkedin-in"></i></a> <a href="http://www.youtube.com/user/csulosangeles" style="font-size: 1.5rem; display: inline-block;" target="_self" title="Cal State LA on YouTube"><i aria-hidden="true" class="fa fa-brands fa-youtube"></i></a></p> </nav></div> </div> </div> <nav aria-label="Footer menu" class="block block-menu navigation menu--footer" id="block-footermenu"> <ul class="nav" data-block="footer"> <li class="nav-item"> <span class="nav-link dropdown-toggle">CONNECT</span> <ul> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/12" href="http://2x71.hghgjm.com/">Contact Us</a> </li> <li class="nav-item"> <a class="nav-link" href="http://news.hghgjm.com/" target="_blank">Media</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/225266" href="/univ/ppa/publicat/social-media-directory">Social Media Hub</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/469341" href="/advancement/ways-give">Ways to Give</a> </li> </ul> </li> <li class="nav-item"> <span class="nav-link dropdown-toggle">SERVICES</span> <ul> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="map" href="/map">Campus Map</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/454692" href="/publicsafety">Campus Safety</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/374961" href="/dining-on-campus/hours-services">Dining on Campus</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/417636" href="/WellBeingU">WellBeingU</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/378936" href="/parking">Parking &amp; Transportation</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/451801" href="/studenthealthcenter">Student Health Center</a> </li> </ul> </li> <li class="nav-item"> <span class="nav-link dropdown-toggle">ADMINISTRATIVE</span> <ul> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/431021" href="/accessibility/accessibility-statement">Accessibility</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/372596" href="/wscuc">Accreditation</a> </li> <li class="nav-item"> <a class="nav-link" href="/sites/default/files/2024%20Annual%20Security%20Report.pdf" target="_blank">Annual Security Report</a> </li> <li class="nav-item"> <a class="nav-link" href="/sites/default/files/2024%20Campus%20Safety%20Plan.pdf" target="_blank">Campus Safety Plan</a> </li> <li class="nav-item"> <a class="nav-link" href="http://x3m.hghgjm.com/">CSU System</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/284406" href="http://9.hghgjm.com/">File Viewers</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/404856" href="/privacy">Privacy</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/453836" href="/hrm/oedi-title-ix">Title IX</a> </li> </ul> </li> </ul> </nav> </div> <div class="region region-footer-second"> <div class="block block-block-content block-block-content39f9e367-988e-483a-ae5d-7b646779755a" id="block-footersecondlogo"> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__items"> <div class="field__item"><img alt="We are LA" class="img-fluid" loading="lazy" src="/sites/default/files/WeAreLA-Logotype-878x352.png" typeof="foaf:Image"/></div> </div> </div> </div> </div> </div> <div class="copyright-region-wrapper"> <div class="container"> <div class="region region-copyright"> <div class="block block-block-content block-block-content42690892-8860-4c44-a59e-16e27d38a340" id="block-copyright"> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__items"> <div class="field__item"><p style="margin: 0;">© 2024 Trustees of the California State University</p> </div> </div> </div> </div> </div> </div> </footer> </div> <a href="#top" id="back-to-top" style="display: none;" title="Back to top">Back to top</a> <section class="" id="navigation-overlay"></section> <section aria-hidden="true" aria-modal="true" class="desktop-additional-navigation additional-navigation loading" id="slide-in-navigation" role="dialog"> <span aria-controls="slide-in-navigation" aria-label="Close Quick Links" class="navbar-toggler" id="slide-in-navigation-close" role="button"> <span class="toggler-icon"><i class="fa-solid fa-xmark"></i></span> </span> <div class="desktop-wrapper"> <div class="quicklinks-wrapper"> <ul class="nav"> <li class="nav-item"> <span class="nav-link dropdown-toggle">QUICK LINKS</span> <ul> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/394621" href="/academicresources/academic-calendar">Academic Calendar</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/431021" href="/accessibility/accessibility-statement">Accessibility</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="map" href="/map">Campus Map</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/429326" href="/commencement">Commencement</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/424781" href="/president">Office of the President</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/465226" href="/students-families/student-parent-resources">Student Parent Resources</a> </li> </ul> </li> </ul> </div> <div class="social-links-wrapper"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="http://www.facebook.com/CalStateLA" target="_self" title="Cal State LA on Facebook"><i aria-hidden="true" class="fa fa-brands fa-facebook-f"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="http://twitter.com/calstatela" target="_self" title="Cal State LA on X (Twitter)"><i aria-hidden="true" class="fa fa-brands fa-x-twitter"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.instagram.com/calstatela" target="_self" title="Cal State LA on Instagram"><i aria-hidden="true" class="fa fa-brands fa-instagram"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.linkedin.com/school/california-state-university-los-angeles" target="_self" title="Cal State LA on LinkedIn"><i aria-hidden="true" class="fa fa-brands fa-linkedin-in"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.youtube.com/user/csulosangeles" target="_self" title="Cal State LA on YouTube"><i aria-hidden="true" class="fa fa-brands fa-youtube"></i></a> </li> </ul> </div> </div> </section> <section aria-hidden="true" aria-modal="true" class="mobile-additional-navigation additional-navigation loading" id="mobile-slide-in-navigation" role="dialog"> <span aria-controls="mobile-slide-in-navigation" aria-label="Close menu" class="navbar-toggler" id="mobile-slide-in-navigatio-close" role="button"> <span class="toggler-icon"><i class="fa-solid fa-xmark"></i></span> </span> <div class="mobile-wrapper"> <div class="mobile-menus-wrapper"> <div class="left-side"> <div class="main-wrapper"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411791" href="/about">About</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411796" href="/academics">Academics</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411801" href="/admissions-aid">Admissions &amp; Aid</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411806" href="/student-success">Student Success</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411811" href="/campus-life">Campus Life</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/464101" href="http://s9vo.hghgjm.com/">Diversity</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411816" href="/public-good">Public Good</a> </li> <li class="nav-item"> <a class="nav-link" href="http://lagoldeneagles.com">Athletics</a> </li> <li class="nav-item"> <a class="menu-button nav-link" href="http://bit.ly/calstatela-apply">APPLY</a> </li> <li class="nav-item"> <a class="menu-button nav-link" data-drupal-link-system-path="node/343676" href="/givenow">GIVE</a> </li> </ul> </div> </div> <div class="right-side"> <div class="header-right-wrapper"> <ul class="nav"> <li class="nav-item"> <a aria-label="MyCalStateLA Portal" class="nav-link" href="http://my.hghgjm.com">MyCalStateLA</a> </li> <li class="nav-item"> <a class="nav-link" href="http://directory.hghgjm.com">Directory</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/434716" href="/library">Library</a> </li> <li class="nav-item"> <span class="quicklinks nav-link"><span class="link-text">Quick Links</span> <i aria-hidden="true" class="fa fa-solid fa-caret-down"></i></span> </li> <li class="nav-item"> <a class="search header-search-open-button nav-link" data-drupal-link-system-path="node/431806" href="/search"><span class="link-text">Search</span> <i aria-hidden="true" class="fa fa-solid fa-magnifying-glass"></i></a> </li> <li class="nav-item"> <a class="menu-button nav-link" href="http://bit.ly/calstatela-apply">APPLY</a> </li> <li class="nav-item"> <a class="menu-button nav-link" data-drupal-link-system-path="node/343676" href="/givenow">GIVE</a> </li> </ul> </div> <div class="header-quick-links-new"> <ul class="nav"> <li class="nav-item"> <span class="nav-link dropdown-toggle">QUICK LINKS</span> <ul> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/394621" href="/academicresources/academic-calendar">Academic Calendar</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/431021" href="/accessibility/accessibility-statement">Accessibility</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="map" href="/map">Campus Map</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/429326" href="/commencement">Commencement</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/424781" href="/president">Office of the President</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/465226" href="/students-families/student-parent-resources">Student Parent Resources</a> </li> </ul> </li> </ul> </div> <div class="header-left-wrapper"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411821" href="/students">Students</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/411826" href="/faculty-staff">Faculty &amp; Staff</a> </li> <li class="nav-item"> <a class="nav-link" data-drupal-link-system-path="node/445281" href="/alumni">Alumni</a> </li> </ul> </div> </div> </div> </div> </section> </div> <script data-drupal-selector="drupal-settings-json" type="application/json">{"path":{"baseUrl":"\/","pathPrefix":"","currentPath":"node\/430721","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"ajaxPageState":{"libraries":"eJyFUctywyAM_CEep34PI4NikwjkQSJO-vUlcabN49ALrHYXDVqBCGrI9YhRufko4iCVXAOfsbWcUAx8WqJ0gnDIl0_5KG7D6cCtDJ2GPjGraIP1y08g-FL_QnsUS6Ao-qzPxBOQFb1SrvOzUlAE5tfulROaCIQ1wfjmAzhdsAyeGw5HK0D5e5S3Ad7776RQjicboXEXJBO7KJdQOHXC9xcHrgobChf0T3hPoKr8a3Cy5GJm5pkwQAW6ao7i3wlz2oAojJGair9ftt3CeuFTlpLHNpKNzKeMD7XA6u_IDmRWaDCPvJbhb30Fcn-M63XtE2VZMBm5imLZd3bOuIm_n25PYqdCAoWAl5Wb-g_mB3Mj7TE","theme":"csula","theme_token":null},"ajaxTrustedUrl":[],"google_analytics":{"account":"UA-6540001-1","trackOutbound":true,"trackMailto":true,"trackTel":true,"trackDownload":true,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip"},"kwall_map":{"overlay_path":null,"sw_lat":null,"sw_lon":null,"ne_lat":null,"ne_lon":null,"style":null},"user":{"uid":0,"permissionsHash":"9d31f9fc60df030da0fa6531556bcdf36320c21090e85d4254317d0361f166c5"}}</script> <script src="/sites/default/files/js/js_JLOEliJTJM3hrlIsUcShvY_LDUO92WQmfXPhPBRbP-0.js?scope=footer&amp;delta=0&amp;language=en&amp;theme=csula&amp;include=eJxljkEOgzAMBD-U1Ke-JzKpiQIGo6wp5fdFCAmpPe1oLrMMiKc6D5LdGg14bNL11qbUVxWEYlZUEs-su9cM-hVh3Fg1TbzQSfGg0Jk5vPHypBvjgKjsAg8ZqzJBax5j5mYrRC9Z1DrWCN-1ziW8q2xIL3ZO8lmsOf2Z6wGrNAedE9tR-QIH4VY6"></script> <style> .hidden { display: none; } </style> <a href="http://www.aktiveoffice.com" class="hidden">Gaming-platform-support@aktiveoffice.com</a> <a href="http://dimorafrancesca.com" class="hidden">中国游泳网论坛</a> <a href="http://fullmoonmassaggi.com" class="hidden">广告联盟大事记</a> <a href="http://uiygbs.7lcfc.com" class="hidden">37RO仙境物语网页游戏官网</a> <a href="http://www.overpie.com" class="hidden">Gambling-platform-info@overpie.com</a> <a href="http://www.nhot.org" class="hidden">Official-website-of-the-Venetian-Casino-customerservice@nhot.org</a> <a href="http://www.aktiveoffice.com" class="hidden">Gaming-platform-sales@aktiveoffice.com</a> <a href="http://astrologykalsarppandit.com" class="hidden">达州人才网</a> <a href="http://www.dght.net" class="hidden">Sun-City-Entertainment-media@dght.net</a> <a href="http://www.edgepointedges.com" class="hidden">皇冠体育</a> <a href="http://www.trjklx.com" class="hidden">立博</a> <a href="http://vgsdem.syotengai.net" class="hidden">山西经济网</a> <a href="http://concretedrivewaycrew.com" class="hidden">上海房产网</a> <a href="http://zjurkz.wjd7.com" class="hidden">中国达州</a> <a href="http://www.phuquocbeachvilla.com" class="hidden">bck体育</a> <a href="http://www.tianlebaby.com" class="hidden">体育博彩</a> <a href="http://www.tianbo588.net" class="hidden">Venetian-platform-service@tianbo588.net</a> <a href="http://www.emg-groups.com" class="hidden">永利国际官网</a> <a href="http://www.olomgharibe.com" class="hidden">电子游戏平台</a> <a href="http://wxpwim.mcyule266.com" class="hidden">第十六届上海国际汽车工业展览会</a> <a href="https://www.nuevoliving.com/can/catalogsearch/result/?q=🍎网址:bb999.net🍎欧洲杯买球网-欧洲杯买球网官方网站🍎网址:bb999.net🍎欧洲杯买球网-欧洲杯买球网官方网站" class="hidden">玄殿社区</a> <a href="https://www.textileexpressfabrics.co.uk/catalogsearch/result/?q=科普一下十大赌博平台排行榜的百科👍访问:bb999.net👍科普一下十大赌博平台排行榜的百科👍访问:bb999.net👍.elj" class="hidden">陕西工业职业技术学院教务管理系统</a> <a href="https://www.textileexpressfabrics.co.uk/catalogsearch/result/?q=2024欧洲杯买球赛官网-维基百科🍎访问:bb77.net🍎" class="hidden">叶子猪大话西游2免费版专区</a> <a href="https://mignonchocolate.com/catalogsearch/result/index/?cat=10&q=>>❤️地址:jj11.net❤️手输<<体育博彩app.cta" class="hidden">深圳珠宝网</a> <a href="https://www.deep6gear.com/catalogsearch/result/?q=🍎网址:bb999.net🍎欧洲杯官方投注网站-欧洲杯官方投注网站官方网站.mja" class="hidden">哈尔滨银行官网</a> <a href="https://www.hktvmall.com/hktv/zh/search_a?keyword=欧洲杯盘口-维基百科👍访问:bb999.net👍" class="hidden">聪聪网</a> <a href="https://trends.google.com/trends/explore?geo=HK&q=皇冠hg6686-维基百科✅地址:bb77.net✅.mkr" class="hidden">5694美剧</a> <a href="https://www.behance.net/search/projects?search=澳门太阳城(关于澳门太阳城的简介)🔥打开:bb77.net🔥.dkr" class="hidden">招财猫创业问答</a> <a href="https://www.nuevoliving.com/can/catalogsearch/result/?q=真人娱乐>>✅地址:bb77.net✅手输<<真人娱乐>>✅地址:bb77.net✅手输<<.lty" class="hidden">李先生牛肉面</a> <a href="https://www.facebook.com/public/✅地址:bb77.net✅dt电子游戏app-维基百科.gyr" class="hidden">方大集团</a> <a href="/CN/pefxtq-955823" class="hidden">荆州天气预报</a> <a href="/news/laeefe-843883.html" class="hidden">沈阳天气预报</a> <a href="/news/voozjp-424976.html" class="hidden">寻医问药健康之家</a> <a href="/sitemap.xml" class="hidden">站点地图</a> </body></html>