Week 8

 Form controls  Accessibility with ARIA

 Parent containing element for other form control elements  Requires method and action attributes to process the information collected by the form  Actions are usually scripts processed by the web server; can also be used to create an electronic mail message

 Multiple ways to collect data element  type attribute for element determines both its behaviour and presentation

 type determines type of element  text  password  checkbox  radio  file  submit  reset  button

 Use when checkboxes and radio buttons become too inefficient  Choices defined by the element The label attribute can be used to present a shortened version of an option when appearing in an optgroup  Can be grouped using the element The label attribute can be used to identify the options of an option group  Multiple selections allowed by setting multiple attribute to value of “multiple”

 Function identical to the element but allows for multiple lines of text to be entered

 Data collected from form controls are associated to a value specified by the name attribute of the form control element that collected the information  The name value is like a variable that contains the form input value

 Label element  ARIA

 Used for marking up a form control’s descriptive text  Has no presentation value unless styled with CSS  Provides two features: Usability  Improvement for mouse users – clickable area Accessibility  Make a form control’s purpose clearer for users of assistive technologies

 The glue that binds the text inside the label element with the form control it is related (explicit association)  If you wrap a form control inside a you could skip the for attribute (implicit association)  Best practice: do both

 Allows control to be activated using a keyboard shortcut  Key combinations depend on operating system/browser combination Alt + accesskey (IE/Windows) Alt + Shift + accesskey (Firefox/Windows) Ctrl + accesskey (Mac browsers) Shift + Esc (Opera displays a list of links to controls with accesskey attributes defined)

 Invisible to user Use title attribute to help user discovery via tooltip  Can clash with keystrokes in the operating system or other assistive technologies

Web Accessibility Initiative Accessible Rich Internet ApplicationSuite  A proposed W3C standard developed by the Web Accessibility Initiative group for creating an Accessible Rich Internet Application Suite  Goal is to create a set of attributes for improving accessibility of HTML elements to assistive technologies  Make web applications accessible

 A stop-gap solution until assistive technologies have better HTML5 support  WAI-ARIA provides: Roles for widgets (navigation menus, sliders, progress meters) Properties for identifying dynamically updated regions in web page Ways to enable keyboard navigation Roles to describe structure of page (headings, regions, tables)

 Using role attribute we can replace the use of non-semantic class and id values  Example roles include: banner, complementary, contentinfo, main, navigation and search

accessibility-of-wai-aria/ accessibility-of-wai-aria/