Accessibility Links

Austin Gil's five-part series on "HTML Forms Right" kicks off with a focus on semantic HTML, targeting developers who primarily use JavaScript for front-end development. The initial code example demonstrates Ajax form submission using the JavaScript FormData API.

The crucial point? Without the <form></form> tag, FormData is unnecessary. The argument for bypassing forms often centers around building single-page applications (SPAs), where the presence of a form implies JavaScript's necessity. While true, for critical forms, considering non-JavaScript support is prudent, especially with the increasing adoption of server-side rendering (SSR).

SSR offers significant advantages. Google highlights the lengthy indexing queue for client-side rendered pages, emphasizing SSR's speed and efficiency.

Oscar Braunert's "Inclusive Inputs" provides a valuable follow-up, showcasing nearly correct but ultimately flawed form HTML (missing label/input association). He then delves into accessible markup for required fields and error handling, illustrating with this example:

<code><div>
  <label for="password">
    Password
    *
    required
  </label>
  <p>Your password needs to be at least eight characters long.</p>
</div></code>

Amber Wilson explores accessible HTML elements without relying on ARIA:

ARIA roles are frequently used with HTML elements. However, this article demonstrates how accessible HTML can be achieved without ARIA.

The <dl></dl> element is highlighted. Sarah Higley's "Roles and relationships" does address ARIA, but cautions against misuse:

A novice accessibility developer might experiment with roles like menu, listbox, or treegrid. These powerful patterns enable experiences not possible with vanilla HTML, but they're also fragile; even minor errors can severely impact user experience. Use ARIA cautiously.

The ideal approach is to avoid ARIA entirely. However, if DOM-level fixes are insufficient, Sarah offers techniques, such as role="presentation" to override an element's default role.

Regarding ARIA's judicious use, Adrian Roselli prioritizes accessible naming for controls:

My priority for assigning an accessible name to a control is:

1. Native HTML techniques
2. aria-labelledby referencing existing visible text
3. Visibly-hidden content within the page
4. aria-label

The above is the detailed content of Accessibility Links. For more information, please follow other related articles on the PHP Chinese website!