Accordion Example
The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion.
Similar examples include:
- Accordion Group: A grouped set of accordions containing form fields that requires exactly one section open at a time.
Example
Dr. Jim Thatcher received his PhD from the University of Michigan in 1963, one of the first PhD's in Computer Science. Together with his thesis advisor, Dr. Jesse Wright, Jim then joined the Mathematical Sciences Department of IBM Research, where he stayed until 1996.
His research area was mathematical computer science, including automata theory, semantics, and data abstraction. Jim began moving away from the abstract and toward the practical when he and Dr. Wright, who is blind, started working on an "audio access system" for the IBM Personal Computer, a system for providing on-screen information to a blind user through synthesized voice.
This work culminated in the development of one of the first screen readers for DOS in 1984-85, called IBM Screen Reader. (Such access systems are now known as "screen readers"!) He later led the development of IBM Screen Reader/2, the first screen reader for a graphical user interface on the PC. Jim was intimately involved in the development of IBM Home Page Reader, a talking web browser for the blind and visually impaired.
In 1996 Dr. Thatcher joined the IBM Accessibility Center in Austin, TX, where he led the effort to include accessibility in the IBM development process. A key part of that effort was the establishment of the IBM Accessibility Guidelines specifically for use within IBM's development community.
Jim served as Vice-Chair of the Electronic and Information Technology Access Advisory Committee (EITAAC) which was empanelled by the Access Board to propose standards for Section 508; he chaired the subcommittee on software standards. Later he wrote the course on Web Accessibility for Section 508 for ITTATC, the Information Technology Technical Assistance and Training Center, which was funded in support of Section 508.
Marca Bristo's career as an advocate for the disabled lasted more than four decades and influenced several presidential administrations. Her success in reshaping Chicago’s policies for the disabled formed the basis for national and international legislation as Ms. Bristo, in her motorized wheelchair, traveled around the world to promote her vision for independent living.
Ms. Bristo formed what is now Access Living, a Chicago nonprofit organization that advocates on behalf of people with disabilities. She went on to play a key role in drafting and passing the Americans With Disabilities Act of 1990 — and then after receiving a presidential appointment, helped ensure it was enforced.
Often described as an extension of the Civil Rights Act of 1964, the law barred discrimination against people with disabilities, a group that now includes roughly 1 in 4 American adults, or 61 million people, according to the Centers for Disease Control and Prevention.
“Without Marca’s work over the last 30 years, the Americans with Disabilities Act would not be in existence & I would not be a U.S. Senator,” Tammy Duckworth, a Democrat from Illinois and the first disabled woman elected to Congress, wrote Sunday in a tweet. “Because she crawled up the steps of the Capitol to pass the ADA, I get to roll through its corridors to cast my votes in the U.S. Senate.”
Edward M. Kennedy Jr., a former state senator in Connecticut, lost a leg to cancer in 1973, when he was 12. “She reframed the disability experience as a civil rights issue, as opposed to a medical issue,” Mr. Kennedy said on Saturday. “She was one of the pioneers trying to change the way people with disabilities thought about our circumstances. She used to talk about what she called ‘the internalization of oppression’ that existed in other civil rights struggles.”
“She was a force of nature,” Mr. Kennedy added. “In both her personal life and political life, she was a role model for millions of people with disabilities in our country.”
Ever the advocate, in the days before her death, Ms. Bristo received a phone call from Ms. Pelosi. According to her husband, the Speaker wished her well and said “I wish there was something I could do,” to which Ms. Bristo quickly replied: “You can. Move the Disability Integration Act to committee and to a floor vote.”
Ed Roberts, in full Edward Verne Roberts, (born January 23, 1939, San Mateo, California, U.S.—died March 14, 1995, Berkeley), American disability rights activist who is considered the founder of the independent-living movement.
Roberts contracted polio at age 14 and was paralyzed from the neck down. Requiring an iron lung or a respirator to breathe, he attended high school in California by telephone before attending in person in his senior year. Early on, Roberts encountered obstacles as a result of his disability. Because he had not completed physical education and driver education courses, his high school refused to let him graduate, but the decision was reversed after his mother petitioned the school board for his diploma. In 1962, after two years of attending a local college, he was accepted to the University of California, Berkeley, but the university, which had been unaware of his disability when he applied, refused to admit him on the grounds that his iron lung would not fit in a dormitory room. Roberts challenged the administration and ultimately was admitted. While at Berkeley, he worked with the university to develop the Physically Disabled Students Program, a program run by and for disabled students to provide wheelchair repair, attendant referral, peer counseling, and other services that would enable them to live in the community. Roberts earned a bachelor’s degree in political science in 1964 and a master’s degree in political science two years later.
In 1972 Roberts and other members of the Physically Disabled Students Program came together in Berkeley to found the Center for Independent Living, an advocacy group that fought for changes that would give people with disabilities access to community life. The group’s first success was its campaign to persuade the city of Berkeley to install curb cuts, permitting wheelchair access.
In 1976 Roberts was appointed director of the California Department of Vocational Rehabilitation, an agency that in 1962 had deemed Roberts too disabled to hold a job. As director, he facilitated the establishment of independent living centres throughout the state. He also traveled to lobby for disability rights in the United States and around the world. After his death, a centre for people with disabilities was created in Berkeley and named for him.
Keyboard Support
Key | Function |
---|---|
Space or Enter | When focus is on the accordion header of a collapsed section, expands the section. |
Tab |
|
Shift + Tab |
|
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
h3 |
|
||
aria-expanded="true" |
button |
Set to true when the Accordion panel is expanded, otherwise set to false .
|
|
aria-controls="ID" |
button |
Points to the ID of the panel which the header controls. |
Javascript and CSS Source Code
- CSS: accordion.css
- JavaScript: accordion.js
HTML Source Code