Accessible Development

The following is a list of functional requirements as specified on the Department of Education website and is an effective set of guidelines for digital accessibility.

Specific Functional Requirements

Software applications and operating systems.

1. When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.
2. Applications shall not disrupt or disable activated features of other products that are identified as accessibility features, where those features are developed and documented according to industry standards. Applications also shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer.
3. A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.
4. Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.
5. When bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance.
6. Textual information shall be provided through operating system functions for displaying text. The minimum information that shall be made available is text content, text input caret location, and text attributes.
7. Applications shall not override user selected contrast and color selections and other individual display attributes.
8. When animation is displayed, the information shall be displayable in at least one non- animated presentation mode at the option of the user.
9. Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
10. When a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided.
11. Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.
12. When electronic forms are used, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Web-based intranet and internet information and applications.

1. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
2. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
3. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
4. Documents shall be organized so they are readable without requiring an associated style sheet.
5. Redundant text links shall be provided for each active region of a server-side image map.
6. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
7. Row and column headers shall be identified for data tables.
8. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
9. Frames shall be titled with text that facilitates frame identification and navigation.
10. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
11. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
12. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
13. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the requirements for Software applications and operating systems listed above.
14. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
15. A method shall be provided that permits users to skip repetitive navigation links.
16. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

One of the most common issues with websites is the lack of keyboard accessibility. You should be able to access the links and controls using the keyboard only. To get started with testing with a keyboard, click in the location bar of your browser then set your mouse aside. Use the tab key to start going through the page. Shift-tab will move you backwards.

The Accessibility Developer Guide website provides a good overview of how to use a keyboard to navigate a website. WCAG Guidelines that apply include:

• Bypass Blocks 
• Keyboard Only
• No Keyboard Trap
• Focus (visible)
• Focus Order 

Visit the Web AIM website to learn more about testing for keyboard navigation.

Undefined Keyboard Focus Indicator

Many stylesheets use a "reset" style, that essentially removes all formatting. In doing so, the keyboard focus indicator is not defined, which prevents keyboard users from seeing what item on the page currently has the keyboard focus. Sometimes the focus is set, but it conflicts with the other colors and is not visible.

Keyboard Activation Of Custom Controls

Putting onclicks event handlers on LI, div, span, and other elements without coding for keyboard accessibility as well can create barriers for keyboard users. Unlike anchor tags, buttons, and some other elements, these HTML elements are not natively keyboard focusable. Putting onclicks on these elements will cause them to be useable only by a mouse. The options to resolve this issue depends on your intended functionality for these elements: if you intend them to show additional content, to open up sub menus, or to function as a pseudo-checkbox or button.

For further details, see Accessible Javascript Event Handlers.

Focus

Some users, especially those with specific disabilities, may rely heavily on using keyboards or other devices to change focus. For instance, a user might change locations in a web page using a tab key, and this would be a change of "focus." As the user moves around the page using the keyboard controls, there should be a visual indicator showing the element with the current focus.

Having a focus strategy will improve the experience for all website users but especially helps support people with visual and motor disabilities. A focus strategy starts at the beginning of a web development project with keeping focusable content within a logical order in the DOM.

OIT Recommendations

• Do not change the order of the DOM without taking into consideration the website experience for keyboard users.
• Include styles to highlight focusable content in your CSS files. (OIT base templates have this styling already included.)
• Only add focus behavior to interactive controls like buttons, links or anything else that requires user input
• Avoid using tabindex equal to anything greater than "0"
• Include "skip-link" option for navigation so users can go straight to content. Make sure this link is visible when it receives keyboard focus.

For further information, see WCAG 2.1 success criteria 2.1.1 on Keyboard Operability.

When we read a website (or a newspaper, or other content), we often skip around, skimming over some content or reading something in-depth when the title has caught our interest. Accessible websites provide the ability for all users to easily access and jump to the content they need. Using semantic HTML such as headings provides the information about how the content is ordered.

Semantic markup is a big topic. To illustrate the importance of semantic markup, watch this YouTube video from Udacity.com demonstrating how someone uses a text reader to navigate a website. Pay special attention to the fact that assistive technology follows the DOM order of a web page regardless of how the page is rendered visually.

In general, OIT suggests developers:

• label input elements
• provide useful text alternatives
• use heading (h1-h6) in a logical outline-form
• give links useful names (avoid "click here or read more")
• The OIT base template takes care of many of these considerations for you, but developers who are not using the base template and content contributors still need to understand and practice good semantic markup.

You can learn more about semantic HTML 5 (video).

Landmarks

If you haven't thought about landmarks on your website, chances are they need some improvement. Assistive technology users can navigate your page using the landmark structure. The type of landmark is provided to these users, along with the name of the landmark if it is provided. If you have content on your page that is not contained within a landmark, then users may miss this content if they are navigating with landmarks.

The emerging standard is that all of the content on your page should be contained within a landmark. Your page should contain at least one navigation landmark, and one "main" landmark. If you have a landmark type that is repeated on the page, such as two different sets of controls that are within a navigation landmark, those two landmarks should be identified with distinct names. The Web Content Accessibility Guidelines provides additional details on landmarks.

ARIA is an acronym meaning Accessible Rich Internet Applications, and is a standard developed by the W3C. Developers add ARIA to web code to provide additional information to assistive technologies, such as screen readers. When used appropriately, ARIA will greatly increase the accessibility of your website and helps meet WCAG 2.1 guidelines. However, just adding ARIA to your code is not going to fix all of the accessibility issues of your website; in fact, an overuse of ARIA can introduce blocks and issues that did not exist before.

ARIA will override semantic HTML5, so unless you have a custom control or other really good reason to use ARIA, don't use it.

ARIA provides semantic information to assistive technology about elements on the webpage. ARIA provides a way to include roles and states of elements on your webpage, such as "expanded," "collapsed."

ARIA also provides design patterns for interactive "widgets," such as drop-down menus, expandable accordions, etc. These design patterns specify how ARIA should be used and also which keyboard commands should be used and what they should do. Typically, the keyboard commands are the arrow keys, the enter and space keys, and escape.

The full ARIA specification is available from the World Wide Web Consortium.