Web Accessibility Criteria

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 use 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.

Alternate Descriptions

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. 

Multimedia and Documents

It is important to provide equal access opportunities to all non-html media. This includes media that is documents like PDF, Word, Google Docs, ect.  It can also be 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.

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.  

User Interface / Experience (UI/UX)

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.

Mobile Accessiblity

One Content / Many Displays

In the past there have been people who wanted to have a separate mobile site from the desktop version.  Quickly we discovered the hardship of making two updates for each page and generally found the overhead of the whole process more trouble than it was worth.

Then there is the concept that you must have equal representation. You can not simply do a different site and expect only low vision users would need to go there instead of the "regular" version where images did not have alt text or tables were not marked up.  This creates another set of problems since you will never know the needs of your visiting users.

Today's web has evolved to be a single content with many display modes.  The seemless nature of users moving from desktops to mobile and using multiple platforms is so common that we need to make sure the message is managed but so is the display.  

Responsive Design

The concept of responsive design is simple: pages will move and shape themselves to fit your device.  Getting this to work is often a balancing act between making content that can scroll top to bottom without breaking into left and right.  It means your images should scale appropriately and things like tabbed content will automatically become accordions in smaller devices.

The standard Campus Template was built with responsive design in mind.  The page will shift and things like headers, navigation, and even tables will reformat based on the size of the display but still use the same content no matter what the view.

Modern CSS standards have come a long way from floating content left or right and now we can use grid and flex layouts that are built to keep structure in a variety of device shapes.  Desktop, laptops, tablets, and mobile views should be a smooth transition with content making logical steps as users scroll down the page.

Page Flow

This biggest area to think about when creating pages is how content displays.  The V5 templates have up to 50 sections per page and they are numbered 1 to 50.  In desktop mode you might see columns 1, 2, 3 side by side; however, in mobile columns 1, 2, 3 would be vertical with 1 on top leading to 2 and then 3.

Page flow is critical if you are designing content that requires users to follow a process, understanding content in logical steps, or want to make sure critical content is not lost.  Where you put headings, images, and lists should be created so that users understand how content fits together.

If you design a page where you have something like a contact block with location, phone, email information on the right side of the screen think about how a user on a mobile phone sees it.  They would have to scroll down past anything before that to get location information.  If you choose a layout where section one is on the right to begin with, any mobile users would automatically see that information first on their phone.

Remember to test out any forms or workflows on multiple devices.  Check to make certain that step orders and instructions make sense for someone using a tablet or mobile device.

Content Usability (UI / UX)

What is Usability?

Usability is about designing content with a user-friendly approach.

User Interface (UI) - how it looks, the page structure, where data is placed. 

Standards exist for a reason and users have come to expect that basic web features like drop down lists, tables, links have a simple and consistent use.

User Experience (UX) - how to design with user-friendly goals in mind.  

Consider the user and how they need to use your content.  Are they repeat users, one time and done, or is your content important processes that must be completed like financial aid, program entrance, or scholarship applications?  While we certainly want to meet business goals the end user may have no idea what those are.  They are here to get help for what they need, and having content that is easy to use means they leave feeling confident instead of frustrated.

Less is more

Writing for the web is about clarity and is a true skill.  It will take time and muiltiple editing sessions.

Keep content clear, short, and if the topic needs more data - link to it or use accordions / tabs.

Invisible Disabilities

There are different types of users, including users with cognitive disabilities, non-native speakers, or different levels of vision.  Some users prefer interfaces such as mobile, keyboard-only, or assistive technologies. The content must be usable and simple enough for all users to understand.

• Flashing or looping backgrounds can be distracting and hard to focus on content.
• Low color contrast makes it hard to read for low vision users who don't use screen readers.
• Text over images with busy backgrounds can be hard to read.
• Color blind users will not see content the same way.  Be mindful not to put instructions or content with things like "click the red button".
• Not everyone uses a mouse, tab command needs to clearly define where the focus is for each element.
• Some users prefer to read closed captions along with the video to better understand what is being said.

Accessible websites are a win-win situation for users and content creators.

Writing and Design

Content needs to be organized, structured and labeled in such a way that will make it easier for users to know where they are, what they have found.

• Use Campus branding for authenticity and structure.
• Keep page design predictable and simple.
• Choose a common theme or style and develop using a single voice for consistent content references.
• Encompass all critical functions of a website specific to the type of user (e.g., student, staff, and faculty).
• Unique layouts and navigation methods may leave website visitors confused and frustrated.