Web Accessibility Criteria
About the Web Accessibility Criteria
Web Accessibility Criteria includes the most critical compliance criteria of Section 508 and Web Content Accessibility Guidelines (WCAG 2.0). Every criterion targets specific accessibility issue that would ultimately improve the overall webpage accessibility level and user experience. These criteria help web developers and content creators to learn and implement accessibility factors within their development life cycle and further improve the functionality and accessibility level of their web presence.
Web Accessibility Criteria Categories
Web Accessibility Criteria cover various digital accessibility components and standards while collectively bringing attention to every aspect of the digital and online presence. They are divided into categories which address issues with a similar concept, structure or functionality. It provides a ground for testers and content creators to concentrate on a single issue at any time and helps improve the mediation and problem-solving procedures.
Basic criteria categories:
Visual Display and Color
Making sure that end users are able to identify brand, site information, and overall experiences that lead them to a CSUF site is a necessary start. End users should not be confused or unsure that they are working with content that is CSUF related. As they user this content it also needs to meet standards that allow users to clearly read text that meets a minium contrast, does not rely on color to convey meaning, and assures users who may have color barriers are still able to have a positive experience.
Images, image maps, scripting events, and other HTML elements can be used where there is no text version available by default. Descriptions are essential to ensure your content is accessible to all people including people with disabilities. Descriptions will allow all users the ability to know what the content is about and understand additional information. Content that needs text alternatives and do not have them may present barriers to people with disabilities. Descriptions also benefit all users because in some cases they can serve as a replacement if the content cannot be displayed on the page.
It is important to provide equal access opportunities to all interactive media. This includes media that is audio-only such as podcast, .mp3’s, audio recordings, and teleconferences and media that is audio-video such as YouTube, Vimeo, or other video formats. This also includes media like slideshows, carousels, moving banner ads, and event triggered content. When multimedia is used, alternatives to multimedia files in the form of transcripts, captions and audio descriptions must be provided. Multimedia files must also have controls to allow users to pause, stop and restart the multimedia files. Autoplay content that is longer than 3 seconds must be triggered with sound disabled and controls must be provided for user control. Finally, when multimedia is embedded into a website, a notification must be incorporated within the HTML code for browsers who cannot support embedded content.
Document Structure and Navigation
HTML elements that influence organization and structure to your content must be well formed and logical to page structure. Screen readers should be able to skip navigation and headers should be organized so they visually make sense. Pages should include title information with descriptive text that will help search engines clearly relate results to the end user. Navigation should be clear and consistent across your site. Site structure should be easy to understand navigation vs regular content areas. All elements should also allow end users to scale up and down without loosing functionality. Responsive design needs to allow the page to be displayed regardless of screen size and orientation.
Elements such as heading level should have different text styles, usually font size, to clearly define H1 from H2 from H3, etc. Hyperlinks must use clear language and be consistent throughout the page. List items must be coded correctly to ensure end users are aware the content is related. Tables must be created to display their data. While tables can be formatted for layout we strongly discourage the use of tables for anything but tabular data. Header rows must correspond to their data provided with each column containing one type of data, all phone numbers, images, email addresses, etc. HTML5 elements such as articles, asides, figure captions, and more need to adhere to their intended purposes and included proper markup language.
Plugin or additional software links, such as PDF readers, should be clearly labeled on the page to provide users with resources they may need in order to use your content.
Usability, or user experience, is about designing content with a user-friendly approach. Creating a user-friendly interface will allow for ease of access, understanding, and use of the information, which can make all the difference for users. The design from one site to another can vary greatly the overall sense of navigation and basic site structure will still be part of the CSUF brand. Choosing images, creating colors for news or events, and other visual dynamics of your pages should still confine to the CSUF brand.
As you create content understand what your users are needing and how they are talking to you. Names, topics, and locations across campus should be clearly identified by their official Campus term. Even if your content has a small target audience you should create it so a first time user will still be able to understand the information.
All functionality of web content must be navigable and operable through a keyboard interface. Keyboard accessibility is critical to ensure all users have access to information without requiring a mouse. To be keyboard accessible a web page must not only be keyboard operable it must also incorporate the following: a visible keyboard focus, appropriate tab order, and avoid keyboard traps.
When collecting information from users through a form needs to included labels and fieldsets where appropriate. Labels must be linked to elements using a unique attribute ID. Required fields must also be indicated in the label so end users are aware the input is necessary to complete the form. Aria-label information should be used on elements to help define input and better describe how content relates to the form or page. Users should have feedback when navigating through your form to clearly identify which element is active or has focus by using a highlight or some clear indication that the input is currently being used. Actions should be linked to OnClick, Onkeydown, or Onkeypress as they will not automatically trigger without the user performing a task. OnFocus is not recommended as it will automatically trigger events without the user meaning to do anything.
Websites that use limited time features or have a timeout feature, such as a login, need to present the user with a reasonable time before a time out is triggered. If you do require that a task is completed with a limited time you should present the user with a focus set to a dialog box with the time out notification. This too should be keyboard accessible. It is best if you can provide the end user with a need more time option to extend the session.
Errors, validators, and instructions should be clearly defined and help users understand how to properly fill out forms, use features, and control content on your pages. This data can be hidden by default but should be opened and focus set if the page has stopped normal operations based on the end user's required attention to some details.